intl-tel-input 25.8.6 → 25.10.1

package/vue/build/IntlTelInput.mjs

@@ -1,4 +1,4 @@
-import { mergeModels as k, useModel as M, ref as N, onMounted as E, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as V, openBlock as z, mergeProps as O, vModelText as $ } from "vue";
+import { mergeModels as A, useModel as M, ref as D, onMounted as E, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as V, openBlock as z, mergeProps as O, vModelText as $ } from "vue";
 const j = [
   [
     "af",
@@ -1594,13 +1594,15 @@ const U = {
 for (const u of w)
   u.name = T[u.iso2];
 let K = 0;
-const D = (u) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(u).matches, W = () => {
+const N = (u) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(u).matches, W = () => {
   if (typeof navigator < "u" && typeof window < "u") {
-    const u = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = D("(max-width: 500px)"), e = D("(max-height: 600px)"), i = D("(pointer: coarse)");
+    const u = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = N("(max-width: 500px)"), e = N("(max-height: 600px)"), i = N("(pointer: coarse)");
     return u || t || i && e;
   }
   return !1;
 }, x = {
+  // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
+  allowPhonewords: !1,
   //* Whether or not to allow the dropdown.
   allowDropdown: !0,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1667,7 +1669,7 @@ const D = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
   "887",
   "888",
   "889"
-], v = (u) => u.replace(/\D/g, ""), A = (u = "") => u.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), P = (u) => {
+], v = (u) => u.replace(/\D/g, ""), k = (u = "") => u.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), P = (u) => {
   const t = v(u);
   if (t.charAt(0) === "1") {
     const e = t.substring(1, 4);
@@ -1685,7 +1687,7 @@ const D = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
       return n;
   }
   return t.length;
-}, m = (u, t, e) => {
+}, y = (u, t, e) => {
   const i = document.createElement(u);
   return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
 }, I = (u, ...t) => {
@@ -1725,7 +1727,7 @@ class L {
   //* Precompute and cache country search tokens to speed up filtering
   _cacheSearchTokens() {
     for (const t of this.countries)
-      t.normalisedName = A(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`;
+      t.normalisedName = k(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`;
   }
   //* Sort countries by countryOrder option (if present), then name.
   _sortCountries() {
@@ -1813,13 +1815,14 @@ class L {
       "iti--show-flags": i,
       "iti--inline-dropdown": !d,
       [s]: !!s
-    }), y = m("div", { class: p });
-    if ((a = this.telInput.parentNode) == null || a.insertBefore(y, this.telInput), t || i || e) {
-      this.countryContainer = m(
+    }), m = y("div", { class: p });
+    if ((a = this.telInput.parentNode) == null || a.insertBefore(m, this.telInput), t || i || e) {
+      this.countryContainer = y(
         "div",
-        { class: "iti__country-container" },
-        y
-      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = m(
+        // visibly hidden until we measure it's width to set the input padding correctly
+        { class: "iti__country-container iti__v-hide" },
+        m
+      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = y(
         "button",
         {
           type: "button",
@@ -1830,42 +1833,42 @@ class L {
           "aria-controls": `iti-${this.id}__dropdown-content`
         },
         this.countryContainer
-      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m(
+      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = y(
         "div",
         { class: "iti__selected-country" },
         this.countryContainer
       );
-      const _ = m(
+      const _ = y(
         "div",
         { class: "iti__selected-country-primary" },
         this.selectedCountry
       );
-      if (this.selectedCountryInner = m(
+      if (this.selectedCountryInner = y(
         "div",
         { class: "iti__flag" },
         _
-      ), t && (this.dropdownArrow = m(
+      ), t && (this.dropdownArrow = y(
         "div",
         { class: "iti__arrow", "aria-hidden": "true" },
         _
-      )), e && (this.selectedDialCode = m(
+      )), e && (this.selectedDialCode = y(
         "div",
         { class: "iti__selected-dial-code", dir: "ltr" },
         this.selectedCountry
       )), t) {
         const b = o ? "" : "iti--flexible-dropdown-width";
-        if (this.dropdownContent = m("div", {
+        if (this.dropdownContent = y("div", {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${b}`,
           role: "dialog",
           "aria-modal": "true"
         }), C) {
-          const f = m(
+          const f = y(
             "div",
             { class: "iti__search-input-wrapper" },
             this.dropdownContent
           );
-          this.searchIcon = m(
+          this.searchIcon = y(
             "span",
             {
               class: "iti__search-icon",
@@ -1876,7 +1879,7 @@ class L {
             <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
               <circle cx="11" cy="11" r="7" />
               <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>`, this.searchInput = m(
+            </svg>`, this.searchInput = y(
             "input",
             {
               id: `iti-${this.id}__search-input`,
@@ -1893,7 +1896,7 @@ class L {
               autocomplete: "off"
             },
             f
-          ), this.searchClearButton = m(
+          ), this.searchClearButton = y(
             "button",
             {
               type: "button",
@@ -1911,11 +1914,11 @@ class L {
                 <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
               </mask>
               <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${S})" />
-            </svg>`, this.searchResultsA11yText = m(
+            </svg>`, this.searchResultsA11yText = y(
             "span",
             { class: "iti__a11y-text" },
             this.dropdownContent
-          ), this.searchNoResults = m(
+          ), this.searchNoResults = y(
             "div",
             {
               class: "iti__no-results iti__hide",
@@ -1925,7 +1928,7 @@ class L {
             this.dropdownContent
           ), this.searchNoResults.textContent = c.zeroSearchResults;
         }
-        if (this.countryList = m(
+        if (this.countryList = y(
           "ul",
           {
             class: "iti__country-list",
@@ -1942,33 +1945,33 @@ class L {
             "iti--inline-dropdown": !d,
             [s]: !!s
           });
-          this.dropdown = m("div", { class: f }), this.dropdown.appendChild(this.dropdownContent);
+          this.dropdown = y("div", { class: f }), this.dropdown.appendChild(this.dropdownContent);
         } else
           this.countryContainer.appendChild(this.dropdownContent);
       }
     }
-    if (y.appendChild(this.telInput), this._updateInputPadding(), n) {
+    if (m.appendChild(this.telInput), this.countryContainer && (this._updateInputPadding(), this.countryContainer.classList.remove("iti__v-hide")), n) {
       const _ = this.telInput.getAttribute("name") || "", b = n(_);
       if (b.phone) {
         const f = (h = this.telInput.form) == null ? void 0 : h.querySelector(`input[name="${b.phone}"]`);
-        f ? this.hiddenInput = f : (this.hiddenInput = m("input", {
+        f ? this.hiddenInput = f : (this.hiddenInput = y("input", {
           type: "hidden",
           name: b.phone
-        }), y.appendChild(this.hiddenInput));
+        }), m.appendChild(this.hiddenInput));
       }
       if (b.country) {
         const f = (g = this.telInput.form) == null ? void 0 : g.querySelector(`input[name="${b.country}"]`);
-        f ? this.hiddenInputCountry = f : (this.hiddenInputCountry = m("input", {
+        f ? this.hiddenInputCountry = f : (this.hiddenInputCountry = y("input", {
           type: "hidden",
           name: b.country
-        }), y.appendChild(this.hiddenInputCountry));
+        }), m.appendChild(this.hiddenInputCountry));
       }
     }
   }
   //* For each country: add a country list item <li> to the countryList <ul> container.
   _appendListItems() {
     for (let t = 0; t < this.countries.length; t++) {
-      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m(
+      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = y(
         "li",
         {
           id: `iti-${this.id}__item-${e.iso2}`,
@@ -2058,8 +2061,8 @@ class L {
     let r = !1;
     new RegExp("\\p{L}", "u").test(this.telInput.value) && (r = !0), this._handleInputEvent = (o) => {
       if (this.isAndroid && (o == null ? void 0 : o.data) === "+" && i && s && n) {
-        const p = this.telInput.selectionStart || 0, y = this.telInput.value.substring(0, p - 1), a = this.telInput.value.substring(p);
-        this.telInput.value = y + a, this._openDropdownWithPlus();
+        const p = this.telInput.selectionStart || 0, m = this.telInput.value.substring(0, p - 1), a = this.telInput.value.substring(p);
+        this.telInput.value = m + a, this._openDropdownWithPlus();
         return;
       }
       this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
@@ -2077,8 +2080,8 @@ class L {
           return;
         }
         if (t) {
-          const d = this.telInput.value, c = !(d.charAt(0) === "+") && this.telInput.selectionStart === 0 && o.key === "+", p = /^[0-9]$/.test(o.key), y = i ? p : c || p, a = d.slice(0, this.telInput.selectionStart) + o.key + d.slice(this.telInput.selectionEnd), h = this._getFullNumber(a), g = l.utils.getCoreNumber(h, this.selectedCountryData.iso2), _ = this.maxCoreNumberLength && g.length > this.maxCoreNumberLength, f = this._getNewCountryFromNumber(h) !== null;
-          (!y || _ && !f && !c) && o.preventDefault();
+          const d = this.telInput.value, c = !(d.charAt(0) === "+") && this.telInput.selectionStart === 0 && o.key === "+", p = /^[0-9]$/.test(o.key), m = i ? p : c || p, a = d.slice(0, this.telInput.selectionStart) + o.key + d.slice(this.telInput.selectionEnd), h = this._getFullNumber(a), g = l.utils.getCoreNumber(h, this.selectedCountryData.iso2), _ = this.maxCoreNumberLength && g.length > this.maxCoreNumberLength, f = this._getNewCountryFromNumber(h) !== null;
+          (!m || _ && !f && !c) && o.preventDefault();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
@@ -2167,10 +2170,10 @@ class L {
   _filterCountries(t, e = !1) {
     let i = !0;
     this.countryList.innerHTML = "";
-    const s = A(t), n = s.length, r = [], o = [], d = [], C = [], c = [], p = [];
+    const s = k(t), n = s.length, r = [], o = [], d = [], C = [], c = [], p = [];
     for (const a of this.countries)
       e || n === 0 ? d.push(a) : a.iso2 === s ? r.push(a) : a.normalisedName.startsWith(s) ? o.push(a) : a.normalisedName.includes(s) ? d.push(a) : s === a.dialCode || s === a.dialCodePlus ? C.push(a) : a.dialCodePlus.includes(s) ? c.push(a) : a.initials.includes(s) && p.push(a);
-    const y = [
+    const m = [
       ...r.sort((a, h) => a.priority - h.priority),
       ...o.sort((a, h) => a.priority - h.priority),
       ...d.sort((a, h) => a.priority - h.priority),
@@ -2178,7 +2181,7 @@ class L {
       ...c.sort((a, h) => a.priority - h.priority),
       ...p.sort((a, h) => a.priority - h.priority)
     ];
-    for (const a of y) {
+    for (const a of m) {
       const h = a.nodeById[this.id];
       h && (this.countryList.appendChild(h), i && (this._highlightListItem(h, !1), i = !1));
     }
@@ -2296,8 +2299,8 @@ class L {
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
     if (this.selectedCountry) {
-      const e = (this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth()) + 6;
-      this.showSelectedCountryOnLeft ? this.telInput.style.paddingLeft = `${e}px` : this.telInput.style.paddingRight = `${e}px`;
+      const t = this.options.separateDialCode ? 78 : 42, i = (this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || t) + 6;
+      this.showSelectedCountryOnLeft ? this.telInput.style.paddingLeft = `${i}px` : this.telInput.style.paddingRight = `${i}px`;
     }
   }
   //* Update the maximum valid number length for the currently selected country.
@@ -2319,20 +2322,26 @@ class L {
       } else
         this.maxCoreNumberLength = null;
   }
-  //* When the input is in a hidden container during initialisation, we must inject some markup
-  //* into the end of the DOM to calculate the correct offsetWidth.
-  //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
-  //* will definitely exist.
+  //* When input is in a hidden container during init, we cannot calculate the selected country width.
+  //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+  //* 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 t = this.telInput.parentNode.cloneNode(!1);
-      t.style.visibility = "hidden", document.body.appendChild(t);
-      const e = this.countryContainer.cloneNode();
-      t.appendChild(e);
-      const i = this.selectedCountry.cloneNode(!0);
+      let t;
+      try {
+        t = window.top.document.body;
+      } catch {
+        t = document.body;
+      }
+      const e = this.telInput.parentNode.cloneNode(!1);
+      e.style.visibility = "hidden", t.appendChild(e);
+      const i = this.countryContainer.cloneNode();
       e.appendChild(i);
-      const s = i.offsetWidth;
-      return document.body.removeChild(t), s;
+      const s = this.selectedCountry.cloneNode(!0);
+      i.appendChild(s);
+      const n = s.offsetWidth;
+      return t.removeChild(e), n;
     }
     return 0;
   }
@@ -2530,12 +2539,12 @@ class L {
   _validateNumber(t) {
     if (!this.selectedCountryData.iso2)
       return !1;
-    const e = this._getFullNumber(), i = e.search(new RegExp("\\p{L}", "u")), s = (n) => t ? this._utilsIsValidNumber(n) : this._utilsIsPossibleNumber(n);
-    if (i > -1) {
-      const n = e.substring(0, i), r = s(n), o = s(e);
-      return r && o;
+    const e = (r) => t ? this._utilsIsValidNumber(r) : this._utilsIsPossibleNumber(r), i = this._getFullNumber(), s = i.search(new RegExp("\\p{L}", "u"));
+    if (s > -1 && !this.options.allowPhonewords) {
+      const r = i.substring(0, s), o = e(r), d = e(i);
+      return o && d;
     }
-    return s(e);
+    return e(i);
   }
   _utilsIsValidNumber(t) {
     return l.utils ? l.utils.isValidNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
@@ -2600,11 +2609,11 @@ const Y = (u) => {
     attachUtils: Y,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.8.6"
+    version: "25.10.1"
   }
 ), Z = {
   __name: "IntlTelInput",
-  props: /* @__PURE__ */ k({
+  props: /* @__PURE__ */ A({
     disabled: {
       type: Boolean,
       default: !1
@@ -2628,14 +2637,14 @@ const Y = (u) => {
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ k([
+  emits: /* @__PURE__ */ A([
     "changeNumber",
     "changeCountry",
     "changeValidity",
     "changeErrorCode"
   ], ["update:modelValue"]),
   setup(u, { expose: t, emit: e }) {
-    const i = M(u, "modelValue"), s = u, n = e, r = N(), o = N(), d = N(!1), C = () => o.value ? s.options.strictMode ? o.value.isValidNumberPrecise() : o.value.isValidNumber() : null, c = () => {
+    const i = M(u, "modelValue"), s = u, n = e, r = D(), o = D(), d = D(!1), C = () => o.value ? s.options.strictMode ? o.value.isValidNumberPrecise() : o.value.isValidNumber() : null, c = () => {
       let a = C();
       d.value !== a && (d.value = a, n("changeValidity", !!a), n(
         "changeErrorCode",
@@ -2644,7 +2653,7 @@ const Y = (u) => {
     }, p = () => {
       var a;
       n("changeNumber", ((a = o.value) == null ? void 0 : a.getNumber()) ?? ""), c();
-    }, y = () => {
+    }, m = () => {
       var a;
       n("changeCountry", ((a = o.value) == null ? void 0 : a.getSelectedCountryData().iso2) ?? ""), p(), c();
     };
@@ -2664,7 +2673,7 @@ const Y = (u) => {
       ref: r,
       "onUpdate:modelValue": h[0] || (h[0] = (g) => i.value = g),
       type: "tel",
-      onCountrychange: y,
+      onCountrychange: m,
       onInput: p
     }, u.inputProps), null, 16)), [
       [