import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "@ngbracket/ngx-layout/extended";
import * as i4 from "@angular/material/form-field";
import * as i5 from "@angular/material/input";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/tooltip";
import * as i8 from "@angular/material/button";
import * as i9 from "@ngx-translate/core";
export class TranslationSystemPickerFilterComponent {
    changeDetector;
    filterInput;
    filterChanged = new EventEmitter();
    _filter = "";
    get filter() { return this._filter; }
    set filter(val) {
        this._filter = val;
        this.filterChanged.emit(this.filter);
    }
    constructor(changeDetector) {
        this.changeDetector = changeDetector;
    }
    ngAfterViewInit() {
        this.focus();
        this.changeDetector.detectChanges();
    }
    clear(event) {
        if (event) {
            event.stopPropagation();
        }
        this.filter = "";
        this.focus();
    }
    focus() {
        this.filterInput.nativeElement.focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationSystemPickerFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TranslationSystemPickerFilterComponent, selector: "tld-translation-system-picker-filter", outputs: { filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field [ngClass.lt-sm]=\"'mobile'\" color=\"accent\" appearance=\"outline\" floatLabel=\"auto\" class=\"search-input-field\">\r\n\t<mat-icon class=\"search-icon\" matPrefix>search</mat-icon>\r\n\t<input #filterInput matInput [(ngModel)]=\"filter\" [placeholder]=\"'SYSTEM_PICKER.SEARCH_PLACEHOLDER' | translate\" />\r\n\t<button *ngIf=\"filter.length > 0\" mat-icon-button class=\"clear-filter\" mat-icon-button matSuffix [matTooltip]=\"'SYSTEM_PICKER.CLEAR_SEARCH' | translate\" (click)=\"clear($event)\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</button>\r\n</mat-form-field>\r\n", styles: [":host{display:inline-block;width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{max-height:42px}:host ::ng-deep .search-icon{color:var(--base-40)}:host ::ng-deep .search-icon,:host ::ng-deep button{margin-top:-15px}:host ::ng-deep .mdc-text-field--outlined .mat-mdc-form-field-infix,:host ::ng-deep .mdc-text-field--no-label .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}:host ::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:10px!important}:host ::ng-deep .mat-mdc-form-field-infix{margin-top:.125rem}:host ::ng-deep .mobile .mat-mdc-form-field-infix{margin-top:0}:host ::ng-deep .mobile .mat-mdc-form-field-subscript-wrapper{display:none}:host .search-input-field{width:100%}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 8px !important}.clear-filter{margin-right:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationSystemPickerFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-translation-system-picker-filter', template: "<mat-form-field [ngClass.lt-sm]=\"'mobile'\" color=\"accent\" appearance=\"outline\" floatLabel=\"auto\" class=\"search-input-field\">\r\n\t<mat-icon class=\"search-icon\" matPrefix>search</mat-icon>\r\n\t<input #filterInput matInput [(ngModel)]=\"filter\" [placeholder]=\"'SYSTEM_PICKER.SEARCH_PLACEHOLDER' | translate\" />\r\n\t<button *ngIf=\"filter.length > 0\" mat-icon-button class=\"clear-filter\" mat-icon-button matSuffix [matTooltip]=\"'SYSTEM_PICKER.CLEAR_SEARCH' | translate\" (click)=\"clear($event)\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</button>\r\n</mat-form-field>\r\n", styles: [":host{display:inline-block;width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{max-height:42px}:host ::ng-deep .search-icon{color:var(--base-40)}:host ::ng-deep .search-icon,:host ::ng-deep button{margin-top:-15px}:host ::ng-deep .mdc-text-field--outlined .mat-mdc-form-field-infix,:host ::ng-deep .mdc-text-field--no-label .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}:host ::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:10px!important}:host ::ng-deep .mat-mdc-form-field-infix{margin-top:.125rem}:host ::ng-deep .mobile .mat-mdc-form-field-infix{margin-top:0}:host ::ng-deep .mobile .mat-mdc-form-field-subscript-wrapper{display:none}:host .search-input-field{width:100%}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 8px !important}.clear-filter{margin-right:.5rem}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { filterInput: [{
                type: ViewChild,
                args: ["filterInput"]
            }], filterChanged: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 