import { Component , EventEmitter , Input , OnChanges , OnInit , Output , SimpleChanges , ViewChild } from '@angular/core' ; import { AsyncValidatorFn , FormControl , FormGroup , ValidatorFn } from '@angular/forms' ; @ Component ( { selector : 'tag-input-form' , styleUrls : [ './tag-input-form.style.scss' ] , templateUrl : './tag-input-form.template.html' } ) export class TagInputForm implements OnInit , OnChanges { name @ Output ( ) public onSubmit : EventEmitter < any > = new EventEmitter ( ) ; name @ Output ( ) public onBlur : EventEmitter < any > = new EventEmitter ( ) ; name @ Output ( ) public onFocus : EventEmitter < any > = new EventEmitter ( ) ; name @ Output ( ) public onKeyup : EventEmitter < any > = new EventEmitter ( ) ; name @ Output ( ) public onKeydown : EventEmitter < any > = new EventEmitter ( ) ; name @ Output ( ) public inputTextChange : EventEmitter < string > = new EventEmitter ( ) ; name @ Input ( ) public placeholder : string ; name @ Input ( ) public validators : ValidatorFn [ ] = [ ] ; name desc @ Input ( ) public asyncValidators : AsyncValidatorFn [ ] = [ ] ; name @ Input ( ) public inputId : string ; name @ Input ( ) public inputClass : string ; name desc @ Input ( ) public tabindex = '' ; name @ Input ( ) public disabled = false ; name @ ViewChild ( 'input' ) public input ; name public form : FormGroup ; name @ Input ( ) public get inputText ( ) : string { return this . item . value ; } name param text { string } public set inputText ( text ) { this . item . setValue ( text ) ; this . inputTextChange . emit ( text ) ; } private readonly item : FormControl = new FormControl ( { value : '' , disabled : this . disabled } ) ; ngOnInit ( ) { this . item . setValidators ( this . validators ) ; this . item . setAsyncValidators ( this . asyncValidators ) ; this . form = new FormGroup ( { item : this . item } ) ; } ngOnChanges ( changes ) { if ( changes . disabled && ! changes . disabled . firstChange ) { if ( changes . disabled . currentValue ) { this . form . controls [ 'item' ] . disable ( ) ; } else { this . form . controls [ 'item' ] . enable ( ) ; } } } name public get value ( ) : FormControl { return this . form . get ( 'item' ) as FormControl ; } name public isInputFocused ( ) { const doc = typeof document !== 'undefined' ? document : undefined ; return doc ? doc . activeElement === this . input . nativeElement : false ; } name param messages public getErrorMessages ( messages ) { return Object . keys ( messages ) . filter ( err => this . value . hasError ( err ) ) . map ( err => messages [ err ] ) ; } name public hasErrors ( ) { const { dirty , value , valid } = this . form ; return dirty && value . item && ! valid ; } name public focus ( ) { this . input . nativeElement . focus ( ) ; } name public blur ( ) { this . input . nativeElement . blur ( ) ; } name public getElementPosition ( ) { return this . input . nativeElement . getBoundingClientRect ( ) ; } name public destroy ( ) { const input = this . input . nativeElement ; input . parentElement . removeChild ( input ) ; } name param $event public onKeyDown ( $event ) { this . inputText = this . value . value ; if ( $event . key === 'Enter' ) { this . submit ( $event ) ; } else { return this . onKeydown . emit ( $event ) ; } } name param $event public onKeyUp ( $event ) { this . inputText = this . value . value ; return this . onKeyup . emit ( $event ) ; } name public submit ( $event ) { $event . preventDefault ( ) ; this . onSubmit . emit ( $event ) ; } }