intl-tel-input 27.0.0 → 27.0.2

package/angular/dist/IntlTelInput.js

@@ -269,7 +269,63 @@ var rawCountryData = [
     // Canada
     "1",
     1,
-    ["204", "226", "236", "249", "250", "257", "263", "289", "306", "343", "354", "365", "367", "368", "382", "403", "416", "418", "428", "431", "437", "438", "450", "468", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "683", "705", "709", "742", "753", "778", "780", "782", "807", "819", "825", "867", "873", "879", "902", "905", "942"],
+    [
+      "204",
+      "226",
+      "236",
+      "249",
+      "250",
+      "257",
+      "263",
+      "289",
+      "306",
+      "343",
+      "354",
+      "365",
+      "367",
+      "368",
+      "382",
+      "403",
+      "416",
+      "418",
+      "428",
+      "431",
+      "437",
+      "438",
+      "450",
+      "468",
+      "474",
+      "506",
+      "514",
+      "519",
+      "548",
+      "579",
+      "581",
+      "584",
+      "587",
+      "604",
+      "613",
+      "639",
+      "647",
+      "672",
+      "683",
+      "705",
+      "709",
+      "742",
+      "753",
+      "778",
+      "780",
+      "782",
+      "807",
+      "819",
+      "825",
+      "867",
+      "873",
+      "879",
+      "902",
+      "905",
+      "942"
+    ],
     "1"
   ],
   [
@@ -1922,9 +1978,10 @@ var warn = (message) => {
   console.warn(`[intl-tel-input] ${message}`);
 };
 var warnOption = (optionName, expectedType, actualValue) => {
-  warn(`Option '${optionName}' must be ${expectedType}; got ${toString(actualValue)}. Ignoring.`);
+  warn(
+    `Option '${optionName}' must be ${expectedType}; got ${toString(actualValue)}. Ignoring.`
+  );
 };
-var hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
 var validateIso2Array = (key, value) => {
   const expectedType = "an array of ISO2 country code strings";
   if (!Array.isArray(value)) {
@@ -1957,7 +2014,7 @@ var validateOptions = (customOptions) => {
   }
   const validatedOptions = {};
   for (const [key, value] of Object.entries(customOptions)) {
-    if (!hasOwn(defaults, key)) {
+    if (!Object.hasOwn(defaults, key)) {
       warn(`Unknown option '${key}'. Ignoring.`);
       continue;
     }
@@ -2051,8 +2108,12 @@ var validateOptions = (customOptions) => {
           break;
         }
         const lower = value.toLowerCase();
-        if (lower && (lower !== INITIAL_COUNTRY.AUTO && !isIso2(lower))) {
-          warnOption("initialCountry", "a valid ISO2 country code or 'auto'", value);
+        if (lower && lower !== INITIAL_COUNTRY.AUTO && !isIso2(lower)) {
+          warnOption(
+            "initialCountry",
+            "a valid ISO2 country code or 'auto'",
+            value
+          );
           break;
         }
         validatedOptions[key] = value;
@@ -2069,14 +2130,22 @@ var validateOptions = (customOptions) => {
       case "allowedNumberTypes":
         if (value !== null) {
           if (!Array.isArray(value)) {
-            warnOption("allowedNumberTypes", "an array of number types or null", value);
+            warnOption(
+              "allowedNumberTypes",
+              "an array of number types or null",
+              value
+            );
             break;
           }
           let allValid = true;
           for (const v of value) {
             if (typeof v !== "string" || !NUMBER_TYPE_SET.has(v)) {
               const validTypes = Array.from(NUMBER_TYPE_SET).join(", ");
-              warnOption("allowedNumberTypes", `an array of valid number types (${validTypes})`, v);
+              warnOption(
+                "allowedNumberTypes",
+                `an array of valid number types (${validTypes})`,
+                v
+              );
               allValid = false;
               break;
             }
@@ -2233,6 +2302,7 @@ var UI = class _UI {
   #searchResultsA11yText;
   #dropdownForContainer;
   #selectedItem = null;
+  #viewportHandler = null;
   // public
   telInput;
   countryContainer;
@@ -2283,16 +2353,12 @@ var UI = class _UI {
     const wrapper = this.#createWrapperAndInsert();
     this.#maybeBuildCountryContainer(wrapper);
     wrapper.appendChild(this.telInput);
+    this.#maybeEnsureDropdownWidthSet();
     this.#maybeUpdateInputPaddingAndReveal();
     this.#maybeBuildHiddenInputs(wrapper);
   }
   #createWrapperAndInsert() {
-    const {
-      allowDropdown,
-      showFlags,
-      containerClass,
-      useFullscreenPopup
-    } = this.#options;
+    const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.#options;
     const parentClasses = buildClassNames({
       iti: true,
       "iti--allow-dropdown": allowDropdown,
@@ -2309,72 +2375,74 @@ var UI = class _UI {
   }
   #maybeBuildCountryContainer(wrapper) {
     const { allowDropdown, separateDialCode, showFlags } = this.#options;
-    if (allowDropdown || showFlags || separateDialCode) {
-      this.countryContainer = createEl(
-        "div",
-        // visibly hidden until we measure it's width to set the input padding correctly
-        { class: `iti__country-container ${CLASSES.V_HIDE}` },
-        wrapper
+    if (!allowDropdown && !showFlags && !separateDialCode) {
+      return;
+    }
+    this.countryContainer = createEl(
+      "div",
+      // visibly hidden until we measure its width to set the input padding correctly
+      { class: `iti__country-container ${CLASSES.V_HIDE}` },
+      wrapper
+    );
+    if (allowDropdown) {
+      this.selectedCountry = createEl(
+        "button",
+        {
+          type: "button",
+          class: "iti__selected-country",
+          [ARIA.EXPANDED]: "false",
+          [ARIA.LABEL]: this.#options.i18n.noCountrySelected,
+          [ARIA.HASPOPUP]: "dialog",
+          [ARIA.CONTROLS]: `iti-${this.#id}__dropdown-content`
+        },
+        this.countryContainer
       );
-      if (allowDropdown) {
-        this.selectedCountry = createEl(
-          "button",
-          {
-            type: "button",
-            class: "iti__selected-country",
-            [ARIA.EXPANDED]: "false",
-            [ARIA.LABEL]: this.#options.i18n.noCountrySelected,
-            [ARIA.HASPOPUP]: "dialog",
-            [ARIA.CONTROLS]: `iti-${this.#id}__dropdown-content`
-          },
-          this.countryContainer
-        );
-        if (this.telInput.disabled) {
-          this.selectedCountry.setAttribute("disabled", "true");
-        }
-      } else {
-        this.selectedCountry = createEl(
-          "div",
-          { class: "iti__selected-country" },
-          this.countryContainer
-        );
+      if (this.telInput.disabled) {
+        this.selectedCountry.setAttribute("disabled", "true");
       }
-      const selectedCountryPrimary = createEl(
+    } else {
+      this.selectedCountry = createEl(
         "div",
-        { class: "iti__selected-country-primary" },
-        this.selectedCountry
+        { class: "iti__selected-country" },
+        this.countryContainer
       );
-      this.selectedCountryInner = createEl(
+    }
+    const selectedCountryPrimary = createEl(
+      "div",
+      { class: "iti__selected-country-primary" },
+      this.selectedCountry
+    );
+    this.selectedCountryInner = createEl(
+      "div",
+      { class: CLASSES.FLAG },
+      selectedCountryPrimary
+    );
+    if (allowDropdown) {
+      this.#dropdownArrow = createEl(
         "div",
-        { class: CLASSES.FLAG },
+        { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
         selectedCountryPrimary
       );
-      if (allowDropdown) {
-        this.#dropdownArrow = createEl(
-          "div",
-          { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
-          selectedCountryPrimary
-        );
-      }
-      if (separateDialCode) {
-        this.#selectedDialCode = createEl(
-          "div",
-          { class: "iti__selected-dial-code" },
-          this.selectedCountry
-        );
-      }
-      if (allowDropdown) {
-        this.#buildDropdownContent();
-      }
+    }
+    if (separateDialCode) {
+      this.#selectedDialCode = createEl(
+        "div",
+        { class: "iti__selected-dial-code" },
+        this.selectedCountry
+      );
+    }
+    if (allowDropdown) {
+      this.#buildDropdownContent();
     }
   }
   #maybeEnsureDropdownWidthSet() {
-    const { fixDropdownWidth } = this.#options;
-    if (fixDropdownWidth && !this.#dropdownContent.style.width) {
-      const inputWidth = this.telInput.offsetWidth;
-      if (inputWidth > 0) {
-        this.#dropdownContent.style.width = `${inputWidth}px`;
-      }
+    const { fixDropdownWidth, allowDropdown } = this.#options;
+    if (!allowDropdown || !fixDropdownWidth || this.#dropdownContent.style.width) {
+      return;
+    }
+    const inputWidth = this.telInput.offsetWidth;
+    if (inputWidth > 0) {
+      this.#dropdownContent.style.width = `${inputWidth}px`;
     }
   }
   #buildDropdownContent() {
@@ -2414,7 +2482,6 @@ var UI = class _UI {
       this.#updateSearchResultsA11yText();
     }
     if (!useFullscreenPopup) {
-      this.#maybeEnsureDropdownWidthSet();
       this.#inlineDropdownHeight = this.#getHiddenInlineDropdownHeight();
       if (countrySearch) {
         this.#dropdownContent.style.height = `${this.#inlineDropdownHeight}px`;
@@ -2496,43 +2563,45 @@ var UI = class _UI {
     this.#searchNoResults.textContent = i18n.searchEmptyState ?? null;
   }
   #maybeUpdateInputPaddingAndReveal() {
-    if (this.countryContainer) {
-      this.#updateInputPadding();
-      this.countryContainer.classList.remove(CLASSES.V_HIDE);
+    if (!this.countryContainer) {
+      return;
     }
+    this.#updateInputPadding();
+    this.countryContainer.classList.remove(CLASSES.V_HIDE);
   }
   #maybeBuildHiddenInputs(wrapper) {
     const { hiddenInput } = this.#options;
-    if (hiddenInput) {
-      const telInputName = this.telInput.getAttribute("name") || "";
-      const names = hiddenInput(telInputName);
-      if (names.phone) {
-        const existingInput = this.telInput.form?.querySelector(
-          `input[name="${names.phone}"]`
-        );
-        if (existingInput) {
-          this.hiddenInputPhone = existingInput;
-        } else {
-          this.hiddenInputPhone = createEl("input", {
-            type: "hidden",
-            name: names.phone
-          });
-          wrapper.appendChild(this.hiddenInputPhone);
-        }
+    if (!hiddenInput) {
+      return;
+    }
+    const telInputName = this.telInput.getAttribute("name") || "";
+    const names = hiddenInput(telInputName);
+    if (names.phone) {
+      const existingInput = this.telInput.form?.querySelector(
+        `input[name="${names.phone}"]`
+      );
+      if (existingInput) {
+        this.hiddenInputPhone = existingInput;
+      } else {
+        this.hiddenInputPhone = createEl("input", {
+          type: "hidden",
+          name: names.phone
+        });
+        wrapper.appendChild(this.hiddenInputPhone);
       }
-      if (names.country) {
-        const existingInput = this.telInput.form?.querySelector(
-          `input[name="${names.country}"]`
-        );
-        if (existingInput) {
-          this.hiddenInputCountry = existingInput;
-        } else {
-          this.hiddenInputCountry = createEl("input", {
-            type: "hidden",
-            name: names.country
-          });
-          wrapper.appendChild(this.hiddenInputCountry);
-        }
+    }
+    if (names.country) {
+      const existingInput = this.telInput.form?.querySelector(
+        `input[name="${names.country}"]`
+      );
+      if (existingInput) {
+        this.hiddenInputCountry = existingInput;
+      } else {
+        this.hiddenInputCountry = createEl("input", {
+          type: "hidden",
+          name: names.country
+        });
+        wrapper.appendChild(this.hiddenInputCountry);
       }
     }
   }
@@ -2591,30 +2660,32 @@ var UI = class _UI {
   //* To get the right styling to apply, all we need is a shallow clone of the container,
   //* and then to inject a deep clone of the selectedCountry element.
   #getHiddenSelectedCountryWidth() {
-    if (this.telInput.parentNode) {
-      const body = _UI.#getBody();
-      const containerClone = this.telInput.parentNode.cloneNode(
-        false
-      );
-      containerClone.style.visibility = "hidden";
-      body.appendChild(containerClone);
-      const countryContainerClone = this.countryContainer.cloneNode();
-      containerClone.appendChild(countryContainerClone);
-      const selectedCountryClone = this.selectedCountry.cloneNode(
-        true
-      );
-      countryContainerClone.appendChild(selectedCountryClone);
-      const width = selectedCountryClone.offsetWidth;
-      body.removeChild(containerClone);
-      return width;
+    if (!this.telInput.parentNode) {
+      return 0;
     }
-    return 0;
+    const body = _UI.#getBody();
+    const containerClone = this.telInput.parentNode.cloneNode(
+      false
+    );
+    containerClone.style.visibility = "hidden";
+    body.appendChild(containerClone);
+    const countryContainerClone = this.countryContainer.cloneNode();
+    containerClone.appendChild(countryContainerClone);
+    const selectedCountryClone = this.selectedCountry.cloneNode(
+      true
+    );
+    countryContainerClone.appendChild(selectedCountryClone);
+    const width = selectedCountryClone.offsetWidth;
+    body.removeChild(containerClone);
+    return width;
   }
-  // this is run before we add the dropdown to the DOM
+  // Get the dropdown height (before it is added to the DOM)
   #getHiddenInlineDropdownHeight() {
     const body = _UI.#getBody();
     this.#dropdownContent.classList.remove(CLASSES.HIDE);
-    const tempContainer = createEl("div", { class: "iti iti--inline-dropdown" });
+    const tempContainer = createEl("div", {
+      class: "iti iti--inline-dropdown"
+    });
     tempContainer.appendChild(this.#dropdownContent);
     tempContainer.style.visibility = "hidden";
     body.appendChild(tempContainer);
@@ -2687,7 +2758,10 @@ var UI = class _UI {
       this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
       if (this.#options.countrySearch) {
         const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-        this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
+        this.searchInput.setAttribute(
+          ARIA.ACTIVE_DESCENDANT,
+          activeDescendant
+        );
       }
       if (shouldFocus) {
         this.highlightedItem.focus();
@@ -2768,11 +2842,7 @@ var UI = class _UI {
   }
   // UI: Open the dropdown (DOM only).
   openDropdown() {
-    const {
-      countrySearch,
-      dropdownAlwaysOpen,
-      dropdownContainer
-    } = this.#options;
+    const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.#options;
     this.#maybeEnsureDropdownWidthSet();
     if (dropdownContainer) {
       this.#handleDropdownContainer();
@@ -2787,15 +2857,22 @@ var UI = class _UI {
     }
     this.#dropdownContent.classList.remove(CLASSES.HIDE);
     this.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
-    if (countrySearch) {
-      const itemToHighlight = this.#selectedItem ?? this.countryList.firstElementChild;
-      if (itemToHighlight) {
-        this.highlightListItem(itemToHighlight, false);
-        this.scrollCountryListToItem(itemToHighlight);
-      }
-      if (!dropdownAlwaysOpen) {
-        this.searchInput.focus();
-      }
+    const itemToHighlight = this.#selectedItem ?? this.countryList.firstElementChild;
+    if (itemToHighlight) {
+      this.highlightListItem(itemToHighlight, false);
+      this.scrollCountryListToItem(itemToHighlight);
+    }
+    if (countrySearch && !dropdownAlwaysOpen) {
+      this.searchInput.focus();
+    }
+    if (this.#options.useFullscreenPopup && this.#dropdownForContainer && window.visualViewport) {
+      this.#viewportHandler = () => {
+        this.#adjustFullscreenPopupToViewport();
+        if (this.highlightedItem) {
+          this.scrollCountryListToItem(this.highlightedItem);
+        }
+      };
+      window.visualViewport.addEventListener("resize", this.#viewportHandler);
     }
     this.#dropdownArrow.classList.add(CLASSES.ARROW_UP);
   }
@@ -2814,6 +2891,13 @@ var UI = class _UI {
       }
     }
     this.#dropdownArrow.classList.remove(CLASSES.ARROW_UP);
+    if (this.#viewportHandler && window.visualViewport) {
+      window.visualViewport.removeEventListener(
+        "resize",
+        this.#viewportHandler
+      );
+      this.#viewportHandler = null;
+    }
     if (dropdownContainer) {
       this.#dropdownForContainer.remove();
       this.#dropdownForContainer.style.top = "";
@@ -2856,6 +2940,16 @@ var UI = class _UI {
     }
     dropdownContainer.appendChild(this.#dropdownForContainer);
   }
+  // Adjust the fullscreen popup dimensions to match the visual viewport,
+  // so it stays above the virtual keyboard on mobile devices.
+  #adjustFullscreenPopupToViewport() {
+    const vv = window.visualViewport;
+    if (!vv || !this.#dropdownForContainer) {
+      return;
+    }
+    const virtualKeyboardHeight = window.innerHeight - vv.height;
+    this.#dropdownForContainer.style.bottom = `${virtualKeyboardHeight}px`;
+  }
   // UI: Whether the dropdown is currently closed (hidden).
   isDropdownClosed() {
     return this.#dropdownContent.classList.contains(CLASSES.HIDE);
@@ -2903,7 +2997,7 @@ var processAllCountries = (options) => {
       (country) => !excludeCountries.includes(country.iso2)
     );
   }
-  return data_default;
+  return [...data_default];
 };
 var generateCountryNames = (countries, options) => {
   const { countryNameLocale, i18n } = options;
@@ -2936,7 +3030,7 @@ var processDialCodes = (countries) => {
     if (dialCode.length > dialCodeMaxLen) {
       dialCodeMaxLen = dialCode.length;
     }
-    if (!dialCodeToIso2Map.hasOwnProperty(dialCode)) {
+    if (!Object.hasOwn(dialCodeToIso2Map, dialCode)) {
       dialCodeToIso2Map[dialCode] = [];
     }
     const iso2List = dialCodeToIso2Map[dialCode];
@@ -2945,7 +3039,9 @@ var processDialCodes = (countries) => {
     }
     iso2List.push(iso2);
   };
-  const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
+  const countriesSortedByPriority = [...countries].sort(
+    (a, b) => a.priority - b.priority
+  );
   for (const c of countriesSortedByPriority) {
     if (!dialCodes.has(c.dialCode)) {
       dialCodes.add(c.dialCode);
@@ -3010,15 +3106,12 @@ var hasRegionlessDialCode = (number) => {
   return number.startsWith("+") && REGIONLESS_DIAL_CODES.has(dialCode);
 };
 var beforeSetNumber = (fullNumber, hasValidDialCode, separateDialCode, selectedCountryData) => {
-  let number = fullNumber;
-  if (separateDialCode) {
-    if (hasValidDialCode) {
-      const dialCode = `+${selectedCountryData.dialCode}`;
-      const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
-      number = number.substring(start);
-    }
+  if (!separateDialCode || !hasValidDialCode) {
+    return fullNumber;
   }
-  return number;
+  const dialCode = `+${selectedCountryData.dialCode}`;
+  const start = fullNumber[dialCode.length] === " " || fullNumber[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
+  return fullNumber.substring(start);
 };
 var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) => {
   const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData?.iso2) : fullNumber;
@@ -3111,7 +3204,10 @@ var Numerals = class {
     }
     const base = this.#userNumeralSet === "arabic-indic" ? 1632 : 1776;
     const regex = this.#userNumeralSet === "arabic-indic" ? /[\u0660-\u0669]/g : /[\u06F0-\u06F9]/g;
-    return str.replace(regex, (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base)));
+    return str.replace(
+      regex,
+      (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base))
+    );
   }
   isAscii() {
     return !this.#userNumeralSet || this.#userNumeralSet === "ascii";
@@ -3120,7 +3216,9 @@ var Numerals = class {
 var id = 0;
 var ensureUtils = (methodName) => {
   if (!intlTelInput.utils) {
-    throw new Error(`intlTelInput.utils is required for ${methodName}(). See: https://intl-tel-input.com/docs/utils`);
+    throw new Error(
+      `intlTelInput.utils is required for ${methodName}(). See: https://intl-tel-input.com/docs/utils`
+    );
   }
 };
 var createDeferred = () => {
@@ -3275,9 +3373,13 @@ var Iti = class _Iti {
         this.#ui.hiddenInputCountry.value = this.#selectedCountryData?.iso2 || "";
       }
     };
-    this.#ui.telInput.form?.addEventListener("submit", handleHiddenInputSubmit, {
-      signal: this.#abortController.signal
-    });
+    this.#ui.telInput.form?.addEventListener(
+      "submit",
+      handleHiddenInputSubmit,
+      {
+        signal: this.#abortController.signal
+      }
+    );
   }
   //* initialise the dropdown listeners.
   #initDropdownListeners() {
@@ -3306,7 +3408,12 @@ var Iti = class _Iti {
       }
     );
     const handleCountryContainerKeydown = (e) => {
-      const allowedKeys = [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.SPACE, KEYS.ENTER];
+      const allowedKeys = [
+        KEYS.ARROW_UP,
+        KEYS.ARROW_DOWN,
+        KEYS.SPACE,
+        KEYS.ENTER
+      ];
       if (this.#ui.isDropdownClosed() && allowedKeys.includes(e.key)) {
         e.preventDefault();
         e.stopPropagation();
@@ -3324,8 +3431,8 @@ var Iti = class _Iti {
   }
   //* Init requests: utils script / geo ip lookup.
   #initRequests() {
-    const { loadUtils, initialCountry, geoIpLookup } = this.#options;
-    if (loadUtils && !intlTelInput.utils) {
+    if (this.#utilsScriptDeferred) {
+      const { loadUtils } = this.#options;
       const doAttachUtils = () => {
         intlTelInput.attachUtils(loadUtils)?.catch(() => {
         });
@@ -3337,13 +3444,10 @@ var Iti = class _Iti {
           signal: this.#abortController.signal
         });
       }
-    } else {
-      this.#utilsScriptDeferred?.resolve();
     }
-    const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
-    if (isAutoCountry) {
+    if (this.#autoCountryDeferred) {
       if (this.#selectedCountryData) {
-        this.#autoCountryDeferred?.resolve();
+        this.#autoCountryDeferred.resolve();
       } else {
         this.#loadAutoCountry();
       }
@@ -3353,28 +3457,29 @@ var Iti = class _Iti {
   #loadAutoCountry() {
     if (intlTelInput.autoCountry) {
       this.#handleAutoCountry();
-    } else {
-      this.#ui.selectedCountryInner.classList.add(CLASSES.LOADING);
-      if (!intlTelInput.startedLoadingAutoCountry) {
-        intlTelInput.startedLoadingAutoCountry = true;
-        if (typeof this.#options.geoIpLookup === "function") {
-          const successCallback = (iso2 = "") => {
-            this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
-            const iso2Lower = iso2.toLowerCase();
-            if (isIso2(iso2Lower)) {
-              intlTelInput.autoCountry = iso2Lower;
-              setTimeout(() => _Iti.forEachInstance("handleAutoCountry"));
-            } else {
-              _Iti.forEachInstance("handleAutoCountryFailure");
-            }
-          };
-          const failureCallback = () => {
-            this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
-            _Iti.forEachInstance("handleAutoCountryFailure");
-          };
-          this.#options.geoIpLookup(successCallback, failureCallback);
+      return;
+    }
+    this.#ui.selectedCountryInner.classList.add(CLASSES.LOADING);
+    if (intlTelInput.startedLoadingAutoCountry) {
+      return;
+    }
+    intlTelInput.startedLoadingAutoCountry = true;
+    if (typeof this.#options.geoIpLookup === "function") {
+      const successCallback = (iso2 = "") => {
+        this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
+        const iso2Lower = iso2.toLowerCase();
+        if (isIso2(iso2Lower)) {
+          intlTelInput.autoCountry = iso2Lower;
+          setTimeout(() => _Iti.forEachInstance("handleAutoCountry"));
+        } else {
+          _Iti.forEachInstance("handleAutoCountryFailure");
         }
-      }
+      };
+      const failureCallback = () => {
+        this.#ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
+        _Iti.forEachInstance("handleAutoCountryFailure");
+      };
+      this.#options.geoIpLookup(successCallback, failureCallback);
     }
   }
   #openDropdownWithPlus() {
@@ -3424,10 +3529,7 @@ var Iti = class _Iti {
       const isAscii = this.#numerals.isAscii();
       if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
         const currentCaretPos = this.#ui.telInput.selectionStart || 0;
-        const valueBeforeCaret = inputValue.substring(
-          0,
-          currentCaretPos
-        );
+        const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
         const relevantCharsBeforeCaret = valueBeforeCaret.replace(
           REGEX.NON_PLUS_NUMERIC_GLOBAL,
           ""
@@ -3470,96 +3572,100 @@ var Iti = class _Iti {
   }
   #maybeBindKeydownListener() {
     const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
-    if (strictMode || separateDialCode) {
-      const handleKeydownEvent = (e) => {
-        if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-          if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
-            e.preventDefault();
-            this.#openDropdownWithPlus();
-            return;
-          }
-          if (strictMode) {
-            const inputValue = this.#getTelInputValue();
-            const alreadyHasPlus = inputValue.startsWith("+");
-            const isInitialPlus = !alreadyHasPlus && this.#ui.telInput.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.telInput;
-            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 + e.key + after;
-            const newFullNumber = this.#getFullNumber(newValue);
-            let hasExceededMaxLength = false;
-            if (intlTelInput.utils && this.#maxCoreNumberLength) {
-              const coreNumber = intlTelInput.utils.getCoreNumber(
-                newFullNumber,
-                this.#selectedCountryData?.iso2
-              );
-              hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
-            }
-            const newCountry = this.#getNewCountryFromNumber(newFullNumber);
-            const isChangingDialCode = newCountry !== null;
-            if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
-              e.preventDefault();
-            }
-          }
-        }
-      };
-      this.#ui.telInput.addEventListener("keydown", handleKeydownEvent, {
-        signal: this.#abortController.signal
-      });
+    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.telInput.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.telInput;
+      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 + e.key + after;
+      const newFullNumber = this.#getFullNumber(newValue);
+      let hasExceededMaxLength = false;
+      if (intlTelInput.utils && this.#maxCoreNumberLength) {
+        const coreNumber = intlTelInput.utils.getCoreNumber(
+          newFullNumber,
+          this.#selectedCountryData?.iso2
+        );
+        hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
+      }
+      const newCountry = this.#getNewCountryFromNumber(newFullNumber);
+      const isChangingDialCode = newCountry !== null;
+      if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
+        e.preventDefault();
+      }
+    };
+    this.#ui.telInput.addEventListener("keydown", handleKeydownEvent, {
+      signal: this.#abortController.signal
+    });
   }
   #maybeBindPasteListener() {
-    if (this.#options.strictMode) {
-      const handlePasteEvent = (e) => {
-        e.preventDefault();
-        const input = this.#ui.telInput;
-        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.#selectedCountryData?.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 newVal = before + sanitised + after;
-        if (newVal.length > 5 && intlTelInput.utils) {
-          let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
-          while (coreNumber.length === 0 && newVal.length > 0) {
-            newVal = newVal.slice(0, -1);
-            coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
-          }
-          if (!coreNumber) {
+    if (!this.#options.strictMode) {
+      return;
+    }
+    const handlePasteEvent = (e) => {
+      e.preventDefault();
+      const input = this.#ui.telInput;
+      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.#selectedCountryData?.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 newVal = before + sanitised + after;
+      if (newVal.length > 5 && intlTelInput.utils) {
+        let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+        while (coreNumber.length === 0 && newVal.length > 0) {
+          newVal = newVal.slice(0, -1);
+          coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+        }
+        if (!coreNumber) {
+          return;
+        }
+        if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
+          if (input.selectionEnd === inputValue.length) {
+            const trimLength = coreNumber.length - this.#maxCoreNumberLength;
+            newVal = newVal.slice(0, newVal.length - trimLength);
+          } else {
             return;
           }
-          if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
-            if (input.selectionEnd === inputValue.length) {
-              const trimLength = coreNumber.length - this.#maxCoreNumberLength;
-              newVal = newVal.slice(0, newVal.length - trimLength);
-            } else {
-              return;
-            }
-          }
         }
-        this.#setTelInputValue(newVal);
-        const caretPos = selStart + sanitised.length;
-        input.setSelectionRange(caretPos, caretPos);
-        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
-      };
-      this.#ui.telInput.addEventListener("paste", handlePasteEvent, {
-        signal: this.#abortController.signal
-      });
-    }
+      }
+      this.#setTelInputValue(newVal);
+      const caretPos = selStart + sanitised.length;
+      input.setSelectionRange(caretPos, caretPos);
+      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    };
+    this.#ui.telInput.addEventListener("paste", handlePasteEvent, {
+      signal: this.#abortController.signal
+    });
   }
   //* Adhere to the input's maxlength attr.
   #cap(number) {
@@ -3766,7 +3872,7 @@ var Iti = class _Iti {
   //* Get the new country based on the input number, or return null if no change, or empty string if should be empty (e.g. if they type an invalid dial code).
   #getNewCountryFromNumber(fullNumber) {
     const plusIndex = fullNumber.indexOf("+");
-    let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
+    let number = plusIndex > 0 ? fullNumber.substring(plusIndex) : fullNumber;
     const selectedIso2 = this.#selectedCountryData?.iso2;
     const selectedDialCode = this.#selectedCountryData?.dialCode;
     number = this.#ensureHasDialCode(number);
@@ -3834,33 +3940,34 @@ var Iti = class _Iti {
   //* Update the maximum valid number length for the currently selected country.
   #updateMaxLength() {
     const { strictMode, placeholderNumberType, allowedNumberTypes } = this.#options;
+    if (!strictMode || !intlTelInput.utils) {
+      return;
+    }
     const iso2 = this.#selectedCountryData?.iso2;
-    if (strictMode && intlTelInput.utils) {
-      if (iso2) {
-        const numberType = intlTelInput.utils.numberType[placeholderNumberType];
-        let exampleNumber = intlTelInput.utils.getExampleNumber(
-          iso2,
-          false,
-          numberType,
-          true
-        );
-        let validNumber = exampleNumber;
-        while (intlTelInput.utils.isPossibleNumber(
-          exampleNumber,
-          iso2,
-          allowedNumberTypes
-        )) {
-          validNumber = exampleNumber;
-          exampleNumber += "0";
-        }
-        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
-        this.#maxCoreNumberLength = coreNumber.length;
-        if (iso2 === "by") {
-          this.#maxCoreNumberLength = coreNumber.length + 1;
-        }
-      } else {
-        this.#maxCoreNumberLength = null;
-      }
+    if (!iso2) {
+      this.#maxCoreNumberLength = null;
+      return;
+    }
+    const numberType = intlTelInput.utils.numberType[placeholderNumberType];
+    let exampleNumber = intlTelInput.utils.getExampleNumber(
+      iso2,
+      false,
+      numberType,
+      true
+    );
+    let validNumber = exampleNumber;
+    while (intlTelInput.utils.isPossibleNumber(
+      exampleNumber,
+      iso2,
+      allowedNumberTypes
+    )) {
+      validNumber = exampleNumber;
+      exampleNumber += "0";
+    }
+    const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
+    this.#maxCoreNumberLength = coreNumber.length;
+    if (iso2 === "by") {
+      this.#maxCoreNumberLength = coreNumber.length + 1;
     }
   }
   //* Update the input placeholder to an example number from the currently selected country.
@@ -3872,19 +3979,20 @@ var Iti = class _Iti {
       customPlaceholder
     } = this.#options;
     const shouldSetPlaceholder = autoPlaceholder === PLACEHOLDER_MODES.AGGRESSIVE || !this.#ui.hadInitialPlaceholder && autoPlaceholder === PLACEHOLDER_MODES.POLITE;
-    if (intlTelInput.utils && shouldSetPlaceholder) {
-      const numberType = intlTelInput.utils.numberType[placeholderNumberType];
-      let placeholder = this.#selectedCountryData ? intlTelInput.utils.getExampleNumber(
-        this.#selectedCountryData.iso2,
-        nationalMode,
-        numberType
-      ) : "";
-      placeholder = this.#beforeSetNumber(placeholder);
-      if (typeof customPlaceholder === "function") {
-        placeholder = customPlaceholder(placeholder, this.#selectedCountryData);
-      }
-      this.#ui.telInput.setAttribute("placeholder", placeholder);
+    if (!intlTelInput.utils || !shouldSetPlaceholder) {
+      return;
+    }
+    const numberType = intlTelInput.utils.numberType[placeholderNumberType];
+    let placeholder = this.#selectedCountryData ? intlTelInput.utils.getExampleNumber(
+      this.#selectedCountryData.iso2,
+      nationalMode,
+      numberType
+    ) : "";
+    placeholder = this.#beforeSetNumber(placeholder);
+    if (typeof customPlaceholder === "function") {
+      placeholder = customPlaceholder(placeholder, this.#selectedCountryData);
     }
+    this.#ui.telInput.setAttribute("placeholder", placeholder);
   }
   //* Called when the user selects a list item from the dropdown.
   #selectListItem(listItem) {
@@ -3916,46 +4024,49 @@ var Iti = class _Iti {
   //* Note: called from _selectListItem and setCountry
   #updateDialCode(newDialCodeBare) {
     const inputVal = this.#getTelInputValue();
+    if (!inputVal.startsWith("+")) {
+      return;
+    }
     const newDialCode = `+${newDialCodeBare}`;
+    const prevDialCode = this.#getDialCode(inputVal);
     let newNumber;
-    if (inputVal.startsWith("+")) {
-      const prevDialCode = this.#getDialCode(inputVal);
-      if (prevDialCode) {
-        newNumber = inputVal.replace(prevDialCode, newDialCode);
-      } else {
-        newNumber = newDialCode;
-      }
-      this.#setTelInputValue(newNumber);
+    if (prevDialCode) {
+      newNumber = inputVal.replace(prevDialCode, newDialCode);
+    } else {
+      newNumber = newDialCode;
     }
+    this.#setTelInputValue(newNumber);
   }
   //* Try and extract a valid international dial code from a full telephone number.
   //* Note: returns the raw string inc plus character and any whitespace/dots etc.
   #getDialCode(number, includeAreaCode) {
+    if (!number.startsWith("+")) {
+      return "";
+    }
     let dialCode = "";
-    if (number.startsWith("+")) {
-      let numericChars = "";
-      let foundBaseDialCode = false;
-      for (let i = 0; i < number.length; i++) {
-        const c = number.charAt(i);
-        if (/[0-9]/.test(c)) {
-          numericChars += c;
-          const hasMapEntry = Boolean(this.#dialCodeToIso2Map[numericChars]);
-          if (!hasMapEntry) {
-            break;
-          }
-          if (this.#dialCodes.has(numericChars)) {
-            dialCode = number.substring(0, i + 1);
-            foundBaseDialCode = true;
-            if (!includeAreaCode) {
-              break;
-            }
-          } else if (includeAreaCode && foundBaseDialCode) {
-            dialCode = number.substring(0, i + 1);
-          }
-          if (numericChars.length === this.#dialCodeMaxLen) {
-            break;
-          }
+    let numericChars = "";
+    let foundBaseDialCode = false;
+    for (let i = 0; i < number.length; i++) {
+      const c = number.charAt(i);
+      if (!/[0-9]/.test(c)) {
+        continue;
+      }
+      numericChars += c;
+      const hasMapEntry = Boolean(this.#dialCodeToIso2Map[numericChars]);
+      if (!hasMapEntry) {
+        break;
+      }
+      if (this.#dialCodes.has(numericChars)) {
+        dialCode = number.substring(0, i + 1);
+        foundBaseDialCode = true;
+        if (!includeAreaCode) {
+          break;
         }
+      } else if (includeAreaCode && foundBaseDialCode) {
+        dialCode = number.substring(0, i + 1);
+      }
+      if (numericChars.length === this.#dialCodeMaxLen) {
+        break;
       }
     }
     return dialCode;
@@ -4003,18 +4114,19 @@ var Iti = class _Iti {
   //**************************
   //* Called when the geoip call returns.
   #handleAutoCountry() {
+    if (!this.#autoCountryDeferred || !intlTelInput.autoCountry) {
+      return;
+    }
     if (this.#destroyed) {
-      this.#autoCountryDeferred?.resolve();
+      this.#autoCountryDeferred.resolve();
       return;
     }
-    if (this.#options.initialCountry === INITIAL_COUNTRY.AUTO && intlTelInput.autoCountry) {
-      this.#defaultCountry = intlTelInput.autoCountry;
-      const hasSelectedCountryOrGlobe = this.#selectedCountryData || this.#ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
-      if (!hasSelectedCountryOrGlobe) {
-        this.setCountry(this.#defaultCountry);
-      }
-      this.#autoCountryDeferred?.resolve();
+    this.#defaultCountry = intlTelInput.autoCountry;
+    const hasSelectedCountryOrGlobe = this.#selectedCountryData || this.#ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
+    if (!hasSelectedCountryOrGlobe) {
+      this.setCountry(this.#defaultCountry);
     }
+    this.#autoCountryDeferred.resolve();
   }
   //* Called when the geoip call fails or times out.
   #handleAutoCountryFailure() {
@@ -4031,15 +4143,17 @@ var Iti = class _Iti {
       this.#utilsScriptDeferred?.resolve();
       return;
     }
-    if (intlTelInput.utils) {
-      const inputValue = this.#getTelInputValue();
-      if (inputValue) {
-        this.#updateValFromNumber(inputValue);
-      }
-      if (this.#selectedCountryData) {
-        this.#updatePlaceholder();
-        this.#updateMaxLength();
-      }
+    if (!intlTelInput.utils) {
+      this.#utilsScriptDeferred?.resolve();
+      return;
+    }
+    const inputValue = this.#getTelInputValue();
+    if (inputValue) {
+      this.#updateValFromNumber(inputValue);
+    }
+    if (this.#selectedCountryData) {
+      this.#updatePlaceholder();
+      this.#updateMaxLength();
     }
     this.#utilsScriptDeferred?.resolve();
   }
@@ -4181,7 +4295,9 @@ var Iti = class _Iti {
     const hasAlphaChar = alphaCharPosition > -1;
     if (hasAlphaChar) {
       const selectedIso2 = this.#selectedCountryData?.iso2;
-      const hasExtension = Boolean(intlTelInput.utils.getExtension(val, selectedIso2));
+      const hasExtension = Boolean(
+        intlTelInput.utils.getExtension(val, selectedIso2)
+      );
       if (hasExtension) {
         return allowNumberExtensions;
       }
@@ -4207,15 +4323,16 @@ var Iti = class _Iti {
     }
     const currentCountry = this.#selectedCountryData?.iso2;
     const isCountryChange = iso2 && iso2Lower !== currentCountry || !iso2 && currentCountry;
-    if (isCountryChange) {
-      this.#setCountry(iso2Lower);
-      this.#updateDialCode(this.#selectedCountryData?.dialCode || "");
-      if (this.#options.formatOnDisplay) {
-        const inputValue = this.#getTelInputValue();
-        this.#updateValFromNumber(inputValue);
-      }
-      this.#triggerCountryChange();
+    if (!isCountryChange) {
+      return;
+    }
+    this.#setCountry(iso2Lower);
+    this.#updateDialCode(this.#selectedCountryData?.dialCode || "");
+    if (this.#options.formatOnDisplay) {
+      const inputValue = this.#getTelInputValue();
+      this.#updateValFromNumber(inputValue);
     }
+    this.#triggerCountryChange();
   }
   //* Set the input value and update the country.
   setNumber(number) {
@@ -4353,7 +4470,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "27.0.0"
+    version: "27.0.2"
   }
 );
 var intl_tel_input_default = intlTelInput;