intl-tel-input 25.7.0 → 25.8.0

package/vue/build/IntlTelInput.mjs

@@ -1,5 +1,5 @@
-import { mergeModels as N, useModel as x, ref as L, onMounted as E, watch as M, onUnmounted as B, withDirectives as F, createElementBlock as V, openBlock as z, mergeProps as R, vModelText as O } from "vue";
-const $ = [
+import { mergeModels as A, useModel as E, ref as N, onMounted as M, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as z, openBlock as V, mergeProps as O, vModelText as $ } from "vue";
+const j = [
   [
     "af",
     // Afghanistan
@@ -1323,7 +1323,7 @@ const $ = [
     "263"
   ]
 ], w = [];
-for (const d of $)
+for (const d of j)
   w.push({
     name: "",
     // populated in the plugin
@@ -1335,7 +1335,7 @@ for (const d of $)
     // populated by the plugin
     nationalPrefix: d[4] || null
   });
-const j = {
+const U = {
   ad: "Andorra",
   ae: "United Arab Emirates",
   af: "Afghanistan",
@@ -1578,28 +1578,29 @@ const j = {
   za: "South Africa",
   zm: "Zambia",
   zw: "Zimbabwe"
-}, U = {
+}, H = {
   selectedCountryAriaLabel: "Selected country",
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
+  clearSearchAriaLabel: "Clear search",
   zeroSearchResults: "No results found",
   oneSearchResult: "1 result found",
   multipleSearchResults: "${count} results found",
   // additional countries (not supported by country-list library)
   ac: "Ascension Island",
   xk: "Kosovo"
-}, k = { ...j, ...U };
+}, T = { ...U, ...H };
 for (const d of w)
-  d.name = k[d.iso2];
-let H = 0;
-const D = (d) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(d).matches, K = () => {
+  d.name = T[d.iso2];
+let K = 0;
+const S = (d) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(d).matches, W = () => {
   if (typeof navigator < "u" && typeof window < "u") {
-    const d = /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 d = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = S("(max-width: 500px)"), e = S("(max-height: 600px)"), i = S("(pointer: coarse)");
     return d || t || i && e;
   }
   return !1;
-}, P = {
+}, x = {
   //* Whether or not to allow the dropdown.
   allowDropdown: !0,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1645,10 +1646,10 @@ const D = (d) => typeof window < "u" && typeof window.matchMedia == "function" &
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
   strictMode: !1,
   //* Use full screen popup instead of dropdown for country list.
-  useFullscreenPopup: K(),
+  useFullscreenPopup: W(),
   //* The number type to enforce during validation.
   validationNumberTypes: ["MOBILE"]
-}, W = [
+}, q = [
   "800",
   "822",
   "833",
@@ -1666,14 +1667,14 @@ const D = (d) => typeof window < "u" && typeof window.matchMedia == "function" &
   "887",
   "888",
   "889"
-], v = (d) => d.replace(/\D/g, ""), S = (d = "") => d.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), A = (d) => {
-  const t = v(d);
+], L = (d) => d.replace(/\D/g, ""), k = (d = "") => d.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), P = (d) => {
+  const t = L(d);
   if (t.charAt(0) === "1") {
     const e = t.substring(1, 4);
-    return W.includes(e);
+    return q.includes(e);
   }
   return !1;
-}, q = (d, t, e, i) => {
+}, G = (d, t, e, i) => {
   if (e === 0 && !i)
     return 0;
   let s = 0;
@@ -1684,22 +1685,29 @@ const D = (d) => typeof window < "u" && typeof window.matchMedia == "function" &
       return n;
   }
   return t.length;
-}, m = (d, t, e) => {
+}, C = (d, t, e) => {
   const i = document.createElement(d);
   return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
 }, I = (d, ...t) => {
   const { instances: e } = u;
   Object.values(e).forEach((i) => i[d](...t));
 };
-class G {
+class D {
+  /**
+   * Build a space-delimited class string from an object map of className -> truthy/falsey.
+   * Only keys with truthy values are included.
+   */
+  static _buildClassNames(t) {
+    return Object.keys(t).filter((e) => !!t[e]).join(" ");
+  }
   constructor(t, e = {}) {
-    this.id = H++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, P, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
+    this.id = K++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, x, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
   _init() {
     this.options.useFullscreenPopup && (this.options.fixDropdownWidth = !1), this.options.onlyCountries.length === 1 && (this.options.initialCountry = this.options.onlyCountries[0]), this.options.separateDialCode && (this.options.nationalMode = !1), this.options.allowDropdown && !this.options.showFlags && !this.options.separateDialCode && (this.options.nationalMode = !1), this.options.useFullscreenPopup && !this.options.dropdownContainer && (this.options.dropdownContainer = document.body), this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]"), this.telInput.dir = "ltr";
     const t = this.options.allowDropdown || this.options.separateDialCode;
-    this.showSelectedCountryOnLeft = this.isRTL ? !t : t, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft), this.options.i18n = { ...k, ...this.options.i18n };
+    this.showSelectedCountryOnLeft = this.isRTL ? !t : t, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft), this.options.i18n = { ...T, ...this.options.i18n };
     const e = new Promise((s, n) => {
       this.resolveAutoCountryPromise = s, this.rejectAutoCountryPromise = n;
     }), i = new Promise((s, n) => {
@@ -1717,7 +1725,7 @@ class G {
   //* Precompute and cache country search tokens to speed up filtering
   _cacheSearchTokens() {
     for (const t of this.countries)
-      t.normalisedName = S(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() {
@@ -1786,7 +1794,7 @@ class G {
   }
   //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
   _generateMarkup() {
-    var a, h, b;
+    var a, h, _;
     this.telInput.classList.add("iti__tel-input"), !this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete")) && this.telInput.setAttribute("autocomplete", "off");
     const {
       allowDropdown: t,
@@ -1797,108 +1805,166 @@ class G {
       dropdownContainer: o,
       fixDropdownWidth: l,
       useFullscreenPopup: r,
-      countrySearch: p,
-      i18n: C
-    } = this.options;
-    let c = "iti";
-    t && (c += " iti--allow-dropdown"), i && (c += " iti--show-flags"), s && (c += ` ${s}`), r || (c += " iti--inline-dropdown");
-    const y = m("div", { class: c });
-    if ((a = this.telInput.parentNode) == null || a.insertBefore(y, this.telInput), t || i || e) {
-      this.countryContainer = m(
+      countrySearch: c,
+      i18n: p
+    } = this.options, y = D._buildClassNames({
+      iti: !0,
+      "iti--allow-dropdown": t,
+      "iti--show-flags": i,
+      "iti--inline-dropdown": !r,
+      [s]: !!s
+    }), m = C("div", { class: y });
+    if ((a = this.telInput.parentNode) == null || a.insertBefore(m, this.telInput), t || i || e) {
+      this.countryContainer = C(
         "div",
         { class: "iti__country-container" },
-        y
-      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = m(
+        m
+      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = C(
         "button",
         {
           type: "button",
           class: "iti__selected-country",
           "aria-expanded": "false",
           "aria-label": this.options.i18n.selectedCountryAriaLabel,
-          "aria-haspopup": "true",
-          "aria-controls": `iti-${this.id}__dropdown-content`,
-          role: "combobox"
+          "aria-haspopup": "dialog",
+          "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 = C(
         "div",
         { class: "iti__selected-country" },
         this.countryContainer
       );
-      const _ = m("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      if (this.selectedCountryInner = m("div", { class: "iti__flag" }, _), this.selectedCountryA11yText = m(
+      const b = C("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
+      if (this.selectedCountryInner = C("div", { class: "iti__flag" }, b), this.selectedCountryA11yText = C(
         "span",
         { class: "iti__a11y-text" },
         this.selectedCountryInner
-      ), t && (this.dropdownArrow = m(
+      ), t && (this.dropdownArrow = C(
         "div",
         { class: "iti__arrow", "aria-hidden": "true" },
-        _
-      )), e && (this.selectedDialCode = m(
+        b
+      )), e && (this.selectedDialCode = C(
         "div",
         { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
         this.selectedCountry
       )), t) {
         const f = l ? "" : "iti--flexible-dropdown-width";
-        if (this.dropdownContent = m("div", {
+        if (this.dropdownContent = C("div", {
           id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${f}`
-        }), p && (this.searchInput = m(
-          "input",
-          {
-            type: "text",
-            class: "iti__search-input",
-            placeholder: C.searchPlaceholder,
-            role: "combobox",
-            "aria-expanded": "true",
-            "aria-label": C.searchPlaceholder,
-            "aria-controls": `iti-${this.id}__country-listbox`,
-            "aria-autocomplete": "list",
-            autocomplete: "off"
-          },
-          this.dropdownContent
-        ), this.searchResultsA11yText = m(
-          "span",
-          { class: "iti__a11y-text" },
-          this.dropdownContent
-        )), this.countryList = m(
+          class: `iti__dropdown-content iti__hide ${f}`,
+          role: "dialog",
+          "aria-modal": "true"
+        }), c) {
+          const g = C(
+            "div",
+            { class: "iti__search-input-wrapper" },
+            this.dropdownContent
+          );
+          this.searchIcon = C(
+            "span",
+            {
+              class: "iti__search-icon",
+              "aria-hidden": "true"
+            },
+            g
+          ), this.searchIcon.innerHTML = `
+            <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(
+            "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,
+              // 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-controls": `iti-${this.id}__country-listbox`,
+              "aria-autocomplete": "list",
+              autocomplete: "off"
+            },
+            g
+          ), this.searchClearButton = C(
+            "button",
+            {
+              type: "button",
+              class: "iti__search-clear iti__hide",
+              "aria-label": p.clearSearchAriaLabel,
+              tabindex: "-1"
+            },
+            g
+          );
+          const v = `iti-${this.id}-clear-mask`;
+          this.searchClearButton.innerHTML = `
+            <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+              <mask id="${v}" maskUnits="userSpaceOnUse">
+                <rect width="16" height="16" fill="white" />
+                <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(#${v})" />
+            </svg>`, this.searchResultsA11yText = C(
+            "span",
+            { class: "iti__a11y-text" },
+            this.dropdownContent
+          ), this.searchNoResults = C(
+            "div",
+            {
+              class: "iti__no-results iti__hide",
+              "aria-hidden": "true"
+              // all a11y messaging happens in this.searchResultsA11yText
+            },
+            this.dropdownContent
+          ), this.searchNoResults.textContent = p.zeroSearchResults;
+        }
+        if (this.countryList = C(
           "ul",
           {
             class: "iti__country-list",
             id: `iti-${this.id}__country-listbox`,
             role: "listbox",
-            "aria-label": C.countryListAriaLabel
+            "aria-label": p.countryListAriaLabel
           },
           this.dropdownContent
-        ), this._appendListItems(), p && this._updateSearchResultsText(), o) {
-          let g = "iti iti--container";
-          s && (g += ` ${s}`), r ? g += " iti--fullscreen-popup" : g += " iti--inline-dropdown", this.dropdown = m("div", { class: g }), this.dropdown.appendChild(this.dropdownContent);
+        ), this._appendListItems(), c && this._updateSearchResultsA11yText(), o) {
+          const g = D._buildClassNames({
+            iti: !0,
+            "iti--container": !0,
+            "iti--fullscreen-popup": r,
+            "iti--inline-dropdown": !r,
+            [s]: !!s
+          });
+          this.dropdown = C("div", { class: g }), this.dropdown.appendChild(this.dropdownContent);
         } else
           this.countryContainer.appendChild(this.dropdownContent);
       }
     }
-    if (y.appendChild(this.telInput), this._updateInputPadding(), n) {
-      const _ = this.telInput.getAttribute("name") || "", f = n(_);
+    if (m.appendChild(this.telInput), this._updateInputPadding(), n) {
+      const b = this.telInput.getAttribute("name") || "", f = n(b);
       if (f.phone) {
         const g = (h = this.telInput.form) == null ? void 0 : h.querySelector(`input[name="${f.phone}"]`);
-        g ? this.hiddenInput = g : (this.hiddenInput = m("input", {
+        g ? this.hiddenInput = g : (this.hiddenInput = C("input", {
           type: "hidden",
           name: f.phone
-        }), y.appendChild(this.hiddenInput));
+        }), m.appendChild(this.hiddenInput));
       }
       if (f.country) {
-        const g = (b = this.telInput.form) == null ? void 0 : b.querySelector(`input[name="${f.country}"]`);
-        g ? this.hiddenInputCountry = g : (this.hiddenInputCountry = m("input", {
+        const g = (_ = this.telInput.form) == null ? void 0 : _.querySelector(`input[name="${f.country}"]`);
+        g ? this.hiddenInputCountry = g : (this.hiddenInputCountry = C("input", {
           type: "hidden",
           name: f.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 = C(
         "li",
         {
           id: `iti-${this.id}__item-${e.iso2}`,
@@ -1920,12 +1986,12 @@ class G {
   //* 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, o = this._getDialCode(n), l = A(n), { initialCountry: r, geoIpLookup: p } = this.options, C = r === "auto" && p;
+    const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i, o = this._getDialCode(n), l = P(n), { initialCountry: r, geoIpLookup: c } = this.options, p = r === "auto" && c;
     if (o && !l)
       this._updateCountryFromNumber(n);
-    else if (!C || t) {
-      const c = r ? r.toLowerCase() : "";
-      c && this._getCountryData(c, !0) ? this._setCountry(c) : o && l ? this._setCountry("us") : this._setCountry();
+    else if (!p || t) {
+      const y = r ? r.toLowerCase() : "";
+      y && this._getCountryData(y, !0) ? this._setCountry(y) : o && l ? this._setCountry("us") : this._setCountry();
     }
     n && this._updateValFromNumber(n);
   }
@@ -1988,17 +2054,17 @@ class G {
     let l = !1;
     new RegExp("\\p{L}", "u").test(this.telInput.value) && (l = !0), this._handleInputEvent = (r) => {
       if (this.isAndroid && (r == null ? void 0 : r.data) === "+" && i && n && o) {
-        const y = this.telInput.selectionStart || 0, a = this.telInput.value.substring(0, y - 1), h = this.telInput.value.substring(y);
+        const m = this.telInput.selectionStart || 0, a = this.telInput.value.substring(0, m - 1), h = this.telInput.value.substring(m);
         this.telInput.value = a + h, this._openDropdownWithPlus();
         return;
       }
       this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
-      const p = (r == null ? void 0 : r.data) && /[^+0-9]/.test(r.data), C = (r == null ? void 0 : r.inputType) === "insertFromPaste" && this.telInput.value;
-      p || C && !t ? l = !0 : /[^+0-9]/.test(this.telInput.value) || (l = !1);
-      const c = (r == null ? void 0 : r.detail) && r.detail.isSetNumber && !s;
-      if (e && !l && !c) {
-        const y = this.telInput.selectionStart || 0, h = this.telInput.value.substring(0, y).replace(/[^+0-9]/g, "").length, b = (r == null ? void 0 : r.inputType) === "deleteContentForward", _ = this._formatNumberAsYouType(), f = q(h, _, y, b);
-        this.telInput.value = _, this.telInput.setSelectionRange(f, f);
+      const c = (r == null ? void 0 : r.data) && /[^+0-9]/.test(r.data), p = (r == null ? void 0 : r.inputType) === "insertFromPaste" && this.telInput.value;
+      c || p && !t ? l = !0 : /[^+0-9]/.test(this.telInput.value) || (l = !1);
+      const y = (r == null ? void 0 : r.detail) && r.detail.isSetNumber && !s;
+      if (e && !l && !y) {
+        const m = this.telInput.selectionStart || 0, h = this.telInput.value.substring(0, m).replace(/[^+0-9]/g, "").length, _ = (r == null ? void 0 : r.inputType) === "deleteContentForward", b = this._formatNumberAsYouType(), f = G(h, b, m, _);
+        this.telInput.value = b, this.telInput.setSelectionRange(f, f);
       }
     }, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (r) => {
       if (r.key && r.key.length === 1 && !r.altKey && !r.ctrlKey && !r.metaKey) {
@@ -2007,8 +2073,8 @@ class G {
           return;
         }
         if (t) {
-          const p = this.telInput.value, c = !(p.charAt(0) === "+") && this.telInput.selectionStart === 0 && r.key === "+", y = /^[0-9]$/.test(r.key), a = i ? y : c || y, h = p.slice(0, this.telInput.selectionStart) + r.key + p.slice(this.telInput.selectionEnd), b = this._getFullNumber(h), _ = u.utils.getCoreNumber(b, this.selectedCountryData.iso2), f = this.maxCoreNumberLength && _.length > this.maxCoreNumberLength, T = this._getNewCountryFromNumber(b) !== null;
-          (!a || f && !T && !c) && r.preventDefault();
+          const c = this.telInput.value, y = !(c.charAt(0) === "+") && this.telInput.selectionStart === 0 && r.key === "+", m = /^[0-9]$/.test(r.key), a = i ? m : y || m, h = c.slice(0, this.telInput.selectionStart) + r.key + c.slice(this.telInput.selectionEnd), _ = this._getFullNumber(h), b = u.utils.getCoreNumber(_, this.selectedCountryData.iso2), f = this.maxCoreNumberLength && b.length > this.maxCoreNumberLength, v = this._getNewCountryFromNumber(_) !== null;
+          (!a || f && !v && !y) && r.preventDefault();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
@@ -2072,14 +2138,16 @@ class G {
     }, document.addEventListener("keydown", this._handleKeydownOnDropdown), this.options.countrySearch) {
       const s = () => {
         const o = this.searchInput.value.trim();
-        o ? this._filterCountries(o) : this._filterCountries("", !0);
+        o ? this._filterCountries(o) : this._filterCountries("", !0), this.searchInput.value ? this.searchClearButton.classList.remove("iti__hide") : this.searchClearButton.classList.add("iti__hide");
       };
       let n = null;
       this._handleSearchChange = () => {
         n && clearTimeout(n), n = setTimeout(() => {
           s(), n = null;
         }, 100);
-      }, this.searchInput.addEventListener("input", this._handleSearchChange), this.searchInput.addEventListener("click", (o) => o.stopPropagation());
+      }, this.searchInput.addEventListener("input", this._handleSearchChange), this._handleSearchClear = (o) => {
+        o.stopPropagation(), this.searchInput.value = "", this.searchInput.focus(), s();
+      }, this.searchClearButton.addEventListener("click", this._handleSearchClear), this.searchInput.addEventListener("click", (o) => o.stopPropagation());
     }
   }
   //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -2095,25 +2163,25 @@ class G {
   _filterCountries(t, e = !1) {
     let i = !0;
     this.countryList.innerHTML = "";
-    const s = S(t), n = s.length, o = [], l = [], r = [], p = [], C = [], c = [];
+    const s = k(t), n = s.length, o = [], l = [], r = [], c = [], p = [], y = [];
     for (const a of this.countries)
-      e || n === 0 ? r.push(a) : a.iso2 === s ? o.push(a) : a.normalisedName.startsWith(s) ? l.push(a) : a.normalisedName.includes(s) ? r.push(a) : s === a.dialCode || s === a.dialCodePlus ? p.push(a) : a.dialCodePlus.includes(s) ? C.push(a) : a.initials.includes(s) && c.push(a);
-    const y = [
+      e || n === 0 ? r.push(a) : a.iso2 === s ? o.push(a) : a.normalisedName.startsWith(s) ? l.push(a) : a.normalisedName.includes(s) ? r.push(a) : s === a.dialCode || s === a.dialCodePlus ? c.push(a) : a.dialCodePlus.includes(s) ? p.push(a) : a.initials.includes(s) && y.push(a);
+    const m = [
       ...o.sort((a, h) => a.priority - h.priority),
       ...l.sort((a, h) => a.priority - h.priority),
       ...r.sort((a, h) => a.priority - h.priority),
+      ...c.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)
+      ...y.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));
     }
-    i && this._highlightListItem(null, !1), this.countryList.scrollTop = 0, this._updateSearchResultsText();
+    i ? (this._highlightListItem(null, !1), this.searchNoResults && this.searchNoResults.classList.remove("iti__hide")) : this.searchNoResults && this.searchNoResults.classList.add("iti__hide"), this.countryList.scrollTop = 0, this._updateSearchResultsA11yText();
   }
   //* Update search results text (for a11y).
-  _updateSearchResultsText() {
+  _updateSearchResultsA11yText() {
     const { i18n: t } = this.options, e = this.countryList.childElementCount;
     let i;
     "searchResultsText" in t ? i = t.searchResultsText(e) : e === 0 ? i = t.zeroSearchResults : e === 1 ? i = t.oneSearchResult : i = t.multipleSearchResults.replace("${count}", e.toString()), this.searchResultsA11yText.textContent = i;
@@ -2163,14 +2231,14 @@ class G {
     let i = e ? t.substring(e) : t;
     const s = this.selectedCountryData.iso2, n = this.selectedCountryData.dialCode;
     i = this._ensureHasDialCode(i);
-    const o = this._getDialCode(i, !0), l = v(i);
+    const o = this._getDialCode(i, !0), l = L(i);
     if (o) {
-      const r = v(o), p = this.dialCodeToIso2Map[r];
-      if (!s && this.defaultCountry && p.includes(this.defaultCountry))
+      const r = L(o), c = this.dialCodeToIso2Map[r];
+      if (!s && this.defaultCountry && c.includes(this.defaultCountry))
         return this.defaultCountry;
-      const C = this.selectedCountryData.areaCodes && l.length > r.length, c = s && p.includes(s) && !C;
-      if (!(n === "1" && A(l)) && !c) {
-        for (const a of p)
+      const p = this.selectedCountryData.areaCodes && l.length > r.length, y = s && c.includes(s) && !p;
+      if (!(n === "1" && P(l)) && !y) {
+        for (const a of c)
           if (a)
             return a;
       }
@@ -2185,10 +2253,9 @@ class G {
   //* Remove highlighting from other list items and highlight the given item.
   _highlightListItem(t, e) {
     const i = this.highlightedItem;
-    if (i && (i.classList.remove("iti__highlight"), i.setAttribute("aria-selected", "false")), this.highlightedItem = t, this.highlightedItem) {
-      this.highlightedItem.classList.add("iti__highlight"), this.highlightedItem.setAttribute("aria-selected", "true");
+    if (i && (i.classList.remove("iti__highlight"), i.setAttribute("aria-selected", "false")), this.highlightedItem = t, this.highlightedItem && (this.highlightedItem.classList.add("iti__highlight"), this.highlightedItem.setAttribute("aria-selected", "true"), this.options.countrySearch)) {
       const s = this.highlightedItem.getAttribute("id") || "";
-      this.selectedCountry.setAttribute("aria-activedescendant", s), this.options.countrySearch && this.searchInput.setAttribute("aria-activedescendant", s);
+      this.searchInput.setAttribute("aria-activedescendant", s);
     }
     e && this.highlightedItem.focus();
   }
@@ -2292,7 +2359,7 @@ class G {
   }
   //* Close the dropdown and unbind any listeners.
   _closeDropdown() {
-    this.dropdownContent.classList.add("iti__hide"), this.selectedCountry.setAttribute("aria-expanded", "false"), this.selectedCountry.removeAttribute("aria-activedescendant"), this.highlightedItem && this.highlightedItem.setAttribute("aria-selected", "false"), this.options.countrySearch && this.searchInput.removeAttribute("aria-activedescendant"), this.dropdownArrow.classList.remove("iti__arrow--up"), document.removeEventListener("keydown", this._handleKeydownOnDropdown), this.options.countrySearch && this.searchInput.removeEventListener("input", this._handleSearchChange), document.documentElement.removeEventListener(
+    this.dropdownContent.classList.add("iti__hide"), this.selectedCountry.setAttribute("aria-expanded", "false"), this.highlightedItem && this.highlightedItem.setAttribute("aria-selected", "false"), this.options.countrySearch && this.searchInput.removeAttribute("aria-activedescendant"), this.dropdownArrow.classList.remove("iti__arrow--up"), this.options.countrySearch && (this.searchInput.removeEventListener("input", this._handleSearchChange), this.searchClearButton.removeEventListener("click", this._handleSearchClear)), document.documentElement.removeEventListener(
       "click",
       this._handleClickOffToClose
     ), this.countryList.removeEventListener(
@@ -2302,12 +2369,12 @@ class G {
   }
   //* 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, o = n + s, l = t.offsetHeight, r = t.getBoundingClientRect().top + i, p = r + l, C = r - n + e.scrollTop;
+    const e = this.countryList, i = document.documentElement.scrollTop, s = e.offsetHeight, n = e.getBoundingClientRect().top + i, o = n + s, l = t.offsetHeight, r = t.getBoundingClientRect().top + i, c = r + l, p = r - n + e.scrollTop;
     if (r < n)
-      e.scrollTop = C;
-    else if (p > o) {
-      const c = s - l;
-      e.scrollTop = C - c;
+      e.scrollTop = p;
+    else if (c > o) {
+      const y = s - l;
+      e.scrollTop = p - y;
     }
   }
   //* Replace any existing dial code with the new one
@@ -2346,7 +2413,7 @@ class G {
   _getFullNumber(t) {
     const e = t || this.telInput.value.trim(), { dialCode: i } = this.selectedCountryData;
     let s;
-    const n = v(e);
+    const n = L(e);
     return this.options.separateDialCode && e.charAt(0) !== "+" && i && n ? s = `+${i}` : s = "", s + e;
   }
   //* Remove the dial code if separateDialCode is enabled also cap the length if the input has a maxlength attribute
@@ -2510,11 +2577,11 @@ const Y = (d) => {
   return null;
 }, u = Object.assign(
   (d, t) => {
-    const e = new G(d, t);
+    const e = new D(d, t);
     return e._init(), d.setAttribute("data-intl-tel-input-id", e.id.toString()), u.instances[e.id] = e, d.iti = e, e;
   },
   {
-    defaults: P,
+    defaults: x,
     //* Using a static var like this allows us to mock it in the tests.
     documentReady: () => document.readyState === "complete",
     //* Get the country data object.
@@ -2529,11 +2596,11 @@ const Y = (d) => {
     attachUtils: Y,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.7.0"
+    version: "25.8.0"
   }
 ), Z = {
   __name: "IntlTelInput",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ A({
     disabled: {
       type: Boolean,
       default: !1
@@ -2557,47 +2624,47 @@ const Y = (d) => {
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ N([
+  emits: /* @__PURE__ */ A([
     "changeNumber",
     "changeCountry",
     "changeValidity",
     "changeErrorCode"
   ], ["update:modelValue"]),
   setup(d, { expose: t, emit: e }) {
-    const i = x(d, "modelValue"), s = d, n = e, o = L(), l = L(), r = L(!1), p = () => l.value ? s.options.strictMode ? l.value.isValidNumberPrecise() : l.value.isValidNumber() : null, C = () => {
-      let a = p();
+    const i = E(d, "modelValue"), s = d, n = e, o = N(), l = N(), r = N(!1), c = () => l.value ? s.options.strictMode ? l.value.isValidNumberPrecise() : l.value.isValidNumber() : null, p = () => {
+      let a = c();
       r.value !== a && (r.value = a, n("changeValidity", !!a), n(
         "changeErrorCode",
         a ? null : l.value.getValidationError()
       ));
-    }, c = () => {
-      var a;
-      n("changeNumber", ((a = l.value) == null ? void 0 : a.getNumber()) ?? ""), C();
     }, y = () => {
       var a;
-      n("changeCountry", ((a = l.value) == null ? void 0 : a.getSelectedCountryData().iso2) ?? ""), c(), C();
+      n("changeNumber", ((a = l.value) == null ? void 0 : a.getNumber()) ?? ""), p();
+    }, m = () => {
+      var a;
+      n("changeCountry", ((a = l.value) == null ? void 0 : a.getSelectedCountryData().iso2) ?? ""), y(), p();
     };
-    return E(() => {
-      o.value && (l.value = u(o.value, s.options), s.value && l.value.setNumber(s.value), s.disabled && l.value.setDisabled(s.disabled), r.value = p());
-    }), M(
+    return M(() => {
+      o.value && (l.value = u(o.value, s.options), s.value && l.value.setNumber(s.value), s.disabled && l.value.setDisabled(s.disabled), r.value = c());
+    }), B(
       () => s.disabled,
       (a) => {
         var h;
         return (h = l.value) == null ? void 0 : h.setDisabled(a);
       }
-    ), B(() => {
+    ), R(() => {
       var a;
       return (a = l.value) == null ? void 0 : a.destroy();
-    }), t({ instance: l, input: o }), (a, h) => F((z(), V("input", R({
+    }), t({ instance: l, input: o }), (a, h) => F((V(), z("input", O({
       ref_key: "input",
       ref: o,
-      "onUpdate:modelValue": h[0] || (h[0] = (b) => i.value = b),
+      "onUpdate:modelValue": h[0] || (h[0] = (_) => i.value = _),
       type: "tel",
-      onCountrychange: y,
-      onInput: c
+      onCountrychange: m,
+      onInput: y
     }, d.inputProps), null, 16)), [
       [
-        O,
+        $,
         i.value,
         void 0,
         { lazy: !0 }