import * as i0 from '@angular/core';
import { Directive, inject, LOCALE_ID, ChangeDetectorRef, ElementRef, input, model, booleanAttribute, output, viewChild, signal, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
import { LowerCasePipe } from '@angular/common';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
import { elementDown2 } from '@siemens/element-icons';
import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import * as i1 from '@siemens/element-ng/select';
import { SiSelectSimpleOptionsDirective, SiSelectSingleValueDirective, SiSelectListHasFilterComponent } from '@siemens/element-ng/select';
import { injectSiTranslateService, t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/**
 * This directive provides the si-select options and value strategy for the phone number input.
 * As we don't use si-select directly, we need to provide these strategies manually.
 */
class SiPhoneNumberInputSelectDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiPhoneNumberInputSelectDirective, isStandalone: true, selector: "[siPhoneNumberInputSelect]", hostDirectives: [{ directive: i1.SiSelectSimpleOptionsDirective, inputs: ["options", "options"] }, { directive: i1.SiSelectSingleValueDirective, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputSelectDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[siPhoneNumberInputSelect]',
                    hostDirectives: [
                        {
                            directive: SiSelectSimpleOptionsDirective,
                            inputs: ['options']
                        },
                        { directive: SiSelectSingleValueDirective, inputs: ['value'], outputs: ['valueChange'] }
                    ]
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiPhoneNumberInputComponent {
    static idCounter = 0;
    phoneUtil = PhoneNumberUtil.getInstance();
    translate = injectSiTranslateService();
    locale = inject(LOCALE_ID).toString();
    changeDetectorRef = inject(ChangeDetectorRef);
    elementRef = inject(ElementRef);
    /**
     * Unique identifier.
     *
     * @defaultValue
     * ```
     * `__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`
     * ```
     */
    id = input(`__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
    /**
     * ISO_3166-2 Code of the selected country.
     */
    country = model(...(ngDevMode ? [undefined, { debugName: "country" }] : []));
    /**
     * ISO_3166-2 Code of the country which shall be used on form-control reset.
     */
    defaultCountry = input(...(ngDevMode ? [undefined, { debugName: "defaultCountry" }] : []));
    /**
     * Placeholder text for country search input.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`)
     * ```
     */
    placeholderForSearch = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`), ...(ngDevMode ? [{ debugName: "placeholderForSearch" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`)
     * ```
     */
    searchNoResultsFoundLabel = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`), ...(ngDevMode ? [{ debugName: "searchNoResultsFoundLabel" }] : []));
    /**
     * Text for the country dropdown aria-label attribute.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`)
     * ```
     */
    selectCountryAriaLabel = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`), ...(ngDevMode ? [{ debugName: "selectCountryAriaLabel" }] : []));
    /**
     * Text for the phone number input aria-label attribute.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`)
     * ```
     */
    phoneNumberAriaLabel = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`), ...(ngDevMode ? [{ debugName: "phoneNumberAriaLabel" }] : []));
    /**
     * List of countries in ISO2 format, from which the user is allowed to select one.
     * If no values are provided, the dropdown will show all known countries.
     */
    supportedCountries = input(...(ngDevMode ? [undefined, { debugName: "supportedCountries" }] : []));
    /**
     * @defaultValue
     * ```
     * `${this.id()}-label`
     * ```
     */
    labelledby = input(`${this.id()}-label`, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
    /** @defaultValue false */
    // eslint-disable-next-line @angular-eslint/no-input-rename
    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
    /** @defaultValue false */
    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
    valueChange = output();
    /**
     * This ID will be bound to the `aria-describedby` attribute of the phone-number-input.
     * Use this to reference the element containing the error message(s) for the phone-number-input.
     * It will be picked by the {@link SiFormItemComponent} if the phone-number-input is used inside a form item.
     *
     * @defaultValue
     * ```
     * `${this.id()}-errormessage`
     * ```
     */
    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
    phoneInput = viewChild.required('phoneInput');
    selectedCountry;
    placeholder = '';
    countryFocused = signal(false, ...(ngDevMode ? [{ debugName: "countryFocused" }] : []));
    open = false;
    overlayWidth = 0;
    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    countryList = computed(() => {
        const countries = this.allowedCountries() ?? this.phoneUtil.getSupportedRegions();
        return countries
            .map((country) => {
            const countryInfo = {
                name: this.getCountryName(country),
                countryCode: this.phoneUtil.getCountryCodeForRegion(country),
                isoCode: country
            };
            return {
                type: 'option',
                value: countryInfo,
                label: `${countryInfo.name} +${countryInfo.countryCode}`,
                typeaheadLabel: `${countryInfo.name} +${countryInfo.countryCode}`
            };
        })
            .sort((a, b) => a.value.name.localeCompare(b.value.name));
    }, ...(ngDevMode ? [{ debugName: "countryList" }] : []));
    icons = addIcons({ elementDown2 });
    allowedCountries = computed(() => this.supportedCountries() ?? this.phoneUtil.getSupportedRegions(), ...(ngDevMode ? [{ debugName: "allowedCountries" }] : []));
    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
    isValidNumber = true;
    phoneNumber;
    onChange = () => { };
    onTouched = () => { };
    ngOnChanges(changes) {
        if (changes.country) {
            this.writeCountry();
        }
    }
    /** @internal */
    writeValue(value) {
        this.phoneNumber = this.parseNumber(value);
        if (this.phoneNumber) {
            this.writeValueToInput();
            this.country.set(this.getRegionCode());
        }
        else {
            // Number could not be parsed, write raw value instead to handle cases like undefined
            this.writeTextToInput(value);
            this.country.set(this.defaultCountry() ?? this.country());
        }
        this.writeCountry();
        this.changeDetectorRef.markForCheck();
    }
    /** @internal */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /** @internal */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /** @internal */
    setDisabledState(isDisabled) {
        this.disabledNgControl.set(isDisabled);
    }
    /** @internal */
    validate(control) {
        if (!this.phoneInput().nativeElement.value) {
            return null;
        }
        this.isValidNumber = false;
        if (!this.phoneNumber || !this.phoneUtil.isValidNumber(this.phoneNumber)) {
            return {
                invalidPhoneNumberFormat: true
            };
        }
        if (!this.countryList().some(c => c.value.isoCode === this.selectedCountry.isoCode)) {
            return {
                notSupportedPhoneNumberCountry: true
            };
        }
        this.isValidNumber = true;
        return null;
    }
    input() {
        const rawNumber = this.phoneInput().nativeElement.value;
        this.phoneNumber = this.parseNumber(rawNumber);
        if (this.phoneNumber) {
            const regionCode = this.getRegionCode();
            let countryInfo = this.countryList().find(country => regionCode === country.value.isoCode)?.value;
            if (!countryInfo && regionCode) {
                countryInfo = {
                    name: this.getCountryName(regionCode),
                    countryCode: this.phoneNumber.getCountryCode(),
                    isoCode: regionCode
                };
            }
            if (countryInfo && this.selectedCountry?.isoCode !== countryInfo.isoCode) {
                this.selectedCountry = countryInfo;
            }
        }
        else if (rawNumber.trim().startsWith('+')) {
            this.selectedCountry = undefined;
        }
        this.handleChange();
    }
    blur() {
        this.countryFocused.set(false);
        this.onTouched();
        this.writeValueToInput();
        this.valueChange.emit({
            country: this.selectedCountry,
            phoneNumber: this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL),
            isValid: this.isValidNumber
        });
    }
    countryInput(num) {
        this.selectedCountry = num;
        this.updatePlaceholder();
        this.refreshValueAfterCountryChange();
        this.handleChange();
    }
    openOverlay() {
        if (!this.readonly()) {
            this.open = true;
            this.overlayWidth = this.elementRef.nativeElement.getBoundingClientRect().width + 2; // 2px border
        }
    }
    overlayDetach() {
        this.open = false;
        this.phoneInput().nativeElement.focus();
    }
    writeCountry() {
        const currentCountry = this.country();
        this.selectedCountry = this.countryList().find(country => country.value.isoCode === currentCountry)?.value;
        if (!this.selectedCountry) {
            const countryCode = this.phoneUtil.getCountryCodeForRegion(currentCountry ?? this.defaultCountry() ?? 'XX');
            if (countryCode) {
                this.selectedCountry = {
                    isoCode: currentCountry,
                    countryCode,
                    name: this.getCountryName(currentCountry)
                };
            }
        }
        this.updatePlaceholder();
        this.refreshValueAfterCountryChange();
    }
    getCountryName(countryCode) {
        // This auto translates the given country name to the selected locale language
        return (new Intl.DisplayNames([this.translate.currentLanguage ?? this.locale], { type: 'region' }).of(countryCode.toUpperCase()) ?? '');
    }
    updatePlaceholder() {
        if (this.selectedCountry) {
            this.placeholder = this.phoneUtil
                .format(this.phoneUtil.getExampleNumber(this.selectedCountry.isoCode), PhoneNumberFormat.NATIONAL)
                .replace(/^0/, '');
        }
    }
    parseNumber(rawNumber) {
        try {
            let regionCodeForParsing;
            if (!rawNumber?.trim().startsWith('+')) {
                regionCodeForParsing = this.selectedCountry?.isoCode;
            }
            return this.phoneUtil.parse(rawNumber, regionCodeForParsing);
        }
        catch (e) {
            // The Number is too short, we cannot parse it yet. Error can be ignored. Hopefully, the user enters more digits.
            return;
        }
    }
    /**
     * PhoneUtil does not resolve country code early enough when the national prefix is shared among other countries (+1 and +44).
     * This Method fakes a complete number to force PhoneUtil returning a proper region code.
     */
    getRegionCode() {
        if (this.phoneNumber) {
            const regionCode = this.phoneUtil.getRegionCodeForNumber(this.phoneNumber);
            if (regionCode) {
                return regionCode;
            }
            const nationalNumber = this.phoneNumber.getNationalNumber() + '';
            if (
            // USA, CANADA, ...
            (this.phoneNumber.getCountryCode() === 1 && nationalNumber.length >= 3) ||
                // UK, ...
                (this.phoneNumber.getCountryCode() === 44 && nationalNumber.length >= 4)) {
                return this.phoneUtil.getRegionCodeForNumber(this.phoneUtil.parse('+' +
                    this.phoneNumber.getCountryCode() +
                    nationalNumber +
                    new Array(10 - nationalNumber.length).fill(5).join('')));
            }
            return this.phoneUtil.getRegionCodeForCountryCode(this.phoneNumber.getCountryCode());
        }
        return undefined;
    }
    formatPhoneNumber(format) {
        if (this.phoneNumber) {
            return this.phoneUtil.format(this.phoneNumber, format);
        }
        return undefined;
    }
    handleChange() {
        if (this.selectedCountry && this.country() !== this.selectedCountry?.isoCode) {
            this.country.set(this.selectedCountry?.isoCode);
        }
        if (this.phoneNumber) {
            this.onChange(this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL));
        }
        else {
            this.onChange('');
        }
    }
    writeTextToInput(value) {
        this.phoneInput().nativeElement.value = value ?? '';
    }
    /**
     * Format and update input text or clear input text if the input value is undefined.
     */
    writeValueToInput() {
        if (this.phoneNumber) {
            this.writeTextToInput(this.formatPhoneNumber(PhoneNumberFormat.NATIONAL).replace(/^0/, ''));
        }
    }
    refreshValueAfterCountryChange() {
        if (this.selectedCountry) {
            this.phoneNumber?.setCountryCode(this.selectedCountry?.countryCode);
            this.writeValueToInput();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiPhoneNumberInputComponent, isStandalone: true, selector: "si-phone-number-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, defaultCountry: { classPropertyName: "defaultCountry", publicName: "defaultCountry", isSignal: true, isRequired: false, transformFunction: null }, placeholderForSearch: { classPropertyName: "placeholderForSearch", publicName: "placeholderForSearch", isSignal: true, isRequired: false, transformFunction: null }, searchNoResultsFoundLabel: { classPropertyName: "searchNoResultsFoundLabel", publicName: "searchNoResultsFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, selectCountryAriaLabel: { classPropertyName: "selectCountryAriaLabel", publicName: "selectCountryAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, phoneNumberAriaLabel: { classPropertyName: "phoneNumberAriaLabel", publicName: "phoneNumberAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, supportedCountries: { classPropertyName: "supportedCountries", publicName: "supportedCountries", isSignal: true, isRequired: false, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { country: "countryChange", valueChange: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelledby()", "attr.id": "id()", "class.disabled": "disabled()", "class.readonly": "readonly()", "class.country-focus": "countryFocused()" } }, providers: [
            {
                provide: NG_VALIDATORS,
                useExisting: SiPhoneNumberInputComponent,
                multi: true
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: SiPhoneNumberInputComponent,
                multi: true
            },
            {
                provide: SI_FORM_ITEM_CONTROL,
                useExisting: SiPhoneNumberInputComponent
            }
        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"btn-group w-100 d-flex shadow-none border-0\"\n  [class.disabled]=\"disabled()\"\n  [class.readonly]=\"readonly()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <button\n    #trigger=\"cdkOverlayOrigin\"\n    cdkOverlayOrigin\n    siPhoneNumberInputSelect\n    class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n    type=\"button\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [disabled]=\"disabled()\"\n    [class.readonly]=\"readonly()\"\n    [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n    [attr.aria-expanded]=\"open\"\n    [options]=\"countryList()\"\n    [value]=\"selectedCountry\"\n    [tabindex]=\"disabled() ? '-1' : '0'\"\n    [attr.aria-controls]=\"id() + '-listbox'\"\n    (valueChange)=\"countryInput($event)\"\n    (click)=\"openOverlay()\"\n    (focus)=\"countryFocused.set(true)\"\n    (blur)=\"countryFocused.set(false)\"\n  >\n    <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n      selectCountryAriaLabel() | translate\n    }}</span>\n    <span\n      aria-hidden=\"true\"\n      [class]=\"`fi fi-${(selectedCountry?.isoCode | lowercase) ?? 'xx'}`\"\n    ></span>\n    @if (selectedCountry) {\n      <span class=\"si-body ms-4\" [id]=\"id() + '-value'\">\n        <span class=\"visually-hidden\">{{ selectedCountry.name }}</span>\n        +{{ selectedCountry.countryCode }}\n      </span>\n    }\n    <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n\n    <ng-template\n      cdkConnectedOverlay\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"open\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayOffsetX]=\"-1\"\n      [cdkConnectedOverlayWidth]=\"overlayWidth\"\n      (backdropClick)=\"overlayDetach()\"\n      (detach)=\"overlayDetach()\"\n    >\n      <si-select-list-has-filter\n        [baseId]=\"id()\"\n        [filterPlaceholder]=\"placeholderForSearch()\"\n        [noResultsFoundLabel]=\"searchNoResultsFoundLabel()\"\n        [optionTemplate]=\"optionTemplate\"\n        (closeOverlay)=\"overlayDetach()\"\n      />\n    </ng-template>\n    <ng-template #optionTemplate let-option>\n      <span aria-hidden=\"true\" [class]=\"`fi me-5 fi-${(option.value.isoCode | lowercase)}`\"></span>\n      {{ option.value.name }} +{{ option.value.countryCode }}\n    </ng-template>\n  </button>\n  <input\n    #phoneInput\n    type=\"tel\"\n    class=\"ms-4 border-0 p-0 focus-none shadow-none flex-grow-1 phone-number\"\n    [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n    [attr.aria-describedby]=\"errormessageId()\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"input()\"\n    (blur)=\"blur()\"\n  />\n</div>\n", styles: [":host:focus-within:not(.country-focus){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.search-country{display:inline-block;margin-block-start:8px;margin-block-end:8px;margin-inline:8px;inline-size:calc(100% - 16px)}.disabled{pointer-events:none}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}.dropdown-toggle{border-radius:var(--element-input-radius);min-inline-size:auto!important;background:transparent}.dropdown-toggle .fi.fi-xx{background-image:none;background-color:var(--element-text-disabled)}.dropdown-toggle:disabled{opacity:var(--element-action-disabled-opacity)}.dropdown-toggle.readonly{cursor:default}.phone-number{background-color:transparent;inline-size:inherit}.phone-number:disabled,.phone-number[readonly]{opacity:1}.phone-number:disabled{color:var(--element-text-disabled)}.phone-number:disabled::placeholder{color:transparent}.phone-number::placeholder{color:var(--element-text-secondary)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiPhoneNumberInputSelectDirective, selector: "[siPhoneNumberInputSelect]" }, { kind: "component", type: SiSelectListHasFilterComponent, selector: "si-select-list-has-filter", inputs: ["filterPlaceholder", "noResultsFoundLabel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-phone-number-input', imports: [
                        CdkOverlayOrigin,
                        CdkConnectedOverlay,
                        SiIconComponent,
                        SiPhoneNumberInputSelectDirective,
                        SiSelectListHasFilterComponent,
                        SiTranslatePipe,
                        LowerCasePipe
                    ], providers: [
                        {
                            provide: NG_VALIDATORS,
                            useExisting: SiPhoneNumberInputComponent,
                            multi: true
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: SiPhoneNumberInputComponent,
                            multi: true
                        },
                        {
                            provide: SI_FORM_ITEM_CONTROL,
                            useExisting: SiPhoneNumberInputComponent
                        }
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'role': 'group',
                        '[attr.aria-labelledby]': 'labelledby()',
                        '[attr.id]': 'id()',
                        '[class.disabled]': 'disabled()',
                        '[class.readonly]': 'readonly()',
                        '[class.country-focus]': 'countryFocused()'
                    }, template: "<div\n  class=\"btn-group w-100 d-flex shadow-none border-0\"\n  [class.disabled]=\"disabled()\"\n  [class.readonly]=\"readonly()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <button\n    #trigger=\"cdkOverlayOrigin\"\n    cdkOverlayOrigin\n    siPhoneNumberInputSelect\n    class=\"dropdown-toggle d-flex align-items-center ms-n4 my-n4 py-2 px-4 border-0\"\n    type=\"button\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [disabled]=\"disabled()\"\n    [class.readonly]=\"readonly()\"\n    [attr.aria-labelledby]=\"id() + '-aria-label ' + id() + '-value'\"\n    [attr.aria-expanded]=\"open\"\n    [options]=\"countryList()\"\n    [value]=\"selectedCountry\"\n    [tabindex]=\"disabled() ? '-1' : '0'\"\n    [attr.aria-controls]=\"id() + '-listbox'\"\n    (valueChange)=\"countryInput($event)\"\n    (click)=\"openOverlay()\"\n    (focus)=\"countryFocused.set(true)\"\n    (blur)=\"countryFocused.set(false)\"\n  >\n    <span class=\"visually-hidden\" [id]=\"id() + '-aria-label'\">{{\n      selectCountryAriaLabel() | translate\n    }}</span>\n    <span\n      aria-hidden=\"true\"\n      [class]=\"`fi fi-${(selectedCountry?.isoCode | lowercase) ?? 'xx'}`\"\n    ></span>\n    @if (selectedCountry) {\n      <span class=\"si-body ms-4\" [id]=\"id() + '-value'\">\n        <span class=\"visually-hidden\">{{ selectedCountry.name }}</span>\n        +{{ selectedCountry.countryCode }}\n      </span>\n    }\n    <si-icon class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n\n    <ng-template\n      cdkConnectedOverlay\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"open\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayOffsetX]=\"-1\"\n      [cdkConnectedOverlayWidth]=\"overlayWidth\"\n      (backdropClick)=\"overlayDetach()\"\n      (detach)=\"overlayDetach()\"\n    >\n      <si-select-list-has-filter\n        [baseId]=\"id()\"\n        [filterPlaceholder]=\"placeholderForSearch()\"\n        [noResultsFoundLabel]=\"searchNoResultsFoundLabel()\"\n        [optionTemplate]=\"optionTemplate\"\n        (closeOverlay)=\"overlayDetach()\"\n      />\n    </ng-template>\n    <ng-template #optionTemplate let-option>\n      <span aria-hidden=\"true\" [class]=\"`fi me-5 fi-${(option.value.isoCode | lowercase)}`\"></span>\n      {{ option.value.name }} +{{ option.value.countryCode }}\n    </ng-template>\n  </button>\n  <input\n    #phoneInput\n    type=\"tel\"\n    class=\"ms-4 border-0 p-0 focus-none shadow-none flex-grow-1 phone-number\"\n    [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n    [attr.aria-describedby]=\"errormessageId()\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"input()\"\n    (blur)=\"blur()\"\n  />\n</div>\n", styles: [":host:focus-within:not(.country-focus){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.search-country{display:inline-block;margin-block-start:8px;margin-block-end:8px;margin-inline:8px;inline-size:calc(100% - 16px)}.disabled{pointer-events:none}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}.dropdown-toggle{border-radius:var(--element-input-radius);min-inline-size:auto!important;background:transparent}.dropdown-toggle .fi.fi-xx{background-image:none;background-color:var(--element-text-disabled)}.dropdown-toggle:disabled{opacity:var(--element-action-disabled-opacity)}.dropdown-toggle.readonly{cursor:default}.phone-number{background-color:transparent;inline-size:inherit}.phone-number:disabled,.phone-number[readonly]{opacity:1}.phone-number:disabled{color:var(--element-text-disabled)}.phone-number:disabled::placeholder{color:transparent}.phone-number::placeholder{color:var(--element-text-secondary)}\n"] }]
        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }, { type: i0.Output, args: ["countryChange"] }], defaultCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountry", required: false }] }], placeholderForSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderForSearch", required: false }] }], searchNoResultsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsFoundLabel", required: false }] }], selectCountryAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectCountryAriaLabel", required: false }] }], phoneNumberAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumberAriaLabel", required: false }] }], supportedCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedCountries", required: false }] }], labelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], phoneInput: [{ type: i0.ViewChild, args: ['phoneInput', { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiPhoneNumberInputModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputModule, imports: [SiPhoneNumberInputComponent], exports: [SiPhoneNumberInputComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputModule, imports: [SiPhoneNumberInputComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiPhoneNumberInputComponent],
                    exports: [SiPhoneNumberInputComponent]
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

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

export { SiPhoneNumberInputComponent, SiPhoneNumberInputModule };
//# sourceMappingURL=siemens-element-ng-phone-number.mjs.map
