import { ChangeDetectionStrategy, Component, Inject, Optional } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { OverlayService } from '@aztrix/components/overlay';
import { DEFAULT_COUNTRY } from '@aztrix/helpers';
import { BehaviorSubject } from 'rxjs';
import { startWith } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/components/overlay";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@aztrix/icons";
import * as i5 from "@aztrix/components/autofocus";
import * as i6 from "@aztrix/helpers";
import * as i7 from "rxjs";
export class CountrySelectorModalComponent {
    constructor(_overlay, defaultCountry$) {
        this._overlay = _overlay;
        this.defaultCountry$ = defaultCountry$;
        this.countryForm = new UntypedFormControl('');
        this.showReset = false;
        this.showPrefix = false;
        this.showPrefixCountries = [];
        this.showDefaultCountry = true;
        this.countryCodes = [];
        this.showMobile = true;
        this.query$ = this.countryForm.valueChanges.pipe(startWith(''));
    }
    selectCountry(country) {
        if (this.didSelectCountry) {
            this.didSelectCountry(country);
            this.didSelectCountry = undefined;
        }
        this._overlay.closeModal();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountrySelectorModalComponent, deps: [{ token: i1.OverlayService }, { token: DEFAULT_COUNTRY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CountrySelectorModalComponent, selector: "ax-country-selector-modal", ngImport: i0, template: "<div class=\"ax-modal-body-content\">\n  <div class=\"input-spacer\">\n    <div class=\"c-search__input-wrapper\">\n      <ax-icon class=\"icon c-search__icon\" name=\"magnify\"></ax-icon>\n      <input\n        type=\"text\"\n        class=\"c-search__input\"\n        [formControl]=\"countryForm\"\n        [placeholder]=\"'search.placeholder.country' | translate\"\n        axAutofocus\n        [autofocus]=\"true\"\n      />\n    </div>\n  </div>\n\n  <div class=\"result-country-wrapper\">\n    <!--reset to everywhere-->\n    <div *ngIf=\"showReset\" class=\"result-country\" (click)=\"selectCountry()\">\n      <span class=\"result-flag\">\n        <ax-icon class=\"icon\" [name]=\"'flags:un'\"></ax-icon>\n      </span>\n      <span class=\"result-title\">{{ 'label.everywhere' | translate }}</span>\n    </div>\n    <!--default country-->\n    <ng-container *ngIf=\"showDefaultCountry && (defaultCountry$ | async) as defaultCountry\">\n      <div class=\"c-search__section-title\">\n        <span>{{ 'label.country.default' | translate | uppercase }}</span>\n      </div>\n      <div class=\"result-country\" (click)=\"selectCountry(defaultCountry)\">\n        <span class=\"result-flag\">\n          <ax-icon class=\"icon\" [name]=\"'flags:' + defaultCountry.countryCode\"></ax-icon>\n        </span>\n        <span class=\"result-title\">{{ defaultCountry.countryCode | countryCodeLabel }}</span>\n        <span *ngIf=\"showPrefix && showMobile\" class=\"c-search__result-prefix\">{{\n          defaultCountry.phonePrefix[0]\n        }}</span>\n        <span\n          *ngIf=\"\n            (showPrefixCountries.length &&\n              showPrefixCountries.includes(defaultCountry.countryCode)) ||\n            (showPrefix && !showMobile)\n          \"\n          class=\"c-search__result-prefix\"\n          >{{ defaultCountry.countryCode }}</span\n        >\n      </div>\n    </ng-container>\n\n    <!--search results-->\n    <ng-container *ngIf=\"query$ | async | countrySearch: false : countryCodes as searchResults\">\n      <ng-container *ngIf=\"searchResults.length\">\n        <div class=\"c-search__section-title\">\n          <span>{{ 'label.countries' | translate | uppercase }}</span>\n        </div>\n        <ng-container *ngFor=\"let searchResult of searchResults\">\n          <div class=\"result-country\" (click)=\"selectCountry(searchResult)\">\n            <span class=\"result-flag\">\n              <ax-icon class=\"icon\" [name]=\"'flags:' + searchResult.countryCode\"></ax-icon>\n            </span>\n            <span class=\"result-title\">{{ searchResult.countryCode | countryCodeLabel }}</span>\n            <span *ngIf=\"showPrefix && showMobile\" class=\"c-search__result-prefix\">{{\n              searchResult.phonePrefix[0]\n            }}</span>\n            <span\n              *ngIf=\"\n                (showPrefixCountries.length &&\n                  showPrefixCountries.includes(searchResult.countryCode)) ||\n                (showPrefix && !showMobile)\n              \"\n              class=\"c-search__result-prefix\"\n              >{{ searchResult.countryCode }}</span\n            >\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".input-spacer{box-shadow:0 1px 5px #00000026;position:sticky;top:0;background-color:#fff;z-index:1;padding:.5rem}.result-country-wrapper{height:100%;overflow:auto;position:relative}.result-country{display:flex;align-items:center;padding:.5rem 1rem;cursor:pointer}.result-country:hover{background-color:#f8f8f8}.result-title{display:inline-block;font-size:1rem;height:20px;width:100%;line-height:20px}.result-flag{display:inline-flex;margin-right:.5rem;width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i5.AutofocusDirective, selector: "[axAutofocus]", inputs: ["autofocus"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.CountryCodeLabelPipe, name: "countryCodeLabel" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.CountrySearchPipe, name: "countrySearch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountrySelectorModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-country-selector-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-modal-body-content\">\n  <div class=\"input-spacer\">\n    <div class=\"c-search__input-wrapper\">\n      <ax-icon class=\"icon c-search__icon\" name=\"magnify\"></ax-icon>\n      <input\n        type=\"text\"\n        class=\"c-search__input\"\n        [formControl]=\"countryForm\"\n        [placeholder]=\"'search.placeholder.country' | translate\"\n        axAutofocus\n        [autofocus]=\"true\"\n      />\n    </div>\n  </div>\n\n  <div class=\"result-country-wrapper\">\n    <!--reset to everywhere-->\n    <div *ngIf=\"showReset\" class=\"result-country\" (click)=\"selectCountry()\">\n      <span class=\"result-flag\">\n        <ax-icon class=\"icon\" [name]=\"'flags:un'\"></ax-icon>\n      </span>\n      <span class=\"result-title\">{{ 'label.everywhere' | translate }}</span>\n    </div>\n    <!--default country-->\n    <ng-container *ngIf=\"showDefaultCountry && (defaultCountry$ | async) as defaultCountry\">\n      <div class=\"c-search__section-title\">\n        <span>{{ 'label.country.default' | translate | uppercase }}</span>\n      </div>\n      <div class=\"result-country\" (click)=\"selectCountry(defaultCountry)\">\n        <span class=\"result-flag\">\n          <ax-icon class=\"icon\" [name]=\"'flags:' + defaultCountry.countryCode\"></ax-icon>\n        </span>\n        <span class=\"result-title\">{{ defaultCountry.countryCode | countryCodeLabel }}</span>\n        <span *ngIf=\"showPrefix && showMobile\" class=\"c-search__result-prefix\">{{\n          defaultCountry.phonePrefix[0]\n        }}</span>\n        <span\n          *ngIf=\"\n            (showPrefixCountries.length &&\n              showPrefixCountries.includes(defaultCountry.countryCode)) ||\n            (showPrefix && !showMobile)\n          \"\n          class=\"c-search__result-prefix\"\n          >{{ defaultCountry.countryCode }}</span\n        >\n      </div>\n    </ng-container>\n\n    <!--search results-->\n    <ng-container *ngIf=\"query$ | async | countrySearch: false : countryCodes as searchResults\">\n      <ng-container *ngIf=\"searchResults.length\">\n        <div class=\"c-search__section-title\">\n          <span>{{ 'label.countries' | translate | uppercase }}</span>\n        </div>\n        <ng-container *ngFor=\"let searchResult of searchResults\">\n          <div class=\"result-country\" (click)=\"selectCountry(searchResult)\">\n            <span class=\"result-flag\">\n              <ax-icon class=\"icon\" [name]=\"'flags:' + searchResult.countryCode\"></ax-icon>\n            </span>\n            <span class=\"result-title\">{{ searchResult.countryCode | countryCodeLabel }}</span>\n            <span *ngIf=\"showPrefix && showMobile\" class=\"c-search__result-prefix\">{{\n              searchResult.phonePrefix[0]\n            }}</span>\n            <span\n              *ngIf=\"\n                (showPrefixCountries.length &&\n                  showPrefixCountries.includes(searchResult.countryCode)) ||\n                (showPrefix && !showMobile)\n              \"\n              class=\"c-search__result-prefix\"\n              >{{ searchResult.countryCode }}</span\n            >\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".input-spacer{box-shadow:0 1px 5px #00000026;position:sticky;top:0;background-color:#fff;z-index:1;padding:.5rem}.result-country-wrapper{height:100%;overflow:auto;position:relative}.result-country{display:flex;align-items:center;padding:.5rem 1rem;cursor:pointer}.result-country:hover{background-color:#f8f8f8}.result-title{display:inline-block;font-size:1rem;height:20px;width:100%;line-height:20px}.result-flag{display:inline-flex;margin-right:.5rem;width:20px}\n"] }]
        }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i7.BehaviorSubject, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DEFAULT_COUNTRY]
                }] }] });
//# sourceMappingURL=data:application/json;base64, 