import { Component , EventEmitter , Input , OnDestroy , OnInit , Output } from '@angular/core' ; import { FormControl , FormGroup } from '@angular/forms' ; import { debounceTime , takeUntil } from 'rxjs/operators' ; import { ReplaySubject } from 'rxjs' ; @ Component ( { selector : 'table-search' , templateUrl : './table-search.component.html' , styleUrls : [ './table-search.component.scss' ] } ) export class TableSearchComponent implements OnInit , OnDestroy { private private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * Search input form group.
     */ public form : FormGroup ; private private readonly defaultDebounceTime : number = 500 ; /**
     * Time debounce for search change emits.
     */ public debounceTime : number = this . defaultDebounceTime ; param time @ Input ( 'debounceTime' ) public set DebounceTime ( time ) { this . debounceTime = time || this . defaultDebounceTime ; } /**
     * Event emitter when the search input changed.
     */ @ Output ( ) public searchChange : EventEmitter < string > = new EventEmitter < string > ( ) ; /**
     * Constructor of `TableSearchComponent`.
     */ constructor ( ) { this . form = new FormGroup ( { search : new FormControl ( ) } ) ; } public static maskRegex ( value ) { return value . replace ( /[.*+\-?^${}()|[\]\\]/g , '\\$&' ) ; } /**
     * OnInit of `TableSearchComponent`.
     * Auto subscribes to search input control values changes.
     * Emits changes to searchChange EventEmitter.
     */ public ngOnInit ( ) { this . search . valueChanges . pipe ( takeUntil ( this . subscriber ) ) . pipe ( debounceTime ( this . debounceTime ) ) . subscribe ( change => { const validatedChange = TableSearchComponent . maskRegex ( change ) ; this . searchChange . emit ( validatedChange ) ; } ) ; } /**
     * Get the search form control.
     */ public get search ( ) : FormControl { return this . form . get ( 'search' ) as FormControl ; } /**
     * OnDestroy of `TableSearchComponent`.
     * Sends complete call to the component subscriber.
     */ public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }