import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { AbstractControl, UntypedFormControl } from '@angular/forms';
import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
import { fuzzySort, TranslateService } from '@aztrix/helpers';
import { map, startWith } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/legacy-form-field";
import * as i4 from "@angular/material/legacy-select";
import * as i5 from "@angular/material/legacy-core";
import * as i6 from "ngx-mat-select-search";
import * as i7 from "@angular/forms";
import * as i8 from "@aztrix/icons";
export class LanguageSelectSearchComponent {
    constructor(_translate) {
        this._translate = _translate;
        this.form = new UntypedFormControl();
        this.openedChange = new EventEmitter();
        this.formFilterControl = new UntypedFormControl('');
        this.opened = false;
        this.languages = this._languages();
        this.searchResults$ = this.formFilterControl.valueChanges.pipe(startWith(''), map((query) => fuzzySort(this.languages, query, ['label'])));
    }
    openChanged(event) {
        this.opened = event;
        this.openedChange.emit(this.opened);
    }
    _languages(exclude = []) {
        return this._translate
            .getLangs()
            .filter((lang) => !exclude.includes(lang))
            .map((languageCode) => ({
            languageCode,
            label: this._translate.instant(`languageCode.${languageCode}.label`),
        }));
    }
}
LanguageSelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: LanguageSelectSearchComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
LanguageSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: LanguageSelectSearchComponent, selector: "ax-language-select-search", inputs: { form: "form" }, outputs: { openedChange: "openedChange" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field appearance=\"standard\" style=\"width: 100%\">\n  <mat-select\n    [formControl]=\"form\"\n    [placeholder]=\"form.value ? '' : ('label.language' | translate)\"\n    (openedChange)=\"openChanged($event)\"\n  >\n    <mat-option>\n      <ngx-mat-select-search\n        [formControl]=\"formFilterControl\"\n        [placeholderLabel]=\"'label.search' | translate\"\n        [noEntriesFoundLabel]=\"'search.results.absence' | translate\"\n      >\n        <ax-icon class=\"icon\" name=\"close\" ngxMatSelectSearchClear></ax-icon>\n      </ngx-mat-select-search>\n    </mat-option>\n    <mat-option\n      *ngFor=\"let result of searchResults$ | async | slice: 0:(opened ? undefined : 5)\"\n      [value]=\"result.languageCode\"\n    >\n      <div class=\"option-wrapper\">\n        <ax-icon class=\"icon\" [name]=\"result.languageCode\"></ax-icon>\n        <span>{{ result.languageCode | languageCodeLabel }}</span>\n      </div>\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{width:100%}::ng-deep .mat-select-panel-wrap .mat-select-panel{max-width:180px}.icon{width:1rem;height:1rem}.option-wrapper{display:flex;align-items:center;width:100%;gap:.5rem}.option-wrapper .icon{vertical-align:middle}.option-wrapper span{max-width:100%;white-space:normal;line-height:1.2}ngx-mat-select-search.mat-select-search-inside-mat-option ::ng-deep .mat-icon-button.mat-select-search-clear{width:2em;height:2em;top:10px}ngx-mat-select-search.mat-select-search-inside-mat-option .icon,ngx-mat-select-search.mat-select-search-inside-mat-option span.mat-button-wrapper .icon{width:100%;height:100%;display:flex;color:#363f48;justify-content:center;align-items:center}ngx-mat-select-search.mat-select-search-inside-mat-option .icon ::ng-deep svg,ngx-mat-select-search.mat-select-search-inside-mat-option span.mat-button-wrapper .icon ::ng-deep svg{width:1em;height:1em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i6.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.LanguageCodeLabelPipe, name: "languageCodeLabel" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: LanguageSelectSearchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-language-select-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field appearance=\"standard\" style=\"width: 100%\">\n  <mat-select\n    [formControl]=\"form\"\n    [placeholder]=\"form.value ? '' : ('label.language' | translate)\"\n    (openedChange)=\"openChanged($event)\"\n  >\n    <mat-option>\n      <ngx-mat-select-search\n        [formControl]=\"formFilterControl\"\n        [placeholderLabel]=\"'label.search' | translate\"\n        [noEntriesFoundLabel]=\"'search.results.absence' | translate\"\n      >\n        <ax-icon class=\"icon\" name=\"close\" ngxMatSelectSearchClear></ax-icon>\n      </ngx-mat-select-search>\n    </mat-option>\n    <mat-option\n      *ngFor=\"let result of searchResults$ | async | slice: 0:(opened ? undefined : 5)\"\n      [value]=\"result.languageCode\"\n    >\n      <div class=\"option-wrapper\">\n        <ax-icon class=\"icon\" [name]=\"result.languageCode\"></ax-icon>\n        <span>{{ result.languageCode | languageCodeLabel }}</span>\n      </div>\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{width:100%}::ng-deep .mat-select-panel-wrap .mat-select-panel{max-width:180px}.icon{width:1rem;height:1rem}.option-wrapper{display:flex;align-items:center;width:100%;gap:.5rem}.option-wrapper .icon{vertical-align:middle}.option-wrapper span{max-width:100%;white-space:normal;line-height:1.2}ngx-mat-select-search.mat-select-search-inside-mat-option ::ng-deep .mat-icon-button.mat-select-search-clear{width:2em;height:2em;top:10px}ngx-mat-select-search.mat-select-search-inside-mat-option .icon,ngx-mat-select-search.mat-select-search-inside-mat-option span.mat-button-wrapper .icon{width:100%;height:100%;display:flex;color:#363f48;justify-content:center;align-items:center}ngx-mat-select-search.mat-select-search-inside-mat-option .icon ::ng-deep svg,ngx-mat-select-search.mat-select-search-inside-mat-option span.mat-button-wrapper .icon ::ng-deep svg{width:1em;height:1em}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { form: [{
                type: Input
            }], openedChange: [{
                type: Output
            }], select: [{
                type: ViewChild,
                args: [MatSelect, { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 