import { AfterViewInit , Component , EventEmitter , Input , Output , Self , ViewChild , } from "@angular/core" ; import { ControlValueAccessor , NgControl } from "@angular/forms" ; import { IonInput } from "@ionic/angular" ; import { TruncateMiddlePipe } from "@/pipes/truncate-middle/truncate-middle" ; @ Component ( { selector : "input-address" , templateUrl : "input-address.component.html" , styleUrls : [ "input-address.component.scss" ] , } ) export class InputAddressComponent implements AfterViewInit , ControlValueAccessor { @ ViewChild ( IonInput ) public ionInput : IonInput ; @ Output ( ) public inputAddressQRCodeClick = new EventEmitter ( ) ; @ Output ( ) public inputAddressContactClick = new EventEmitter ( ) ; @ Input ( ) public name = "address" ; @ Input ( ) public disabled = false ; @ Input ( ) public showQRButton = true ; @ Input ( ) public showContactButton = true ; public displayAddress : string ; constructor ( private truncateMiddlePipe , @ Self ( ) public ngControl ) { this . ngControl . valueAccessor = this ; } public onChange = ( value ) => { } ; public onTouched = ( ) => { } ; writeValue ( value ) { this . formatAddress ( value ) ; } async ngAfterViewInit ( ) { try { const ionInput = await this . ionInput . getInputElement ( ) ; ionInput . focus ( ) ; ionInput . blur ( ) ; } catch ( e ) { console . warn ( e ) ; } } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } setDisabledState ? ( isDisabled ) { this . disabled = isDisabled ; } public onInput ( event ) { const value = event . target . value ; this . formatAddress ( value ) ; if ( ! this . ngControl . name ) { this . onChange ( value ) ; } } public emitContactClick ( ) { this . inputAddressContactClick . emit ( ) ; } public emitQRCodeClick ( ) { this . inputAddressQRCodeClick . emit ( ) ; } private formatAddress ( value ) { this . displayAddress = this . truncateMiddlePipe . transform ( value , 15 ) ; } }