intl-tel-input 26.1.1 → 26.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 A JavaScript plugin for entering, formatting and validating international telephone numbers. React, Vue, Angular and Svelte components also included.
 
-[Explore docs »](https://intl-tel-input.com/docs/getting-started.html)
+[Explore docs »](https://intl-tel-input.com/docs/getting-started)
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/vanilla-dark.png">

package/angular/README.md

@@ -54,7 +54,7 @@ import "intl-tel-input/styles";
 
 See the [validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) for a more fleshed-out example of how to handle validation, or check out the [form demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/form/form.component.ts) for an alternative approach using `ReactiveFormsModule`.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize), then you can just `import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the utils.js file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN-hosted version, e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@26.1.1/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize), then you can just `import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the utils.js file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN-hosted version, e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@26.3.0/build/js/utils.js"`.
 
 ## Props
 

package/angular/build/IntlTelInput.js

@@ -1713,6 +1713,7 @@ var CLASSES = {
   ARROW_UP: "iti__arrow--up",
   GLOBE: "iti__globe",
   FLAG: "iti__flag",
+  LOADING: "iti__loading",
   COUNTRY_ITEM: "iti__country",
   HIGHLIGHT: "iti__highlight"
 };
@@ -1832,6 +1833,8 @@ var computeDefaultUseFullscreenPopup = () => {
 var defaults = {
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
+  //* The number type to enforce during validation.
+  allowedNumberTypes: ["MOBILE", "FIXED_LINE"],
   //* Whether or not to allow extensions after the main number.
   allowNumberExtensions: false,
   // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
@@ -1881,9 +1884,7 @@ var defaults = {
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
   strictMode: false,
   //* Use full screen popup instead of dropdown for country list.
-  useFullscreenPopup: computeDefaultUseFullscreenPopup(),
-  //* The number type to enforce during validation.
-  allowedNumberTypes: ["MOBILE", "FIXED_LINE"]
+  useFullscreenPopup: computeDefaultUseFullscreenPopup()
 };
 var applyOptionSideEffects = (o) => {
   if (o.useFullscreenPopup) {
@@ -1986,6 +1987,10 @@ var buildClearIcon = (id2) => {
       <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
     </svg>`;
 };
+var buildCheckIcon = () => `
+  <svg class="iti__country-check-svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" focusable="false" ${ARIA.HIDDEN}="true">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+  </svg>`;
 var buildGlobeIcon = () => `
   <svg width="256" height="256" viewBox="0 0 512 512" class="iti__globe-svg">
     <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
@@ -2213,7 +2218,7 @@ var UI = class {
       }
       const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
       nameEl.textContent = c.name;
-      const dialEl = createEl("span", { class: "iti__dial-code" }, listItem);
+      const dialEl = createEl("span", { class: "iti__dial-code" }, nameEl);
       if (this.isRTL) {
         dialEl.setAttribute("dir", "ltr");
       }
@@ -2298,15 +2303,20 @@ var UI = class {
       this.highlightedItem.focus();
     }
   }
+  // Update the selected list item in the dropdown
   updateSelectedItem(iso2) {
+    var _a;
     if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
       this.selectedItem.setAttribute(ARIA.SELECTED, "false");
+      (_a = this.selectedItem.querySelector(".iti__country-check")) === null || _a === void 0 ? void 0 : _a.remove();
       this.selectedItem = null;
     }
     if (iso2 && !this.selectedItem) {
       const newListItem = this.countryList.querySelector(`[data-country-code="${iso2}"]`);
       if (newListItem) {
         newListItem.setAttribute(ARIA.SELECTED, "true");
+        const checkIcon = createEl("span", { class: "iti__country-check", [ARIA.HIDDEN]: "true" }, newListItem);
+        checkIcon.innerHTML = buildCheckIcon();
         this.selectedItem = newListItem;
       }
     }
@@ -2558,7 +2568,7 @@ var Iti = class {
     applyOptionSideEffects(this.options);
     this.ui = new UI(input, this.options, this.id);
     this.isAndroid = getIsAndroid();
-    this.promise = this._createInitPromises();
+    this.promise = this._createInitPromises(this.options);
     this.countries = processAllCountries(this.options);
     const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(this.countries);
     this.dialCodes = dialCodes;
@@ -2606,15 +2616,36 @@ var Iti = class {
   _setTelInputValue(asciiValue) {
     this.ui.telInput.value = this._mapAsciiToUserNumerals(asciiValue);
   }
-  _createInitPromises() {
-    const autoCountryPromise = new Promise((resolve, reject) => {
-      this.resolveAutoCountryPromise = resolve;
-      this.rejectAutoCountryPromise = reject;
-    });
-    const utilsScriptPromise = new Promise((resolve, reject) => {
-      this.resolveUtilsScriptPromise = resolve;
-      this.rejectUtilsScriptPromise = reject;
-    });
+  _createInitPromises(options) {
+    const { initialCountry, geoIpLookup, loadUtils } = options;
+    const needsAutoCountryPromise = initialCountry === INITIAL_COUNTRY.AUTO && Boolean(geoIpLookup);
+    const needsUtilsScriptPromise = Boolean(loadUtils) && !intlTelInput.utils;
+    let autoCountryPromise;
+    if (needsAutoCountryPromise) {
+      autoCountryPromise = new Promise((resolve, reject) => {
+        this.resolveAutoCountryPromise = resolve;
+        this.rejectAutoCountryPromise = reject;
+      });
+    } else {
+      autoCountryPromise = Promise.resolve(void 0);
+      this.resolveAutoCountryPromise = () => {
+      };
+      this.rejectAutoCountryPromise = () => {
+      };
+    }
+    let utilsScriptPromise;
+    if (needsUtilsScriptPromise) {
+      utilsScriptPromise = new Promise((resolve, reject) => {
+        this.resolveUtilsScriptPromise = resolve;
+        this.rejectUtilsScriptPromise = reject;
+      });
+    } else {
+      utilsScriptPromise = Promise.resolve(void 0);
+      this.resolveUtilsScriptPromise = () => {
+      };
+      this.rejectUtilsScriptPromise = () => {
+      };
+    }
     return Promise.all([autoCountryPromise, utilsScriptPromise]);
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
@@ -2649,19 +2680,23 @@ var Iti = class {
     const isRegionlessNanpNumber = isRegionlessNanp(val);
     const { initialCountry, geoIpLookup } = this.options;
     const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
-    if (dialCode && !isRegionlessNanpNumber) {
-      this._updateCountryFromNumber(val);
-    } else if (!isAutoCountry || overrideAutoCountry) {
-      const lowerInitialCountry = initialCountry ? initialCountry.toLowerCase() : "";
-      if (isIso2(lowerInitialCountry)) {
-        this._setCountry(lowerInitialCountry);
-      } else {
-        if (dialCode && isRegionlessNanpNumber) {
+    const doingAutoCountryLookup = isAutoCountry && !overrideAutoCountry;
+    const initialCountryLower = initialCountry.toLowerCase();
+    const isValidInitialCountry = isIso2(initialCountryLower);
+    if (dialCode) {
+      if (isRegionlessNanpNumber) {
+        if (isValidInitialCountry) {
+          this._setCountry(initialCountryLower);
+        } else if (!doingAutoCountryLookup) {
           this._setCountry(US.ISO2);
-        } else {
-          this._setCountry("");
         }
+      } else {
+        this._updateCountryFromNumber(val);
       }
+    } else if (isValidInitialCountry) {
+      this._setCountry(initialCountryLower);
+    } else if (!doingAutoCountryLookup) {
+      this._setCountry("");
     }
     if (val) {
       this._updateValFromNumber(val);
@@ -2728,7 +2763,7 @@ var Iti = class {
     };
     this.ui.countryContainer.addEventListener("keydown", handleCountryContainerKeydown, { signal });
   }
-  //* Init many requests: utils script / geo ip lookup.
+  //* Init requests: utils script / geo ip lookup.
   _initRequests() {
     const { loadUtils, initialCountry, geoIpLookup } = this.options;
     if (loadUtils && !intlTelInput.utils) {
@@ -2751,32 +2786,39 @@ var Iti = class {
       this.resolveUtilsScriptPromise();
     }
     const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
-    if (isAutoCountry && !this.selectedCountryData.iso2) {
-      this._loadAutoCountry();
-    } else {
-      this.resolveAutoCountryPromise();
+    if (isAutoCountry) {
+      if (this.selectedCountryData.iso2) {
+        this.resolveAutoCountryPromise();
+      } else {
+        this._loadAutoCountry();
+      }
     }
   }
   //* Perform the geo ip lookup.
   _loadAutoCountry() {
     if (intlTelInput.autoCountry) {
       this.handleAutoCountry();
-    } else if (!intlTelInput.startedLoadingAutoCountry) {
-      intlTelInput.startedLoadingAutoCountry = true;
-      if (typeof this.options.geoIpLookup === "function") {
-        this.options.geoIpLookup((iso2 = "") => {
-          const iso2Lower = iso2.toLowerCase();
-          if (isIso2(iso2Lower)) {
-            intlTelInput.autoCountry = iso2Lower;
-            setTimeout(() => forEachInstance("handleAutoCountry"));
-          } else {
-            this._setInitialState(true);
-            forEachInstance("rejectAutoCountryPromise");
-          }
-        }, () => {
-          this._setInitialState(true);
-          forEachInstance("rejectAutoCountryPromise");
-        });
+    } 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(() => forEachInstance("handleAutoCountry"));
+            } else {
+              forEachInstance("handleAutoCountryFailure");
+            }
+          };
+          const failureCallback = () => {
+            this.ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
+            forEachInstance("handleAutoCountryFailure");
+          };
+          this.options.geoIpLookup(successCallback, failureCallback);
+        }
       }
     }
   }
@@ -3175,9 +3217,7 @@ var Iti = class {
     const cleanNumber = hasPrefix ? number.substring(1) : number;
     return `+${dialCode}${cleanNumber}`;
   }
-  // Get the country ISO2 code from the given number
-  // BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
-  // NOTE: consider refactoring this to be more clear
+  //* 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;
@@ -3224,7 +3264,7 @@ var Iti = class {
         return null;
       }
       return "";
-    } else if ((!number || number === "+") && !selectedIso2) {
+    } else if ((!number || number === "+") && !selectedIso2 && this.defaultCountry) {
       return this.defaultCountry;
     }
     return null;
@@ -3428,6 +3468,11 @@ var Iti = class {
       this.resolveAutoCountryPromise();
     }
   }
+  //* This is called when the geoip call fails or times out.
+  handleAutoCountryFailure() {
+    this._setInitialState(true);
+    this.rejectAutoCountryPromise();
+  }
   //* This is called when the utils request completes.
   handleUtils() {
     if (intlTelInput.utils) {
@@ -3442,6 +3487,10 @@ var Iti = class {
     }
     this.resolveUtilsScriptPromise();
   }
+  //* This is called when the utils request fails or times out.
+  handleUtilsFailure(error) {
+    this.rejectUtilsScriptPromise(error);
+  }
   //********************
   //*  PUBLIC METHODS
   //********************
@@ -3610,7 +3659,7 @@ var attachUtils = (source) => {
       forEachInstance("handleUtils");
       return true;
     }).catch((error) => {
-      forEachInstance("rejectUtilsScriptPromise", error);
+      forEachInstance("handleUtilsFailure", error);
       throw error;
     });
   }
@@ -3645,7 +3694,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "26.1.1"
+  version: "26.3.0"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/IntlTelInputWithUtils.js

@@ -1713,6 +1713,7 @@ var CLASSES = {
   ARROW_UP: "iti__arrow--up",
   GLOBE: "iti__globe",
   FLAG: "iti__flag",
+  LOADING: "iti__loading",
   COUNTRY_ITEM: "iti__country",
   HIGHLIGHT: "iti__highlight"
 };
@@ -1832,6 +1833,8 @@ var computeDefaultUseFullscreenPopup = () => {
 var defaults = {
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
+  //* The number type to enforce during validation.
+  allowedNumberTypes: ["MOBILE", "FIXED_LINE"],
   //* Whether or not to allow extensions after the main number.
   allowNumberExtensions: false,
   // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
@@ -1881,9 +1884,7 @@ var defaults = {
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
   strictMode: false,
   //* Use full screen popup instead of dropdown for country list.
-  useFullscreenPopup: computeDefaultUseFullscreenPopup(),
-  //* The number type to enforce during validation.
-  allowedNumberTypes: ["MOBILE", "FIXED_LINE"]
+  useFullscreenPopup: computeDefaultUseFullscreenPopup()
 };
 var applyOptionSideEffects = (o) => {
   if (o.useFullscreenPopup) {
@@ -1986,6 +1987,10 @@ var buildClearIcon = (id2) => {
       <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
     </svg>`;
 };
+var buildCheckIcon = () => `
+  <svg class="iti__country-check-svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" focusable="false" ${ARIA.HIDDEN}="true">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+  </svg>`;
 var buildGlobeIcon = () => `
   <svg width="256" height="256" viewBox="0 0 512 512" class="iti__globe-svg">
     <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
@@ -2213,7 +2218,7 @@ var UI = class {
       }
       const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
       nameEl.textContent = c.name;
-      const dialEl = createEl("span", { class: "iti__dial-code" }, listItem);
+      const dialEl = createEl("span", { class: "iti__dial-code" }, nameEl);
       if (this.isRTL) {
         dialEl.setAttribute("dir", "ltr");
       }
@@ -2298,15 +2303,20 @@ var UI = class {
       this.highlightedItem.focus();
     }
   }
+  // Update the selected list item in the dropdown
   updateSelectedItem(iso2) {
+    var _a;
     if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
       this.selectedItem.setAttribute(ARIA.SELECTED, "false");
+      (_a = this.selectedItem.querySelector(".iti__country-check")) === null || _a === void 0 ? void 0 : _a.remove();
       this.selectedItem = null;
     }
     if (iso2 && !this.selectedItem) {
       const newListItem = this.countryList.querySelector(`[data-country-code="${iso2}"]`);
       if (newListItem) {
         newListItem.setAttribute(ARIA.SELECTED, "true");
+        const checkIcon = createEl("span", { class: "iti__country-check", [ARIA.HIDDEN]: "true" }, newListItem);
+        checkIcon.innerHTML = buildCheckIcon();
         this.selectedItem = newListItem;
       }
     }
@@ -2558,7 +2568,7 @@ var Iti = class {
     applyOptionSideEffects(this.options);
     this.ui = new UI(input, this.options, this.id);
     this.isAndroid = getIsAndroid();
-    this.promise = this._createInitPromises();
+    this.promise = this._createInitPromises(this.options);
     this.countries = processAllCountries(this.options);
     const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(this.countries);
     this.dialCodes = dialCodes;
@@ -2606,15 +2616,36 @@ var Iti = class {
   _setTelInputValue(asciiValue) {
     this.ui.telInput.value = this._mapAsciiToUserNumerals(asciiValue);
   }
-  _createInitPromises() {
-    const autoCountryPromise = new Promise((resolve, reject) => {
-      this.resolveAutoCountryPromise = resolve;
-      this.rejectAutoCountryPromise = reject;
-    });
-    const utilsScriptPromise = new Promise((resolve, reject) => {
-      this.resolveUtilsScriptPromise = resolve;
-      this.rejectUtilsScriptPromise = reject;
-    });
+  _createInitPromises(options) {
+    const { initialCountry, geoIpLookup, loadUtils } = options;
+    const needsAutoCountryPromise = initialCountry === INITIAL_COUNTRY.AUTO && Boolean(geoIpLookup);
+    const needsUtilsScriptPromise = Boolean(loadUtils) && !intlTelInput.utils;
+    let autoCountryPromise;
+    if (needsAutoCountryPromise) {
+      autoCountryPromise = new Promise((resolve, reject) => {
+        this.resolveAutoCountryPromise = resolve;
+        this.rejectAutoCountryPromise = reject;
+      });
+    } else {
+      autoCountryPromise = Promise.resolve(void 0);
+      this.resolveAutoCountryPromise = () => {
+      };
+      this.rejectAutoCountryPromise = () => {
+      };
+    }
+    let utilsScriptPromise;
+    if (needsUtilsScriptPromise) {
+      utilsScriptPromise = new Promise((resolve, reject) => {
+        this.resolveUtilsScriptPromise = resolve;
+        this.rejectUtilsScriptPromise = reject;
+      });
+    } else {
+      utilsScriptPromise = Promise.resolve(void 0);
+      this.resolveUtilsScriptPromise = () => {
+      };
+      this.rejectUtilsScriptPromise = () => {
+      };
+    }
     return Promise.all([autoCountryPromise, utilsScriptPromise]);
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
@@ -2649,19 +2680,23 @@ var Iti = class {
     const isRegionlessNanpNumber = isRegionlessNanp(val);
     const { initialCountry, geoIpLookup } = this.options;
     const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
-    if (dialCode && !isRegionlessNanpNumber) {
-      this._updateCountryFromNumber(val);
-    } else if (!isAutoCountry || overrideAutoCountry) {
-      const lowerInitialCountry = initialCountry ? initialCountry.toLowerCase() : "";
-      if (isIso2(lowerInitialCountry)) {
-        this._setCountry(lowerInitialCountry);
-      } else {
-        if (dialCode && isRegionlessNanpNumber) {
+    const doingAutoCountryLookup = isAutoCountry && !overrideAutoCountry;
+    const initialCountryLower = initialCountry.toLowerCase();
+    const isValidInitialCountry = isIso2(initialCountryLower);
+    if (dialCode) {
+      if (isRegionlessNanpNumber) {
+        if (isValidInitialCountry) {
+          this._setCountry(initialCountryLower);
+        } else if (!doingAutoCountryLookup) {
           this._setCountry(US.ISO2);
-        } else {
-          this._setCountry("");
         }
+      } else {
+        this._updateCountryFromNumber(val);
       }
+    } else if (isValidInitialCountry) {
+      this._setCountry(initialCountryLower);
+    } else if (!doingAutoCountryLookup) {
+      this._setCountry("");
     }
     if (val) {
       this._updateValFromNumber(val);
@@ -2728,7 +2763,7 @@ var Iti = class {
     };
     this.ui.countryContainer.addEventListener("keydown", handleCountryContainerKeydown, { signal });
   }
-  //* Init many requests: utils script / geo ip lookup.
+  //* Init requests: utils script / geo ip lookup.
   _initRequests() {
     const { loadUtils, initialCountry, geoIpLookup } = this.options;
     if (loadUtils && !intlTelInput.utils) {
@@ -2751,32 +2786,39 @@ var Iti = class {
       this.resolveUtilsScriptPromise();
     }
     const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
-    if (isAutoCountry && !this.selectedCountryData.iso2) {
-      this._loadAutoCountry();
-    } else {
-      this.resolveAutoCountryPromise();
+    if (isAutoCountry) {
+      if (this.selectedCountryData.iso2) {
+        this.resolveAutoCountryPromise();
+      } else {
+        this._loadAutoCountry();
+      }
     }
   }
   //* Perform the geo ip lookup.
   _loadAutoCountry() {
     if (intlTelInput.autoCountry) {
       this.handleAutoCountry();
-    } else if (!intlTelInput.startedLoadingAutoCountry) {
-      intlTelInput.startedLoadingAutoCountry = true;
-      if (typeof this.options.geoIpLookup === "function") {
-        this.options.geoIpLookup((iso2 = "") => {
-          const iso2Lower = iso2.toLowerCase();
-          if (isIso2(iso2Lower)) {
-            intlTelInput.autoCountry = iso2Lower;
-            setTimeout(() => forEachInstance("handleAutoCountry"));
-          } else {
-            this._setInitialState(true);
-            forEachInstance("rejectAutoCountryPromise");
-          }
-        }, () => {
-          this._setInitialState(true);
-          forEachInstance("rejectAutoCountryPromise");
-        });
+    } 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(() => forEachInstance("handleAutoCountry"));
+            } else {
+              forEachInstance("handleAutoCountryFailure");
+            }
+          };
+          const failureCallback = () => {
+            this.ui.selectedCountryInner.classList.remove(CLASSES.LOADING);
+            forEachInstance("handleAutoCountryFailure");
+          };
+          this.options.geoIpLookup(successCallback, failureCallback);
+        }
       }
     }
   }
@@ -3175,9 +3217,7 @@ var Iti = class {
     const cleanNumber = hasPrefix ? number.substring(1) : number;
     return `+${dialCode}${cleanNumber}`;
   }
-  // Get the country ISO2 code from the given number
-  // BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
-  // NOTE: consider refactoring this to be more clear
+  //* 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;
@@ -3224,7 +3264,7 @@ var Iti = class {
         return null;
       }
       return "";
-    } else if ((!number || number === "+") && !selectedIso2) {
+    } else if ((!number || number === "+") && !selectedIso2 && this.defaultCountry) {
       return this.defaultCountry;
     }
     return null;
@@ -3428,6 +3468,11 @@ var Iti = class {
       this.resolveAutoCountryPromise();
     }
   }
+  //* This is called when the geoip call fails or times out.
+  handleAutoCountryFailure() {
+    this._setInitialState(true);
+    this.rejectAutoCountryPromise();
+  }
   //* This is called when the utils request completes.
   handleUtils() {
     if (intlTelInput.utils) {
@@ -3442,6 +3487,10 @@ var Iti = class {
     }
     this.resolveUtilsScriptPromise();
   }
+  //* This is called when the utils request fails or times out.
+  handleUtilsFailure(error) {
+    this.rejectUtilsScriptPromise(error);
+  }
   //********************
   //*  PUBLIC METHODS
   //********************
@@ -3610,7 +3659,7 @@ var attachUtils = (source) => {
       forEachInstance("handleUtils");
       return true;
     }).catch((error) => {
-      forEachInstance("rejectUtilsScriptPromise", error);
+      forEachInstance("handleUtilsFailure", error);
       throw error;
     });
   }
@@ -3645,7 +3694,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "26.1.1"
+  version: "26.3.0"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/types/intl-tel-input.d.ts

@@ -75,7 +75,9 @@ export declare class Iti {
     private _beforeSetNumber;
     private _triggerCountryChange;
     handleAutoCountry(): void;
+    handleAutoCountryFailure(): void;
     handleUtils(): void;
+    handleUtilsFailure(error: any): void;
     destroy(): void;
     getExtension(): string;
     getNumber(format?: number): string;

package/angular/build/types/modules/constants.d.ts

@@ -11,6 +11,7 @@ export declare const CLASSES: {
     readonly ARROW_UP: "iti__arrow--up";
     readonly GLOBE: "iti__globe";
     readonly FLAG: "iti__flag";
+    readonly LOADING: "iti__loading";
     readonly COUNTRY_ITEM: "iti__country";
     readonly HIGHLIGHT: "iti__highlight";
 };

package/angular/build/types/modules/core/icons.d.ts

@@ -5,5 +5,7 @@ export declare const buildSearchIcon: () => string;
  * @param id Instance id used to create a unique mask id.
  */
 export declare const buildClearIcon: (id: number) => string;
+/** Check icon shown next to the selected country in the dropdown. */
+export declare const buildCheckIcon: () => string;
 /** Globe icon used when no country is selected */
 export declare const buildGlobeIcon: () => string;