client/src/app/shared/shared-forms/input-text.component.ts

   1 import { Component, ElementRef, forwardRef, Input, ViewChild } 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-text',
   7   templateUrl: './input-text.component.html',
   8   styleUrls: [ './input-text.component.scss' ],
   9   providers: [
  10     {
  11       provide: NG_VALUE_ACCESSOR,
  12       useExisting: forwardRef(() => InputTextComponent),
  13       multi: true
  14     }
  15   ]
  16 })
  17 export class InputTextComponent implements ControlValueAccessor {
  18   @ViewChild('input') inputElement: ElementRef
  19
  20   @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
  21   @Input() value = ''
  22   @Input() autocomplete = 'off'
  23   @Input() placeholder = ''
  24   @Input() tabindex = 0
  25   @Input() withToggle = true
  26   @Input() withCopy = false
  27   @Input() readonly = false
  28   @Input() show = false
  29   @Input() formError: string
  30
  31   constructor (private notifier: Notifier) { }
  32
  33   get inputType () {
  34     return this.show
  35       ? 'text'
  36       : 'password'
  37   }
  38
  39   get toggleTitle () {
  40     return this.show
  41       ? $localize`Hide`
  42       : $localize`Show`
  43   }
  44
  45   toggle () {
  46     this.show = !this.show
  47   }
  48
  49   activateCopiedMessage () {
  50     this.notifier.success($localize`Copied`)
  51   }
  52
  53   propagateChange = (_: any) => { /* empty */ }
  54
  55   writeValue (value: string) {
  56     this.value = value
  57   }
  58
  59   registerOnChange (fn: (_: any) => void) {
  60     this.propagateChange = fn
  61   }
  62
  63   registerOnTouched () {
  64     // Unused
  65   }
  66
  67   update () {
  68     this.propagateChange(this.value)
  69   }
  70
  71   focus () {
  72     const el: HTMLElement = this.inputElement.nativeElement
  73
  74     el.focus({ preventScroll: true })
  75   }
  76 }