intl-tel-input 25.8.4 → 25.8.6

package/vue/build/IntlTelInput.mjs

@@ -1,5 +1,5 @@
-import { mergeModels as k, 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 j } from "vue";
-const $ = [
+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";
+const j = [
   [
     "af",
     // Afghanistan
@@ -1323,7 +1323,7 @@ const $ = [
     "263"
   ]
 ], w = [];
-for (const u of $)
+for (const u of j)
   w.push({
     name: "",
     // populated in the plugin
@@ -1579,7 +1579,7 @@ const U = {
   zm: "Zambia",
   zw: "Zimbabwe"
 }, H = {
-  selectedCountryAriaLabel: "Change country, selected ${country}",
+  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
@@ -1594,9 +1594,9 @@ const U = {
 for (const u of w)
   u.name = T[u.iso2];
 let K = 0;
-const N = (u) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(u).matches, W = () => {
+const D = (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 = N("(max-width: 500px)"), e = N("(max-height: 600px)"), i = N("(pointer: coarse)");
+    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)");
     return u || t || i && e;
   }
   return !1;
@@ -1685,7 +1685,7 @@ const N = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
       return n;
   }
   return t.length;
-}, C = (u, t, e) => {
+}, m = (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) => {
@@ -1805,21 +1805,21 @@ class L {
       dropdownContainer: r,
       fixDropdownWidth: o,
       useFullscreenPopup: d,
-      countrySearch: y,
-      i18n: p
-    } = this.options, c = L._buildClassNames({
+      countrySearch: C,
+      i18n: c
+    } = this.options, p = L._buildClassNames({
       iti: !0,
       "iti--allow-dropdown": t,
       "iti--show-flags": i,
       "iti--inline-dropdown": !d,
       [s]: !!s
-    }), m = C("div", { class: c });
-    if ((a = this.telInput.parentNode) == null || a.insertBefore(m, this.telInput), t || i || e) {
-      this.countryContainer = C(
+    }), y = m("div", { class: p });
+    if ((a = this.telInput.parentNode) == null || a.insertBefore(y, this.telInput), t || i || e) {
+      this.countryContainer = m(
         "div",
         { class: "iti__country-container" },
-        m
-      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = C(
+        y
+      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = m(
         "button",
         {
           type: "button",
@@ -1830,42 +1830,42 @@ class L {
           "aria-controls": `iti-${this.id}__dropdown-content`
         },
         this.countryContainer
-      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = C(
+      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m(
         "div",
         { class: "iti__selected-country" },
         this.countryContainer
       );
-      const _ = C(
+      const _ = m(
         "div",
         { class: "iti__selected-country-primary" },
         this.selectedCountry
       );
-      if (this.selectedCountryInner = C(
+      if (this.selectedCountryInner = m(
         "div",
         { class: "iti__flag" },
         _
-      ), t && (this.dropdownArrow = C(
+      ), t && (this.dropdownArrow = m(
         "div",
         { class: "iti__arrow", "aria-hidden": "true" },
         _
-      )), e && (this.selectedDialCode = C(
+      )), e && (this.selectedDialCode = m(
         "div",
         { class: "iti__selected-dial-code", dir: "ltr" },
         this.selectedCountry
       )), t) {
         const b = o ? "" : "iti--flexible-dropdown-width";
-        if (this.dropdownContent = C("div", {
+        if (this.dropdownContent = m("div", {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${b}`,
           role: "dialog",
           "aria-modal": "true"
-        }), y) {
-          const f = C(
+        }), C) {
+          const f = m(
             "div",
             { class: "iti__search-input-wrapper" },
             this.dropdownContent
           );
-          this.searchIcon = C(
+          this.searchIcon = m(
             "span",
             {
               class: "iti__search-icon",
@@ -1876,29 +1876,29 @@ 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 = C(
+            </svg>`, this.searchInput = m(
             "input",
             {
               id: `iti-${this.id}__search-input`,
               // Chrome says inputs need either a name or an id
               type: "search",
               class: "iti__search-input",
-              placeholder: p.searchPlaceholder,
+              placeholder: c.searchPlaceholder,
               // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
               role: "combobox",
               "aria-expanded": "true",
-              "aria-label": p.searchPlaceholder,
+              "aria-label": c.searchPlaceholder,
               "aria-controls": `iti-${this.id}__country-listbox`,
               "aria-autocomplete": "list",
               autocomplete: "off"
             },
             f
-          ), this.searchClearButton = C(
+          ), this.searchClearButton = m(
             "button",
             {
               type: "button",
               class: "iti__search-clear iti__hide",
-              "aria-label": p.clearSearchAriaLabel,
+              "aria-label": c.clearSearchAriaLabel,
               tabindex: "-1"
             },
             f
@@ -1911,11 +1911,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 = C(
+            </svg>`, this.searchResultsA11yText = m(
             "span",
             { class: "iti__a11y-text" },
             this.dropdownContent
-          ), this.searchNoResults = C(
+          ), this.searchNoResults = m(
             "div",
             {
               class: "iti__no-results iti__hide",
@@ -1923,18 +1923,18 @@ class L {
               // all a11y messaging happens in this.searchResultsA11yText
             },
             this.dropdownContent
-          ), this.searchNoResults.textContent = p.zeroSearchResults;
+          ), this.searchNoResults.textContent = c.zeroSearchResults;
         }
-        if (this.countryList = C(
+        if (this.countryList = m(
           "ul",
           {
             class: "iti__country-list",
             id: `iti-${this.id}__country-listbox`,
             role: "listbox",
-            "aria-label": p.countryListAriaLabel
+            "aria-label": c.countryListAriaLabel
           },
           this.dropdownContent
-        ), this._appendListItems(), y && this._updateSearchResultsA11yText(), r) {
+        ), this._appendListItems(), C && this._updateSearchResultsA11yText(), r) {
           const f = L._buildClassNames({
             iti: !0,
             "iti--container": !0,
@@ -1942,33 +1942,33 @@ class L {
             "iti--inline-dropdown": !d,
             [s]: !!s
           });
-          this.dropdown = C("div", { class: f }), this.dropdown.appendChild(this.dropdownContent);
+          this.dropdown = m("div", { class: f }), this.dropdown.appendChild(this.dropdownContent);
         } else
           this.countryContainer.appendChild(this.dropdownContent);
       }
     }
-    if (m.appendChild(this.telInput), this._updateInputPadding(), n) {
+    if (y.appendChild(this.telInput), this._updateInputPadding(), 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 = C("input", {
+        f ? this.hiddenInput = f : (this.hiddenInput = m("input", {
           type: "hidden",
           name: b.phone
-        }), m.appendChild(this.hiddenInput));
+        }), y.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 = C("input", {
+        f ? this.hiddenInputCountry = f : (this.hiddenInputCountry = m("input", {
           type: "hidden",
           name: b.country
-        }), m.appendChild(this.hiddenInputCountry));
+        }), y.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 = C(
+      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m(
         "li",
         {
           id: `iti-${this.id}__item-${e.iso2}`,
@@ -1990,12 +1990,12 @@ class L {
   //* 1. Extracting a dial code from the given number
   //* 2. Using explicit initialCountry
   _setInitialState(t = !1) {
-    const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i, r = this._getDialCode(n), o = P(n), { initialCountry: d, geoIpLookup: y } = this.options, p = d === "auto" && y;
+    const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i, r = this._getDialCode(n), o = P(n), { initialCountry: d, geoIpLookup: C } = this.options, c = d === "auto" && C;
     if (r && !o)
       this._updateCountryFromNumber(n);
-    else if (!p || t) {
-      const c = d ? d.toLowerCase() : "";
-      c && this._getCountryData(c, !0) ? this._setCountry(c) : r && o ? this._setCountry("us") : this._setCountry();
+    else if (!c || t) {
+      const p = d ? d.toLowerCase() : "";
+      p && this._getCountryData(p, !0) ? this._setCountry(p) : r && o ? this._setCountry("us") : this._setCountry();
     }
     n && this._updateValFromNumber(n);
   }
@@ -2058,16 +2058,16 @@ 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 c = this.telInput.selectionStart || 0, m = this.telInput.value.substring(0, c - 1), a = this.telInput.value.substring(c);
-        this.telInput.value = m + a, this._openDropdownWithPlus();
+        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();
         return;
       }
       this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
-      const d = (o == null ? void 0 : o.data) && /[^+0-9]/.test(o.data), y = (o == null ? void 0 : o.inputType) === "insertFromPaste" && this.telInput.value;
-      d || y && !t ? r = !0 : /[^+0-9]/.test(this.telInput.value) || (r = !1);
-      const p = (o == null ? void 0 : o.detail) && o.detail.isSetNumber;
-      if (e && !r && !p) {
-        const c = this.telInput.selectionStart || 0, a = this.telInput.value.substring(0, c).replace(/[^+0-9]/g, "").length, h = (o == null ? void 0 : o.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), _ = G(a, g, c, h);
+      const d = (o == null ? void 0 : o.data) && /[^+0-9]/.test(o.data), C = (o == null ? void 0 : o.inputType) === "insertFromPaste" && this.telInput.value;
+      d || C && !t ? r = !0 : /[^+0-9]/.test(this.telInput.value) || (r = !1);
+      const c = (o == null ? void 0 : o.detail) && o.detail.isSetNumber;
+      if (e && !r && !c) {
+        const p = this.telInput.selectionStart || 0, a = this.telInput.value.substring(0, p).replace(/[^+0-9]/g, "").length, h = (o == null ? void 0 : o.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), _ = G(a, g, p, h);
         this.telInput.value = g, this.telInput.setSelectionRange(_, _);
       }
     }, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (o) => {
@@ -2077,8 +2077,8 @@ class L {
           return;
         }
         if (t) {
-          const d = this.telInput.value, p = !(d.charAt(0) === "+") && this.telInput.selectionStart === 0 && o.key === "+", c = /^[0-9]$/.test(o.key), m = i ? c : p || c, 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 && !p) && o.preventDefault();
+          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();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
@@ -2167,18 +2167,18 @@ class L {
   _filterCountries(t, e = !1) {
     let i = !0;
     this.countryList.innerHTML = "";
-    const s = A(t), n = s.length, r = [], o = [], d = [], y = [], p = [], c = [];
+    const s = A(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 ? y.push(a) : a.dialCodePlus.includes(s) ? p.push(a) : a.initials.includes(s) && c.push(a);
-    const m = [
+      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 = [
       ...r.sort((a, h) => a.priority - h.priority),
       ...o.sort((a, h) => a.priority - h.priority),
       ...d.sort((a, h) => a.priority - h.priority),
-      ...y.sort((a, h) => a.priority - h.priority),
-      ...p.sort((a, h) => a.priority - h.priority),
-      ...c.sort((a, h) => a.priority - h.priority)
+      ...C.sort((a, h) => a.priority - h.priority),
+      ...c.sort((a, h) => a.priority - h.priority),
+      ...p.sort((a, h) => a.priority - h.priority)
     ];
-    for (const a of m) {
+    for (const a of y) {
       const h = a.nodeById[this.id];
       h && (this.countryList.appendChild(h), i && (this._highlightListItem(h, !1), i = !1));
     }
@@ -2237,12 +2237,12 @@ class L {
     i = this._ensureHasDialCode(i);
     const r = this._getDialCode(i, !0), o = v(i);
     if (r) {
-      const d = v(r), y = this.dialCodeToIso2Map[d];
-      if (!s && this.defaultCountry && y.includes(this.defaultCountry))
+      const d = v(r), C = this.dialCodeToIso2Map[d];
+      if (!s && this.defaultCountry && C.includes(this.defaultCountry))
         return this.defaultCountry;
-      const p = this.selectedCountryData.areaCodes && o.length > d.length, c = s && y.includes(s) && !p;
-      if (!(n === "1" && P(o)) && !c) {
-        for (const a of y)
+      const c = this.selectedCountryData.areaCodes && o.length > d.length, p = s && C.includes(s) && !c;
+      if (!(n === "1" && P(o)) && !p) {
+        for (const a of C)
           if (a)
             return a;
       }
@@ -2276,17 +2276,22 @@ class L {
   //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(t) {
-    const { separateDialCode: e, showFlags: i, i18n: s } = this.options, n = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
+    const { separateDialCode: e, showFlags: i, i18n: s } = this.options, n = this.selectedCountryData.iso2 || "";
     if (this.selectedCountryData = t ? this._getCountryData(t, !1) || {} : {}, this.selectedCountryData.iso2 && (this.defaultCountry = this.selectedCountryData.iso2), this.selectedCountry) {
       const r = t && i ? `iti__flag iti__${t}` : "iti__flag iti__globe";
       let o, d;
-      t ? (d = this.selectedCountryData.name, o = s.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name)) : (d = s.noCountrySelected, o = s.noCountrySelected), this.selectedCountryInner.className = r, this.selectedCountry.setAttribute("title", d), this.selectedCountry.setAttribute("aria-label", o);
+      if (t) {
+        const { name: C, dialCode: c } = this.selectedCountryData;
+        d = C, o = s.selectedCountryAriaLabel.replace("${countryName}", C).replace("${dialCode}", `+${c}`);
+      } else
+        d = s.noCountrySelected, o = s.noCountrySelected;
+      this.selectedCountryInner.className = r, this.selectedCountry.setAttribute("title", d), this.selectedCountry.setAttribute("aria-label", o);
     }
     if (e) {
       const r = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = r, this._updateInputPadding();
     }
-    return this._updatePlaceholder(), this._updateMaxLength(), n.iso2 !== t;
+    return this._updatePlaceholder(), this._updateMaxLength(), n !== t;
   }
   //* Update the input padding to make space for the selected country/dial code.
   _updateInputPadding() {
@@ -2368,12 +2373,12 @@ class L {
   }
   //* Check if an element is visible within it's container, else scroll until it is.
   _scrollTo(t) {
-    const e = this.countryList, i = document.documentElement.scrollTop, s = e.offsetHeight, n = e.getBoundingClientRect().top + i, r = n + s, o = t.offsetHeight, d = t.getBoundingClientRect().top + i, y = d + o, p = d - n + e.scrollTop;
+    const e = this.countryList, i = document.documentElement.scrollTop, s = e.offsetHeight, n = e.getBoundingClientRect().top + i, r = n + s, o = t.offsetHeight, d = t.getBoundingClientRect().top + i, C = d + o, c = d - n + e.scrollTop;
     if (d < n)
-      e.scrollTop = p;
-    else if (y > r) {
-      const c = s - o;
-      e.scrollTop = p - c;
+      e.scrollTop = c;
+    else if (C > r) {
+      const p = s - o;
+      e.scrollTop = c - p;
     }
   }
   //* Replace any existing dial code with the new one
@@ -2595,7 +2600,7 @@ const Y = (u) => {
     attachUtils: Y,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.8.4"
+    version: "25.8.6"
   }
 ), Z = {
   __name: "IntlTelInput",
@@ -2630,21 +2635,21 @@ const Y = (u) => {
     "changeErrorCode"
   ], ["update:modelValue"]),
   setup(u, { expose: t, emit: e }) {
-    const i = M(u, "modelValue"), s = u, n = e, r = D(), o = D(), d = D(!1), y = () => o.value ? s.options.strictMode ? o.value.isValidNumberPrecise() : o.value.isValidNumber() : null, p = () => {
-      let a = y();
+    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 = () => {
+      let a = C();
       d.value !== a && (d.value = a, n("changeValidity", !!a), n(
         "changeErrorCode",
         a ? null : o.value.getValidationError()
       ));
-    }, c = () => {
+    }, p = () => {
       var a;
-      n("changeNumber", ((a = o.value) == null ? void 0 : a.getNumber()) ?? ""), p();
-    }, m = () => {
+      n("changeNumber", ((a = o.value) == null ? void 0 : a.getNumber()) ?? ""), c();
+    }, y = () => {
       var a;
-      n("changeCountry", ((a = o.value) == null ? void 0 : a.getSelectedCountryData().iso2) ?? ""), c(), p();
+      n("changeCountry", ((a = o.value) == null ? void 0 : a.getSelectedCountryData().iso2) ?? ""), p(), c();
     };
     return E(() => {
-      r.value && (o.value = l(r.value, s.options), s.value && o.value.setNumber(s.value), s.disabled && o.value.setDisabled(s.disabled), d.value = y());
+      r.value && (o.value = l(r.value, s.options), s.value && o.value.setNumber(s.value), s.disabled && o.value.setDisabled(s.disabled), d.value = C());
     }), B(
       () => s.disabled,
       (a) => {
@@ -2659,11 +2664,11 @@ const Y = (u) => {
       ref: r,
       "onUpdate:modelValue": h[0] || (h[0] = (g) => i.value = g),
       type: "tel",
-      onCountrychange: m,
-      onInput: c
+      onCountrychange: y,
+      onInput: p
     }, u.inputProps), null, 16)), [
       [
-        j,
+        $,
         i.value,
         void 0,
         { lazy: !0 }