import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatSelect } from '@angular/material/select';
import { fuzzySort } from '@aztrix/helpers';
import { TranslateService } from '@aztrix/translate';
import { map, startWith } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/translate";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/form-field";
import * as i4 from "@angular/material/select";
import * as i5 from "@angular/material/core";
import * as i6 from "ngx-mat-select-search";
import * as i7 from "@angular/forms";
import * as i8 from "@aztrix/icons";
import * as i9 from "@aztrix/helpers";
export class LanguageSelectSearchComponent {
    constructor(_translate) {
        this._translate = _translate;
        this.form = new FormControl('');
        this.openedChange = new EventEmitter();
        this.formFilterControl = new FormControl('');
        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`),
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LanguageSelectSearchComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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=\"outline\" class=\"c-input\" 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-mdc-select-panel-wrap .mat-mdc-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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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", "recreateValuesArray"], 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: i9.LanguageCodeLabelPipe, name: "languageCodeLabel" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LanguageSelectSearchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-language-select-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field appearance=\"outline\" class=\"c-input\" 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-mdc-select-panel-wrap .mat-mdc-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}\n"] }]
        }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { form: [{
                type: Input
            }], openedChange: [{
                type: Output
            }], select: [{
                type: ViewChild,
                args: [MatSelect, { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 