@siemens/element-ng 49.14.0 → 51.0.0-rc.5

package/fesm2022/siemens-element-ng-phone-number.mjs

@@ -1,5 +1,5 @@
 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 { Directive, inject, LOCALE_ID, ElementRef, input, model, booleanAttribute, output, viewChild, signal, computed, 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';
@@ -20,10 +20,10 @@ import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber';
  * 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siPhoneNumberInputSelect]',
@@ -46,7 +46,6 @@ class SiPhoneNumberInputComponent {
     phoneUtil = PhoneNumberUtil.getInstance();
     translate = injectSiTranslateService();
     locale = inject(LOCALE_ID).toString();
-    changeDetectorRef = inject(ChangeDetectorRef);
     elementRef = inject(ElementRef);
     /**
      * Unique identifier.
@@ -56,15 +55,18 @@ class SiPhoneNumberInputComponent {
      * `__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`
      * ```
      */
-    id = input(`__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /**
      * ISO_3166-2 Code of the selected country.
      */
-    country = model(...(ngDevMode ? [undefined, { debugName: "country" }] : []));
+    country = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "country" }] : /* istanbul ignore next */ []));
     /**
      * ISO_3166-2 Code of the country which shall be used on form-control reset.
      */
-    defaultCountry = input(...(ngDevMode ? [undefined, { debugName: "defaultCountry" }] : []));
+    defaultCountry = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultCountry" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder text for country search input.
      *
@@ -73,14 +75,16 @@ class SiPhoneNumberInputComponent {
      * t(() => $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`)
      * ```
      */
-    placeholderForSearch = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`), ...(ngDevMode ? [{ debugName: "placeholderForSearch" }] : []));
+    placeholderForSearch = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderForSearch" }] : /* istanbul ignore next */ []));
     /**
      * @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" }] : []));
+    searchNoResultsFoundLabel = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchNoResultsFoundLabel" }] : /* istanbul ignore next */ []));
     /**
      * Text for the country dropdown aria-label attribute.
      *
@@ -89,7 +93,8 @@ class SiPhoneNumberInputComponent {
      * 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" }] : []));
+    selectCountryAriaLabel = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectCountryAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Text for the phone number input aria-label attribute.
      *
@@ -98,24 +103,27 @@ class SiPhoneNumberInputComponent {
      * 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" }] : []));
+    phoneNumberAriaLabel = input(t(() => $localize `:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "phoneNumberAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * 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" }] : []));
+    supportedCountries = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "supportedCountries" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * `${this.id()}-label`
      * ```
      */
-    labelledby = input(`${this.id()}-label`, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    labelledby = input(`${this.id()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
     /** @defaultValue false */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
     /** @defaultValue false */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     valueChange = output();
     /**
      * This ID will be bound to the `aria-describedby` attribute of the phone-number-input.
@@ -127,14 +135,19 @@ class SiPhoneNumberInputComponent {
      * `${this.id()}-errormessage`
      * ```
      */
-    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
-    phoneInput = viewChild.required('phoneInput');
-    selectedCountry = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCountry" }] : []));
-    placeholder = '';
-    countryFocused = signal(false, ...(ngDevMode ? [{ debugName: "countryFocused" }] : []));
-    open = false;
+    errormessageId = input(`${this.id()}-errormessage`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
+    phoneInput = viewChild.required('phoneInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "phoneInput" }] : /* istanbul ignore next */ []));
+    countryFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countryFocused" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     overlayWidth = 0;
-    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    phoneInputValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "phoneInputValue" }] : /* istanbul ignore next */ []));
     countryList = computed(() => {
         const countries = this.allowedCountries() ?? this.phoneUtil.getSupportedRegions();
         return countries
@@ -152,39 +165,65 @@ class SiPhoneNumberInputComponent {
             };
         })
             .sort((a, b) => a.value.name.localeCompare(b.value.name));
-    }, ...(ngDevMode ? [{ debugName: "countryList" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countryList" }] : /* istanbul ignore next */ []));
+    selectedCountry = computed(() => {
+        const currentCountry = this.country();
+        if (!currentCountry) {
+            return undefined;
+        }
+        const selectedCountry = this.countryList().find(country => country.value.isoCode === currentCountry)?.value;
+        if (selectedCountry) {
+            return selectedCountry;
+        }
+        const countryCode = this.phoneUtil.getCountryCodeForRegion(currentCountry);
+        if (!countryCode) {
+            return undefined;
+        }
+        return {
+            isoCode: currentCountry,
+            countryCode,
+            name: this.getCountryName(currentCountry)
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCountry" }] : /* istanbul ignore next */ []));
+    placeholder = computed(() => {
+        const selectedCountry = this.selectedCountry();
+        if (!selectedCountry) {
+            return '';
+        }
+        return this.phoneUtil
+            .format(this.phoneUtil.getExampleNumber(selectedCountry.isoCode), PhoneNumberFormat.NATIONAL)
+            .replace(/^0/, '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementDown2 });
-    allowedCountries = computed(() => this.supportedCountries() ?? this.phoneUtil.getSupportedRegions(), ...(ngDevMode ? [{ debugName: "allowedCountries" }] : []));
-    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
+    allowedCountries = computed(() => this.supportedCountries() ?? this.phoneUtil.getSupportedRegions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowedCountries" }] : /* istanbul ignore next */ []));
+    disabledNgControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : /* istanbul ignore next */ []));
     isValidNumber = true;
-    phoneNumber = signal(undefined, { ...(ngDevMode ? { debugName: "phoneNumber" } : {}), equal: (a, b) => {
-            if (!a || !b) {
-                return !a && !b;
-            }
-            return this.phoneUtil.isNumberMatch(a, b) === PhoneNumberUtil.MatchType.EXACT_MATCH;
-        } });
+    phoneNumber = computed(() => this.parseNumber(this.phoneInputValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "phoneNumber" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     ngOnChanges(changes) {
         if (changes.country) {
-            this.writeCountry();
+            this.refreshValueAfterCountryChange();
         }
     }
     /** @internal */
     writeValue(value) {
         const phoneNumber = this.parseNumber(value);
-        this.phoneNumber.set(phoneNumber);
         if (phoneNumber) {
-            this.writeValueToInput();
-            this.country.set(this.getRegionCode());
+            this.country.set(this.getRegionCode(phoneNumber));
+            this.phoneInputValue.set(this.phoneUtil.format(phoneNumber, PhoneNumberFormat.NATIONAL).replace(/^0/, ''));
         }
         else {
             // Number could not be parsed, write raw value instead to handle cases like undefined
-            this.writeTextToInput(value);
+            this.phoneInputValue.set(value ?? '');
             this.country.set(this.defaultCountry() ?? this.country());
         }
-        this.writeCountry();
-        this.changeDetectorRef.markForCheck();
     }
     /** @internal */
     registerOnChange(fn) {
@@ -200,7 +239,7 @@ class SiPhoneNumberInputComponent {
     }
     /** @internal */
     validate(control) {
-        if (!this.phoneInput().nativeElement.value) {
+        if (!this.phoneInputValue()) {
             return null;
         }
         this.isValidNumber = false;
@@ -218,26 +257,18 @@ class SiPhoneNumberInputComponent {
         this.isValidNumber = true;
         return null;
     }
-    input() {
-        const rawNumber = this.phoneInput().nativeElement.value;
-        const phoneNumber = this.parseNumber(rawNumber);
-        this.phoneNumber.set(phoneNumber);
+    input(event) {
+        const rawNumber = event.target.value;
+        this.phoneInputValue.set(rawNumber);
+        const phoneNumber = this.phoneNumber();
         if (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: phoneNumber.getCountryCode(),
-                    isoCode: regionCode
-                };
-            }
-            if (countryInfo && this.selectedCountry()?.isoCode !== countryInfo.isoCode) {
-                this.selectedCountry.set(countryInfo);
+            const regionCode = this.getRegionCode(phoneNumber);
+            if (regionCode && this.country() !== regionCode) {
+                this.country.set(regionCode);
             }
         }
         else if (rawNumber.trim().startsWith('+')) {
-            this.selectedCountry.set(undefined);
+            this.country.set(undefined);
         }
         this.handleChange();
     }
@@ -247,48 +278,25 @@ class SiPhoneNumberInputComponent {
         this.writeValueToInput();
     }
     countryInput(num) {
-        this.selectedCountry.set(num);
-        this.updatePlaceholder();
+        this.country.set(num.isoCode);
         this.refreshValueAfterCountryChange();
         this.handleChange();
     }
     openOverlay() {
         if (!this.readonly()) {
-            this.open = true;
+            this.open.set(true);
             this.overlayWidth = this.elementRef.nativeElement.getBoundingClientRect().width + 2; // 2px border
         }
     }
     overlayDetach() {
-        this.open = false;
+        this.open.set(false);
         this.phoneInput().nativeElement.focus();
     }
-    writeCountry() {
-        const currentCountry = this.country();
-        this.selectedCountry.set(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.set({
-                    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() {
-        const selectedCountry = this.selectedCountry();
-        if (selectedCountry) {
-            this.placeholder = this.phoneUtil
-                .format(this.phoneUtil.getExampleNumber(selectedCountry.isoCode), PhoneNumberFormat.NATIONAL)
-                .replace(/^0/, '');
-        }
+        return (new Intl.DisplayNames([this.translate.currentLanguage ?? this.locale], {
+            type: 'region'
+        }).of(countryCode.toUpperCase()) ?? '');
     }
     parseNumber(rawNumber) {
         try {
@@ -307,27 +315,23 @@ class SiPhoneNumberInputComponent {
      * 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() {
-        const phoneNumber = this.phoneNumber();
-        if (phoneNumber) {
-            const regionCode = this.phoneUtil.getRegionCodeForNumber(phoneNumber);
-            if (regionCode) {
-                return regionCode;
-            }
-            const nationalNumber = phoneNumber.getNationalNumber() + '';
-            if (
-            // USA, CANADA, ...
-            (phoneNumber.getCountryCode() === 1 && nationalNumber.length >= 3) ||
-                // UK, ...
-                (phoneNumber.getCountryCode() === 44 && nationalNumber.length >= 4)) {
-                return this.phoneUtil.getRegionCodeForNumber(this.phoneUtil.parse('+' +
-                    phoneNumber.getCountryCode() +
-                    nationalNumber +
-                    new Array(10 - nationalNumber.length).fill(5).join('')));
-            }
-            return this.phoneUtil.getRegionCodeForCountryCode(phoneNumber.getCountryCode());
+    getRegionCode(phoneNumber) {
+        const regionCode = this.phoneUtil.getRegionCodeForNumber(phoneNumber);
+        if (regionCode) {
+            return regionCode;
         }
-        return undefined;
+        const nationalNumber = phoneNumber.getNationalNumber() + '';
+        if (
+        // USA, CANADA, ...
+        (phoneNumber.getCountryCode() === 1 && nationalNumber.length >= 3) ||
+            // UK, ...
+            (phoneNumber.getCountryCode() === 44 && nationalNumber.length >= 4)) {
+            return this.phoneUtil.getRegionCodeForNumber(this.phoneUtil.parse('+' +
+                phoneNumber.getCountryCode() +
+                nationalNumber +
+                new Array(10 - nationalNumber.length).fill(5).join('')));
+        }
+        return this.phoneUtil.getRegionCodeForCountryCode(phoneNumber.getCountryCode());
     }
     formatPhoneNumber(format) {
         const phoneNumber = this.phoneNumber();
@@ -337,50 +341,30 @@ class SiPhoneNumberInputComponent {
         return undefined;
     }
     handleChange() {
-        const selectedCountry = this.selectedCountry();
-        if (selectedCountry && this.country() !== selectedCountry.isoCode) {
-            this.country.set(selectedCountry.isoCode);
-        }
-        if (this.phoneNumber()) {
-            this.onChange(this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL));
-        }
-        else {
-            this.onChange('');
-        }
+        const phoneNumber = this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL);
+        this.onChange(phoneNumber ?? '');
         this.valueChange.emit({
             country: this.selectedCountry(),
-            phoneNumber: this.formatPhoneNumber(PhoneNumberFormat.INTERNATIONAL),
+            phoneNumber,
             isValid: this.isValidNumber
         });
     }
-    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/, ''));
+            this.phoneInputValue.set(this.formatPhoneNumber(PhoneNumberFormat.NATIONAL).replace(/^0/, ''));
         }
     }
     refreshValueAfterCountryChange() {
         const selectedCountry = this.selectedCountry();
         if (selectedCountry) {
-            this.phoneNumber.update(current => {
-                if (!current) {
-                    return undefined;
-                }
-                // TODO: Remove any once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/75189 is merged/released
-                const phoneNumber = current?.clone();
-                phoneNumber.setCountryCode(selectedCountry.countryCode);
-                return phoneNumber;
-            });
             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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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,
@@ -395,9 +379,9 @@ class SiPhoneNumberInputComponent {
                 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(); as 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      [cdkConnectedOverlayMinWidth]=\"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 });
+        ], 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(); as 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      [cdkConnectedOverlayMinWidth]=\"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    [value]=\"phoneInputValue()\"\n    [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n    [attr.aria-describedby]=\"errormessageId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"input($event)\"\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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-phone-number-input', imports: [
                         CdkOverlayOrigin,
@@ -422,14 +406,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: SI_FORM_ITEM_CONTROL,
                             useExisting: SiPhoneNumberInputComponent
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], 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(); as 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      [cdkConnectedOverlayMinWidth]=\"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"] }]
+                    }, 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(); as 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      [cdkConnectedOverlayMinWidth]=\"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    [value]=\"phoneInputValue()\"\n    [attr.aria-label]=\"phoneNumberAriaLabel() | translate\"\n    [attr.aria-describedby]=\"errormessageId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"input($event)\"\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 }] }] } });
 
 /**
@@ -437,11 +421,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * 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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputModule, imports: [SiPhoneNumberInputComponent], exports: [SiPhoneNumberInputComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputModule, imports: [SiPhoneNumberInputComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhoneNumberInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiPhoneNumberInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiPhoneNumberInputComponent],