import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { CountryCodeLabelPipe, CountrySearchPipe, fuzzySort, TranslateService, } from '@aztrix/helpers';
import { map, of, startWith } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "../select-search/select-search.component";
import * as i3 from "@aztrix/icons";
import * as i4 from "@angular/common";
export class CountrySelectSearchComponent {
    constructor(_translate, _changeDetector) {
        this._translate = _translate;
        this._changeDetector = _changeDetector;
        this.form = new UntypedFormControl();
        this.appearance = 'outline';
        this._countrySearchPipe = new CountrySearchPipe(this._translate, this._changeDetector);
        this.countryCodes$ = this._translate.events$.pipe(startWith(undefined), map(() => CountrySearchPipe.allCountryCodeRepsSorted(this._translate, true)));
        this.searchCallback$ = (options, query) => {
            const searchOptions = options.map((countryCode) => ({
                code: countryCode.countryCode,
                label: this._translate.instant(CountryCodeLabelPipe.countryCodeLabel(countryCode.countryCode)),
            }));
            return of(fuzzySort(searchOptions, query, ['code', 'label']).map((result) => options.find((option) => option.countryCode === result.code)));
        };
    }
    valueCallback(value) {
        return value?.countryCode;
    }
    searchCallback(options, query) {
        return of(this._countrySearchPipe.transform(query, true, options.map((o) => o.countryCode)));
    }
}
CountrySelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: CountrySelectSearchComponent, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CountrySelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: CountrySelectSearchComponent, selector: "ax-country-select-search", inputs: { label: "label", placeholder: "placeholder", form: "form", prefixIcon: "prefixIcon", appearance: "appearance" }, ngImport: i0, template: "<ng-template #option let-result>\n  <div class=\"option-wrapper\">\n    <ax-icon class=\"icon\" [name]=\"'flags:' + (result?.countryCode || 'world')\"></ax-icon>\n    <span>{{ result?.countryCode | countryCodeLabel }}</span>\n  </div>\n</ng-template>\n\n<ax-select-search\n  [form]=\"form\"\n  [options]=\"countryCodes$ | async\"\n  [optionTemplate]=\"option\"\n  [selectedValueTemplate]=\"option\"\n  [valueCallback]=\"valueCallback\"\n  [appearance]=\"appearance\"\n  [searchCallback$]=\"searchCallback$\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></ax-select-search>\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}.selected{margin-left:1rem}.option-wrapper .icon{padding-top:.2rem}\n"], dependencies: [{ kind: "component", type: i2.SelectSearchComponent, selector: "ax-select-search", inputs: ["form", "options", "placeholder", "optionTemplate", "selectedValueTemplate", "multiple", "label", "keys", "canAddNew", "required", "appearance", "errorsTemplate", "prefixTemplate", "disabled", "valueCallback", "searchCallback$"], outputs: ["addNewValue"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.CountryCodeLabelPipe, name: "countryCodeLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: CountrySelectSearchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-country-select-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #option let-result>\n  <div class=\"option-wrapper\">\n    <ax-icon class=\"icon\" [name]=\"'flags:' + (result?.countryCode || 'world')\"></ax-icon>\n    <span>{{ result?.countryCode | countryCodeLabel }}</span>\n  </div>\n</ng-template>\n\n<ax-select-search\n  [form]=\"form\"\n  [options]=\"countryCodes$ | async\"\n  [optionTemplate]=\"option\"\n  [selectedValueTemplate]=\"option\"\n  [valueCallback]=\"valueCallback\"\n  [appearance]=\"appearance\"\n  [searchCallback$]=\"searchCallback$\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></ax-select-search>\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}.selected{margin-left:1rem}.option-wrapper .icon{padding-top:.2rem}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], form: [{
                type: Input
            }], prefixIcon: [{
                type: Input
            }], appearance: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 