client/src/app/shared/shared-forms/input-toggle-hidden.component.ts

   1 import { Component, forwardRef, Input } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import { Notifier } from '@app/core'
   4
   5 @Component({
   6   selector: 'my-input-toggle-hidden',
   7   templateUrl: './input-toggle-hidden.component.html',
   8   styleUrls: [ './input-toggle-hidden.component.scss' ],
   9   providers: [
  10     {
  11       provide: NG_VALUE_ACCESSOR,
  12       useExisting: forwardRef(() => InputToggleHiddenComponent),
  13       multi: true
  14     }
  15   ]
  16 })
  17 export class InputToggleHiddenComponent implements ControlValueAccessor {
  18   @Input() id = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
  19   @Input() value = ''
  20   @Input() autocomplete = 'off'
  21   @Input() placeholder = ''
  22   @Input() withToggle = true
  23   @Input() withCopy = false
  24   @Input() readonly = false
  25   @Input() show = false
  26
  27   constructor (private notifier: Notifier) { }
  28
  29   get inputType () {
  30     return this.show
  31       ? 'text'
  32       : 'password'
  33   }
  34
  35   get toggleTitle () {
  36     return this.show
  37       ? $localize`Hide`
  38       : $localize`Show`
  39   }
  40
  41   toggle () {
  42     this.show = !this.show
  43   }
  44
  45   activateCopiedMessage () {
  46     this.notifier.success($localize`Copied`)
  47   }
  48
  49   propagateChange = (_: any) => { /* empty */ }
  50
  51   writeValue (value: string) {
  52     this.value = value
  53   }
  54
  55   registerOnChange (fn: (_: any) => void) {
  56     this.propagateChange = fn
  57   }
  58
  59   registerOnTouched () {
  60     // Unused
  61   }
  62
  63   update () {
  64     this.propagateChange(this.value)
  65   }
  66 }