import { AfterContentChecked , AfterContentInit , ChangeDetectionStrategy , Component , ContentChild , ElementRef , HostListener , Input , OnDestroy , OnInit , Renderer2 , } from '@angular/core' ; import { PlatformService } from '../../helpers/platform.service' ; import { UniqueIdGenerator } from '../../helpers/unique-id-generator.helper' ; import { WindowRef } from '../../types/window-ref' ; import { RadioGroupComponent } from '../radio/radio-group/radio-group.component' ; import { InputCounterComponent } from './input-counter/input-counter.component' ; import { InputComponent } from './input/input.component' ; import { TextareaComponent } from './textarea/textarea.component' ; @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : 'kirby-form-field' , styleUrls : [ './form-field.component.scss' ] , templateUrl : './form-field.component.html' , } ) export class FormFieldComponent implements AfterContentChecked , AfterContentInit , OnInit , OnDestroy { private isRegistered = false ; private element : HTMLElement ; private inputElement : HTMLInputElement | HTMLTextAreaElement ; private isTouch : boolean ; _labelId = UniqueIdGenerator . scopedTo ( 'kirby-form-field-label' ) . next ( ) ; @ Input ( ) label : string ; @ Input ( ) message : string ; @ ContentChild ( InputCounterComponent , { static : false } ) counter : InputCounterComponent ; @ ContentChild ( RadioGroupComponent ) private radioGroupComponent : RadioGroupComponent ; @ ContentChild ( RadioGroupComponent , { read : ElementRef } ) private radioGroupElement : ElementRef < HTMLElement > ; @ ContentChild ( InputComponent , { read : ElementRef } ) input : ElementRef < HTMLInputElement > ; @ ContentChild ( TextareaComponent , { read : ElementRef } ) textarea : ElementRef < HTMLTextAreaElement > ; constructor ( elementRef , private platform , private renderer , private windowRef ) { this . element = elementRef . nativeElement ; } get _wrapContentInLabel ( ) : boolean { return ! ! this . label && ( ! ! this . input || ! ! this . textarea ) ; } private dispatchLoadEvent ( ) { this . windowRef . nativeWindow . document . dispatchEvent ( new CustomEvent ( 'ionInputDidLoad' , { detail : this . element , } ) ) ; } @ HostListener ( 'kirbyRegisterFormField' ) _onRegisterFormField ( ) { this . dispatchLoadEvent ( ) ; } onLabelClick ( ) { this . radioGroupComponent && this . radioGroupComponent . focus ( ) ; } public focus ( ) { if ( ! this . inputElement ) return ; if ( this . isTouch ) { const touchStart = new TouchEvent ( 'touchstart' ) ; const touchEnd = new TouchEvent ( 'touchend' ) ; this . inputElement . dispatchEvent ( touchStart ) ; this . inputElement . dispatchEvent ( touchEnd ) ; } else { this . inputElement . focus ( ) ; } } ngOnInit ( ) { this . isTouch = this . platform . isTouch ( ) ; } ngAfterContentInit ( ) { if ( this . label && this . radioGroupElement ) { this . renderer . setAttribute ( this . radioGroupElement . nativeElement , 'aria-labelledby' , this . _labelId ) ; } } ngAfterContentChecked ( ) { if ( ! this . inputElement ) { this . inputElement = this . element . querySelector ( 'input, textarea' ) ; } if ( ! this . isRegistered && this . element . isConnected && ! ! this . inputElement && ! this . inputElement . readOnly ) { this . isRegistered = true ; this . dispatchLoadEvent ( ) ; } } ngOnDestroy ( ) { this . windowRef . nativeWindow . document . dispatchEvent ( new CustomEvent ( 'ionInputDidUnload' , { detail : this . element , } ) ) ; } }