import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "ng2-trim-directive";
export class SearchInputComponent {
    constructor() {
        this.minWidth = null;
        this.maxWidth = null;
        this.searchString = '';
        this.debounceTime = 0;
        this.searchStringChange = new EventEmitter();
        this.search$ = new Subject();
        this.destroy$ = new Subject();
    }
    ngOnInit() {
        this.search$
            .pipe(debounceTime(this.debounceTime), distinctUntilChanged(), takeUntil(this.destroy$))
            .subscribe((searchValue) => {
            this.searchStringChange.emit(searchValue);
        });
    }
    clearSearchInput() {
        this.searchString = '';
        this.searchStringChange.emit(this.searchString);
    }
    focusSearchInput() {
        this.searchInputElement.nativeElement.focus();
    }
    onKeyup() {
        this.search$.next(this.searchString);
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
}
SearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchInputComponent, selector: "epom-search-input", inputs: { minWidth: "minWidth", maxWidth: "maxWidth", searchString: "searchString", debounceTime: "debounceTime" }, outputs: { searchStringChange: "searchStringChange" }, viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"custom-search-container form-control-wrapper\"\n  [ngStyle]=\"{\n    'max-width.px': maxWidth,\n    'min-width.px': minWidth\n  }\"\n>\n  <input\n    #searchInput\n    class=\"custom-search-input form-control\"\n    placeholder=\"Search\"\n    type=\"text\"\n    trim=\"blur\"\n    [attr.data-qa]=\"'search'\"\n    (keyup)=\"onKeyup()\"\n    [(ngModel)]=\"searchString\"\n  />\n\n  <span\n    *ngIf=\"!searchString.length\"\n    class=\"custom-search-icon material-icons material-icons-outlined\"\n    (click)=\"focusSearchInput()\"\n  >\n    search\n  </span>\n\n  <span\n    *ngIf=\"searchString.length\"\n    class=\"custom-search-close material-icons material-icons-outlined button-icon button-icon-outline close\"\n    aria-hidden=\"true\"\n    (click)=\"clearSearchInput()\"\n  >\n    close\n  </span>\n</div>\n", styles: [".form-control-wrapper{flex-direction:unset}.custom-search-container{display:flex;align-items:center;position:relative;width:100%}.custom-search-container .custom-search-icon{position:absolute;right:12px;font-size:var(--font-headline-2);color:var(--neutral-outline-color)}.custom-search-container .custom-search-close{font-size:var(--font-headline-2);cursor:pointer;position:absolute;right:12px;opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputTrimDirective, selector: "input[trim], textarea[trim]", inputs: ["trim"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'epom-search-input', template: "<div\n  class=\"custom-search-container form-control-wrapper\"\n  [ngStyle]=\"{\n    'max-width.px': maxWidth,\n    'min-width.px': minWidth\n  }\"\n>\n  <input\n    #searchInput\n    class=\"custom-search-input form-control\"\n    placeholder=\"Search\"\n    type=\"text\"\n    trim=\"blur\"\n    [attr.data-qa]=\"'search'\"\n    (keyup)=\"onKeyup()\"\n    [(ngModel)]=\"searchString\"\n  />\n\n  <span\n    *ngIf=\"!searchString.length\"\n    class=\"custom-search-icon material-icons material-icons-outlined\"\n    (click)=\"focusSearchInput()\"\n  >\n    search\n  </span>\n\n  <span\n    *ngIf=\"searchString.length\"\n    class=\"custom-search-close material-icons material-icons-outlined button-icon button-icon-outline close\"\n    aria-hidden=\"true\"\n    (click)=\"clearSearchInput()\"\n  >\n    close\n  </span>\n</div>\n", styles: [".form-control-wrapper{flex-direction:unset}.custom-search-container{display:flex;align-items:center;position:relative;width:100%}.custom-search-container .custom-search-icon{position:absolute;right:12px;font-size:var(--font-headline-2);color:var(--neutral-outline-color)}.custom-search-container .custom-search-close{font-size:var(--font-headline-2);cursor:pointer;position:absolute;right:12px;opacity:1}\n"] }]
        }], propDecorators: { minWidth: [{
                type: Input
            }], maxWidth: [{
                type: Input
            }], searchString: [{
                type: Input
            }], debounceTime: [{
                type: Input
            }], searchStringChange: [{
                type: Output
            }], searchInputElement: [{
                type: ViewChild,
                args: ['searchInput', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 