import { MXInputBaseValueComponent, MXLookComponent, AXDataSource, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/cdk/common';
import { AXDecoratorGenericComponent, AXDecoratorClearButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
import { AXFormModule } from '@acorex/components/form';
import { AXSearchBoxComponent, AXSearchBoxModule } from '@acorex/components/search-box';
import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/text-box';
import { COUNTRIES_FLAG_BASE64, COUNTRIES } from '@acorex/core/constants';
import { AXTranslationService } from '@acorex/core/translation';
import { NgStyle, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, inject, input, model, viewChild, effect, afterNextRender, forwardRef, HostBinding, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { filter } from 'lodash-es';
import { classes } from 'polytype';
import { AXButtonModule } from '@acorex/components/button';
import { IMaskModule } from 'angular-imask';

/**
 * @category
 * A component that handles phone number input with various configurations.
 */
class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        super(...arguments);
        /** @ignore */
        this._updateOn = 'change';
        this.flags = signal(COUNTRIES_FLAG_BASE64, ...(ngDevMode ? [{ debugName: "flags" }] : []));
        this.translationService = inject(AXTranslationService);
        this.messageError = this.callTranslate();
        /**
         * static precode.
         */
        this.precode = input(...(ngDevMode ? [undefined, { debugName: "precode" }] : []));
        /**
         * The default country value for the component.
         */
        this.country = model('', ...(ngDevMode ? [{ debugName: "country" }] : []));
        /**
         * List of included values for the component.
         */
        this.included = input([], ...(ngDevMode ? [{ debugName: "included" }] : []));
        /**
         * List of excluded values for the component.
         */
        this.excluded = input([], ...(ngDevMode ? [{ debugName: "excluded" }] : []));
        this.selectBox = viewChild('s', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
        /** @ignore */
        this.countries = signal([], ...(ngDevMode ? [{ debugName: "countries" }] : []));
        /** @ignore */
        this.selectedCountry = signal(null, ...(ngDevMode ? [{ debugName: "selectedCountry" }] : []));
        this.#countriesChanged = effect(() => {
            this.included();
            this.excluded();
            this.setCountries();
            this.cdr.detectChanges();
            this.selectBox().refresh();
        }, ...(ngDevMode ? [{ debugName: "#countriesChanged" }] : []));
        this.#init = afterNextRender(() => {
            setTimeout(() => {
                if (this.country() && !this.value) {
                    this.selectedCountry.set(this.countries().find((c) => c.code === this.country()));
                }
                else if (!this.country() && !this.value) {
                    this.selectedCountry.set(this.countries()[0]);
                }
            });
            this.setCountries();
        });
        this.#eff = effect(async () => {
            if (this.selectedCountry()?.regex) {
                this.removeValidation();
                const message = await this.messageError;
                this.addValidationRule({
                    rule: 'regex',
                    options: {
                        message,
                        pattern: this.selectedCountry()?.regex,
                    },
                    disabled: false,
                });
            }
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
        /** @ignore */
        this.dataSource = new AXDataSource({
            pageSize: 10,
            load: (e) => {
                return new Promise((resolve) => {
                    const list = this.countries();
                    const result = e.filter
                        ? filter(list, (c) => c.name.toUpperCase().includes(e.filter.value.toUpperCase()) ||
                            c.iso2code.toUpperCase().includes(e.filter.value.toUpperCase()) ||
                            c.code.toUpperCase().includes(e.filter.value.toUpperCase()))
                        : list;
                    resolve({
                        items: result.slice(e.skip, e.skip + e.take),
                        total: result.length,
                    });
                });
            },
        });
        /**
         * Determines if the keyboard event is a valid action based on allowed keys and key codes.
         *
         * @param event - The keyboard event to validate
         * @returns boolean - True if the key action is valid, false otherwise
         */
        this.isValidKeyboardAction = (event) => {
            const _code = parseInt(event.key);
            const ALLOWED_KEY = ['Backspace', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Tab'];
            const IS_CTRL_A = () => (event.ctrlKey && event.key === 'a') || (event.ctrlKey && event.key === 'A');
            // eslint-disable-next-line no-constant-condition
            if ((_code >= 0 && _code <= 9) || ALLOWED_KEY.includes(event.key) || IS_CTRL_A()) {
                return true;
            }
            else {
                return false;
            }
        };
    }
    async callTranslate() {
        return await this.translationService.translateAsync('@acorex:validation.messages.phone');
    }
    #countriesChanged;
    #init;
    #eff;
    /** @ignore */
    _handleModelChange(e) {
        // Prevent value change if component is disabled or readonly
        if (this.disabled || this.readonly) {
            return;
        }
        if (e.isUserInteraction && e.value)
            this.commitValue(e.value, true);
    }
    internalValueChanged(value) {
        if (!value)
            return;
        const result = this.parsePhoneNumber(value);
        if (result.country) {
            this.selectedCountry.set(result.country);
            this.commitValue(result.nationalNumber);
        }
    }
    /** @ignore */
    handleCountryOnClosed() {
        setTimeout(() => {
            this.textbox?.focus();
        }, 300);
    }
    /**
     * Updates the list of countries based on included or excluded codes.
     *
     * @returns void - No return value. Updates the internal countries list.
     */
    setCountries() {
        if (this.included().length) {
            this.countries.set(COUNTRIES.filter((c) => this.included().includes(c.code)));
        }
        else if (this.excluded().length) {
            this.countries.set(COUNTRIES.filter((c) => !this.excluded().includes(c.code)));
        }
        else {
            this.countries.set(COUNTRIES);
        }
        this.flags.set(COUNTRIES_FLAG_BASE64);
    }
    handleKeyDown(e) {
        // Prevent all keyboard actions if component is disabled
        if (this.disabled) {
            e.preventDefault();
            e.stopImmediatePropagation();
            return;
        }
        // In readonly state, only allow copy operations (Ctrl+C, Ctrl+A)
        if (this.readonly) {
            const isCopyOperation = (e.ctrlKey && (e.key === 'c' || e.key === 'C')) || (e.ctrlKey && (e.key === 'a' || e.key === 'A'));
            if (!isCopyOperation) {
                e.preventDefault();
                e.stopImmediatePropagation();
                return;
            }
        }
        if (this.isValidKeyboardAction(e)) {
            this.emitOnKeydownEvent(e);
        }
        else {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    }
    parsePhoneNumber(fullNumber) {
        // 1) Normalize input
        let normalized = fullNumber.replace(/[^0-9+]/g, '');
        // convert 00... → +...
        if (normalized.startsWith('00')) {
            normalized = '+' + normalized.slice(2);
        }
        // 2) Sort countries by longest prefix first
        const sorted = [...COUNTRIES].sort((a, b) => b.iso2code.length - a.iso2code.length);
        // 3) Match the country code
        for (const country of sorted) {
            if (normalized.startsWith(country.iso2code)) {
                const countryCode = country.iso2code;
                const rawNationalNumber = normalized.slice(countryCode.length);
                const nationalNumber = this.formatNationalNumber(rawNationalNumber, country.format);
                return {
                    country,
                    countryCode,
                    nationalNumber,
                };
            }
        }
        // 4) No match found
        return {
            country: null,
            countryCode: null,
            nationalNumber: normalized,
        };
    }
    /**
     * Formats a national phone number according to the country's format pattern.
     * The format pattern uses '0' as digit placeholders and preserves other characters (like spaces).
     *
     * @param number - The raw national number (digits only)
     * @param format - The country's phone number format pattern (e.g., '000 000 0000')
     * @returns The formatted national number with spaces according to the format
     */
    formatNationalNumber(number, format) {
        if (!format || !number) {
            return number;
        }
        let result = '';
        let numberIndex = 0;
        for (let i = 0; i < format.length && numberIndex < number.length; i++) {
            if (format[i] === '0') {
                result += number[numberIndex];
                numberIndex++;
            }
            else {
                result += format[i];
            }
        }
        // Append any remaining digits that exceed the format length
        if (numberIndex < number.length) {
            result += number.slice(numberIndex);
        }
        return result;
    }
    /** @ignore */
    _handleCountryValueChanged(event) {
        // Prevent value change if component is disabled or readonly
        if (this.disabled || this.readonly) {
            return;
        }
        //remove validation rule before add new one
        if (event.isUserInteraction) {
            this.selectedCountry.set(event.component.selectedItems[0]);
        }
    }
    removeValidation() {
        this.removeValidationRuleByType('regex');
        this.textbox.reset();
        this.textbox.resetErrors();
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPhoneBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPhoneBoxComponent, isStandalone: true, selector: "ax-phone-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, precode: { classPropertyName: "precode", publicName: "precode", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, included: { classPropertyName: "included", publicName: "included", isSignal: true, isRequired: false, transformFunction: null }, excluded: { classPropertyName: "excluded", publicName: "excluded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress", country: "countryChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
            { provide: AXComponent, useExisting: AXPhoneBoxComponent },
            { provide: AXFocusableComponent, useExisting: AXPhoneBoxComponent },
            { provide: AXClearableComponent, useExisting: AXPhoneBoxComponent },
            { provide: AXValuableComponent, useExisting: AXPhoneBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXPhoneBoxComponent),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["s"], descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  dir=\"ltr\"\n  [look]=\"look\"\n  [name]=\"name\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [maskPattern]=\"selectedCountry()?.mask\"\n  [placeholder]=\"selectedCountry()?.format\"\n  [ngModel]=\"value\"\n  (onValueChanged)=\"_handleModelChange($event)\"\n  (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n  (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n  (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n  (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n  (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n  <ax-prefix>\n    @if (precode()) {\n      <ax-text>{{ precode() }}</ax-text>\n    } @else {\n      <ax-select-box\n        #s\n        [name]=\"name\"\n        look=\"blank\"\n        [disabled]=\"disabled || readonly\"\n        [readonly]=\"readonly\"\n        [dropdownWidth]=\"'320px'\"\n        [dataSource]=\"dataSource\"\n        [ngModel]=\"selectedCountry()\"\n        [textField]=\"'iso2code'\"\n        [multiple]=\"false\"\n        [valueField]=\"'code'\"\n        [itemTemplate]=\"customItemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onValueChanged)=\"_handleCountryValueChanged($event)\"\n        (onClosed)=\"handleCountryOnClosed()\"\n        [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n      >\n        <ax-search-box class=\"ax-sm\" look=\"fill\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        <ng-template #customItemTemplate let-item>\n          <div class=\"ax-country-item\">\n            <div\n              class=\"ax-country-flag\"\n              [ngStyle]=\"{\n                'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n                'background-image': 'url(' + flags() + ')',\n              }\"\n            ></div>\n            <div>\n              <span class=\"ax-country-name\">{{ item.data.name }}</span>\n              <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n            </div>\n          </div>\n        </ng-template>\n        <ng-template #selectedTemplate let-item>\n          <div class=\"ax-selected-country\">\n            <span>{{ item.data.iso2code }}</span>\n          </div>\n        </ng-template>\n        <ng-template #loading></ng-template>\n      </ax-select-box>\n    }\n  </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-phone-box .ax-editor-container{--ax-comp-editor-space-start-size: 0}ax-phone-box.ax-state-disabled ax-text-box{pointer-events:auto;opacity:.6;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-text-box .ax-editor,ax-phone-box.ax-state-disabled ax-text-box .ax-input{pointer-events:auto;cursor:not-allowed;-webkit-user-select:none;user-select:none}ax-phone-box.ax-state-disabled ax-select-box{pointer-events:none;opacity:.6}ax-phone-box.ax-state-disabled ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-select-box .ax-editor-button{pointer-events:none;cursor:not-allowed}ax-phone-box.ax-state-readonly ax-text-box .ax-editor,ax-phone-box.ax-state-readonly ax-text-box .ax-input{-webkit-user-select:text;user-select:text}ax-phone-box.ax-state-readonly ax-select-box{pointer-events:none}ax-phone-box.ax-state-readonly ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:default}ax-phone-box.ax-state-readonly ax-select-box .ax-editor-button{pointer-events:none;cursor:default}ax-phone-box ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important}ax-phone-box ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-box-outline-width: 0;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-editor,ax-phone-box ax-select-box ax-dropdown-box .ax-input{--ax-comp-editor-space-start-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:0!important}.ax-country-item{padding:.75rem .5rem;cursor:pointer;display:flex;gap:.5rem;align-items:center}.ax-country-item:hover{background-color:rgba(var(--ax-sys-color-ghost-lighter-surface))}.ax-country-item .ax-country-name{font-weight:500;margin-inline-end:.5rem}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{width:25px!important;height:20px!important;background-repeat:no-repeat}.ax-selected-country{display:flex;gap:.5rem;align-items:center;padding-inline-start:.5rem}\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPhoneBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-phone-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [
                        'disabled',
                        'tabIndex',
                        'readonly',
                        'value',
                        'state',
                        'name',
                        'id',
                        'placeholder',
                        'maxLength',
                        'allowNull',
                        'type',
                        'autoComplete',
                        'look',
                    ], outputs: [
                        'onBlur',
                        'onFocus',
                        'valueChange',
                        'stateChange',
                        'onValueChanged',
                        'readonlyChange',
                        'disabledChange',
                        'onKeyDown',
                        'onKeyUp',
                        'onKeyPress',
                    ], providers: [
                        { provide: AXComponent, useExisting: AXPhoneBoxComponent },
                        { provide: AXFocusableComponent, useExisting: AXPhoneBoxComponent },
                        { provide: AXClearableComponent, useExisting: AXPhoneBoxComponent },
                        { provide: AXValuableComponent, useExisting: AXPhoneBoxComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXPhoneBoxComponent),
                            multi: true,
                        },
                    ], host: {
                        ngSkipHydration: 'true',
                    }, imports: [
                        AXTextBoxComponent,
                        FormsModule,
                        AXDecoratorGenericComponent,
                        AXSelectBoxComponent,
                        AXSearchBoxComponent,
                        AXDecoratorClearButtonComponent,
                        NgStyle,
                        AXFormModule,
                    ], template: "<ax-text-box\n  dir=\"ltr\"\n  [look]=\"look\"\n  [name]=\"name\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [maskPattern]=\"selectedCountry()?.mask\"\n  [placeholder]=\"selectedCountry()?.format\"\n  [ngModel]=\"value\"\n  (onValueChanged)=\"_handleModelChange($event)\"\n  (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n  (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n  (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n  (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n  (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n  <ax-prefix>\n    @if (precode()) {\n      <ax-text>{{ precode() }}</ax-text>\n    } @else {\n      <ax-select-box\n        #s\n        [name]=\"name\"\n        look=\"blank\"\n        [disabled]=\"disabled || readonly\"\n        [readonly]=\"readonly\"\n        [dropdownWidth]=\"'320px'\"\n        [dataSource]=\"dataSource\"\n        [ngModel]=\"selectedCountry()\"\n        [textField]=\"'iso2code'\"\n        [multiple]=\"false\"\n        [valueField]=\"'code'\"\n        [itemTemplate]=\"customItemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onValueChanged)=\"_handleCountryValueChanged($event)\"\n        (onClosed)=\"handleCountryOnClosed()\"\n        [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n      >\n        <ax-search-box class=\"ax-sm\" look=\"fill\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        <ng-template #customItemTemplate let-item>\n          <div class=\"ax-country-item\">\n            <div\n              class=\"ax-country-flag\"\n              [ngStyle]=\"{\n                'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n                'background-image': 'url(' + flags() + ')',\n              }\"\n            ></div>\n            <div>\n              <span class=\"ax-country-name\">{{ item.data.name }}</span>\n              <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n            </div>\n          </div>\n        </ng-template>\n        <ng-template #selectedTemplate let-item>\n          <div class=\"ax-selected-country\">\n            <span>{{ item.data.iso2code }}</span>\n          </div>\n        </ng-template>\n        <ng-template #loading></ng-template>\n      </ax-select-box>\n    }\n  </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-phone-box .ax-editor-container{--ax-comp-editor-space-start-size: 0}ax-phone-box.ax-state-disabled ax-text-box{pointer-events:auto;opacity:.6;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-text-box .ax-editor,ax-phone-box.ax-state-disabled ax-text-box .ax-input{pointer-events:auto;cursor:not-allowed;-webkit-user-select:none;user-select:none}ax-phone-box.ax-state-disabled ax-select-box{pointer-events:none;opacity:.6}ax-phone-box.ax-state-disabled ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-select-box .ax-editor-button{pointer-events:none;cursor:not-allowed}ax-phone-box.ax-state-readonly ax-text-box .ax-editor,ax-phone-box.ax-state-readonly ax-text-box .ax-input{-webkit-user-select:text;user-select:text}ax-phone-box.ax-state-readonly ax-select-box{pointer-events:none}ax-phone-box.ax-state-readonly ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:default}ax-phone-box.ax-state-readonly ax-select-box .ax-editor-button{pointer-events:none;cursor:default}ax-phone-box ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important}ax-phone-box ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-box-outline-width: 0;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-editor,ax-phone-box ax-select-box ax-dropdown-box .ax-input{--ax-comp-editor-space-start-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:0!important}.ax-country-item{padding:.75rem .5rem;cursor:pointer;display:flex;gap:.5rem;align-items:center}.ax-country-item:hover{background-color:rgba(var(--ax-sys-color-ghost-lighter-surface))}.ax-country-item .ax-country-name{font-weight:500;margin-inline-end:.5rem}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{width:25px!important;height:20px!important;background-repeat:no-repeat}.ax-selected-country{display:flex;gap:.5rem;align-items:center;padding-inline-start:.5rem}\n"] }]
        }], propDecorators: { textbox: [{
                type: ViewChild,
                args: [AXTextBoxComponent, { static: true }]
            }], classNames: [{
                type: Input,
                args: ['class']
            }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

const COMPONENT = [AXPhoneBoxComponent];
const MODULES = [
    CommonModule,
    FormsModule,
    IMaskModule,
    AXSelectBoxModule,
    AXSearchBoxModule,
    AXDecoratorModule,
    AXButtonModule,
    AXTextBoxModule,
];
class AXPhoneBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPhoneBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXPhoneBoxModule, imports: [CommonModule,
            FormsModule,
            IMaskModule,
            AXSelectBoxModule,
            AXSearchBoxModule,
            AXDecoratorModule,
            AXButtonModule,
            AXTextBoxModule, AXPhoneBoxComponent], exports: [AXPhoneBoxComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPhoneBoxModule, imports: [MODULES, COMPONENT] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPhoneBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXPhoneBoxComponent, AXPhoneBoxModule };
//# sourceMappingURL=acorex-components-phone-box.mjs.map
