import { Component , OnDestroy , ChangeDetectorRef , Input , AfterContentInit , ViewEncapsulation , } from '@angular/core' ; import { Subscription } from 'rxjs' ; import { ConnectedField , Field } from '../../../../controller/settings/field.store' ; import { ErrorStateMatcher } from '@angular/material/core' ; import { FormControl , FormGroupDirective , NgForm } from '@angular/forms' ; import { DomSanitizer , SafeHtml } from '@angular/platform-browser' ; import * as Toolkit from 'chipmunk.client.toolkit' ; export class ValueErrorStateMatcher implements ErrorStateMatcher { private _field : ConnectedField < any > | Field < any > ; private _update : ( ) => void ; private _valid : boolean = true ; private _error : string | undefined ; private _last_checked : string = '' ; constructor ( field , update ) { this . _field = field ; this . _update = update ; } public isErrorState ( control , form ) { if ( control === null ) { return false ; } const valid = this . _valid ; if ( this . _last_checked !== control . value ) { this . _last_checked = control . value ; this . _field . validate ( control . value ) . then ( ( ) => { this . _valid = true ; this . _error = undefined ; } ) . catch ( ( error ) => { this . _valid = false ; this . _error = error . message ; } ) . finally ( ( ) => { if ( valid !== this . _valid ) { this . _update ( ) ; } } ) ; } return ! this . _valid ; } public isValid ( ) { return this . _valid ; } public getError ( ) { return this . _error ; } } @ Component ( { selector : 'app-tabs-settings-element' , templateUrl : './template.html' , styleUrls : [ './styles.less' ] , encapsulation : ViewEncapsulation . None , } ) export class TabSettingsElementComponent implements OnDestroy , AfterContentInit { @ Input ( ) public field ! : ConnectedField < any > | Field < any > ; @ Input ( ) public change ! : ( value : any ) => void ; @ Input ( ) public name : string = '' ; @ Input ( ) public description : string = '' ; public _ng_value : any ; public _ng_value_error ! : ValueErrorStateMatcher ; private _subscriptions : { [ key ] : Toolkit . Subscription | Subscription ; } = { } ; private _destroyed : boolean = false ; private _logger : Toolkit . Logger = new Toolkit . Logger ( 'TabSettingsElementComponent' ) ; constructor ( private _cdRef , private _sanitizer ) { } public ngAfterContentInit ( ) { this . _ng_value_error = new ValueErrorStateMatcher ( this . field , this . _forceUpdate . bind ( this ) ) ; this . _ng_value = this . field . get ( ) ; } public ngOnDestroy ( ) { Object . keys ( this . _subscriptions ) . forEach ( ( key ) => { this . _subscriptions [ key ] . unsubscribe ( ) ; } ) ; this . _destroyed = true ; } public _ng_onValueChange ( value ) { this . change ( value ) ; } public _ng_getSafeHTML ( str ) { return this . _sanitizer . bypassSecurityTrustHtml ( str ) ; } public _ng_min ( ) { return ( this . field as any ) . min !== undefined ? ( this . field as any ) . min : 0 ; } public _ng_max ( ) { return ( this . field as any ) . max !== undefined ? ( this . field as any ) . max : 0 ; } private _forceUpdate ( ) { if ( this . _destroyed ) { return ; } this . _cdRef . detectChanges ( ) ; } }