@intl-tel-input/angular 29.2.3 → 29.4.0

package/README.md

@@ -1,6 +1,6 @@
 # Angular component for intl-tel-input
 
-For entering, formatting, and validating international telephone numbers.
+For entering, formatting, and validating international telephone numbers. Requires Angular 17 or later.
 
 [Explore docs »](https://intl-tel-input.com/docs/angular-component)
 
@@ -14,6 +14,8 @@ For entering, formatting, and validating international telephone numbers.
 
 Check out the [website](https://intl-tel-input.com), where you can find [a full set of docs](https://intl-tel-input.com/docs/angular-component), a [live playground](https://intl-tel-input.com/playground/) where you can try out all of the options, as well as plenty of [examples](https://intl-tel-input.com/examples/angular-component/validation) of different setups.
 
+Browser support: same as the core library — see the [FAQ](https://intl-tel-input.com/docs/faq#which-browsers-are-supported) for minimum versions.
+
 ## Running the demos locally
 
 1. Initialise the submodules: `git submodule update --init --recursive`

package/dist/IntlTelInput.d.ts

@@ -33,6 +33,7 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     excludeCountries?: AllOptions["excludeCountries"];
     matchDropdownWidth?: AllOptions["matchDropdownWidth"];
     formatAsYouType?: AllOptions["formatAsYouType"];
+    fullscreenParent?: AllOptions["fullscreenParent"];
     hiddenInputs?: AllOptions["hiddenInputs"];
     uiTranslations?: AllOptions["uiTranslations"];
     initialCountry?: AllOptions["initialCountry"];
@@ -107,6 +108,6 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     validate(_control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IntlTelInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInput, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "countrySelectorMode": { "alias": "countrySelectorMode"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "classNames": { "alias": "classNames"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryNameOverrides": { "alias": "countryNameOverrides"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownParent": { "alias": "dropdownParent"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "matchDropdownWidth": { "alias": "matchDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "hiddenInputs": { "alias": "hiddenInputs"; "required": false; }; "uiTranslations": { "alias": "uiTranslations"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "initialCountryLookup": { "alias": "initialCountryLookup"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "numberDisplayFormat": { "alias": "numberDisplayFormat"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "placeholderNumberPolicy": { "alias": "placeholderNumberPolicy"; "required": false; }; "placeholderNumberType": { "alias": "placeholderNumberType"; "required": false; }; "searchInputClass": { "alias": "searchInputClass"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "showFlags": { "alias": "showFlags"; "required": false; }; "strictMode": { "alias": "strictMode"; "required": false; }; "strictRejectAnimation": { "alias": "strictRejectAnimation"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "openCountrySelector": "openCountrySelector"; "closeCountrySelector": "closeCountrySelector"; "strictReject": "strictReject"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInput, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "countrySelectorMode": { "alias": "countrySelectorMode"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "classNames": { "alias": "classNames"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryNameOverrides": { "alias": "countryNameOverrides"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownParent": { "alias": "dropdownParent"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "matchDropdownWidth": { "alias": "matchDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "fullscreenParent": { "alias": "fullscreenParent"; "required": false; }; "hiddenInputs": { "alias": "hiddenInputs"; "required": false; }; "uiTranslations": { "alias": "uiTranslations"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "initialCountryLookup": { "alias": "initialCountryLookup"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "numberDisplayFormat": { "alias": "numberDisplayFormat"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "placeholderNumberPolicy": { "alias": "placeholderNumberPolicy"; "required": false; }; "placeholderNumberType": { "alias": "placeholderNumberType"; "required": false; }; "searchInputClass": { "alias": "searchInputClass"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "showFlags": { "alias": "showFlags"; "required": false; }; "strictMode": { "alias": "strictMode"; "required": false; }; "strictRejectAnimation": { "alias": "strictRejectAnimation"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "openCountrySelector": "openCountrySelector"; "closeCountrySelector": "closeCountrySelector"; "strictReject": "strictReject"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
 }
 export default IntlTelInput;

package/dist/IntlTelInput.js

@@ -1977,7 +1977,7 @@ var defaults = {
   customPlaceholder: null,
   //* Always show the dropdown
   dropdownAlwaysOpen: false,
-  //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup.
+  //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup (see fullscreenParent).
   dropdownParent: null,
   //* Don't display these countries.
   excludeCountries: null,
@@ -1985,6 +1985,8 @@ var defaults = {
   matchDropdownWidth: true,
   //* Format the number as the user types
   formatAsYouType: true,
+  //* Optional DOM element to append the fullscreen popup to, instead of document.body (e.g. a modal <dialog>, where a body-mounted popup would be unreachable). Only consulted in fullscreen rendering (see dropdownParent for the dropdown). Null means document.body, which is resolved on open rather than here, as document may not exist yet (e.g. SSR).
+  fullscreenParent: null,
   //* Inject hidden inputs with the names returned from this function, and on submit, populate them with the full number and selected country iso2.
   hiddenInputs: null,
   //* Translations for the core library UI strings e.g. search input placeholder, country names.
@@ -2168,8 +2170,9 @@ var validateOptions = (customOptions) => {
         validatedOptions[key] = value;
         break;
       case "dropdownParent":
+      case "fullscreenParent":
         if (value !== null && !isElLike(value)) {
-          warnOption("dropdownParent", "an HTMLElement or null", value);
+          warnOption(key, "an HTMLElement or null", value);
           break;
         }
         validatedOptions[key] = value;
@@ -2733,6 +2736,9 @@ var UI = class {
       },
       this.#countrySelectorEl
     );
+    if (!countrySearch) {
+      this.#countryListEl.setAttribute("tabindex", "0");
+    }
     this.#appendListItems();
     if (countrySearch) {
       this.#updateSearchResultsA11yText();
@@ -2753,11 +2759,12 @@ var UI = class {
       this.#countryContainerEl.appendChild(this.#countrySelectorEl);
     }
   }
-  //* Resolve the DOM element to attach the country selector to. Fullscreen always uses document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
+  //* Resolve the DOM element to attach the country selector to. Fullscreen is always detached: it uses the consumer-supplied fullscreenParent, falling back to document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
+  //* NOTE: these are deliberately two separate options. For the dropdown, setting a parent switches it from inline to detached rendering (pos:fixed, positioned against the input), whereas the fullscreen popup is detached regardless, so its parent only relocates it. Sharing one option would force a detached dropdown on anyone who only needs to move the fullscreen popup e.g. into a modal <dialog> (issue #2199).
   #getDetachedParent() {
-    const { countrySelectorMode, dropdownParent } = this.#options;
+    const { countrySelectorMode, dropdownParent, fullscreenParent } = this.#options;
     if (countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN) {
-      return document.body;
+      return fullscreenParent ?? document.body;
     }
     if (countrySelectorMode === COUNTRY_SELECTOR_MODE.DROPDOWN) {
       return dropdownParent;
@@ -2883,7 +2890,6 @@ var UI = class {
       const listItem = createEl("li", {
         id: `iti-${this.#id}__item-${c.iso2}`,
         class: liClass,
-        tabindex: "-1",
         role: "option",
         [ARIA.SELECTED]: "false"
       });
@@ -3075,18 +3081,20 @@ var UI = class {
       container.scrollTop = offsetTop - containerRect.height + elementRect.height;
     }
   }
+  //* The element that holds focus while the country selector is open: the search input, or (when countrySearch is disabled) the country list itself.
+  #getOpenFocusEl() {
+    return this.#options.countrySearch ? this.#searchInputEl : this.#countryListEl;
+  }
   //* Remove highlighting from the previous list item and highlight the new one.
   #highlightListItem(listItem, doScroll = true) {
     this.#highlightedListItemEl?.classList.remove(CLASSES.HIGHLIGHT);
     if (listItem) {
       listItem.classList.add(CLASSES.HIGHLIGHT);
-      if (this.#options.countrySearch) {
-        const activeDescendant = listItem.getAttribute("id") || "";
-        this.#searchInputEl.setAttribute(
-          ARIA.ACTIVE_DESCENDANT,
-          activeDescendant
-        );
-      }
+      const activeDescendant = listItem.getAttribute("id") || "";
+      this.#getOpenFocusEl().setAttribute(
+        ARIA.ACTIVE_DESCENDANT,
+        activeDescendant
+      );
       if (doScroll) {
         this.#scrollCountryListToItem(listItem);
       }
@@ -3165,7 +3173,7 @@ var UI = class {
   //* Open the country selector: create a fresh AbortController, do the DOM work, and wire up all
   //* open-state listeners (which invoke the caller's onSelect / onClose callbacks).
   openCountrySelector(onSelect, onClose) {
-    const { countrySearch, dropdownAlwaysOpen } = this.#options;
+    const { dropdownAlwaysOpen } = this.#options;
     this.#countrySelectorAbortController = new AbortController();
     if (this.#options.countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN) {
       this.#ensureInlineDropdownSizeMeasured();
@@ -3188,10 +3196,11 @@ var UI = class {
     if (itemToHighlight) {
       this.#highlightListItem(itemToHighlight);
     }
-    if (countrySearch && !dropdownAlwaysOpen) {
-      this.#searchInputEl.focus();
+    if (!dropdownAlwaysOpen) {
+      this.#getOpenFocusEl().focus();
     }
     if (this.#options.countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN && this.#detachedCountrySelectorEl && window.visualViewport) {
+      this.#adjustFullscreenPopupToViewport();
       window.visualViewport.addEventListener(
         "resize",
         () => {
@@ -3308,6 +3317,20 @@ var UI = class {
     };
     this.#selectedCountryEl?.addEventListener("keydown", handleKeydown, { signal });
     this.#countrySelectorEl?.addEventListener("keydown", handleKeydown, { signal });
+    if (this.#detachedCountrySelectorEl) {
+      this.#countrySelectorEl?.addEventListener(
+        "keydown",
+        (e) => {
+          if (e.key === KEYS.TAB) {
+            e.preventDefault();
+            onEscape();
+            const focusEl = e.shiftKey ? this.#selectedCountryEl : this.telInputEl;
+            focusEl.focus();
+          }
+        },
+        { signal }
+      );
+    }
   }
   //* Wire up country search input listener: typing filters the list, the clear button resets it.
   #bindSearchInputListener(signal) {
@@ -3405,8 +3428,8 @@ var UI = class {
     this.#countrySelectorAbortController = null;
     this.#countrySelectorEl.classList.add(CLASSES.HIDE);
     this.#selectedCountryEl.setAttribute(ARIA.EXPANDED, "false");
+    this.#getOpenFocusEl().removeAttribute(ARIA.ACTIVE_DESCENDANT);
     if (countrySearch) {
-      this.#searchInputEl.removeAttribute(ARIA.ACTIVE_DESCENDANT);
       this.#searchInputEl.value = "";
       this.#applySearchFilter();
       if (this.#highlightedListItemEl) {
@@ -3419,6 +3442,7 @@ var UI = class {
       this.#detachedCountrySelectorEl.remove();
       this.#detachedCountrySelectorEl.style.top = "";
       this.#detachedCountrySelectorEl.style.bottom = "";
+      this.#detachedCountrySelectorEl.style.height = "";
       this.#detachedCountrySelectorEl.style.paddingLeft = "";
       this.#detachedCountrySelectorEl.style.paddingRight = "";
     } else {
@@ -3484,8 +3508,7 @@ var UI = class {
     if (!vv || !this.#detachedCountrySelectorEl) {
       return;
     }
-    const virtualKeyboardHeight = window.innerHeight - vv.height;
-    this.#detachedCountrySelectorEl.style.bottom = `${virtualKeyboardHeight}px`;
+    this.#detachedCountrySelectorEl.style.height = `${vv.height}px`;
   }
   // UI: Whether the country selector is currently open (visible).
   isCountrySelectorOpen() {
@@ -4955,7 +4978,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.2.3",
+    version: "29.4.0",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,
@@ -4969,7 +4992,6 @@ var intlTelInput_default = intlTelInput;
 import { Component, Input, ViewChild, ElementRef, Output, EventEmitter, forwardRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from "@angular/forms";
 import * as i0 from "@angular/core";
-var _c0 = ["inputRef"];
 var warnInputAttr = (prop) => {
   console.warn(`intl-tel-input: ignoring inputAttributes.${prop} - see docs for more info.`);
 };
@@ -4998,6 +5020,7 @@ var IntlTelInput = class _IntlTelInput {
   excludeCountries;
   matchDropdownWidth;
   formatAsYouType;
+  fullscreenParent;
   hiddenInputs;
   uiTranslations;
   initialCountry;
@@ -5070,6 +5093,7 @@ var IntlTelInput = class _IntlTelInput {
     if (this.readonly) {
       this.iti.setReadonly(this.readonly);
     }
+    this.lastEmittedCountry = this.iti.getSelectedCountry()?.iso2 ?? "";
     this.iti.promise.then(() => {
       if (!this.iti?.isActive()) {
         return;
@@ -5106,6 +5130,7 @@ var IntlTelInput = class _IntlTelInput {
       excludeCountries: this.excludeCountries,
       matchDropdownWidth: this.matchDropdownWidth,
       formatAsYouType: this.formatAsYouType,
+      fullscreenParent: this.fullscreenParent,
       hiddenInputs: this.hiddenInputs,
       uiTranslations: this.uiTranslations,
       initialCountry: this.initialCountry,
@@ -5288,18 +5313,8 @@ var IntlTelInput = class _IntlTelInput {
   registerOnValidatorChange(fn) {
     this.onValidatorChange = fn;
   }
-  static \u0275fac = function IntlTelInput_Factory(__ngFactoryType__) {
-    return new (__ngFactoryType__ || _IntlTelInput)();
-  };
-  static \u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent({ type: _IntlTelInput, selectors: [["intl-tel-input"]], viewQuery: function IntlTelInput_Query(rf, ctx) {
-    if (rf & 1) {
-      i0.\u0275\u0275viewQuery(_c0, 7);
-    }
-    if (rf & 2) {
-      let _t;
-      i0.\u0275\u0275queryRefresh(_t = i0.\u0275\u0275loadQuery()) && (ctx.inputRef = _t.first);
-    }
-  }, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", countrySelectorMode: "countrySelectorMode", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", classNames: "classNames", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryNameOverrides: "countryNameOverrides", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownParent: "dropdownParent", excludeCountries: "excludeCountries", matchDropdownWidth: "matchDropdownWidth", formatAsYouType: "formatAsYouType", hiddenInputs: "hiddenInputs", uiTranslations: "uiTranslations", initialCountry: "initialCountry", initialCountryLookup: "initialCountryLookup", loadUtils: "loadUtils", numberDisplayFormat: "numberDisplayFormat", onlyCountries: "onlyCountries", placeholderNumberPolicy: "placeholderNumberPolicy", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", strictRejectAnimation: "strictRejectAnimation" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", openCountrySelector: "openCountrySelector", closeCountrySelector: "closeCountrySelector", strictReject: "strictReject", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
+  static \u0275fac = i0.\u0275\u0275ngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: _IntlTelInput, deps: [], target: i0.\u0275\u0275FactoryTarget.Component });
+  static \u0275cmp = i0.\u0275\u0275ngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: _IntlTelInput, isStandalone: true, selector: "intl-tel-input", inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", countrySelectorMode: "countrySelectorMode", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", classNames: "classNames", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryNameOverrides: "countryNameOverrides", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownParent: "dropdownParent", excludeCountries: "excludeCountries", matchDropdownWidth: "matchDropdownWidth", formatAsYouType: "formatAsYouType", fullscreenParent: "fullscreenParent", hiddenInputs: "hiddenInputs", uiTranslations: "uiTranslations", initialCountry: "initialCountry", initialCountryLookup: "initialCountryLookup", loadUtils: "loadUtils", numberDisplayFormat: "numberDisplayFormat", onlyCountries: "onlyCountries", placeholderNumberPolicy: "placeholderNumberPolicy", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", strictRejectAnimation: "strictRejectAnimation" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", openCountrySelector: "openCountrySelector", closeCountrySelector: "closeCountrySelector", strictReject: "strictReject", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => _IntlTelInput),
@@ -5310,33 +5325,25 @@ var IntlTelInput = class _IntlTelInput {
       useExisting: forwardRef(() => _IntlTelInput),
       multi: true
     }
-  ]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "blur", "focus", "keydown", "keyup", "paste", "click"]], template: function IntlTelInput_Template(rf, ctx) {
-    if (rf & 1) {
-      i0.\u0275\u0275domElementStart(0, "input", 1, 0);
-      i0.\u0275\u0275domListener("blur", function IntlTelInput_Template_input_blur_0_listener($event) {
-        return ctx.handleBlur($event);
-      })("focus", function IntlTelInput_Template_input_focus_0_listener($event) {
-        return ctx.handleFocus($event);
-      })("keydown", function IntlTelInput_Template_input_keydown_0_listener($event) {
-        return ctx.handleKeyDown($event);
-      })("keyup", function IntlTelInput_Template_input_keyup_0_listener($event) {
-        return ctx.handleKeyUp($event);
-      })("paste", function IntlTelInput_Template_input_paste_0_listener($event) {
-        return ctx.handlePaste($event);
-      })("click", function IntlTelInput_Template_input_click_0_listener($event) {
-        return ctx.handleClick($event);
-      });
-      i0.\u0275\u0275domElementEnd();
-    }
-  }, encapsulation: 2 });
+  ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <input
+      type="tel"
+      #inputRef
+      (blur)="handleBlur($event)"
+      (focus)="handleFocus($event)"
+      (keydown)="handleKeyDown($event)"
+      (keyup)="handleKeyUp($event)"
+      (paste)="handlePaste($event)"
+      (click)="handleClick($event)"
+    />
+  `, isInline: true });
 };
-(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassMetadata(IntlTelInput, [{
-    type: Component,
-    args: [{
-      selector: "intl-tel-input",
-      standalone: true,
-      template: `
+i0.\u0275\u0275ngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: IntlTelInput, decorators: [{
+  type: Component,
+  args: [{
+    selector: "intl-tel-input",
+    standalone: true,
+    template: `
     <input
       type="tel"
       #inputRef
@@ -5348,123 +5355,121 @@ var IntlTelInput = class _IntlTelInput {
       (click)="handleClick($event)"
     />
   `,
-      providers: [
-        {
-          provide: NG_VALUE_ACCESSOR,
-          useExisting: forwardRef(() => IntlTelInput),
-          multi: true
-        },
-        {
-          provide: NG_VALIDATORS,
-          useExisting: forwardRef(() => IntlTelInput),
-          multi: true
-        }
-      ]
-    }]
-  }], null, { inputRef: [{
-    type: ViewChild,
-    args: ["inputRef", { static: true }]
-  }], initialValue: [{
-    type: Input
-  }], usePreciseValidation: [{
-    type: Input
-  }], inputAttributes: [{
-    type: Input
-  }], disabled: [{
-    type: Input
-  }], readonly: [{
-    type: Input
-  }], countrySelectorMode: [{
-    type: Input
-  }], allowedNumberTypes: [{
-    type: Input
-  }], allowNumberExtensions: [{
-    type: Input
-  }], allowPhonewords: [{
-    type: Input
-  }], classNames: [{
-    type: Input
-  }], containerClass: [{
-    type: Input
-  }], countryNameLocale: [{
-    type: Input
-  }], countryNameOverrides: [{
-    type: Input
-  }], countryOrder: [{
-    type: Input
-  }], countrySearch: [{
-    type: Input
-  }], customPlaceholder: [{
-    type: Input
-  }], dropdownAlwaysOpen: [{
-    type: Input
-  }], dropdownParent: [{
-    type: Input
-  }], excludeCountries: [{
-    type: Input
-  }], matchDropdownWidth: [{
-    type: Input
-  }], formatAsYouType: [{
-    type: Input
-  }], hiddenInputs: [{
-    type: Input
-  }], uiTranslations: [{
-    type: Input
-  }], initialCountry: [{
-    type: Input
-  }], initialCountryLookup: [{
-    type: Input
-  }], loadUtils: [{
-    type: Input
-  }], numberDisplayFormat: [{
-    type: Input
-  }], onlyCountries: [{
-    type: Input
-  }], placeholderNumberPolicy: [{
-    type: Input
-  }], placeholderNumberType: [{
-    type: Input
-  }], searchInputClass: [{
-    type: Input
-  }], separateDialCode: [{
-    type: Input
-  }], showFlags: [{
-    type: Input
-  }], strictMode: [{
-    type: Input
-  }], strictRejectAnimation: [{
-    type: Input
-  }], numberChange: [{
-    type: Output
-  }], countryChange: [{
-    type: Output
-  }], validityChange: [{
-    type: Output
-  }], errorCodeChange: [{
-    type: Output
-  }], openCountrySelector: [{
-    type: Output
-  }], closeCountrySelector: [{
-    type: Output
-  }], strictReject: [{
-    type: Output
-  }], blur: [{
-    type: Output
-  }], focus: [{
-    type: Output
-  }], keydown: [{
-    type: Output
-  }], keyup: [{
-    type: Output
-  }], paste: [{
-    type: Output
-  }], click: [{
-    type: Output
-  }] });
-})();
-(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInput, { className: "IntlTelInput", filePath: "IntlTelInput.ts", lineNumber: 71 });
-})();
+    providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => IntlTelInput),
+        multi: true
+      },
+      {
+        provide: NG_VALIDATORS,
+        useExisting: forwardRef(() => IntlTelInput),
+        multi: true
+      }
+    ]
+  }]
+}], propDecorators: { inputRef: [{
+  type: ViewChild,
+  args: ["inputRef", { static: true }]
+}], initialValue: [{
+  type: Input
+}], usePreciseValidation: [{
+  type: Input
+}], inputAttributes: [{
+  type: Input
+}], disabled: [{
+  type: Input
+}], readonly: [{
+  type: Input
+}], countrySelectorMode: [{
+  type: Input
+}], allowedNumberTypes: [{
+  type: Input
+}], allowNumberExtensions: [{
+  type: Input
+}], allowPhonewords: [{
+  type: Input
+}], classNames: [{
+  type: Input
+}], containerClass: [{
+  type: Input
+}], countryNameLocale: [{
+  type: Input
+}], countryNameOverrides: [{
+  type: Input
+}], countryOrder: [{
+  type: Input
+}], countrySearch: [{
+  type: Input
+}], customPlaceholder: [{
+  type: Input
+}], dropdownAlwaysOpen: [{
+  type: Input
+}], dropdownParent: [{
+  type: Input
+}], excludeCountries: [{
+  type: Input
+}], matchDropdownWidth: [{
+  type: Input
+}], formatAsYouType: [{
+  type: Input
+}], fullscreenParent: [{
+  type: Input
+}], hiddenInputs: [{
+  type: Input
+}], uiTranslations: [{
+  type: Input
+}], initialCountry: [{
+  type: Input
+}], initialCountryLookup: [{
+  type: Input
+}], loadUtils: [{
+  type: Input
+}], numberDisplayFormat: [{
+  type: Input
+}], onlyCountries: [{
+  type: Input
+}], placeholderNumberPolicy: [{
+  type: Input
+}], placeholderNumberType: [{
+  type: Input
+}], searchInputClass: [{
+  type: Input
+}], separateDialCode: [{
+  type: Input
+}], showFlags: [{
+  type: Input
+}], strictMode: [{
+  type: Input
+}], strictRejectAnimation: [{
+  type: Input
+}], numberChange: [{
+  type: Output
+}], countryChange: [{
+  type: Output
+}], validityChange: [{
+  type: Output
+}], errorCodeChange: [{
+  type: Output
+}], openCountrySelector: [{
+  type: Output
+}], closeCountrySelector: [{
+  type: Output
+}], strictReject: [{
+  type: Output
+}], blur: [{
+  type: Output
+}], focus: [{
+  type: Output
+}], keydown: [{
+  type: Output
+}], keyup: [{
+  type: Output
+}], paste: [{
+  type: Output
+}], click: [{
+  type: Output
+}] } });
 var IntlTelInput_default = IntlTelInput;
 export {
   IntlTelInput_default as default,