intl-tel-input 27.1.2 → 27.2.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 See the Github Releases page for changelog: https://github.com/jackocnr/intl-tel-input/releases
 
-Or to view a specific version, e.g. v27.1.2, update the URL accordingly, e.g. https://github.com/jackocnr/intl-tel-input/releases/tag/v27.1.2
+Or to view a specific version, e.g. v27.2.0, update the URL accordingly, e.g. https://github.com/jackocnr/intl-tel-input/releases/tag/v27.2.0
 
 ## Breaking changes
 

package/README.md

@@ -3,7 +3,7 @@
 
 A JavaScript plugin for entering, formatting and validating international telephone numbers. Includes React, Vue, Angular and Svelte components, plus TypeScript definitions.
 
-[Explore docs »](https://intl-tel-input.com/docs/choose-integration)
+[Explore docs »](https://intl-tel-input.com/docs/integrations)
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/iti-github-dark.png">
@@ -20,7 +20,7 @@ Use [Twilio's API to build phone verification, SMS 2FA, appointment reminders, m
 We provide React, Vue, Angular and Svelte (beta) components alongside the regular JavaScript plugin. This readme is for the JavaScript plugin. View the [React Component](https://intl-tel-input.com/docs/react-component), the [Vue Component](https://intl-tel-input.com/docs/vue-component) the [Angular Component](https://intl-tel-input.com/docs/angular-component), or the [Svelte component](https://intl-tel-input.com/docs/svelte-component).
 
 ## Docs and Examples
-We have a newly updated website, where you can find [a full set of docs](https://intl-tel-input.com/docs/getting-started.html), 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/validation-practical.html) of different setups.
+We have a newly updated website, where you can find [a full set of docs](https://intl-tel-input.com/docs/integrations), 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/validation-practical.html) of different setups.
 
 ## Features
 * Automatically select the user's current country using an IP lookup

package/angular/README.md

@@ -3,3 +3,11 @@
 An Angular component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/angular/src/IntlTelInput.ts).
 
 [Explore docs »](https://intl-tel-input.com/docs/angular-component)
+
+## Running the demos locally
+
+1. Initialise the submodules: `git submodule update --init --recursive`
+2. Install dependencies: `npm install`
+3. Build: `npm run build`
+
+You can then open `angular/demo/validation/index.html` in your browser to try the validation demo. View the full list of [available demos](https://github.com/jackocnr/intl-tel-input/tree/master/angular/demo).

package/angular/dist/IntlTelInput.d.ts

@@ -4,6 +4,11 @@ import { OnDestroy, ElementRef, EventEmitter, AfterViewInit, OnChanges, SimpleCh
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from "@angular/forms";
 import * as i0 from "@angular/core";
 export { intlTelInput };
+export type StrictRejectDetail = {
+    source: "key" | "paste";
+    rejectedInput: string;
+    reason: "invalid" | "max-length";
+};
 declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor, Validator {
     inputRef: ElementRef<HTMLInputElement>;
     /** initialValue is only used during initialization — changes after init are ignored. */
@@ -45,6 +50,9 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     countryChange: EventEmitter<string>;
     validityChange: EventEmitter<boolean>;
     errorCodeChange: EventEmitter<number | null>;
+    openCountryDropdown: EventEmitter<void>;
+    closeCountryDropdown: EventEmitter<void>;
+    strictReject: EventEmitter<StrictRejectDetail>;
     blur: EventEmitter<FocusEvent>;
     focus: EventEmitter<FocusEvent>;
     keydown: EventEmitter<KeyboardEvent>;
@@ -58,9 +66,13 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     private lastEmittedValidity?;
     private lastEmittedErrorCode?;
     private pendingWriteValue?;
+    private pendingUpdate;
     private onChange;
     private onTouched;
     private onValidatorChange;
+    private handleOpenDropdown;
+    private handleCloseDropdown;
+    private handleStrictReject;
     ngAfterViewInit(): void;
     private buildInitOptions;
     ngOnChanges(changes: SimpleChanges): void;
@@ -91,6 +103,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; }; "allowDropdown": { "alias": "allowDropdown"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "autoPlaceholder": { "alias": "autoPlaceholder"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownContainer": { "alias": "dropdownContainer"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "fixDropdownWidth": { "alias": "fixDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "formatOnDisplay": { "alias": "formatOnDisplay"; "required": false; }; "geoIpLookup": { "alias": "geoIpLookup"; "required": false; }; "hiddenInput": { "alias": "hiddenInput"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "nationalMode": { "alias": "nationalMode"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "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; }; "useFullscreenPopup": { "alias": "useFullscreenPopup"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "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; }; "allowDropdown": { "alias": "allowDropdown"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "autoPlaceholder": { "alias": "autoPlaceholder"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownContainer": { "alias": "dropdownContainer"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "fixDropdownWidth": { "alias": "fixDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "formatOnDisplay": { "alias": "formatOnDisplay"; "required": false; }; "geoIpLookup": { "alias": "geoIpLookup"; "required": false; }; "hiddenInput": { "alias": "hiddenInput"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "nationalMode": { "alias": "nationalMode"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "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; }; "useFullscreenPopup": { "alias": "useFullscreenPopup"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "openCountryDropdown": "openCountryDropdown"; "closeCountryDropdown": "closeCountryDropdown"; "strictReject": "strictReject"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
 }
 export default IntlTelInput;

package/angular/dist/IntlTelInput.js

@@ -2975,7 +2975,7 @@ var UI = class _UI {
           this.#selectedCountryEl.focus();
         }
       }
-      if (!this.#options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
+      if (!this.#options.countrySearch && e.target !== this.telInputEl && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
         e.stopPropagation();
         if (queryTimer) {
           clearTimeout(queryTimer);
@@ -3483,6 +3483,8 @@ var Iti = class _Iti {
   #isActive = true;
   #abortController;
   #numerals;
+  //* Tracks whether the user has typed/pasted their own formatting chars, so AYT-formatting should back off.
+  #userOverrideFormatting = false;
   #autoCountryDeferred;
   #utilsDeferred;
   constructor(input, customOptions = {}) {
@@ -3672,176 +3674,211 @@ var Iti = class _Iti {
     this.#bindKeydownListener();
     this.#bindPasteListener();
   }
-  #bindInputListener() {
-    const {
-      strictMode,
-      formatAsYouType,
-      separateDialCode,
-      allowDropdown,
-      countrySearch
-    } = this.#options;
-    let userOverrideFormatting = false;
-    if (REGEX.ALPHA_UNICODE.test(this.#getTelInputValue())) {
-      userOverrideFormatting = true;
+  //* Android workaround for handling plus when separateDialCode enabled (as impossible to handle with keydown/keyup, for which e.key always returns "Unidentified", see https://stackoverflow.com/q/59584061/217866)
+  #handleAndroidPlusKey(inputValue) {
+    this.#removeJustTypedChar(inputValue);
+    this.#openDropdownWithPlus();
+  }
+  //* Android strictMode workaround: the keydown-based filter can't block these because e.key is "Unidentified" on Android virtual keyboards, so strip them here on input.
+  #handleAndroidStrictReject(inputValue, rejectedInput) {
+    const newCaretPos = this.#removeJustTypedChar(inputValue);
+    this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+    this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+      source: "key",
+      rejectedInput,
+      reason: "invalid"
+    });
+  }
+  //* Format the input value using libphonenumber's AYT formatter, preserving caret position (called after an input event).
+  #formatAsYouType(inputValue, isDeleteForwards) {
+    const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
+    const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
+    const relevantCharsBeforeCaret = valueBeforeCaret.replace(
+      REGEX.NON_PLUS_NUMERIC_GLOBAL,
+      ""
+    ).length;
+    const fullNumber = this.#getFullNumber();
+    const formattedValue = formatNumberAsYouType(
+      fullNumber,
+      inputValue,
+      intlTelInput.utils,
+      this.#selectedCountry,
+      this.#options.separateDialCode
+    );
+    const newCaretPos = computeNewCaretPosition(
+      relevantCharsBeforeCaret,
+      formattedValue,
+      currentCaretPos,
+      isDeleteForwards
+    );
+    this.#setTelInputValue(formattedValue);
+    this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+  }
+  //* If separateDialCode AND typed dial code (e.g. from paste or autofill, or from typing a dial code when countrySearch disabled), then remove the typed dial code.
+  //* Only strip when a full dial code is actually present — otherwise a lone typed "+" (or partial prefix) would get erased.
+  #stripTypedDialCode(inputValue) {
+    if (inputValue.startsWith("+") && this.#selectedCountry && this.#getDialCode(inputValue)) {
+      const cleanNumber = stripSeparateDialCode(
+        inputValue,
+        true,
+        true,
+        this.#selectedCountry
+      );
+      this.#setTelInputValue(cleanNumber);
     }
-    const handleInputEvent = (e) => {
-      if (e?.detail && e.detail["isCountryChange"]) {
-        return;
-      }
-      const inputValue = this.#getTelInputValue();
-      if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
-        this.#removeJustTypedChar(inputValue);
-        this.#openDropdownWithPlus();
-        return;
-      }
-      if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
-        const newCaretPos = this.#removeJustTypedChar(inputValue);
-        this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
-        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-          source: "key",
-          rejectedInput: e.data,
-          reason: "invalid"
-        });
-        return;
-      }
-      if (this.#updateCountryFromNumber(inputValue)) {
-        this.#dispatchCountryChangeEvent();
-      }
-      const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
-      const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
-      if (isFormattingChar || isPaste && !strictMode) {
-        userOverrideFormatting = true;
-      } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
-        userOverrideFormatting = false;
-      }
-      const isSetNumber = e?.detail && e.detail["isSetNumber"];
-      const isAscii = this.#numerals.isAscii();
-      if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
-        const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
-        const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
-        const relevantCharsBeforeCaret = valueBeforeCaret.replace(
-          REGEX.NON_PLUS_NUMERIC_GLOBAL,
-          ""
-        ).length;
-        const isDeleteForwards = e?.inputType === INPUT_TYPES.DELETE_FORWARD;
-        const fullNumber = this.#getFullNumber();
-        const formattedValue = formatNumberAsYouType(
-          fullNumber,
-          inputValue,
-          intlTelInput.utils,
-          this.#selectedCountry,
-          separateDialCode
-        );
-        const newCaretPos = computeNewCaretPosition(
-          relevantCharsBeforeCaret,
-          formattedValue,
-          currentCaretPos,
-          isDeleteForwards
-        );
-        this.#setTelInputValue(formattedValue);
-        this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
-      }
-      if (separateDialCode && inputValue.startsWith("+") && this.#selectedCountry?.dialCode) {
-        const cleanNumber = stripSeparateDialCode(
-          inputValue,
-          true,
-          separateDialCode,
-          this.#selectedCountry
-        );
-        this.#setTelInputValue(cleanNumber);
-      }
-    };
+  }
+  #bindInputListener() {
+    this.#userOverrideFormatting = REGEX.ALPHA_UNICODE.test(
+      this.#getTelInputValue()
+    );
     this.#ui.telInputEl.addEventListener(
       "input",
-      handleInputEvent,
+      this.#handleInputEvent,
       {
         signal: this.#abortController.signal
       }
     );
   }
+  //* On input event: (1) Update selected country, (2) Format-as-you-type.
+  //* Note that this fires AFTER the input is updated.
+  #handleInputEvent = (e) => {
+    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    const detail = e?.detail;
+    if (detail?.["isCountryChange"]) {
+      return;
+    }
+    const inputValue = this.#getTelInputValue();
+    if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
+      this.#handleAndroidPlusKey(inputValue);
+      return;
+    }
+    if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
+      this.#handleAndroidStrictReject(inputValue, e.data);
+      return;
+    }
+    if (this.#updateCountryFromNumber(inputValue)) {
+      this.#dispatchCountryChangeEvent();
+    }
+    const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
+    const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
+    if (isFormattingChar || isPaste && !strictMode) {
+      this.#userOverrideFormatting = true;
+    } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
+      this.#userOverrideFormatting = false;
+    }
+    if (formatAsYouType && !this.#userOverrideFormatting && !detail?.["isSetNumber"] && this.#numerals.isAscii()) {
+      this.#formatAsYouType(
+        inputValue,
+        e?.inputType === INPUT_TYPES.DELETE_FORWARD
+      );
+    }
+    if (separateDialCode) {
+      this.#stripTypedDialCode(inputValue);
+    }
+  };
   #bindKeydownListener() {
-    const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    const { strictMode, separateDialCode } = this.#options;
     if (!strictMode && !separateDialCode) {
       return;
     }
-    const handleKeydownEvent = (e) => {
-      if (!e.key || e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) {
-        return;
-      }
-      if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
-        e.preventDefault();
-        this.#openDropdownWithPlus();
-        return;
-      }
-      if (!strictMode) {
-        return;
-      }
-      const inputValue = this.#getTelInputValue();
-      const alreadyHasPlus = inputValue.startsWith("+");
-      const isInitialPlus = !alreadyHasPlus && this.#ui.telInputEl.selectionStart === 0 && e.key === "+";
-      const normalisedKey = this.#numerals.normalise(e.key);
-      const isNumeric = /^[0-9]$/.test(normalisedKey);
-      const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-      const input = this.#ui.telInputEl;
-      const selStart = input.selectionStart;
-      const selEnd = input.selectionEnd;
-      const before = inputValue.slice(0, selStart ?? void 0);
-      const after = inputValue.slice(selEnd ?? void 0);
-      const newValue = before + normalisedKey + after;
-      const newFullNumber = this.#buildFullNumber(newValue);
-      let hasExceededMaxLength = false;
-      if (intlTelInput.utils && this.#maxCoreNumberLength) {
-        const coreNumber = intlTelInput.utils.getCoreNumber(
-          newFullNumber,
-          this.#selectedCountry?.iso2
-        );
-        hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
-      }
-      const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
-      const isChangingDialCode = newCountry !== null;
-      if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
-        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-          source: "key",
-          rejectedInput: e.key,
-          reason: !isAllowedChar ? "invalid" : "max-length"
-        });
-        e.preventDefault();
-      }
-    };
-    this.#ui.telInputEl.addEventListener("keydown", handleKeydownEvent, {
+    this.#ui.telInputEl.addEventListener("keydown", this.#handleKeydownEvent, {
       signal: this.#abortController.signal
     });
   }
+  //* On keydown event: (1) if strictMode then prevent invalid characters, (2) if separateDialCode then handle plus key
+  //* Note that this fires BEFORE the input is updated.
+  #handleKeydownEvent = (e) => {
+    const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    if (!e.key || e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) {
+      return;
+    }
+    if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
+      e.preventDefault();
+      this.#openDropdownWithPlus();
+      return;
+    }
+    if (!strictMode) {
+      return;
+    }
+    const inputValue = this.#getTelInputValue();
+    const alreadyHasPlus = inputValue.startsWith("+");
+    const isInitialPlus = !alreadyHasPlus && this.#ui.telInputEl.selectionStart === 0 && e.key === "+";
+    const normalisedKey = this.#numerals.normalise(e.key);
+    const isNumeric = /^[0-9]$/.test(normalisedKey);
+    const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
+    const input = this.#ui.telInputEl;
+    const selStart = input.selectionStart;
+    const selEnd = input.selectionEnd;
+    const before = inputValue.slice(0, selStart ?? void 0);
+    const after = inputValue.slice(selEnd ?? void 0);
+    const newValue = before + normalisedKey + after;
+    const newFullNumber = this.#buildFullNumber(newValue);
+    let hasExceededMaxLength = false;
+    if (intlTelInput.utils && this.#maxCoreNumberLength) {
+      const coreNumber = intlTelInput.utils.getCoreNumber(
+        newFullNumber,
+        this.#selectedCountry?.iso2
+      );
+      hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
+    }
+    const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
+    const isChangingDialCode = newCountry !== null;
+    if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
+      this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+        source: "key",
+        rejectedInput: e.key,
+        reason: !isAllowedChar ? "invalid" : "max-length"
+      });
+      e.preventDefault();
+    }
+  };
   #bindPasteListener() {
     if (!this.#options.strictMode) {
       return;
     }
-    const handlePasteEvent = (e) => {
-      e.preventDefault();
-      const input = this.#ui.telInputEl;
-      const selStart = input.selectionStart;
-      const selEnd = input.selectionEnd;
-      const inputValue = this.#getTelInputValue();
-      const before = inputValue.slice(0, selStart ?? void 0);
-      const after = inputValue.slice(selEnd ?? void 0);
-      const iso2 = this.#selectedCountry?.iso2;
-      const pastedRaw = e.clipboardData.getData("text");
-      const pasted = this.#numerals.normalise(pastedRaw);
-      const initialCharSelected = selStart === 0 && selEnd > 0;
-      const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
-      const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
-      const hasLeadingPlus = allowedChars.startsWith("+");
-      const numerics = allowedChars.replace(/\+/g, "");
-      const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
-      let newValue = before + sanitised + after;
-      let rejectReason = sanitised !== pasted ? "invalid" : null;
-      if (newValue.length > 5 && intlTelInput.utils) {
-        let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
-        while (coreNumber.length === 0 && newValue.length > 0) {
-          newValue = newValue.slice(0, -1);
-          coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
-        }
-        if (!coreNumber) {
+    this.#ui.telInputEl.addEventListener("paste", this.#handlePasteEvent, {
+      signal: this.#abortController.signal
+    });
+  }
+  #handlePasteEvent = (e) => {
+    e.preventDefault();
+    const input = this.#ui.telInputEl;
+    const selStart = input.selectionStart;
+    const selEnd = input.selectionEnd;
+    const inputValue = this.#getTelInputValue();
+    const before = inputValue.slice(0, selStart ?? void 0);
+    const after = inputValue.slice(selEnd ?? void 0);
+    const iso2 = this.#selectedCountry?.iso2;
+    const pastedRaw = e.clipboardData.getData("text");
+    const pasted = this.#numerals.normalise(pastedRaw);
+    const initialCharSelected = selStart === 0 && selEnd > 0;
+    const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
+    const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
+    const hasLeadingPlus = allowedChars.startsWith("+");
+    const numerics = allowedChars.replace(/\+/g, "");
+    const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+    let newValue = before + sanitised + after;
+    let rejectReason = sanitised !== pasted ? "invalid" : null;
+    if (newValue.length > 5 && intlTelInput.utils) {
+      let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
+      while (coreNumber.length === 0 && newValue.length > 0) {
+        newValue = newValue.slice(0, -1);
+        coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
+      }
+      if (!coreNumber) {
+        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+          source: "paste",
+          rejectedInput: pastedRaw,
+          reason: "max-length"
+        });
+        return;
+      }
+      if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
+        if (input.selectionEnd === inputValue.length) {
+          const trimLength = coreNumber.length - this.#maxCoreNumberLength;
+          newValue = newValue.slice(0, newValue.length - trimLength);
+          rejectReason = "max-length";
+        } else {
           this.#dispatchEvent(EVENTS.STRICT_REJECT, {
             source: "paste",
             rejectedInput: pastedRaw,
@@ -3849,37 +3886,20 @@ var Iti = class _Iti {
           });
           return;
         }
-        if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
-          if (input.selectionEnd === inputValue.length) {
-            const trimLength = coreNumber.length - this.#maxCoreNumberLength;
-            newValue = newValue.slice(0, newValue.length - trimLength);
-            rejectReason = "max-length";
-          } else {
-            this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-              source: "paste",
-              rejectedInput: pastedRaw,
-              reason: "max-length"
-            });
-            return;
-          }
-        }
       }
-      this.#setTelInputValue(newValue);
-      const caretPos = selStart + sanitised.length;
-      input.setSelectionRange(caretPos, caretPos);
-      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
-      if (rejectReason) {
-        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-          source: "paste",
-          rejectedInput: pastedRaw,
-          reason: rejectReason
-        });
-      }
-    };
-    this.#ui.telInputEl.addEventListener("paste", handlePasteEvent, {
-      signal: this.#abortController.signal
-    });
-  }
+    }
+    this.#setTelInputValue(newValue);
+    const caretPos = selStart + sanitised.length;
+    input.setSelectionRange(caretPos, caretPos);
+    input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    if (rejectReason) {
+      this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+        source: "paste",
+        rejectedInput: pastedRaw,
+        reason: rejectReason
+      });
+    }
+  };
   //* Adhere to the input's maxlength attr.
   #truncateToMaxLength(number) {
     const max = Number(this.#ui.telInputEl.getAttribute("maxlength"));
@@ -4521,7 +4541,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.2"
+    version: "27.2.0"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -4576,6 +4596,9 @@ var IntlTelInput = class _IntlTelInput {
   countryChange = new EventEmitter();
   validityChange = new EventEmitter();
   errorCodeChange = new EventEmitter();
+  openCountryDropdown = new EventEmitter();
+  closeCountryDropdown = new EventEmitter();
+  strictReject = new EventEmitter();
   blur = new EventEmitter();
   focus = new EventEmitter();
   keydown = new EventEmitter();
@@ -4590,6 +4613,8 @@ var IntlTelInput = class _IntlTelInput {
   lastEmittedErrorCode;
   // writeValue may be called by Angular forms before utils has loaded; queue it until then
   pendingWriteValue;
+  // if an input event fires before utils has loaded, we defer the update until the promise resolves
+  pendingUpdate = false;
   // eslint-disable-next-line class-methods-use-this
   onChange = () => {
   };
@@ -4599,8 +4624,16 @@ var IntlTelInput = class _IntlTelInput {
   // eslint-disable-next-line class-methods-use-this
   onValidatorChange = () => {
   };
+  handleOpenDropdown = () => this.openCountryDropdown.emit();
+  handleCloseDropdown = () => this.closeCountryDropdown.emit();
+  handleStrictReject = (e) => {
+    this.strictReject.emit(e.detail);
+  };
   ngAfterViewInit() {
     this.iti = intlTelInput_default(this.inputRef.nativeElement, this.buildInitOptions());
+    this.inputRef.nativeElement.addEventListener("open:countrydropdown", this.handleOpenDropdown);
+    this.inputRef.nativeElement.addEventListener("close:countrydropdown", this.handleCloseDropdown);
+    this.inputRef.nativeElement.addEventListener("strict:reject", this.handleStrictReject);
     this.applyInputAttrs();
     if (this.disabled) {
       this.iti.setDisabled(this.disabled);
@@ -4618,6 +4651,12 @@ var IntlTelInput = class _IntlTelInput {
       } else if (this.initialValue) {
         this.iti.setNumber(this.initialValue);
       }
+      if (this.pendingUpdate) {
+        this.pendingUpdate = false;
+        this.handleInput();
+      } else if (this.inputRef.nativeElement.value) {
+        this.onValidatorChange();
+      }
     });
   }
   buildInitOptions() {
@@ -4669,6 +4708,10 @@ var IntlTelInput = class _IntlTelInput {
     if (!this.iti) {
       return;
     }
+    if (!intlTelInput_default.utils) {
+      this.pendingUpdate = true;
+      return;
+    }
     const num = this.iti.getNumber() ?? "";
     const countryIso = this.iti.getSelectedCountryData()?.iso2 ?? "";
     let hasChanged = false;
@@ -4733,6 +4776,9 @@ var IntlTelInput = class _IntlTelInput {
     return this.inputRef.nativeElement;
   }
   ngOnDestroy() {
+    this.inputRef.nativeElement.removeEventListener("open:countrydropdown", this.handleOpenDropdown);
+    this.inputRef.nativeElement.removeEventListener("close:countrydropdown", this.handleCloseDropdown);
+    this.inputRef.nativeElement.removeEventListener("strict:reject", this.handleStrictReject);
     this.iti?.destroy();
   }
   ignoredInputAttrs = /* @__PURE__ */ new Set([
@@ -4783,7 +4829,7 @@ var IntlTelInput = class _IntlTelInput {
   }
   // ============ Validator Implementation ============
   validate(_control) {
-    if (!this.iti || !this.iti.getNumber()) {
+    if (!this.iti || !intlTelInput_default.utils || !this.iti.getNumber()) {
       return null;
     }
     const isValid = this.usePreciseValidation ? this.iti.isValidNumberPrecise() : this.iti.isValidNumber();
@@ -4809,7 +4855,7 @@ var IntlTelInput = class _IntlTelInput {
       let _t;
       i0.\u0275\u0275queryRefresh(_t = i0.\u0275\u0275loadQuery()) && (ctx.inputRef = _t.first);
     }
-  }, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", allowDropdown: "allowDropdown", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", autoPlaceholder: "autoPlaceholder", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownContainer: "dropdownContainer", excludeCountries: "excludeCountries", fixDropdownWidth: "fixDropdownWidth", formatAsYouType: "formatAsYouType", formatOnDisplay: "formatOnDisplay", geoIpLookup: "geoIpLookup", hiddenInput: "hiddenInput", i18n: "i18n", initialCountry: "initialCountry", loadUtils: "loadUtils", nationalMode: "nationalMode", onlyCountries: "onlyCountries", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", useFullscreenPopup: "useFullscreenPopup" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
+  }, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", allowDropdown: "allowDropdown", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", autoPlaceholder: "autoPlaceholder", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownContainer: "dropdownContainer", excludeCountries: "excludeCountries", fixDropdownWidth: "fixDropdownWidth", formatAsYouType: "formatAsYouType", formatOnDisplay: "formatOnDisplay", geoIpLookup: "geoIpLookup", hiddenInput: "hiddenInput", i18n: "i18n", initialCountry: "initialCountry", loadUtils: "loadUtils", nationalMode: "nationalMode", onlyCountries: "onlyCountries", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", useFullscreenPopup: "useFullscreenPopup" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", openCountryDropdown: "openCountryDropdown", closeCountryDropdown: "closeCountryDropdown", strictReject: "strictReject", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => _IntlTelInput),
@@ -4953,6 +4999,12 @@ var IntlTelInput = class _IntlTelInput {
     type: Output
   }], errorCodeChange: [{
     type: Output
+  }], openCountryDropdown: [{
+    type: Output
+  }], closeCountryDropdown: [{
+    type: Output
+  }], strictReject: [{
+    type: Output
   }], blur: [{
     type: Output
   }], focus: [{
@@ -4968,7 +5020,7 @@ var IntlTelInput = class _IntlTelInput {
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInput, { className: "IntlTelInput", filePath: "IntlTelInput.ts", lineNumber: 62 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInput, { className: "IntlTelInput", filePath: "IntlTelInput.ts", lineNumber: 68 });
 })();
 var IntlTelInput_default = IntlTelInput;
 export {