@crodriguezdominguez/ion-intl-tel-input 3.0.0 → 3.1.0

package/fesm2022/crodriguezdominguez-ion-intl-tel-input.mjs

@@ -1,14 +1,12 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, Component, Input, ViewChild, Pipe, EventEmitter, forwardRef, HostBinding, Output } from '@angular/core';
-import * as i3 from '@angular/forms';
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { Directive, Injectable, inject, input, viewChild, computed, signal, ChangeDetectionStrategy, Component, Pipe, ElementRef, output, forwardRef, HostBinding } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALIDATORS, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { parsePhoneNumber, getExampleNumber } from 'libphonenumber-js';
 import { addIcons } from 'ionicons';
 import { caretDown } from 'ionicons/icons';
-import * as i1 from '@ionic/angular/standalone';
-import { IonToolbar, IonTitle, IonHeader, IonButtons, IonButton, IonSearchbar, IonContent, IonList, IonRadioGroup, IonItem, IonRadio, IonText, IonInput, IonIcon } from '@ionic/angular/standalone';
+import { ModalController, IonToolbar, IonTitle, IonHeader, IonButtons, IonButton, IonSearchbar, IonContent, IonList, IonRadioGroup, IonItem, IonRadio, IonText, Platform, IonInput, IonIcon } from '@ionic/angular/standalone';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
-import { NgIf } from '@angular/common';
 import examples from 'libphonenumber-js/mobile/examples';
 
 class IonIntlTelInputValidators {
@@ -51,8 +49,8 @@ class IonIntlTelInputValidatorDirective {
     validate(control) {
         return IonIntlTelInputValidators.phone(control);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntlTelInputValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: IonIntlTelInputValidatorDirective, isStandalone: true, selector: "[ionIntlTelInputValid]", providers: [
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntlTelInputValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: IonIntlTelInputValidatorDirective, isStandalone: true, selector: "[ionIntlTelInputValid]", providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: IonIntlTelInputValidatorDirective,
@@ -60,7 +58,7 @@ class IonIntlTelInputValidatorDirective {
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntlTelInputValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntlTelInputValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line: directive-selector
@@ -2345,10 +2343,10 @@ class IonIntlTelInputService {
     getListOfCountries() {
         return this.countryList;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntlTelInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntlTelInputService, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntlTelInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntlTelInputService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntlTelInputService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntlTelInputService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2366,59 +2364,58 @@ const raf = (h) => {
 };
 
 class IonIntTelCodeComponent {
-    modalCtrl;
-    country;
-    canSearch;
-    closeButtonText = 'Close';
-    closeButtonSlot = 'end';
-    countries;
-    searchFailText;
-    searchPlaceholder;
-    shouldFocusSearchbar;
-    title;
-    dialCode;
-    sbar;
-    allCountries;
-    notFound;
-    constructor(modalCtrl) {
-        this.modalCtrl = modalCtrl;
-    }
-    ngOnInit() {
-        this.allCountries = this.countries;
-    }
-    ionViewDidEnter() {
-        if (this.sbar && this.shouldFocusSearchbar) {
-            setTimeout(() => { this.sbar.setFocus(); }, 400);
-        }
-    }
-    search(ev) {
-        let search = ev.detail.value;
-        this.notFound = false;
+    modalController = inject(ModalController);
+    country = input(undefined, ...(ngDevMode ? [{ debugName: "country" }] : []));
+    canSearch = input(undefined, ...(ngDevMode ? [{ debugName: "canSearch" }] : []));
+    closeButtonText = input('Close', ...(ngDevMode ? [{ debugName: "closeButtonText" }] : []));
+    closeButtonSlot = input('end', ...(ngDevMode ? [{ debugName: "closeButtonSlot" }] : []));
+    countries = input(undefined, ...(ngDevMode ? [{ debugName: "countries" }] : []));
+    searchFailText = input(undefined, ...(ngDevMode ? [{ debugName: "searchFailText" }] : []));
+    searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    shouldFocusSearchbar = input(undefined, ...(ngDevMode ? [{ debugName: "shouldFocusSearchbar" }] : []));
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    dialCode = input(undefined, ...(ngDevMode ? [{ debugName: "dialCode" }] : []));
+    searchBar = viewChild('searchBar', ...(ngDevMode ? [{ debugName: "searchBar" }] : []));
+    displayedCountries = computed(() => {
+        let search = this.searchText();
         if (search === '' || search === null) {
-            this.countries = this.allCountries;
+            return this.allCountries;
         }
         else {
             search = search.toLocaleLowerCase();
-            this.countries = this.allCountries.filter(r => {
+            return this.allCountries.filter(r => {
                 return (r.name && r.name.toLocaleLowerCase().indexOf(search) !== -1);
             });
-            if (this.countries.length === 0) {
-                this.notFound = true;
-            }
         }
+    }, ...(ngDevMode ? [{ debugName: "displayedCountries" }] : []));
+    searchText = signal(null, ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    notFound = computed(() => {
+        return (this.displayedCountries().length === 0);
+    }, ...(ngDevMode ? [{ debugName: "notFound" }] : []));
+    allCountries;
+    ngOnInit() {
+        this.allCountries = this.countries();
+    }
+    ionViewDidEnter() {
+        if (this.searchBar() && this.shouldFocusSearchbar()) {
+            setTimeout(() => { this.searchBar().setFocus().then(); }, 400);
+        }
+    }
+    search(ev) {
+        this.searchText.set(ev.detail.value);
     }
     async itemTapped(c) {
-        await this.modalCtrl.dismiss(c);
+        await this.modalController.dismiss(c);
     }
     async closeModal() {
-        await this.modalCtrl.dismiss(null);
+        await this.modalController.dismiss(null);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntTelCodeComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: IonIntTelCodeComponent, isStandalone: true, selector: "ion-intl-tel-code", inputs: { country: "country", canSearch: "canSearch", closeButtonText: "closeButtonText", closeButtonSlot: "closeButtonSlot", countries: "countries", searchFailText: "searchFailText", searchPlaceholder: "searchPlaceholder", shouldFocusSearchbar: "shouldFocusSearchbar", title: "title", dialCode: "dialCode" }, viewQueries: [{ propertyName: "sbar", first: true, predicate: ["searchBar"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title class=\"ion-text-center\">\n      {{title}}\n    </ion-title>\n\n    <ion-buttons [slot]=\"closeButtonSlot\">\n      <ion-button (click)=\"closeModal()\">{{closeButtonText}}</ion-button>\n    </ion-buttons>\n\n  </ion-toolbar>\n  <ion-searchbar #searchBar *ngIf=\"canSearch\"\n                 placeholder=\"{{searchPlaceholder}}\"\n                 [debounce]=\"400\"\n                 (ionInput)=\"search($event); $event.target.blur()\"\n                 (keyup.enter)=\"$event.target.blur()\"\n                 (ionChange)=\"search($event)\"></ion-searchbar>\n</ion-header>\n\n<ion-content>\n  <cdk-virtual-scroll-viewport style=\"width: 100%; height: 100%;\" itemSize=\"56\" minBufferPx=\"900\" maxBufferPx=\"1350\">\n    <ion-list>\n      <ion-radio-group [value]=\"country.isoCode\">\n        <ion-item style=\"white-space:normal\" *cdkVirtualFor=\"let c of countries\">\n          <ion-radio labelPlacement=\"end\" [value]=\"c.isoCode\" slot=\"start\" color=\"primary\" (click)=\"itemTapped(c)\">\n            <span class=\"fi fi-{{c.flagClass}}\"></span>&nbsp;&nbsp;{{c.name}} <span *ngIf=\"dialCode\">{{dialCode}}{{c.displayDialCode}}</span>\n          </ion-radio>\n        </ion-item>\n      </ion-radio-group>\n      <ion-item lines=\"none\" *ngIf=\"notFound\">\n        <ion-text>{{searchFailText}}</ion-text>\n      </ion-item>\n    </ion-list>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n", dependencies: [{ kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntTelCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: IonIntTelCodeComponent, isStandalone: true, selector: "ion-intl-tel-code", inputs: { country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, canSearch: { classPropertyName: "canSearch", publicName: "canSearch", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null }, closeButtonSlot: { classPropertyName: "closeButtonSlot", publicName: "closeButtonSlot", isSignal: true, isRequired: false, transformFunction: null }, countries: { classPropertyName: "countries", publicName: "countries", isSignal: true, isRequired: false, transformFunction: null }, searchFailText: { classPropertyName: "searchFailText", publicName: "searchFailText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, shouldFocusSearchbar: { classPropertyName: "shouldFocusSearchbar", publicName: "shouldFocusSearchbar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dialCode: { classPropertyName: "dialCode", publicName: "dialCode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "searchBar", first: true, predicate: ["searchBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title class=\"ion-text-center\">\n      {{title()}}\n    </ion-title>\n\n    <ion-buttons [slot]=\"closeButtonSlot()\">\n      <ion-button (click)=\"closeModal()\">{{closeButtonText()}}</ion-button>\n    </ion-buttons>\n\n  </ion-toolbar>\n  @if (canSearch()) {\n    <ion-searchbar #searchBar\n      placeholder=\"{{searchPlaceholder()}}\"\n      [debounce]=\"400\"\n      (ionInput)=\"search($event); $event.target.blur()\"\n      (keyup.enter)=\"$event.target.blur()\"\n    (ionChange)=\"search($event)\"></ion-searchbar>\n  }\n</ion-header>\n\n<ion-content>\n  <cdk-virtual-scroll-viewport style=\"width: 100%; height: 100%;\" itemSize=\"56\" minBufferPx=\"900\" maxBufferPx=\"1350\">\n    <ion-list lines=\"full\">\n      <ion-radio-group [value]=\"country().isoCode\">\n        <ion-item style=\"white-space:normal\" *cdkVirtualFor=\"let c of countries()\">\n          <ion-radio labelPlacement=\"end\" [value]=\"c.isoCode\" slot=\"start\" color=\"primary\" (click)=\"itemTapped(c)\">\n            <span class=\"fi fi-{{c.flagClass}}\"></span>&nbsp;&nbsp;{{c.name}} @if (dialCode()) {\n            <span>{{dialCode()}}{{c.displayDialCode}}</span>\n          }\n        </ion-radio>\n      </ion-item>\n    </ion-radio-group>\n    @if (notFound()) {\n      <ion-item lines=\"none\">\n        <ion-text>{{searchFailText()}}</ion-text>\n      </ion-item>\n    }\n    </ion-list>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n", dependencies: [{ kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntTelCodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntTelCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ion-intl-tel-code', standalone: true, imports: [
+            args: [{ selector: 'ion-intl-tel-code', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         IonToolbar,
                         IonTitle,
                         IonHeader,
@@ -2433,33 +2430,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         CdkFixedSizeVirtualScroll,
                         IonRadio,
                         IonText,
-                        CdkVirtualForOf,
-                        NgIf
-                    ], template: "<ion-header>\n  <ion-toolbar>\n    <ion-title class=\"ion-text-center\">\n      {{title}}\n    </ion-title>\n\n    <ion-buttons [slot]=\"closeButtonSlot\">\n      <ion-button (click)=\"closeModal()\">{{closeButtonText}}</ion-button>\n    </ion-buttons>\n\n  </ion-toolbar>\n  <ion-searchbar #searchBar *ngIf=\"canSearch\"\n                 placeholder=\"{{searchPlaceholder}}\"\n                 [debounce]=\"400\"\n                 (ionInput)=\"search($event); $event.target.blur()\"\n                 (keyup.enter)=\"$event.target.blur()\"\n                 (ionChange)=\"search($event)\"></ion-searchbar>\n</ion-header>\n\n<ion-content>\n  <cdk-virtual-scroll-viewport style=\"width: 100%; height: 100%;\" itemSize=\"56\" minBufferPx=\"900\" maxBufferPx=\"1350\">\n    <ion-list>\n      <ion-radio-group [value]=\"country.isoCode\">\n        <ion-item style=\"white-space:normal\" *cdkVirtualFor=\"let c of countries\">\n          <ion-radio labelPlacement=\"end\" [value]=\"c.isoCode\" slot=\"start\" color=\"primary\" (click)=\"itemTapped(c)\">\n            <span class=\"fi fi-{{c.flagClass}}\"></span>&nbsp;&nbsp;{{c.name}} <span *ngIf=\"dialCode\">{{dialCode}}{{c.displayDialCode}}</span>\n          </ion-radio>\n        </ion-item>\n      </ion-radio-group>\n      <ion-item lines=\"none\" *ngIf=\"notFound\">\n        <ion-text>{{searchFailText}}</ion-text>\n      </ion-item>\n    </ion-list>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n" }]
-        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { country: [{
-                type: Input
-            }], canSearch: [{
-                type: Input
-            }], closeButtonText: [{
-                type: Input
-            }], closeButtonSlot: [{
-                type: Input
-            }], countries: [{
-                type: Input
-            }], searchFailText: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], shouldFocusSearchbar: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], dialCode: [{
-                type: Input
-            }], sbar: [{
-                type: ViewChild,
-                args: ['searchBar']
-            }] } });
+                        CdkVirtualForOf
+                    ], template: "<ion-header>\n  <ion-toolbar>\n    <ion-title class=\"ion-text-center\">\n      {{title()}}\n    </ion-title>\n\n    <ion-buttons [slot]=\"closeButtonSlot()\">\n      <ion-button (click)=\"closeModal()\">{{closeButtonText()}}</ion-button>\n    </ion-buttons>\n\n  </ion-toolbar>\n  @if (canSearch()) {\n    <ion-searchbar #searchBar\n      placeholder=\"{{searchPlaceholder()}}\"\n      [debounce]=\"400\"\n      (ionInput)=\"search($event); $event.target.blur()\"\n      (keyup.enter)=\"$event.target.blur()\"\n    (ionChange)=\"search($event)\"></ion-searchbar>\n  }\n</ion-header>\n\n<ion-content>\n  <cdk-virtual-scroll-viewport style=\"width: 100%; height: 100%;\" itemSize=\"56\" minBufferPx=\"900\" maxBufferPx=\"1350\">\n    <ion-list lines=\"full\">\n      <ion-radio-group [value]=\"country().isoCode\">\n        <ion-item style=\"white-space:normal\" *cdkVirtualFor=\"let c of countries()\">\n          <ion-radio labelPlacement=\"end\" [value]=\"c.isoCode\" slot=\"start\" color=\"primary\" (click)=\"itemTapped(c)\">\n            <span class=\"fi fi-{{c.flagClass}}\"></span>&nbsp;&nbsp;{{c.name}} @if (dialCode()) {\n            <span>{{dialCode()}}{{c.displayDialCode}}</span>\n          }\n        </ion-radio>\n      </ion-item>\n    </ion-radio-group>\n    @if (notFound()) {\n      <ion-item lines=\"none\">\n        <ion-text>{{searchFailText()}}</ion-text>\n      </ion-item>\n    }\n    </ion-list>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n" }]
+        }], propDecorators: { country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }], canSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSearch", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], closeButtonSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonSlot", required: false }] }], countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], searchFailText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFailText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], shouldFocusSearchbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldFocusSearchbar", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dialCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialCode", required: false }] }], searchBar: [{ type: i0.ViewChild, args: ['searchBar', { isSignal: true }] }] } });
 
 class CountryPlaceholder {
     transform(country, inputPlaceholder, separateDialCode, fallbackPlaceholder, usePatternPlaceholder) {
@@ -2487,10 +2460,10 @@ class CountryPlaceholder {
             return fallbackPlaceholder;
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CountryPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    /** @nocollapse */ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: CountryPlaceholder, isStandalone: true, name: "countryPlaceholder" });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CountryPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    /** @nocollapse */ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: CountryPlaceholder, isStandalone: true, name: "countryPlaceholder" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CountryPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CountryPlaceholder, decorators: [{
             type: Pipe,
             args: [{ standalone: true, name: 'countryPlaceholder' }]
         }] });
@@ -2501,12 +2474,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
 /**
  * @author Azzam Asghar <azzam.asghar@interstellus.com>
  * @author Steve Drew <sdrew@waitwell.ca>
+ * @author Carlos Rodríguez <carlosrodriguez@ugr.es>
  */
 class IonIntlTelInputComponent {
-    el;
-    platform;
-    ionIntlTelInputService;
-    modalCtrl;
+    el = inject(ElementRef);
+    platform = inject(Platform);
+    ionIntlTelInputService = inject(IonIntlTelInputService);
+    modalCtrl = inject(ModalController);
     cssClass = true;
     isIos;
     isMD;
@@ -2523,14 +2497,14 @@ class IonIntlTelInputComponent {
      * @default 'off'
      * @memberof IonIntlTelInputComponent
      */
-    autocomplete = 'off';
+    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
     /**
      * required, passed onto ion-input so we can be accessiblity compliant
      *
      * @default false
      * @memberof IonIntlTelInputComponent
      */
-    required = false;
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
     /**
      * Iso Code of default selected Country.
      * See more on.
@@ -2538,7 +2512,7 @@ class IonIntlTelInputComponent {
      * @default ''
      * @memberof IonIntlTelInputComponent
      */
-    defaultCountryiso = '';
+    defaultCountryiso = input('', ...(ngDevMode ? [{ debugName: "defaultCountryiso" }] : []));
     /**
      * Determines whether to use `00` or `+` as dial code prefix.
      * Available attributes are '+' | '00'.
@@ -2547,7 +2521,7 @@ class IonIntlTelInputComponent {
      * @default +
      * @memberof IonIntlTelInputComponent
      */
-    dialCodePrefix = '+';
+    dialCodePrefix = input('+', ...(ngDevMode ? [{ debugName: "dialCodePrefix" }] : []));
     /**
      * Determines whether to select automatic country based on user input.
      * See more on.
@@ -2555,7 +2529,7 @@ class IonIntlTelInputComponent {
      * @default true
      * @memberof IonIntlTelInputComponent
      */
-    enableAutoCountrySelect = true;
+    enableAutoCountrySelect = input(true, ...(ngDevMode ? [{ debugName: "enableAutoCountrySelect" }] : []));
     /**
      * Determines whether an example number will be shown as a placeholder in input.
      * See more on.
@@ -2563,7 +2537,7 @@ class IonIntlTelInputComponent {
      * @default true
      * @memberof IonIntlTelInputComponent
      */
-    enablePlaceholder = true;
+    enablePlaceholder = input(true, ...(ngDevMode ? [{ debugName: "enablePlaceholder" }] : []));
     /**
      * A fallaback placeholder to be used if no example number is found for a country.
      * See more on.
@@ -2571,7 +2545,7 @@ class IonIntlTelInputComponent {
      * @default ''
      * @memberof IonIntlTelInputComponent
      */
-    fallbackPlaceholder = '';
+    fallbackPlaceholder = input('', ...(ngDevMode ? [{ debugName: "fallbackPlaceholder" }] : []));
     /**
      * If a custom placeholder is needed for input.
      * If this property is set it will override `enablePlaceholder` and only this placeholder will be shown.
@@ -2580,10 +2554,10 @@ class IonIntlTelInputComponent {
      * @default ''
      * @memberof IonIntlTelInputComponent
      */
-    inputPlaceholder = '';
-    inputLabel = '';
-    inputLabelColor = undefined;
-    inputLabelPlacement = 'start';
+    inputPlaceholder = input('', ...(ngDevMode ? [{ debugName: "inputPlaceholder" }] : []));
+    inputLabel = input('', ...(ngDevMode ? [{ debugName: "inputLabel" }] : []));
+    inputLabelColor = input(undefined, ...(ngDevMode ? [{ debugName: "inputLabelColor" }] : []));
+    inputLabelPlacement = input('start', ...(ngDevMode ? [{ debugName: "inputLabelPlacement" }] : []));
     /**
      * Instead of an example phone number, use a x pattern. Such as xxx-xxx-xxxx, this will be obtained
      * based on the example number from the google phone lib.
@@ -2591,7 +2565,7 @@ class IonIntlTelInputComponent {
      * @default true
      * @memberof IonIntlTelInputComponent
      */
-    usePatternPlaceholder = true;
+    usePatternPlaceholder = input(true, ...(ngDevMode ? [{ debugName: "usePatternPlaceholder" }] : []));
     /**
      * Maximum Length for input.
      * See more on.
@@ -2599,7 +2573,7 @@ class IonIntlTelInputComponent {
      * @default '15'
      * @memberof IonIntlTelInputComponent
      */
-    maxLength = '15';
+    maxLength = input('15', ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
     /**
      * Title of modal opened to select country dial code.
      * See more on.
@@ -2607,7 +2581,7 @@ class IonIntlTelInputComponent {
      * @default 'Select Country'
      * @memberof IonIntlTelInputComponent
      */
-    modalTitle = 'Select Country';
+    modalTitle = input('Select Country', ...(ngDevMode ? [{ debugName: "modalTitle" }] : []));
     /**
      * CSS class to attach to dial code selectionmodal.
      * See more on.
@@ -2615,7 +2589,7 @@ class IonIntlTelInputComponent {
      * @default 'ion-intl-tel-modal'
      * @memberof IonIntlTelInputComponent
      */
-    modalCssClass = 'ion-intl-tel-modal';
+    modalCssClass = input('ion-intl-tel-modal', ...(ngDevMode ? [{ debugName: "modalCssClass" }] : []));
     /**
      * Placeholder for input in dial code selection modal.
      * See more on.
@@ -2623,7 +2597,7 @@ class IonIntlTelInputComponent {
      * @default 'Enter country name'
      * @memberof IonIntlTelInputComponent
      */
-    modalSearchPlaceholder = 'Enter country name';
+    modalSearchPlaceholder = input('Enter country name', ...(ngDevMode ? [{ debugName: "modalSearchPlaceholder" }] : []));
     /**
      * Text for close button in dial code selection modal.
      * See more on.
@@ -2631,7 +2605,7 @@ class IonIntlTelInputComponent {
      * @default 'Close'
      * @memberof IonIntlTelInputComponent
      */
-    modalCloseText = 'Close';
+    modalCloseText = input('Close', ...(ngDevMode ? [{ debugName: "modalCloseText" }] : []));
     /**
      * Slot for close button in dial code selection modal. [Ionic slots](https://ionicframework.com/docs/api/item) are supported
      * See more on.
@@ -2639,7 +2613,7 @@ class IonIntlTelInputComponent {
      * @default 'end'
      * @memberof IonIntlTelInputComponent
      */
-    modalCloseButtonSlot = 'end';
+    modalCloseButtonSlot = input('end', ...(ngDevMode ? [{ debugName: "modalCloseButtonSlot" }] : []));
     /**
      * Determines whether dial code selection modal should be searchable or not.
      * See more on.
@@ -2647,7 +2621,7 @@ class IonIntlTelInputComponent {
      * @default 'true'
      * @memberof IonIntlTelInputComponent
      */
-    modalCanSearch = true;
+    modalCanSearch = input(true, ...(ngDevMode ? [{ debugName: "modalCanSearch" }] : []));
     /**
      * Determines whether dial code selection modal is closed on backdrop click.
      * See more on.
@@ -2655,7 +2629,7 @@ class IonIntlTelInputComponent {
      * @default 'true'
      * @memberof IonIntlTelInputComponent
      */
-    modalShouldBackdropClose = true;
+    modalShouldBackdropClose = input(true, ...(ngDevMode ? [{ debugName: "modalShouldBackdropClose" }] : []));
     /**
      * Determines whether input should be focused when dial code selection modal is opened.
      * See more on.
@@ -2663,7 +2637,7 @@ class IonIntlTelInputComponent {
      * @default 'true'
      * @memberof IonIntlTelInputComponent
      */
-    modalShouldFocusSearchbar = true;
+    modalShouldFocusSearchbar = input(true, ...(ngDevMode ? [{ debugName: "modalShouldFocusSearchbar" }] : []));
     /**
      * Message to show when no countries are found for search in dial code selection modal.
      * See more on.
@@ -2671,7 +2645,7 @@ class IonIntlTelInputComponent {
      * @default 'true'
      * @memberof IonIntlTelInputComponent
      */
-    modalSearchFailText = 'No countries found';
+    modalSearchFailText = input('No countries found', ...(ngDevMode ? [{ debugName: "modalSearchFailText" }] : []));
     /**
      * List of iso codes of manually selected countries as string, which will appear in the dropdown.
      * **Note**: `onlyCountries` should be a string array of country iso codes.
@@ -2680,7 +2654,7 @@ class IonIntlTelInputComponent {
      * @default null
      * @memberof IonIntlTelInputComponent
      */
-    onlyCountries = [];
+    onlyCountries = input([], ...(ngDevMode ? [{ debugName: "onlyCountries" }] : []));
     /**
      * List of iso codesn as string of  countries, which will appear at the top in dial code selection modal.
      * **Note**: `preferredCountries` should be a string array of country iso codes.
@@ -2689,7 +2663,7 @@ class IonIntlTelInputComponent {
      * @default null
      * @memberof IonIntlTelInputComponent
      */
-    preferredCountries = [];
+    preferredCountries = input([], ...(ngDevMode ? [{ debugName: "preferredCountries" }] : []));
     /**
      * Determines whether first country should be selected in dial code select or not.
      * See more on.
@@ -2697,7 +2671,7 @@ class IonIntlTelInputComponent {
      * @default true
      * @memberof IonIntlTelInputComponent
      */
-    selectFirstCountry = true;
+    selectFirstCountry = input(true, ...(ngDevMode ? [{ debugName: "selectFirstCountry" }] : []));
     /**
      * Determines whether to visually separate dialcode into the drop down element.
      * See more on.
@@ -2705,64 +2679,64 @@ class IonIntlTelInputComponent {
      * @default true
      * @memberof IonIntlTelInputComponent
      */
-    separateDialCode = true;
+    separateDialCode = input(true, ...(ngDevMode ? [{ debugName: "separateDialCode" }] : []));
     /**
      * Fires when the Phone number Input is changed.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    numberChange = new EventEmitter();
+    numberChange = output();
     /**
      * Fires when the Phone number Input is blurred.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    numberBlur = new EventEmitter();
+    numberBlur = output();
     /**
      * Fires when the Phone number Input is focused.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    numberFocus = new EventEmitter();
+    numberFocus = output();
     /**
      * Fires when the user is typing in Phone number Input.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    numberInput = new EventEmitter();
+    numberInput = output();
     /**
      * Fires when the dial code selection is changed.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    codeChange = new EventEmitter();
+    codeChange = output();
     /**
      * Fires when the dial code selection modal is opened.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    codeOpen = new EventEmitter();
+    codeOpen = output();
     /**
      * Fires when the dial code selection modal is closed.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    codeClose = new EventEmitter();
+    codeClose = output();
     /**
      * Fires when a dial code is selected in dial code selection modal.
      * See more on.
      *
      * @memberof IonIntlTelInputComponent
      */
-    codeSelect = new EventEmitter();
-    numberInputEl;
+    codeSelect = output();
+    numberInputEl = viewChild('numberInput', ...(ngDevMode ? [{ debugName: "numberInputEl" }] : []));
     // tslint:disable-next-line: variable-name
     _value = null;
     country;
@@ -2771,11 +2745,7 @@ class IonIntlTelInputComponent {
     disabled = false;
     onTouched = () => { };
     propagateChange = (_) => { };
-    constructor(el, platform, ionIntlTelInputService, modalCtrl) {
-        this.el = el;
-        this.platform = platform;
-        this.ionIntlTelInputService = ionIntlTelInputService;
-        this.modalCtrl = modalCtrl;
+    constructor() {
         addIcons({ caretDown });
     }
     get value() {
@@ -2794,17 +2764,19 @@ class IonIntlTelInputComponent {
         this.setItemClass(this.el, 'item-interactive', true);
         this.fetchAllCountries();
         this.setPreferredCountries();
-        if (this.onlyCountries.length) {
-            this.countries = this.countries.filter((country) => this.onlyCountries.includes(country.isoCode));
+        if (this.onlyCountries().length) {
+            this.countries = this.countries.filter((country) => this.onlyCountries().includes(country.isoCode));
         }
-        if (this.selectFirstCountry) {
-            if (this.defaultCountryiso) {
-                this.setCountry(this.getCountryByIsoCode(this.defaultCountryiso));
+        if (this.selectFirstCountry()) {
+            const defaultCountryiso = this.defaultCountryiso();
+            if (defaultCountryiso) {
+                this.setCountry(this.getCountryByIsoCode(defaultCountryiso));
             }
             else {
-                if (this.preferredCountries.length &&
-                    this.preferredCountries.includes(this.defaultCountryiso)) {
-                    this.setCountry(this.getCountryByIsoCode(this.preferredCountries[0]));
+                const preferredCountries = this.preferredCountries();
+                if (preferredCountries.length &&
+                    preferredCountries.includes(defaultCountryiso)) {
+                    this.setCountry(this.getCountryByIsoCode(preferredCountries[0]));
                 }
                 else {
                     this.setCountry(this.countries[0]);
@@ -2871,25 +2843,22 @@ class IonIntlTelInputComponent {
     hasValue() {
         return !this.isNullOrWhiteSpace(this.value);
     }
-    onCodeOpen() {
-        this.codeOpen.emit();
-    }
     async openModal() {
         const modal = await this.modalCtrl.create({
             component: IonIntTelCodeComponent,
-            cssClass: this.modalCssClass,
-            backdropDismiss: this.modalShouldBackdropClose,
+            cssClass: this.modalCssClass(),
+            backdropDismiss: this.modalShouldBackdropClose(),
             componentProps: {
                 country: this.country,
-                canSearch: this.modalCanSearch,
-                closeButtonText: this.modalCloseText,
-                closeButtonSlot: this.modalCloseButtonSlot,
+                canSearch: this.modalCanSearch(),
+                closeButtonText: this.modalCloseText(),
+                closeButtonSlot: this.modalCloseButtonSlot(),
                 countries: this.countries,
-                title: this.modalTitle,
-                searchFailText: this.modalSearchFailText,
-                searchPlaceholder: this.modalSearchPlaceholder,
-                shouldFocusSearchbar: this.modalShouldFocusSearchbar,
-                dialCode: this.separateDialCode ? this.dialCodePrefix : null
+                title: this.modalTitle(),
+                searchFailText: this.modalSearchFailText(),
+                searchPlaceholder: this.modalSearchPlaceholder(),
+                shouldFocusSearchbar: this.modalShouldFocusSearchbar(),
+                dialCode: this.separateDialCode() ? this.dialCodePrefix() : null
             }
         });
         await modal.present();
@@ -2913,29 +2882,17 @@ class IonIntlTelInputComponent {
             const internationallNo = googleNumber
                 ? googleNumber.formatInternational()
                 : '';
-            const nationalNo = googleNumber
-                ? googleNumber.formatNational()
-                : '';
-            if (this.separateDialCode && internationallNo) {
+            if (this.separateDialCode() && internationallNo) {
                 this.phoneNumber = this.removeDialCode(internationallNo);
             }
             this.emitValueChange(internationallNo);
-            this.codeChange.emit();
+            // TODO: The 'emit' function requires a mandatory any argument
+            this.codeChange.emit(undefined);
         }
         setTimeout(() => {
-            this.numberInputEl.setFocus();
+            this.numberInputEl().setFocus().then();
         }, 400);
     }
-    onCodeClose() {
-        this.onTouched();
-        this.setIonicClasses(this.el);
-        this.hasFocus = false;
-        this.setItemClass(this.el, 'item-has-focus', false);
-        this.codeClose.emit();
-    }
-    onCodeSelect() {
-        this.codeSelect.emit();
-    }
     onIonNumberChange(event) {
         this.setIonicClasses(this.el);
         this.numberChange.emit(event);
@@ -2945,11 +2902,13 @@ class IonIntlTelInputComponent {
         this.setIonicClasses(this.el);
         this.hasFocus = false;
         this.setItemClass(this.el, 'item-has-focus', false);
+        // TODO: The 'emit' function requires a mandatory void argument
         this.numberBlur.emit();
     }
     onIonNumberFocus() {
         this.hasFocus = true;
         this.setItemClass(this.el, 'item-has-focus', true);
+        // TODO: The 'emit' function requires a mandatory void argument
         this.numberFocus.emit();
     }
     onIonNumberInput(event) {
@@ -2963,7 +2922,7 @@ class IonIntlTelInputComponent {
             return;
         }
         if (this.country) {
-            this.emitValueChange(this.dialCodePrefix + this.country.dialCode + ' ' + this.phoneNumber);
+            this.emitValueChange(this.dialCodePrefix() + this.country.dialCode + ' ' + this.phoneNumber);
         }
         let googleNumber;
         try {
@@ -2974,7 +2933,7 @@ class IonIntlTelInputComponent {
         }
         let isoCode = this.country ? this.country.isoCode : null;
         // auto select country based on the extension (and areaCode if needed) (e.g select Canada if number starts with +1 416)
-        if (this.enableAutoCountrySelect) {
+        if (this.enableAutoCountrySelect()) {
             isoCode =
                 googleNumber && googleNumber.country
                     ? googleNumber.country
@@ -2997,7 +2956,7 @@ class IonIntlTelInputComponent {
             const nationalNo = googleNumber
                 ? googleNumber.formatNational()
                 : '';
-            if (this.separateDialCode && internationallNo) {
+            if (this.separateDialCode() && internationallNo) {
                 this.phoneNumber = this.removeDialCode(internationallNo);
             }
             this.emitValueChange(internationallNo);
@@ -3025,28 +2984,6 @@ class IonIntlTelInputComponent {
             event.preventDefault();
         }
     }
-    filterCountries(text) {
-        return this.countries.filter((country) => {
-            return (country.name.toLowerCase().indexOf(text) !== -1 ||
-                country.name.toLowerCase().indexOf(text) !== -1 ||
-                country.dialCode.toString().toLowerCase().indexOf(text) !== -1);
-        });
-    }
-    getCountryIsoCode(countryCode, googleNumber) {
-        const rawNumber = googleNumber.values_[2].toString();
-        const countries = this.countries.filter((country) => country.dialCode === countryCode.toString());
-        const mainCountry = countries.find((country) => country.areaCodes === undefined);
-        const secondaryCountries = countries.filter((country) => country.areaCodes !== undefined);
-        let matchedCountry = mainCountry ? mainCountry.isoCode : undefined;
-        secondaryCountries.forEach((country) => {
-            country.areaCodes.forEach((areaCode) => {
-                if (rawNumber.startsWith(areaCode)) {
-                    matchedCountry = country.isoCode;
-                }
-            });
-        });
-        return matchedCountry;
-    }
     fetchAllCountries() {
         this.countries = this.ionIntlTelInputService.getListOfCountries();
     }
@@ -3069,7 +3006,7 @@ class IonIntlTelInputComponent {
         return typeof value === 'object' && Object.keys(value).length === 0;
     }
     removeDialCode(phoneNumber) {
-        if (this.separateDialCode && phoneNumber) {
+        if (this.separateDialCode() && phoneNumber) {
             phoneNumber = phoneNumber.substr(phoneNumber.indexOf(' ') + 1);
         }
         return phoneNumber;
@@ -3079,22 +3016,19 @@ class IonIntlTelInputComponent {
         this.codeChange.emit(this.country);
     }
     setPreferredCountries() {
-        for (const preferedCountryIsoCode of this.preferredCountries) {
+        for (const preferedCountryIsoCode of this.preferredCountries()) {
             const country = this.getCountryByIsoCode(preferedCountryIsoCode);
             country.priority = country ? 1 : country.priority;
         }
         this.countries.sort((a, b) => a.priority > b.priority ? -1 : a.priority < b.priority ? 1 : 0);
     }
-    startsWith = (input, search) => {
-        return input.substr(0, search.length) === search;
-    };
     getClasses = (element) => {
         const classList = element.classList;
         const classes = [];
         for (let i = 0; i < classList.length; i++) {
             const item = classList.item(i);
-            if (item !== null && this.startsWith(item, 'ng-')) {
-                classes.push(`ion-${item.substr(3)}`);
+            if (item !== null && item.startsWith('ng-')) {
+                classes.push(`ion-${item.substring(3)}`);
             }
         }
         return classes;
@@ -3113,18 +3047,18 @@ class IonIntlTelInputComponent {
     };
     setIonicClasses = (element) => {
         raf(() => {
-            const input = element.nativeElement;
-            const classes = this.getClasses(input);
-            this.setClasses(input, classes);
-            const item = input.closest('ion-item');
+            const htmlElement = element.nativeElement;
+            const classes = this.getClasses(htmlElement);
+            this.setClasses(htmlElement, classes);
+            const item = htmlElement.closest('ion-item');
             if (item) {
                 this.setClasses(item, classes);
             }
         });
     };
     setItemClass = (element, className, addClass) => {
-        const input = element.nativeElement;
-        const item = input.closest('ion-item');
+        const htmlElement = element.nativeElement;
+        const item = htmlElement.closest('ion-item');
         if (item) {
             const classList = item.classList;
             if (addClass) {
@@ -3135,18 +3069,18 @@ class IonIntlTelInputComponent {
             }
         }
     };
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntlTelInputComponent, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: IonIntlTelInputService }, { token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: IonIntlTelInputComponent, isStandalone: true, selector: "ion-intl-tel-input", inputs: { isEnabled: "isEnabled", autocomplete: "autocomplete", required: "required", defaultCountryiso: "defaultCountryiso", dialCodePrefix: "dialCodePrefix", enableAutoCountrySelect: "enableAutoCountrySelect", enablePlaceholder: "enablePlaceholder", fallbackPlaceholder: "fallbackPlaceholder", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputLabelColor: "inputLabelColor", inputLabelPlacement: "inputLabelPlacement", usePatternPlaceholder: "usePatternPlaceholder", maxLength: "maxLength", modalTitle: "modalTitle", modalCssClass: "modalCssClass", modalSearchPlaceholder: "modalSearchPlaceholder", modalCloseText: "modalCloseText", modalCloseButtonSlot: "modalCloseButtonSlot", modalCanSearch: "modalCanSearch", modalShouldBackdropClose: "modalShouldBackdropClose", modalShouldFocusSearchbar: "modalShouldFocusSearchbar", modalSearchFailText: "modalSearchFailText", onlyCountries: "onlyCountries", preferredCountries: "preferredCountries", selectFirstCountry: "selectFirstCountry", separateDialCode: "separateDialCode" }, outputs: { numberChange: "numberChange", numberBlur: "numberBlur", numberFocus: "numberFocus", numberInput: "numberInput", codeChange: "codeChange", codeOpen: "codeOpen", codeClose: "codeClose", codeSelect: "codeSelect" }, host: { properties: { "class.ion-intl-tel-input": "this.cssClass", "class.ion-intl-tel-input-ios": "this.isIos", "class.ion-intl-tel-input-md": "this.isMD", "class.has-focus": "this.hasFocus", "class.ion-intl-tel-input-has-value": "this.hasValueCssClass", "class.ion-intl-tel-input-is-enabled": "this.isEnabled" } }, providers: [
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntlTelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: IonIntlTelInputComponent, isStandalone: true, selector: "ion-intl-tel-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryiso: { classPropertyName: "defaultCountryiso", publicName: "defaultCountryiso", isSignal: true, isRequired: false, transformFunction: null }, dialCodePrefix: { classPropertyName: "dialCodePrefix", publicName: "dialCodePrefix", isSignal: true, isRequired: false, transformFunction: null }, enableAutoCountrySelect: { classPropertyName: "enableAutoCountrySelect", publicName: "enableAutoCountrySelect", isSignal: true, isRequired: false, transformFunction: null }, enablePlaceholder: { classPropertyName: "enablePlaceholder", publicName: "enablePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, fallbackPlaceholder: { classPropertyName: "fallbackPlaceholder", publicName: "fallbackPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, inputLabelColor: { classPropertyName: "inputLabelColor", publicName: "inputLabelColor", isSignal: true, isRequired: false, transformFunction: null }, inputLabelPlacement: { classPropertyName: "inputLabelPlacement", publicName: "inputLabelPlacement", isSignal: true, isRequired: false, transformFunction: null }, usePatternPlaceholder: { classPropertyName: "usePatternPlaceholder", publicName: "usePatternPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, modalTitle: { classPropertyName: "modalTitle", publicName: "modalTitle", isSignal: true, isRequired: false, transformFunction: null }, modalCssClass: { classPropertyName: "modalCssClass", publicName: "modalCssClass", isSignal: true, isRequired: false, transformFunction: null }, modalSearchPlaceholder: { classPropertyName: "modalSearchPlaceholder", publicName: "modalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, modalCloseText: { classPropertyName: "modalCloseText", publicName: "modalCloseText", isSignal: true, isRequired: false, transformFunction: null }, modalCloseButtonSlot: { classPropertyName: "modalCloseButtonSlot", publicName: "modalCloseButtonSlot", isSignal: true, isRequired: false, transformFunction: null }, modalCanSearch: { classPropertyName: "modalCanSearch", publicName: "modalCanSearch", isSignal: true, isRequired: false, transformFunction: null }, modalShouldBackdropClose: { classPropertyName: "modalShouldBackdropClose", publicName: "modalShouldBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, modalShouldFocusSearchbar: { classPropertyName: "modalShouldFocusSearchbar", publicName: "modalShouldFocusSearchbar", isSignal: true, isRequired: false, transformFunction: null }, modalSearchFailText: { classPropertyName: "modalSearchFailText", publicName: "modalSearchFailText", isSignal: true, isRequired: false, transformFunction: null }, onlyCountries: { classPropertyName: "onlyCountries", publicName: "onlyCountries", isSignal: true, isRequired: false, transformFunction: null }, preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null }, selectFirstCountry: { classPropertyName: "selectFirstCountry", publicName: "selectFirstCountry", isSignal: true, isRequired: false, transformFunction: null }, separateDialCode: { classPropertyName: "separateDialCode", publicName: "separateDialCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { numberChange: "numberChange", numberBlur: "numberBlur", numberFocus: "numberFocus", numberInput: "numberInput", codeChange: "codeChange", codeOpen: "codeOpen", codeClose: "codeClose", codeSelect: "codeSelect" }, host: { properties: { "class.ion-intl-tel-input": "this.cssClass", "class.ion-intl-tel-input-ios": "this.isIos", "class.ion-intl-tel-input-md": "this.isMD", "class.has-focus": "this.hasFocus", "class.ion-intl-tel-input-has-value": "this.hasValueCssClass", "class.ion-intl-tel-input-is-enabled": "this.isEnabled" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => IonIntlTelInputComponent)),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "numberInputEl", first: true, predicate: ["numberInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-input\n    #numberInput\n    [(ngModel)]=\"phoneNumber\"\n    [autocomplete]=\"autocomplete\"\n    [required]=\"required\"\n    [disabled] = \"disabled\"\n    [attr.maxLength]=\"maxLength\"\n    type=\"tel\"\n    (ionBlur)=\"onIonNumberBlur()\"\n    (ionChange)=\"onIonNumberChange($event)\"\n    (ionFocus)=\"onIonNumberFocus()\"\n    (ionInput)=\"onIonNumberInput($event)\"\n    (keydown)=\"onNumberKeyDown($event)\"\n    (ngModelChange)=\"onNumberChange()\"\n    [labelPlacement]=\"inputLabelPlacement\"\n    placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\">\n    <div slot=\"label\">\n        <ion-text [color]=\"inputLabelColor\">{{inputLabel}}</ion-text>\n    </div>\n    <ion-button\n            slot=\"start\"\n            fill=\"clear\"\n            class=\"ion-intl-tel-input-btn\"\n            [disabled] = \"disabled\"\n            aria-label=\"country\"\n            (click)=\"openModal()\">\n        <span class=\"ion-intl-tel-input-flag fi fi-{{country.flagClass}}\"></span><span class=\"ion-intl-tel-input-code\" *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.dialCode}}</span>\n        <ion-icon style=\"font-size:14px;opacity:.5;\" name=\"caret-down\"></ion-icon>\n    </ion-button>\n</ion-input>\n", styles: [":host{width:100%;display:flex;align-items:center}:host ion-button{color:var(--ion-color);height:100%;margin:0}:host ion-button::part(native){padding-inline-start:0;padding-inline-end:2px;margin:0;font-size:16px;font-weight:400}:host .fi{margin-right:5px}\n"], dependencies: [{ kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CountryPlaceholder, name: "countryPlaceholder" }] });
+        ], viewQueries: [{ propertyName: "numberInputEl", first: true, predicate: ["numberInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ion-input\n  #numberInput\n  [(ngModel)]=\"phoneNumber\"\n  [autocomplete]=\"autocomplete()\"\n  [required]=\"required()\"\n  [disabled] = \"disabled\"\n  [attr.maxLength]=\"maxLength()\"\n  type=\"tel\"\n  (ionBlur)=\"onIonNumberBlur()\"\n  (ionChange)=\"onIonNumberChange($event)\"\n  (ionFocus)=\"onIonNumberFocus()\"\n  (ionInput)=\"onIonNumberInput($event)\"\n  (keydown)=\"onNumberKeyDown($event)\"\n  (ngModelChange)=\"onNumberChange()\"\n  [labelPlacement]=\"inputLabelPlacement()\"\n  placeholder=\"{{country | countryPlaceholder: inputPlaceholder():separateDialCode():fallbackPlaceholder():usePatternPlaceholder()}}\">\n  <div slot=\"label\">\n    <ion-text [color]=\"inputLabelColor()\">{{inputLabel()}}</ion-text>\n  </div>\n  <ion-button\n    slot=\"start\"\n    fill=\"clear\"\n    class=\"ion-intl-tel-input-btn\"\n    [disabled] = \"disabled\"\n    aria-label=\"country\"\n    (click)=\"openModal()\">\n    <span class=\"ion-intl-tel-input-flag fi fi-{{country.flagClass}}\"></span>@if (separateDialCode()) {\n    <span class=\"ion-intl-tel-input-code\">{{dialCodePrefix()}}{{country.dialCode}}</span>\n  }\n  <ion-icon style=\"font-size:14px;opacity:.5;\" name=\"caret-down\"></ion-icon>\n</ion-button>\n</ion-input>\n", styles: [":host{width:100%;display:flex;align-items:center}:host ion-button{color:var(--ion-color);height:100%;margin:0}:host ion-button::part(native){padding-inline-start:0;padding-inline-end:2px;margin:0;font-size:16px;font-weight:400}:host .fi{margin-right:5px}\n"], dependencies: [{ kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: CountryPlaceholder, name: "countryPlaceholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IonIntlTelInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IonIntlTelInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ion-intl-tel-input', standalone: true, providers: [
+            args: [{ selector: 'ion-intl-tel-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((() => IonIntlTelInputComponent)),
@@ -3158,10 +3092,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         IonText,
                         IonButton,
                         IonIcon,
-                        NgIf,
                         CountryPlaceholder
-                    ], template: "<ion-input\n    #numberInput\n    [(ngModel)]=\"phoneNumber\"\n    [autocomplete]=\"autocomplete\"\n    [required]=\"required\"\n    [disabled] = \"disabled\"\n    [attr.maxLength]=\"maxLength\"\n    type=\"tel\"\n    (ionBlur)=\"onIonNumberBlur()\"\n    (ionChange)=\"onIonNumberChange($event)\"\n    (ionFocus)=\"onIonNumberFocus()\"\n    (ionInput)=\"onIonNumberInput($event)\"\n    (keydown)=\"onNumberKeyDown($event)\"\n    (ngModelChange)=\"onNumberChange()\"\n    [labelPlacement]=\"inputLabelPlacement\"\n    placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\">\n    <div slot=\"label\">\n        <ion-text [color]=\"inputLabelColor\">{{inputLabel}}</ion-text>\n    </div>\n    <ion-button\n            slot=\"start\"\n            fill=\"clear\"\n            class=\"ion-intl-tel-input-btn\"\n            [disabled] = \"disabled\"\n            aria-label=\"country\"\n            (click)=\"openModal()\">\n        <span class=\"ion-intl-tel-input-flag fi fi-{{country.flagClass}}\"></span><span class=\"ion-intl-tel-input-code\" *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.dialCode}}</span>\n        <ion-icon style=\"font-size:14px;opacity:.5;\" name=\"caret-down\"></ion-icon>\n    </ion-button>\n</ion-input>\n", styles: [":host{width:100%;display:flex;align-items:center}:host ion-button{color:var(--ion-color);height:100%;margin:0}:host ion-button::part(native){padding-inline-start:0;padding-inline-end:2px;margin:0;font-size:16px;font-weight:400}:host .fi{margin-right:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Platform }, { type: IonIntlTelInputService }, { type: i1.ModalController }], propDecorators: { cssClass: [{
+                    ], template: "<ion-input\n  #numberInput\n  [(ngModel)]=\"phoneNumber\"\n  [autocomplete]=\"autocomplete()\"\n  [required]=\"required()\"\n  [disabled] = \"disabled\"\n  [attr.maxLength]=\"maxLength()\"\n  type=\"tel\"\n  (ionBlur)=\"onIonNumberBlur()\"\n  (ionChange)=\"onIonNumberChange($event)\"\n  (ionFocus)=\"onIonNumberFocus()\"\n  (ionInput)=\"onIonNumberInput($event)\"\n  (keydown)=\"onNumberKeyDown($event)\"\n  (ngModelChange)=\"onNumberChange()\"\n  [labelPlacement]=\"inputLabelPlacement()\"\n  placeholder=\"{{country | countryPlaceholder: inputPlaceholder():separateDialCode():fallbackPlaceholder():usePatternPlaceholder()}}\">\n  <div slot=\"label\">\n    <ion-text [color]=\"inputLabelColor()\">{{inputLabel()}}</ion-text>\n  </div>\n  <ion-button\n    slot=\"start\"\n    fill=\"clear\"\n    class=\"ion-intl-tel-input-btn\"\n    [disabled] = \"disabled\"\n    aria-label=\"country\"\n    (click)=\"openModal()\">\n    <span class=\"ion-intl-tel-input-flag fi fi-{{country.flagClass}}\"></span>@if (separateDialCode()) {\n    <span class=\"ion-intl-tel-input-code\">{{dialCodePrefix()}}{{country.dialCode}}</span>\n  }\n  <ion-icon style=\"font-size:14px;opacity:.5;\" name=\"caret-down\"></ion-icon>\n</ion-button>\n</ion-input>\n", styles: [":host{width:100%;display:flex;align-items:center}:host ion-button{color:var(--ion-color);height:100%;margin:0}:host ion-button::part(native){padding-inline-start:0;padding-inline-end:2px;margin:0;font-size:16px;font-weight:400}:host .fi{margin-right:5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cssClass: [{
                 type: HostBinding,
                 args: ['class.ion-intl-tel-input']
             }], isIos: [{
@@ -3179,81 +3112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
             }], isEnabled: [{
                 type: HostBinding,
                 args: ['class.ion-intl-tel-input-is-enabled']
-            }, {
-                type: Input,
-                args: ['isEnabled']
-            }], autocomplete: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], defaultCountryiso: [{
-                type: Input
-            }], dialCodePrefix: [{
-                type: Input
-            }], enableAutoCountrySelect: [{
-                type: Input
-            }], enablePlaceholder: [{
-                type: Input
-            }], fallbackPlaceholder: [{
-                type: Input
-            }], inputPlaceholder: [{
-                type: Input
-            }], inputLabel: [{
-                type: Input
-            }], inputLabelColor: [{
-                type: Input
-            }], inputLabelPlacement: [{
-                type: Input
-            }], usePatternPlaceholder: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], modalTitle: [{
-                type: Input
-            }], modalCssClass: [{
-                type: Input
-            }], modalSearchPlaceholder: [{
-                type: Input
-            }], modalCloseText: [{
-                type: Input
-            }], modalCloseButtonSlot: [{
-                type: Input
-            }], modalCanSearch: [{
-                type: Input
-            }], modalShouldBackdropClose: [{
-                type: Input
-            }], modalShouldFocusSearchbar: [{
-                type: Input
-            }], modalSearchFailText: [{
-                type: Input
-            }], onlyCountries: [{
-                type: Input
-            }], preferredCountries: [{
-                type: Input
-            }], selectFirstCountry: [{
-                type: Input
-            }], separateDialCode: [{
-                type: Input
-            }], numberChange: [{
-                type: Output
-            }], numberBlur: [{
-                type: Output
-            }], numberFocus: [{
-                type: Output
-            }], numberInput: [{
-                type: Output
-            }], codeChange: [{
-                type: Output
-            }], codeOpen: [{
-                type: Output
-            }], codeClose: [{
-                type: Output
-            }], codeSelect: [{
-                type: Output
-            }], numberInputEl: [{
-                type: ViewChild,
-                args: ['numberInput', { static: false }]
-            }] } });
+            }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], defaultCountryiso: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountryiso", required: false }] }], dialCodePrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialCodePrefix", required: false }] }], enableAutoCountrySelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAutoCountrySelect", required: false }] }], enablePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePlaceholder", required: false }] }], fallbackPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackPlaceholder", required: false }] }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], inputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabel", required: false }] }], inputLabelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabelColor", required: false }] }], inputLabelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabelPlacement", required: false }] }], usePatternPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "usePatternPlaceholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], modalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalTitle", required: false }] }], modalCssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalCssClass", required: false }] }], modalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalSearchPlaceholder", required: false }] }], modalCloseText: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalCloseText", required: false }] }], modalCloseButtonSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalCloseButtonSlot", required: false }] }], modalCanSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalCanSearch", required: false }] }], modalShouldBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalShouldBackdropClose", required: false }] }], modalShouldFocusSearchbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalShouldFocusSearchbar", required: false }] }], modalSearchFailText: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalSearchFailText", required: false }] }], onlyCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyCountries", required: false }] }], preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }], selectFirstCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectFirstCountry", required: false }] }], separateDialCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "separateDialCode", required: false }] }], numberChange: [{ type: i0.Output, args: ["numberChange"] }], numberBlur: [{ type: i0.Output, args: ["numberBlur"] }], numberFocus: [{ type: i0.Output, args: ["numberFocus"] }], numberInput: [{ type: i0.Output, args: ["numberInput"] }], codeChange: [{ type: i0.Output, args: ["codeChange"] }], codeOpen: [{ type: i0.Output, args: ["codeOpen"] }], codeClose: [{ type: i0.Output, args: ["codeClose"] }], codeSelect: [{ type: i0.Output, args: ["codeSelect"] }], numberInputEl: [{ type: i0.ViewChild, args: ['numberInput', { isSignal: true }] }] } });
 
 /*
  * Public API Surface of ion-intl-tel-input