@crodriguezdominguez/ion-intl-tel-input 2.1.1 → 2.2.0

package/{fesm2020 → fesm2022}/crodriguezdominguez-ion-intl-tel-input.mjs

@@ -51,16 +51,16 @@ class IonIntlTelInputValidatorDirective {
     validate(control) {
         return IonIntlTelInputValidators.phone(control);
     }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: IonIntlTelInputValidatorDirective, selector: "[ionIntlTelInputValid]", providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: IonIntlTelInputValidatorDirective,
+                multi: true,
+            },
+        ], ngImport: i0 });
 }
-/** @nocollapse */ IonIntlTelInputValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ IonIntlTelInputValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: IonIntlTelInputValidatorDirective, selector: "[ionIntlTelInputValid]", providers: [
-        {
-            provide: NG_VALIDATORS,
-            useExisting: IonIntlTelInputValidatorDirective,
-            multi: true,
-        },
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line: directive-selector
@@ -2339,16 +2339,15 @@ const countries = [
 ];
 
 class IonIntlTelInputService {
-    constructor() {
-        this.countryList = countries;
-    }
+    countryList = countries;
+    constructor() { }
     getListOfCountries() {
         return this.countryList;
     }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputService, providedIn: 'root' });
 }
-/** @nocollapse */ IonIntlTelInputService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ IonIntlTelInputService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2366,10 +2365,22 @@ 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;
-        this.closeButtonText = 'Close';
-        this.closeButtonSlot = 'end';
     }
     ngOnInit() {
         this.allCountries = this.countries;
@@ -2401,10 +2412,10 @@ class IonIntTelCodeComponent {
     closeModal() {
         this.modalCtrl.dismiss(null);
     }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntTelCodeComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: IonIntTelCodeComponent, 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\" placeholder=\"{{searchPlaceholder}}\" [debounce]=\"400\"\n                 (keyup.enter)=\"$event.target.blur()\" (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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: i1.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: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.RadioValueAccessor, selector: "ion-radio" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
-/** @nocollapse */ IonIntTelCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntTelCodeComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IonIntTelCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IonIntTelCodeComponent, 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\" placeholder=\"{{searchPlaceholder}}\" [debounce]=\"400\"\n                 (keyup.enter)=\"$event.target.blur()\" (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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonRadio, selector: "ion-radio", inputs: ["color", "disabled", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.RadioValueAccessor, selector: "ion-radio" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntTelCodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntTelCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ion-intl-tel-code', 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\" placeholder=\"{{searchPlaceholder}}\" [debounce]=\"400\"\n                 (keyup.enter)=\"$event.target.blur()\" (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: function () { return [{ type: i1.ModalController }]; }, propDecorators: { country: [{
@@ -2458,10 +2469,10 @@ class CountryPlaceholder {
             return fallbackPlaceholder;
         }
     }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CountryPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    /** @nocollapse */ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.9", ngImport: i0, type: CountryPlaceholder, name: "countryPlaceholder" });
 }
-/** @nocollapse */ CountryPlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CountryPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ CountryPlaceholder.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CountryPlaceholder, name: "countryPlaceholder" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CountryPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CountryPlaceholder, decorators: [{
             type: Pipe,
             args: [{ name: 'countryPlaceholder' }]
         }] });
@@ -2469,324 +2480,279 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 /**
  * @ignore
  */
-/**
- * @author Azzam Asghar <azzam.asghar@interstellus.com>
- * @author Steve Drew <sdrew@waitwell.ca>
- */
 class IonIntlTelInputComponent {
+    el;
+    platform;
+    ionIntlTelInputService;
+    modalCtrl;
+    cssClass = true;
+    isIos;
+    isMD;
+    hasFocus;
     get hasValueCssClass() {
         return this.hasValue();
     }
     get isEnabled() {
         return !this.disabled;
     }
+    /**
+     * autocomplete, set to 'tel' if needed
+     *
+     * @default 'off'
+     * @memberof IonIntlTelInputComponent
+     */
+    autocomplete = 'off';
+    /**
+     * required, passed onto ion-input so we can be accessiblity compliant
+     *
+     * @default false
+     * @memberof IonIntlTelInputComponent
+     */
+    required = false;
+    /**
+     * Iso Code of default selected Country.
+     * See more on.
+     *
+     * @default ''
+     * @memberof IonIntlTelInputComponent
+     */
+    defaultCountryiso = '';
+    /**
+     * Determines whether to use `00` or `+` as dial code prefix.
+     * Available attributes are '+' | '00'.
+     * See more on.
+     *
+     * @default +
+     * @memberof IonIntlTelInputComponent
+     */
+    dialCodePrefix = '+';
+    /**
+     * Determines whether to select automatic country based on user input.
+     * See more on.
+     *
+     * @default true
+     * @memberof IonIntlTelInputComponent
+     */
+    enableAutoCountrySelect = true;
+    /**
+     * Determines whether an example number will be shown as a placeholder in input.
+     * See more on.
+     *
+     * @default true
+     * @memberof IonIntlTelInputComponent
+     */
+    enablePlaceholder = true;
+    /**
+     * A fallaback placeholder to be used if no example number is found for a country.
+     * See more on.
+     *
+     * @default ''
+     * @memberof IonIntlTelInputComponent
+     */
+    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.
+     * See more on.
+     *
+     * @default ''
+     * @memberof IonIntlTelInputComponent
+     */
+    inputPlaceholder = '';
+    inputLabel = '';
+    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.
+     *
+     * @default true
+     * @memberof IonIntlTelInputComponent
+     */
+    usePatternPlaceholder = true;
+    /**
+     * Maximum Length for input.
+     * See more on.
+     *
+     * @default '15'
+     * @memberof IonIntlTelInputComponent
+     */
+    maxLength = '15';
+    /**
+     * Title of modal opened to select country dial code.
+     * See more on.
+     *
+     * @default 'Select Country'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalTitle = 'Select Country';
+    /**
+     * CSS class to attach to dial code selectionmodal.
+     * See more on.
+     *
+     * @default 'ion-intl-tel-modal'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalCssClass = 'ion-intl-tel-modal';
+    /**
+     * Placeholder for input in dial code selection modal.
+     * See more on.
+     *
+     * @default 'Enter country name'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalSearchPlaceholder = 'Enter country name';
+    /**
+     * Text for close button in dial code selection modal.
+     * See more on.
+     *
+     * @default 'Close'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalCloseText = 'Close';
+    /**
+     * Slot for close button in dial code selection modal. [Ionic slots](https://ionicframework.com/docs/api/item) are supported
+     * See more on.
+     *
+     * @default 'end'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalCloseButtonSlot = 'end';
+    /**
+     * Determines whether dial code selection modal should be searchable or not.
+     * See more on.
+     *
+     * @default 'true'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalCanSearch = true;
+    /**
+     * Determines whether dial code selection modal is closed on backdrop click.
+     * See more on.
+     *
+     * @default 'true'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalShouldBackdropClose = true;
+    /**
+     * Determines whether input should be focused when dial code selection modal is opened.
+     * See more on.
+     *
+     * @default 'true'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalShouldFocusSearchbar = true;
+    /**
+     * Message to show when no countries are found for search in dial code selection modal.
+     * See more on.
+     *
+     * @default 'true'
+     * @memberof IonIntlTelInputComponent
+     */
+    modalSearchFailText = 'No countries found';
+    /**
+     * 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.
+     * See more on.
+     *
+     * @default null
+     * @memberof IonIntlTelInputComponent
+     */
+    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.
+     * See more on.
+     *
+     * @default null
+     * @memberof IonIntlTelInputComponent
+     */
+    preferredCountries = [];
+    /**
+     * Determines whether first country should be selected in dial code select or not.
+     * See more on.
+     *
+     * @default true
+     * @memberof IonIntlTelInputComponent
+     */
+    selectFirstCountry = true;
+    /**
+     * Determines whether to visually separate dialcode into the drop down element.
+     * See more on.
+     *
+     * @default true
+     * @memberof IonIntlTelInputComponent
+     */
+    separateDialCode = true;
+    /**
+     * Fires when the Phone number Input is changed.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    numberChange = new EventEmitter();
+    /**
+     * Fires when the Phone number Input is blurred.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    numberBlur = new EventEmitter();
+    /**
+     * Fires when the Phone number Input is focused.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    numberFocus = new EventEmitter();
+    /**
+     * Fires when the user is typing in Phone number Input.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    numberInput = new EventEmitter();
+    /**
+     * Fires when the dial code selection is changed.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    codeChange = new EventEmitter();
+    /**
+     * Fires when the dial code selection modal is opened.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    codeOpen = new EventEmitter();
+    /**
+     * Fires when the dial code selection modal is closed.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    codeClose = new EventEmitter();
+    /**
+     * Fires when a dial code is selected in dial code selection modal.
+     * See more on.
+     *
+     * @memberof IonIntlTelInputComponent
+     */
+    codeSelect = new EventEmitter();
+    numberInputEl;
+    // tslint:disable-next-line: variable-name
+    _value = null;
+    country;
+    phoneNumber = '';
+    countries = [];
+    disabled = false;
+    onTouched = () => { };
+    propagateChange = (_) => { };
     constructor(el, platform, ionIntlTelInputService, modalCtrl) {
         this.el = el;
         this.platform = platform;
         this.ionIntlTelInputService = ionIntlTelInputService;
         this.modalCtrl = modalCtrl;
-        this.cssClass = true;
-        /**
-         * autocomplete, set to 'tel' if needed
-         *
-         * @default 'off'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.autocomplete = 'off';
-        /**
-         * required, passed onto ion-input so we can be accessiblity compliant
-         *
-         * @default false
-         * @memberof IonIntlTelInputComponent
-         */
-        this.required = false;
-        /**
-         * Iso Code of default selected Country.
-         * See more on.
-         *
-         * @default ''
-         * @memberof IonIntlTelInputComponent
-         */
-        this.defaultCountryiso = '';
-        /**
-         * Determines whether to use `00` or `+` as dial code prefix.
-         * Available attributes are '+' | '00'.
-         * See more on.
-         *
-         * @default +
-         * @memberof IonIntlTelInputComponent
-         */
-        this.dialCodePrefix = '+';
-        /**
-         * Determines whether to select automatic country based on user input.
-         * See more on.
-         *
-         * @default true
-         * @memberof IonIntlTelInputComponent
-         */
-        this.enableAutoCountrySelect = true;
-        /**
-         * Determines whether an example number will be shown as a placeholder in input.
-         * See more on.
-         *
-         * @default true
-         * @memberof IonIntlTelInputComponent
-         */
-        this.enablePlaceholder = true;
-        /**
-         * A fallaback placeholder to be used if no example number is found for a country.
-         * See more on.
-         *
-         * @default ''
-         * @memberof IonIntlTelInputComponent
-         */
-        this.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.
-         * See more on.
-         *
-         * @default ''
-         * @memberof IonIntlTelInputComponent
-         */
-        this.inputPlaceholder = '';
-        this.inputLabel = '';
-        this.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.
-         *
-         * @default true
-         * @memberof IonIntlTelInputComponent
-         */
-        this.usePatternPlaceholder = true;
-        /**
-         * Maximum Length for input.
-         * See more on.
-         *
-         * @default '15'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.maxLength = '15';
-        /**
-         * Title of modal opened to select country dial code.
-         * See more on.
-         *
-         * @default 'Select Country'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalTitle = 'Select Country';
-        /**
-         * CSS class to attach to dial code selectionmodal.
-         * See more on.
-         *
-         * @default 'ion-intl-tel-modal'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalCssClass = 'ion-intl-tel-modal';
-        /**
-         * Placeholder for input in dial code selection modal.
-         * See more on.
-         *
-         * @default 'Enter country name'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalSearchPlaceholder = 'Enter country name';
-        /**
-         * Text for close button in dial code selection modal.
-         * See more on.
-         *
-         * @default 'Close'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalCloseText = 'Close';
-        /**
-         * Slot for close button in dial code selection modal. [Ionic slots](https://ionicframework.com/docs/api/item) are supported
-         * See more on.
-         *
-         * @default 'end'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalCloseButtonSlot = 'end';
-        /**
-         * Determines whether dial code selection modal should be searchable or not.
-         * See more on.
-         *
-         * @default 'true'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalCanSearch = true;
-        /**
-         * Determines whether dial code selection modal is closed on backdrop click.
-         * See more on.
-         *
-         * @default 'true'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalShouldBackdropClose = true;
-        /**
-         * Determines whether input should be focused when dial code selection modal is opened.
-         * See more on.
-         *
-         * @default 'true'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalShouldFocusSearchbar = true;
-        /**
-         * Message to show when no countries are found for search in dial code selection modal.
-         * See more on.
-         *
-         * @default 'true'
-         * @memberof IonIntlTelInputComponent
-         */
-        this.modalSearchFailText = 'No countries found';
-        /**
-         * 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.
-         * See more on.
-         *
-         * @default null
-         * @memberof IonIntlTelInputComponent
-         */
-        this.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.
-         * See more on.
-         *
-         * @default null
-         * @memberof IonIntlTelInputComponent
-         */
-        this.preferredCountries = [];
-        /**
-         * Determines whether first country should be selected in dial code select or not.
-         * See more on.
-         *
-         * @default true
-         * @memberof IonIntlTelInputComponent
-         */
-        this.selectFirstCountry = true;
-        /**
-         * Determines whether to visually separate dialcode into the drop down element.
-         * See more on.
-         *
-         * @default true
-         * @memberof IonIntlTelInputComponent
-         */
-        this.separateDialCode = true;
-        /**
-         * Fires when the Phone number Input is changed.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.numberChange = new EventEmitter();
-        /**
-         * Fires when the Phone number Input is blurred.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.numberBlur = new EventEmitter();
-        /**
-         * Fires when the Phone number Input is focused.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.numberFocus = new EventEmitter();
-        /**
-         * Fires when the user is typing in Phone number Input.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.numberInput = new EventEmitter();
-        /**
-         * Fires when the dial code selection is changed.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.codeChange = new EventEmitter();
-        /**
-         * Fires when the dial code selection modal is opened.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.codeOpen = new EventEmitter();
-        /**
-         * Fires when the dial code selection modal is closed.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.codeClose = new EventEmitter();
-        /**
-         * Fires when a dial code is selected in dial code selection modal.
-         * See more on.
-         *
-         * @memberof IonIntlTelInputComponent
-         */
-        this.codeSelect = new EventEmitter();
-        // tslint:disable-next-line: variable-name
-        this._value = null;
-        this.phoneNumber = '';
-        this.countries = [];
-        this.disabled = false;
-        this.onTouched = () => { };
-        this.propagateChange = (_) => { };
-        this.startsWith = (input, search) => {
-            return input.substr(0, search.length) === search;
-        };
-        this.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)}`);
-                }
-            }
-            return classes;
-        };
-        this.setClasses = (element, classes) => {
-            const classList = element.classList;
-            [
-                'ion-valid',
-                'ion-invalid',
-                'ion-touched',
-                'ion-untouched',
-                'ion-dirty',
-                'ion-pristine',
-            ].forEach((c) => classList.remove(c));
-            classes.forEach((c) => classList.add(c));
-        };
-        this.setIonicClasses = (element) => {
-            raf(() => {
-                const input = element.nativeElement;
-                const classes = this.getClasses(input);
-                this.setClasses(input, classes);
-                const item = input.closest('ion-item');
-                if (item) {
-                    this.setClasses(item, classes);
-                }
-            });
-        };
-        this.setItemClass = (element, className, addClass) => {
-            const input = element.nativeElement;
-            const item = input.closest('ion-item');
-            if (item) {
-                const classList = item.classList;
-                if (addClass) {
-                    classList.add(className);
-                }
-                else {
-                    classList.remove(className);
-                }
-            }
-        };
     }
     get value() {
         return this._value;
@@ -3095,16 +3061,66 @@ class IonIntlTelInputComponent {
         }
         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)}`);
+            }
+        }
+        return classes;
+    };
+    setClasses = (element, classes) => {
+        const classList = element.classList;
+        [
+            'ion-valid',
+            'ion-invalid',
+            'ion-touched',
+            'ion-untouched',
+            'ion-dirty',
+            'ion-pristine',
+        ].forEach((c) => classList.remove(c));
+        classes.forEach((c) => classList.add(c));
+    };
+    setIonicClasses = (element) => {
+        raf(() => {
+            const input = element.nativeElement;
+            const classes = this.getClasses(input);
+            this.setClasses(input, classes);
+            const item = input.closest('ion-item');
+            if (item) {
+                this.setClasses(item, classes);
+            }
+        });
+    };
+    setItemClass = (element, className, addClass) => {
+        const input = element.nativeElement;
+        const item = input.closest('ion-item');
+        if (item) {
+            const classList = item.classList;
+            if (addClass) {
+                classList.add(className);
+            }
+            else {
+                classList.remove(className);
+            }
+        }
+    };
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", 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: "16.2.9", type: IonIntlTelInputComponent, 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", 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => IonIntlTelInputComponent)),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "numberInputEl", first: true, predicate: ["numberInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-button\n        fill=\"clear\"\n        class=\"ion-intl-tel-input-btn\"\n        [disabled] = \"disabled\"\n        aria-label=\"country\"\n        (click)=\"openModal()\"\n>\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<div class=\"ion-intl-tel-input-number\">\n  <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          placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\" >\n  </ion-input>\n</div>\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.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: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "pipe", type: CountryPlaceholder, name: "countryPlaceholder" }] });
 }
-/** @nocollapse */ IonIntlTelInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputComponent, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: IonIntlTelInputService }, { token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IonIntlTelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IonIntlTelInputComponent, 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", 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: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef((() => IonIntlTelInputComponent)),
-            multi: true,
-        },
-    ], viewQueries: [{ propertyName: "numberInputEl", first: true, predicate: ["numberInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ion-intl-tel-input-number\">\n  <ion-input\n          #numberInput\n          [(ngModel)]=\"phoneNumber\"\n          [autocomplete]=\"autocomplete\"\n          [required]=\"required\"\n          [disabled] = \"disabled\"\n          [attr.maxLength]=\"maxLength\"\n          type=\"tel\"\n          [labelPlacement]=\"inputLabelPlacement\"\n          (ionBlur)=\"onIonNumberBlur()\"\n          (ionChange)=\"onIonNumberChange($event)\"\n          (ionFocus)=\"onIonNumberFocus()\"\n          (ionInput)=\"onIonNumberInput($event)\"\n          (keydown)=\"onNumberKeyDown($event)\"\n          (ngModelChange)=\"onNumberChange()\"\n          placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\" >\n    <div slot=\"label\">\n      {{inputLabel}}\n      &nbsp;&nbsp;\n      <ion-button (click)=\"openModal()\"\n              fill=\"clear\"\n              class=\"ion-intl-tel-input-btn\"\n              [disabled] = \"disabled\"\n              aria-label=\"country\">\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    </div>\n  </ion-input>\n</div>\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.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: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "pipe", type: CountryPlaceholder, name: "countryPlaceholder" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ion-intl-tel-input', providers: [
                         {
@@ -3112,7 +3128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: forwardRef((() => IonIntlTelInputComponent)),
                             multi: true,
                         },
-                    ], template: "<div class=\"ion-intl-tel-input-number\">\n  <ion-input\n          #numberInput\n          [(ngModel)]=\"phoneNumber\"\n          [autocomplete]=\"autocomplete\"\n          [required]=\"required\"\n          [disabled] = \"disabled\"\n          [attr.maxLength]=\"maxLength\"\n          type=\"tel\"\n          [labelPlacement]=\"inputLabelPlacement\"\n          (ionBlur)=\"onIonNumberBlur()\"\n          (ionChange)=\"onIonNumberChange($event)\"\n          (ionFocus)=\"onIonNumberFocus()\"\n          (ionInput)=\"onIonNumberInput($event)\"\n          (keydown)=\"onNumberKeyDown($event)\"\n          (ngModelChange)=\"onNumberChange()\"\n          placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\" >\n    <div slot=\"label\">\n      {{inputLabel}}\n      &nbsp;&nbsp;\n      <ion-button (click)=\"openModal()\"\n              fill=\"clear\"\n              class=\"ion-intl-tel-input-btn\"\n              [disabled] = \"disabled\"\n              aria-label=\"country\">\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    </div>\n  </ion-input>\n</div>\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"] }]
+                    ], template: "<ion-button\n        fill=\"clear\"\n        class=\"ion-intl-tel-input-btn\"\n        [disabled] = \"disabled\"\n        aria-label=\"country\"\n        (click)=\"openModal()\"\n>\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<div class=\"ion-intl-tel-input-number\">\n  <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          placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder:usePatternPlaceholder}}\" >\n  </ion-input>\n</div>\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: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: IonIntlTelInputService }, { type: i1.ModalController }]; }, propDecorators: { cssClass: [{
                 type: HostBinding,
                 args: ['class.ion-intl-tel-input']
@@ -3206,24 +3222,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class IonIntlTelInputModule {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputModule, declarations: [CountryPlaceholder,
+            IonIntlTelInputValidatorDirective,
+            IonIntlTelInputComponent,
+            IonIntTelCodeComponent], imports: [CommonModule,
+            FormsModule,
+            IonicModule,
+            ScrollingModule], exports: [IonIntlTelInputComponent,
+            IonIntlTelInputValidatorDirective,
+            IonIntTelCodeComponent] });
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputModule, providers: [
+            IonIntlTelInputService
+        ], imports: [CommonModule,
+            FormsModule,
+            IonicModule,
+            ScrollingModule] });
 }
-/** @nocollapse */ IonIntlTelInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ IonIntlTelInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputModule, declarations: [CountryPlaceholder,
-        IonIntlTelInputValidatorDirective,
-        IonIntlTelInputComponent,
-        IonIntTelCodeComponent], imports: [CommonModule,
-        FormsModule,
-        IonicModule,
-        ScrollingModule], exports: [IonIntlTelInputComponent,
-        IonIntlTelInputValidatorDirective,
-        IonIntTelCodeComponent] });
-/** @nocollapse */ IonIntlTelInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputModule, providers: [
-        IonIntlTelInputService
-    ], imports: [CommonModule,
-        FormsModule,
-        IonicModule,
-        ScrollingModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IonIntlTelInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IonIntlTelInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [