intl-tel-input 28.0.5 → 28.0.7

package/dist/js/intlTelInputWithUtils.mjs

@@ -2467,6 +2467,7 @@ var UI = class _UI {
   #highlightedListItemEl = null;
   #listItemByIso2 = /* @__PURE__ */ new Map();
   #dropdownAbortController = null;
+  #resizeObserver;
   // public
   telInputEl;
   hadInitialPlaceholder;
@@ -2508,6 +2509,7 @@ var UI = class _UI {
     this.#buildCountryContainer(wrapper);
     wrapper.appendChild(this.telInputEl);
     this.#updateInputPaddingAndReveal();
+    this.#observeSelectedCountryResize();
     this.#buildHiddenInputs(wrapper);
     this.ensureDropdownWidthSet();
   }
@@ -2515,6 +2517,7 @@ var UI = class _UI {
     const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.#options;
     const parentClasses = buildClassNames({
       iti: true,
+      "iti--input-container": true,
       "iti--allow-dropdown": allowDropdown,
       "iti--show-flags": showFlags,
       "iti--inline-dropdown": !useFullscreenPopup,
@@ -2800,6 +2803,18 @@ var UI = class _UI {
       this.telInputEl.style.paddingLeft = `${inputPadding}px`;
     }
   }
+  //* Keep the input padding in sync when the selected country's rendered width changes — e.g. responsive font-size shifts that change the dial code text width. Skip while hidden (offsetWidth === 0) so we don't waste work or clobber the padding using a fallback constant.
+  #observeSelectedCountryResize() {
+    if (!this.#selectedCountryEl || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    this.#resizeObserver = new ResizeObserver(() => {
+      if (this.#selectedCountryEl?.offsetWidth) {
+        this.#updateInputPadding();
+      }
+    });
+    this.#resizeObserver.observe(this.#selectedCountryEl);
+  }
   static #getBody() {
     let body;
     try {
@@ -3375,6 +3390,7 @@ var UI = class _UI {
   destroy() {
     this.telInputEl.iti = void 0;
     delete this.telInputEl.dataset[DATA_KEYS.INSTANCE_ID];
+    this.#resizeObserver?.disconnect();
     this.telInputEl.style.paddingLeft = this.#originalPaddingLeft;
     const wrapper = this.telInputEl.parentNode;
     if (wrapper) {
@@ -3767,17 +3783,32 @@ var Iti = class _Iti {
     }
     intlTelInput.startedLoadingAutoCountry = true;
     if (typeof this.#options.geoIpLookup === "function") {
+      let timeoutId;
       try {
-        const iso2 = await this.#options.geoIpLookup();
+        const iso2 = await Promise.race([
+          this.#options.geoIpLookup(),
+          new Promise((_, reject) => {
+            timeoutId = setTimeout(
+              () => reject(new Error("intl-tel-input: geoIpLookup timed out after 10s")),
+              1e4
+            );
+          })
+        ]);
         const iso2Lower = typeof iso2 === "string" ? iso2.toLowerCase() : "";
         if (!isIso2(iso2Lower)) {
+          intlTelInput.startedLoadingAutoCountry = false;
           _Iti.forEachInstance("handleAutoCountryFailure");
           return;
         }
         intlTelInput.autoCountry = iso2Lower;
         setTimeout(() => _Iti.forEachInstance("handleAutoCountryLoaded"));
       } catch {
+        intlTelInput.startedLoadingAutoCountry = false;
         _Iti.forEachInstance("handleAutoCountryFailure");
+      } finally {
+        if (timeoutId !== void 0) {
+          clearTimeout(timeoutId);
+        }
       }
     }
   }
@@ -4683,7 +4714,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.5",
+    version: "28.0.7",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "28.0.5",
+  "version": "28.0.7",
   "description": "A JavaScript library for entering, formatting, and validating international telephone numbers",
   "type": "module",
   "license": "MIT",