import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { OverlayService } from '@aztrix/components/overlay';
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 "@aztrix/components/overlay";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@aztrix/icons";
import * as i6 from "@aztrix/components/row-cell-view";
import * as i7 from "@aztrix/components/search-query";
export class LanguageSelectorModalComponent {
    constructor(_translate, _overlay) {
        this._translate = _translate;
        this._overlay = _overlay;
        this.didSelectLanguage = new EventEmitter();
        this._query = new UntypedFormControl('');
        this._searchResults$ = this._query.valueChanges.pipe(startWith(''), map((query) => {
            if (query === '') {
                return this._languages;
            }
            return fuzzySort(this._languages, query, ['label']);
        }));
        this._availableLanguages = this._translate.getLangs();
    }
    ngOnInit() {
        this._languages = this.languageCodes.map((languageCode) => ({
            languageCode,
            label: this._translate.instant(`languageCode.${languageCode}.label`),
        }));
    }
    canSelectLanguage(lang) {
        return this._availableLanguages.includes(lang);
    }
    selectLanguage(languageCode) {
        this._overlay.closeModal();
        this.didSelectLanguage.next(languageCode);
    }
}
LanguageSelectorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: LanguageSelectorModalComponent, deps: [{ token: i1.TranslateService }, { token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
LanguageSelectorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: LanguageSelectorModalComponent, selector: "ax-language-selector-modal", inputs: { languageCodes: "languageCodes" }, outputs: { didSelectLanguage: "didSelectLanguage" }, ngImport: i0, template: "<div class=\"ax-modal-body-content\">\n  <ax-search-query\n    class=\"query\"\n    [formControl]=\"_query\"\n    placeholder=\"search.placeholder.language\"\n  ></ax-search-query>\n\n  <ng-container *ngFor=\"let language of _searchResults$ | async\">\n    <div\n      class=\"c-settings__row is-hoverable cy-language\"\n      [ngClass]=\"{'is-disabled': !canSelectLanguage(language.languageCode)}\"\n      (click)=\"selectLanguage(language.languageCode)\"\n    >\n      <ax-row-cell-view>\n        <div class=\"row-cell-view-left\">\n          <ax-icon\n            class=\"icon c-settings__country-flag\"\n            [name]=\"'flags:' + (language.languageCode | flagForLanguage)\"\n          ></ax-icon>\n        </div>\n        <div class=\"row-cell-view-middle\">\n          <span class=\"c-settings__country-label\">{{ language.label }}</span>\n        </div>\n      </ax-row-cell-view>\n    </div>\n  </ng-container>\n</div>\n", styles: [".query{padding:.5rem}.row-cell-view-left{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i6.RowCellViewComponent, selector: "ax-row-cell-view" }, { kind: "component", type: i7.SearchQueryComponent, selector: "ax-search-query", inputs: ["autofocus", "placeholder"], outputs: ["immediatlySearch"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.FlagForLanguagePipe, name: "flagForLanguage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: LanguageSelectorModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-language-selector-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-modal-body-content\">\n  <ax-search-query\n    class=\"query\"\n    [formControl]=\"_query\"\n    placeholder=\"search.placeholder.language\"\n  ></ax-search-query>\n\n  <ng-container *ngFor=\"let language of _searchResults$ | async\">\n    <div\n      class=\"c-settings__row is-hoverable cy-language\"\n      [ngClass]=\"{'is-disabled': !canSelectLanguage(language.languageCode)}\"\n      (click)=\"selectLanguage(language.languageCode)\"\n    >\n      <ax-row-cell-view>\n        <div class=\"row-cell-view-left\">\n          <ax-icon\n            class=\"icon c-settings__country-flag\"\n            [name]=\"'flags:' + (language.languageCode | flagForLanguage)\"\n          ></ax-icon>\n        </div>\n        <div class=\"row-cell-view-middle\">\n          <span class=\"c-settings__country-label\">{{ language.label }}</span>\n        </div>\n      </ax-row-cell-view>\n    </div>\n  </ng-container>\n</div>\n", styles: [".query{padding:.5rem}.row-cell-view-left{display:flex;align-items:center}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.OverlayService }]; }, propDecorators: { languageCodes: [{
                type: Input
            }], didSelectLanguage: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 