intl-tel-input 25.10.6 → 25.10.8

package/vue/build/IntlTelInput.mjs

@@ -1,4 +1,4 @@
-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";
+import { mergeModels as S, useModel as E, ref as L, onMounted as M, watch as B, onUnmounted as R, withDirectives as F, createElementBlock as z, openBlock as V, mergeProps as $, vModelText as O } from "vue";
 const j = [
   [
     "af",
@@ -1322,18 +1322,18 @@ const j = [
     // Zimbabwe
     "263"
   ]
-], w = [];
-for (const u of j)
-  w.push({
+], _ = [];
+for (const r of j)
+  _.push({
     name: "",
     // populated in the plugin
-    iso2: u[0],
-    dialCode: u[1],
-    priority: u[2] || 0,
-    areaCodes: u[3] || null,
+    iso2: r[0],
+    dialCode: r[1],
+    priority: r[2] || 0,
+    areaCodes: r[3] || null,
     nodeById: {},
     // populated by the plugin
-    nationalPrefix: u[4] || null
+    nationalPrefix: r[4] || null
   });
 const U = {
   ad: "Andorra",
@@ -1590,17 +1590,13 @@ const U = {
   // additional countries (not supported by country-list library)
   ac: "Ascension Island",
   xk: "Kosovo"
-}, T = { ...U, ...H };
-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 = () => {
+}, k = { ...U, ...H }, N = (r) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(r).matches, K = () => {
   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)");
-    return u || t || i && e;
+    const r = /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 r || t || i && e;
   }
   return !1;
-}, x = {
+}, P = {
   // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
   allowPhonewords: !1,
   //* Whether or not to allow the dropdown.
@@ -1648,10 +1644,106 @@ const N = (u) => 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: W(),
+  useFullscreenPopup: K(),
   //* The number type to enforce during validation.
   validationNumberTypes: ["MOBILE"]
-}, G = [
+};
+function W(r) {
+  r.useFullscreenPopup && (r.fixDropdownWidth = !1), r.onlyCountries.length === 1 && (r.initialCountry = r.onlyCountries[0]), r.separateDialCode && (r.nationalMode = !1), r.allowDropdown && !r.showFlags && !r.separateDialCode && (r.nationalMode = !1), r.useFullscreenPopup && !r.dropdownContainer && (r.dropdownContainer = document.body), r.i18n = { ...k, ...r.i18n };
+}
+const I = (r) => r.replace(/\D/g, ""), x = (r = "") => r.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), m = (r, t, e) => {
+  const i = document.createElement(r);
+  return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
+};
+function G(r) {
+  const { onlyCountries: t, excludeCountries: e } = r;
+  if (t.length) {
+    const i = t.map((s) => s.toLowerCase());
+    return _.filter((s) => i.includes(s.iso2));
+  } else if (e.length) {
+    const i = e.map((s) => s.toLowerCase());
+    return _.filter((s) => !i.includes(s.iso2));
+  }
+  return _;
+}
+function q(r, t) {
+  for (const e of r) {
+    const i = e.iso2.toLowerCase();
+    t.i18n[i] && (e.name = t.i18n[i]);
+  }
+}
+function Y(r, t) {
+  const e = /* @__PURE__ */ new Set();
+  let i = 0;
+  const s = {}, n = (o, a, d) => {
+    if (!o || !a)
+      return;
+    a.length > i && (i = a.length), s.hasOwnProperty(a) || (s[a] = []);
+    const l = s[a];
+    if (l.includes(o))
+      return;
+    const h = d !== void 0 ? d : l.length;
+    l[h] = o;
+  };
+  for (const o of r)
+    e.has(o.dialCode) || e.add(o.dialCode), n(o.iso2, o.dialCode, o.priority);
+  (t.onlyCountries.length || t.excludeCountries.length) && e.forEach((o) => {
+    s[o] = s[o].filter(Boolean);
+  });
+  for (const o of r)
+    if (o.areaCodes) {
+      const a = s[o.dialCode][0];
+      for (const d of o.areaCodes) {
+        for (let l = 1; l < d.length; l++) {
+          const h = d.substring(0, l), p = o.dialCode + h;
+          n(a, p), n(o.iso2, p);
+        }
+        n(o.iso2, o.dialCode + d);
+      }
+    }
+  return { dialCodes: e, dialCodeMaxLen: i, dialCodeToIso2Map: s };
+}
+function J(r, t) {
+  t.countryOrder && (t.countryOrder = t.countryOrder.map((e) => e.toLowerCase())), r.sort((e, i) => {
+    const { countryOrder: s } = t;
+    if (s) {
+      const n = s.indexOf(e.iso2), o = s.indexOf(i.iso2), a = n > -1, d = o > -1;
+      if (a || d)
+        return a && d ? n - o : a ? -1 : 1;
+    }
+    return e.name.localeCompare(i.name);
+  });
+}
+function Z(r) {
+  for (const t of r)
+    t.normalisedName = x(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`;
+}
+function Q(r, t, e, i) {
+  let s = r;
+  if (e && t) {
+    t = `+${i.dialCode}`;
+    const n = s[t.length] === " " || s[t.length] === "-" ? t.length + 1 : t.length;
+    s = s.substring(n);
+  }
+  return s;
+}
+function X(r, t, e, i, s) {
+  const n = e ? e.formatNumberAsYouType(r, i.iso2) : r, { dialCode: o } = i;
+  return s && t.charAt(0) !== "+" && n.includes(`+${o}`) ? (n.split(`+${o}`)[1] || "").trim() : n;
+}
+function tt(r, t, e, i) {
+  if (e === 0 && !i)
+    return 0;
+  let s = 0;
+  for (let n = 0; n < t.length; n++) {
+    if (/[+0-9]/.test(t[n]) && s++, s === r && !i)
+      return n + 1;
+    if (i && s === r + 1)
+      return n;
+  }
+  return t.length;
+}
+const et = [
   "800",
   "822",
   "833",
@@ -1669,32 +1761,22 @@ const N = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
   "887",
   "888",
   "889"
-], v = (u) => u.replace(/\D/g, ""), k = (u = "") => u.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), P = (u) => {
-  const t = v(u);
+], A = (r) => {
+  const t = I(r);
   if (t.charAt(0) === "1") {
     const e = t.substring(1, 4);
-    return G.includes(e);
+    return et.includes(e);
   }
   return !1;
-}, q = (u, t, e, i) => {
-  if (e === 0 && !i)
-    return 0;
-  let s = 0;
-  for (let n = 0; n < t.length; n++) {
-    if (/[+0-9]/.test(t[n]) && s++, s === u && !i)
-      return n + 1;
-    if (i && s === u + 1)
-      return n;
-  }
-  return t.length;
-}, 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) => {
-  const { instances: e } = l;
-  Object.values(e).forEach((i) => i[u](...t));
 };
-class L {
+for (const r of _)
+  r.name = k[r.iso2];
+let it = 0;
+const st = new Set(_.map((r) => r.iso2)), D = (r) => st.has(r), w = (r, ...t) => {
+  const { instances: e } = u;
+  Object.values(e).forEach((i) => i[r](...t));
+};
+class v {
   /**
    * Build a space-delimited class string from an object map of className -> truthy/falsey.
    * Only keys with truthy values are included.
@@ -1703,131 +1785,72 @@ class L {
     return Object.keys(t).filter((e) => !!t[e]).join(" ");
   }
   constructor(t, e = {}) {
-    this.id = K++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, x, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
+    this.id = it++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, P, 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";
+  _detectEnvironmentAndLayout() {
+    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 = { ...T, ...this.options.i18n };
-    const e = new Promise((s, n) => {
-      this.resolveAutoCountryPromise = s, this.rejectAutoCountryPromise = n;
-    }), i = new Promise((s, n) => {
-      this.resolveUtilsScriptPromise = s, this.rejectUtilsScriptPromise = n;
+    this.showSelectedCountryOnLeft = this.isRTL ? !t : t, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft);
+  }
+  _createInitPromises() {
+    const t = new Promise((i, s) => {
+      this.resolveAutoCountryPromise = i, this.rejectAutoCountryPromise = s;
+    }), e = new Promise((i, s) => {
+      this.resolveUtilsScriptPromise = i, this.rejectUtilsScriptPromise = s;
     });
-    this.promise = Promise.all([e, i]), this.selectedCountryData = {}, this._processCountryData(), this._generateMarkup(), this._setInitialState(), this._initListeners(), this._initRequests();
+    this.promise = Promise.all([t, e]);
+  }
+  //* Can't be private as it's called from intlTelInput convenience wrapper.
+  _init() {
+    W(this.options), this._detectEnvironmentAndLayout(), this._createInitPromises(), this.selectedCountryData = {}, this._processCountryData(), this._generateMarkup(), this._setInitialState(), this._initListeners(), this._initRequests();
   }
   //********************
   //*  PRIVATE METHODS
   //********************
   //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
   _processCountryData() {
-    this._processAllCountries(), this._processDialCodes(), this._translateCountryNames(), this._sortCountries(), this.countryByIso2 = new Map(this.countries.map((t) => [t.iso2, t])), this._cacheSearchTokens();
-  }
-  //* Precompute and cache country search tokens to speed up filtering
-  _cacheSearchTokens() {
-    for (const t of this.countries)
-      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() {
-    this.options.countryOrder && (this.options.countryOrder = this.options.countryOrder.map((t) => t.toLowerCase())), this.countries.sort((t, e) => {
-      const { countryOrder: i } = this.options;
-      if (i) {
-        const s = i.indexOf(t.iso2), n = i.indexOf(e.iso2), a = s > -1, o = n > -1;
-        if (a || o)
-          return a && o ? s - n : a ? -1 : 1;
-      }
-      return t.name.localeCompare(e.name);
-    });
-  }
-  //* Add a dial code to this.dialCodeToIso2Map.
-  _addToDialCodeMap(t, e, i) {
-    if (!t || !e)
-      return;
-    e.length > this.dialCodeMaxLen && (this.dialCodeMaxLen = e.length), this.dialCodeToIso2Map.hasOwnProperty(e) || (this.dialCodeToIso2Map[e] = []);
-    const s = this.dialCodeToIso2Map[e];
-    if (s.includes(t))
-      return;
-    const n = i !== void 0 ? i : s.length;
-    s[n] = t;
-  }
-  //* Process onlyCountries or excludeCountries array if present.
-  _processAllCountries() {
-    const { onlyCountries: t, excludeCountries: e } = this.options;
-    if (t.length) {
-      const i = t.map(
-        (s) => s.toLowerCase()
-      );
-      this.countries = w.filter(
-        (s) => i.includes(s.iso2)
-      );
-    } else if (e.length) {
-      const i = e.map(
-        (s) => s.toLowerCase()
-      );
-      this.countries = w.filter(
-        (s) => !i.includes(s.iso2)
-      );
-    } else
-      this.countries = w;
-  }
-  //* Translate Countries by object literal provided on config.
-  _translateCountryNames() {
-    for (const t of this.countries) {
-      const e = t.iso2.toLowerCase();
-      this.options.i18n.hasOwnProperty(e) && (t.name = this.options.i18n[e]);
-    }
-  }
-  //* Generate this.dialCodes and this.dialCodeToIso2Map.
-  _processDialCodes() {
-    this.dialCodes = /* @__PURE__ */ new Set(), this.dialCodeMaxLen = 0, this.dialCodeToIso2Map = {};
-    for (const t of this.countries)
-      this.dialCodes.has(t.dialCode) || this.dialCodes.add(t.dialCode), this._addToDialCodeMap(t.iso2, t.dialCode, t.priority);
-    (this.options.onlyCountries.length || this.options.excludeCountries.length) && this.dialCodes.forEach((t) => {
-      this.dialCodeToIso2Map[t] = this.dialCodeToIso2Map[t].filter(Boolean);
-    });
-    for (const t of this.countries)
-      if (t.areaCodes) {
-        const e = this.dialCodeToIso2Map[t.dialCode][0];
-        for (const i of t.areaCodes) {
-          for (let s = 1; s < i.length; s++) {
-            const n = i.substring(0, s), a = t.dialCode + n;
-            this._addToDialCodeMap(e, a), this._addToDialCodeMap(t.iso2, a);
-          }
-          this._addToDialCodeMap(t.iso2, t.dialCode + i);
-        }
-      }
+    this.countries = G(this.options);
+    const t = Y(this.countries, this.options);
+    this.dialCodes = t.dialCodes, this.dialCodeMaxLen = t.dialCodeMaxLen, this.dialCodeToIso2Map = t.dialCodeToIso2Map, q(this.countries, this.options), J(this.countries, this.options), this.countryByIso2 = new Map(this.countries.map((e) => [e.iso2, e])), Z(this.countries);
   }
   //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
   _generateMarkup() {
-    var p, m, g;
+    this._prepareTelInput();
+    const t = this._createWrapperAndInsert();
+    this._maybeBuildCountryContainer(t), t.appendChild(this.telInput), this._maybeUpdateInputPaddingAndReveal(), this._maybeBuildHiddenInputs(t);
+  }
+  _prepareTelInput() {
     this.telInput.classList.add("iti__tel-input"), !this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete")) && this.telInput.setAttribute("autocomplete", "off");
+  }
+  _createWrapperAndInsert() {
+    var a;
     const {
       allowDropdown: t,
-      separateDialCode: e,
-      showFlags: i,
-      containerClass: s,
-      hiddenInput: n,
-      dropdownContainer: a,
-      fixDropdownWidth: o,
-      useFullscreenPopup: d,
-      countrySearch: c,
-      i18n: C
-    } = this.options, r = L._buildClassNames({
+      showFlags: e,
+      containerClass: i,
+      useFullscreenPopup: s
+    } = this.options, n = v._buildClassNames({
       iti: !0,
       "iti--allow-dropdown": t,
-      "iti--show-flags": i,
-      "iti--inline-dropdown": !d,
-      [s]: !!s
-    }), h = y("div", { class: r });
-    if ((p = this.telInput.parentNode) == null || p.insertBefore(h, this.telInput), t || i || e) {
-      this.countryContainer = y(
+      "iti--show-flags": e,
+      "iti--inline-dropdown": !s,
+      [i]: !!i
+    }), o = m("div", { class: n });
+    return (a = this.telInput.parentNode) == null || a.insertBefore(o, this.telInput), o;
+  }
+  _maybeBuildCountryContainer(t) {
+    const {
+      allowDropdown: e,
+      separateDialCode: i,
+      showFlags: s
+    } = this.options;
+    if (e || s || i) {
+      this.countryContainer = m(
         "div",
         // visibly hidden until we measure it's width to set the input padding correctly
         { class: "iti__country-container iti__v-hide" },
-        h
-      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = y(
+        t
+      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", e ? (this.selectedCountry = m(
         "button",
         {
           type: "button",
@@ -1838,145 +1861,160 @@ class L {
           "aria-controls": `iti-${this.id}__dropdown-content`
         },
         this.countryContainer
-      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = y(
+      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m(
         "div",
         { class: "iti__selected-country" },
         this.countryContainer
       );
-      const _ = y(
+      const n = m(
         "div",
         { class: "iti__selected-country-primary" },
         this.selectedCountry
       );
-      if (this.selectedCountryInner = y(
+      this.selectedCountryInner = m(
         "div",
         { class: "iti__flag" },
-        _
-      ), t && (this.dropdownArrow = y(
+        n
+      ), e && (this.dropdownArrow = m(
         "div",
         { class: "iti__arrow", "aria-hidden": "true" },
-        _
-      )), e && (this.selectedDialCode = y(
+        n
+      )), i && (this.selectedDialCode = m(
         "div",
         { class: "iti__selected-dial-code", dir: "ltr" },
         this.selectedCountry
-      )), t) {
-        const b = o ? "" : "iti--flexible-dropdown-width";
-        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 = y(
-            "div",
-            { class: "iti__search-input-wrapper" },
-            this.dropdownContent
-          );
-          this.searchIcon = y(
-            "span",
-            {
-              class: "iti__search-icon",
-              "aria-hidden": "true"
-            },
-            f
-          ), 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 = y(
-            "input",
-            {
-              id: `iti-${this.id}__search-input`,
-              // Chrome says inputs need either a name or an id
-              type: "search",
-              class: "iti__search-input",
-              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": C.searchPlaceholder,
-              "aria-controls": `iti-${this.id}__country-listbox`,
-              "aria-autocomplete": "list",
-              autocomplete: "off"
-            },
-            f
-          ), this.searchClearButton = y(
-            "button",
-            {
-              type: "button",
-              class: "iti__search-clear iti__hide",
-              "aria-label": C.clearSearchAriaLabel,
-              tabindex: "-1"
-            },
-            f
-          );
-          const S = `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="${S}" 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(#${S})" />
-            </svg>`, this.searchResultsA11yText = y(
-            "span",
-            { class: "iti__a11y-text" },
-            this.dropdownContent
-          ), this.searchNoResults = y(
-            "div",
-            {
-              class: "iti__no-results iti__hide",
-              "aria-hidden": "true"
-              // all a11y messaging happens in this.searchResultsA11yText
-            },
-            this.dropdownContent
-          ), this.searchNoResults.textContent = C.zeroSearchResults;
-        }
-        if (this.countryList = y(
-          "ul",
-          {
-            class: "iti__country-list",
-            id: `iti-${this.id}__country-listbox`,
-            role: "listbox",
-            "aria-label": C.countryListAriaLabel
-          },
-          this.dropdownContent
-        ), this._appendListItems(), c && this._updateSearchResultsA11yText(), a) {
-          const f = L._buildClassNames({
-            iti: !0,
-            "iti--container": !0,
-            "iti--fullscreen-popup": d,
-            "iti--inline-dropdown": !d,
-            [s]: !!s
-          });
-          this.dropdown = y("div", { class: f }), this.dropdown.appendChild(this.dropdownContent);
-        } else
-          this.countryContainer.appendChild(this.dropdownContent);
-      }
+      )), e && this._buildDropdownContent();
     }
-    if (h.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 = (m = this.telInput.form) == null ? void 0 : m.querySelector(`input[name="${b.phone}"]`);
-        f ? this.hiddenInput = f : (this.hiddenInput = y("input", {
+  }
+  _buildDropdownContent() {
+    const {
+      fixDropdownWidth: t,
+      useFullscreenPopup: e,
+      countrySearch: i,
+      i18n: s,
+      dropdownContainer: n,
+      containerClass: o
+    } = this.options, a = t ? "" : "iti--flexible-dropdown-width";
+    if (this.dropdownContent = m("div", {
+      id: `iti-${this.id}__dropdown-content`,
+      class: `iti__dropdown-content iti__hide ${a}`,
+      role: "dialog",
+      "aria-modal": "true"
+    }), i && this._buildSearchUI(), this.countryList = m(
+      "ul",
+      {
+        class: "iti__country-list",
+        id: `iti-${this.id}__country-listbox`,
+        role: "listbox",
+        "aria-label": s.countryListAriaLabel
+      },
+      this.dropdownContent
+    ), this._appendListItems(), i && this._updateSearchResultsA11yText(), n) {
+      const d = v._buildClassNames({
+        iti: !0,
+        "iti--container": !0,
+        "iti--fullscreen-popup": e,
+        "iti--inline-dropdown": !e,
+        [o]: !!o
+      });
+      this.dropdown = m("div", { class: d }), this.dropdown.appendChild(this.dropdownContent);
+    } else
+      this.countryContainer.appendChild(this.dropdownContent);
+  }
+  _buildSearchUI() {
+    const { i18n: t } = this.options, e = m(
+      "div",
+      { class: "iti__search-input-wrapper" },
+      this.dropdownContent
+    );
+    this.searchIcon = m(
+      "span",
+      {
+        class: "iti__search-icon",
+        "aria-hidden": "true"
+      },
+      e
+    ), 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 = 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: t.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": t.searchPlaceholder,
+        "aria-controls": `iti-${this.id}__country-listbox`,
+        "aria-autocomplete": "list",
+        autocomplete: "off"
+      },
+      e
+    ), this.searchClearButton = m(
+      "button",
+      {
+        type: "button",
+        class: "iti__search-clear iti__hide",
+        "aria-label": t.clearSearchAriaLabel,
+        tabindex: "-1"
+      },
+      e
+    );
+    const i = `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="${i}" 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(#${i})" />
+      </svg>`, this.searchResultsA11yText = m(
+      "span",
+      { class: "iti__a11y-text" },
+      this.dropdownContent
+    ), this.searchNoResults = m(
+      "div",
+      {
+        class: "iti__no-results iti__hide",
+        "aria-hidden": "true"
+        // all a11y messaging happens in this.searchResultsA11yText
+      },
+      this.dropdownContent
+    ), this.searchNoResults.textContent = t.zeroSearchResults;
+  }
+  _maybeUpdateInputPaddingAndReveal() {
+    this.countryContainer && (this._updateInputPadding(), this.countryContainer.classList.remove("iti__v-hide"));
+  }
+  _maybeBuildHiddenInputs(t) {
+    var i, s;
+    const { hiddenInput: e } = this.options;
+    if (e) {
+      const n = this.telInput.getAttribute("name") || "", o = e(n);
+      if (o.phone) {
+        const a = (i = this.telInput.form) == null ? void 0 : i.querySelector(`input[name="${o.phone}"]`);
+        a ? this.hiddenInput = a : (this.hiddenInput = m("input", {
           type: "hidden",
-          name: b.phone
-        }), h.appendChild(this.hiddenInput));
+          name: o.phone
+        }), t.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 = y("input", {
+      if (o.country) {
+        const a = (s = this.telInput.form) == null ? void 0 : s.querySelector(`input[name="${o.country}"]`);
+        a ? this.hiddenInputCountry = a : (this.hiddenInputCountry = m("input", {
           type: "hidden",
-          name: b.country
-        }), h.appendChild(this.hiddenInputCountry));
+          name: o.country
+        }), t.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 = y(
+      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m(
         "li",
         {
           id: `iti-${this.id}__item-${e.iso2}`,
@@ -1998,12 +2036,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, a = this._getDialCode(n), o = P(n), { initialCountry: d, geoIpLookup: c } = this.options, C = d === "auto" && c;
-    if (a && !o)
+    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), a = A(n), { initialCountry: d, geoIpLookup: l } = this.options, h = d === "auto" && l;
+    if (o && !a)
       this._updateCountryFromNumber(n);
-    else if (!C || t) {
-      const r = d ? d.toLowerCase() : "";
-      r && this._getCountryData(r, !0) ? this._setCountry(r) : a && o ? this._setCountry("us") : this._setCountry();
+    else if (!h || t) {
+      const p = d ? d.toLowerCase() : "";
+      D(p) ? this._setCountry(p) : o && a ? this._setCountry("us") : this._setCountry("");
     }
     n && this._updateValFromNumber(n);
   }
@@ -2039,21 +2077,21 @@ class L {
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
     let { loadUtils: t, initialCountry: e, geoIpLookup: i } = this.options;
-    t && !l.utils ? (this._handlePageLoad = () => {
+    t && !u.utils ? (this._handlePageLoad = () => {
       var n;
-      window.removeEventListener("load", this._handlePageLoad), (n = l.attachUtils(t)) == null || n.catch(() => {
+      window.removeEventListener("load", this._handlePageLoad), (n = u.attachUtils(t)) == null || n.catch(() => {
       });
-    }, l.documentReady() ? this._handlePageLoad() : window.addEventListener("load", this._handlePageLoad)) : this.resolveUtilsScriptPromise(), e === "auto" && i && !this.selectedCountryData.iso2 ? this._loadAutoCountry() : this.resolveAutoCountryPromise();
+    }, u.documentReady() ? this._handlePageLoad() : window.addEventListener("load", this._handlePageLoad)) : this.resolveUtilsScriptPromise(), e === "auto" && i && !this.selectedCountryData.iso2 ? this._loadAutoCountry() : this.resolveAutoCountryPromise();
   }
   //* Perform the geo ip lookup.
   _loadAutoCountry() {
-    l.autoCountry ? this.handleAutoCountry() : l.startedLoadingAutoCountry || (l.startedLoadingAutoCountry = !0, typeof this.options.geoIpLookup == "function" && this.options.geoIpLookup(
+    u.autoCountry ? this.handleAutoCountry() : u.startedLoadingAutoCountry || (u.startedLoadingAutoCountry = !0, typeof this.options.geoIpLookup == "function" && this.options.geoIpLookup(
       (t = "") => {
         const e = t.toLowerCase();
-        e && this._getCountryData(e, !0) ? (l.autoCountry = e, setTimeout(() => I("handleAutoCountry"))) : (this._setInitialState(!0), I("rejectAutoCountryPromise"));
+        D(e) ? (u.autoCountry = e, setTimeout(() => w("handleAutoCountry"))) : (this._setInitialState(!0), w("rejectAutoCountryPromise"));
       },
       () => {
-        this._setInitialState(!0), I("rejectAutoCountryPromise");
+        this._setInitialState(!0), w("rejectAutoCountryPromise");
       }
     ));
   }
@@ -2062,35 +2100,68 @@ class L {
   }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
+    this._bindInputListener(), this._maybeBindKeydownListener(), this._maybeBindPasteListener();
+  }
+  _bindInputListener() {
     const { strictMode: t, formatAsYouType: e, separateDialCode: i, allowDropdown: s, countrySearch: n } = this.options;
-    let a = !1;
-    new RegExp("\\p{L}", "u").test(this.telInput.value) && (a = !0), this._handleInputEvent = (o) => {
-      if (this.isAndroid && (o == null ? void 0 : o.data) === "+" && i && s && n) {
-        const r = this.telInput.selectionStart || 0, h = this.telInput.value.substring(0, r - 1), p = this.telInput.value.substring(r);
-        this.telInput.value = h + p, this._openDropdownWithPlus();
+    let o = !1;
+    new RegExp("\\p{L}", "u").test(this.telInput.value) && (o = !0), this._handleInputEvent = (a) => {
+      if (this.isAndroid && (a == null ? void 0 : a.data) === "+" && i && s && n) {
+        const p = this.telInput.selectionStart || 0, f = this.telInput.value.substring(0, p - 1), c = this.telInput.value.substring(p);
+        this.telInput.value = f + c, this._openDropdownWithPlus();
         return;
       }
       this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
-      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 ? a = !0 : /[^+0-9]/.test(this.telInput.value) || (a = !1);
-      const C = (o == null ? void 0 : o.detail) && o.detail.isSetNumber;
-      if (e && !a && !C) {
-        const r = this.telInput.selectionStart || 0, p = this.telInput.value.substring(0, r).replace(/[^+0-9]/g, "").length, m = (o == null ? void 0 : o.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), _ = q(p, g, r, m);
-        this.telInput.value = g, this.telInput.setSelectionRange(_, _);
+      const d = (a == null ? void 0 : a.data) && /[^+0-9]/.test(a.data), l = (a == null ? void 0 : a.inputType) === "insertFromPaste" && this.telInput.value;
+      d || l && !t ? o = !0 : /[^+0-9]/.test(this.telInput.value) || (o = !1);
+      const h = (a == null ? void 0 : a.detail) && a.detail.isSetNumber;
+      if (e && !o && !h) {
+        const p = this.telInput.selectionStart || 0, c = this.telInput.value.substring(0, p).replace(/[^+0-9]/g, "").length, C = (a == null ? void 0 : a.inputType) === "deleteContentForward", y = this._getFullNumber(), g = X(
+          y,
+          this.telInput.value,
+          u.utils,
+          this.selectedCountryData,
+          this.options.separateDialCode
+        ), b = tt(c, g, p, C);
+        this.telInput.value = g, this.telInput.setSelectionRange(b, b);
       }
-    }, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (o) => {
-      if (o.key && o.key.length === 1 && !o.altKey && !o.ctrlKey && !o.metaKey) {
-        if (i && s && n && o.key === "+") {
-          o.preventDefault(), this._openDropdownWithPlus();
+    }, this.telInput.addEventListener("input", this._handleInputEvent);
+  }
+  _maybeBindKeydownListener() {
+    const { strictMode: t, separateDialCode: e, allowDropdown: i, countrySearch: s } = this.options;
+    (t || e) && (this._handleKeydownEvent = (n) => {
+      if (n.key && n.key.length === 1 && !n.altKey && !n.ctrlKey && !n.metaKey) {
+        if (e && i && s && n.key === "+") {
+          n.preventDefault(), this._openDropdownWithPlus();
           return;
         }
         if (t) {
-          const d = this.telInput.value, C = !(d.charAt(0) === "+") && this.telInput.selectionStart === 0 && o.key === "+", r = /^[0-9]$/.test(o.key), h = i ? r : C || r, p = d.slice(0, this.telInput.selectionStart) + o.key + d.slice(this.telInput.selectionEnd), m = this._getFullNumber(p), g = l.utils.getCoreNumber(m, this.selectedCountryData.iso2), _ = this.maxCoreNumberLength && g.length > this.maxCoreNumberLength, f = this._getNewCountryFromNumber(m) !== null;
-          (!h || _ && !f && !C) && o.preventDefault();
+          const o = this.telInput.value, d = !(o.charAt(0) === "+") && this.telInput.selectionStart === 0 && n.key === "+", l = /^[0-9]$/.test(n.key), h = e ? l : d || l, p = o.slice(0, this.telInput.selectionStart) + n.key + o.slice(this.telInput.selectionEnd), f = this._getFullNumber(p), c = u.utils.getCoreNumber(f, this.selectedCountryData.iso2), C = this.maxCoreNumberLength && c.length > this.maxCoreNumberLength, g = this._getNewCountryFromNumber(f) !== null;
+          (!h || C && !g && !d) && n.preventDefault();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
   }
+  _maybeBindPasteListener() {
+    this.options.strictMode && (this._handlePasteEvent = (t) => {
+      t.preventDefault();
+      const e = this.telInput, i = e.selectionStart, s = e.selectionEnd, n = e.value.slice(0, i), o = e.value.slice(s), a = this.selectedCountryData.iso2, d = t.clipboardData.getData("text"), l = i === 0 && s > 0, h = !e.value.startsWith("+") || l, p = d.replace(/[^0-9+]/g, ""), f = p.startsWith("+"), c = p.replace(/\+/g, ""), C = f && h ? `+${c}` : c;
+      let y = n + C + o, g = u.utils.getCoreNumber(y, a);
+      for (; g.length === 0 && y.length > 0; )
+        y = y.slice(0, -1), g = u.utils.getCoreNumber(y, a);
+      if (!g)
+        return;
+      if (this.maxCoreNumberLength && g.length > this.maxCoreNumberLength)
+        if (e.selectionEnd === e.value.length) {
+          const T = g.length - this.maxCoreNumberLength;
+          y = y.slice(0, y.length - T);
+        } else
+          return;
+      e.value = y;
+      const b = i + C.length;
+      e.setSelectionRange(b, b), e.dispatchEvent(new InputEvent("input", { bubbles: !0 }));
+    }, this.telInput.addEventListener("paste", this._handlePasteEvent));
+  }
   //* Adhere to the input's maxlength attr.
   _cap(t) {
     const e = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
@@ -2173,30 +2244,28 @@ class L {
   }
   //* Country search enabled: Filter the countries according to the search query.
   _filterCountries(t) {
-    let e = !0;
     this.countryList.innerHTML = "";
-    const i = k(t);
-    let s;
-    if (t === "")
-      s = this.countries;
-    else {
-      const n = [], a = [], o = [], d = [], c = [], C = [];
-      for (const r of this.countries)
-        r.iso2 === i ? n.push(r) : r.normalisedName.startsWith(i) ? a.push(r) : r.normalisedName.includes(i) ? o.push(r) : i === r.dialCode || i === r.dialCodePlus ? d.push(r) : r.dialCodePlus.includes(i) ? c.push(r) : r.initials.includes(i) && C.push(r);
-      s = [
-        ...n.sort((r, h) => r.priority - h.priority),
-        ...a.sort((r, h) => r.priority - h.priority),
-        ...o.sort((r, h) => r.priority - h.priority),
-        ...d.sort((r, h) => r.priority - h.priority),
-        ...c.sort((r, h) => r.priority - h.priority),
-        ...C.sort((r, h) => r.priority - h.priority)
-      ];
-    }
-    for (const n of s) {
-      const a = n.nodeById[this.id];
-      a && (this.countryList.appendChild(a), e && (this._highlightListItem(a, !1), e = !1));
+    let e;
+    t === "" ? e = this.countries : e = this._getMatchedCountries(t);
+    let i = !0;
+    for (const s of e) {
+      const n = s.nodeById[this.id];
+      n && (this.countryList.appendChild(n), i && (this._highlightListItem(n, !1), i = !1));
     }
-    e ? (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();
+    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();
+  }
+  _getMatchedCountries(t) {
+    const e = x(t), i = [], s = [], n = [], o = [], a = [], d = [];
+    for (const l of this.countries)
+      l.iso2 === e ? i.push(l) : l.normalisedName.startsWith(e) ? s.push(l) : l.normalisedName.includes(e) ? n.push(l) : e === l.dialCode || e === l.dialCodePlus ? o.push(l) : l.dialCodePlus.includes(e) ? a.push(l) : l.initials.includes(e) && d.push(l);
+    return [
+      ...i.sort((l, h) => l.priority - h.priority),
+      ...s.sort((l, h) => l.priority - h.priority),
+      ...n.sort((l, h) => l.priority - h.priority),
+      ...o.sort((l, h) => l.priority - h.priority),
+      ...a.sort((l, h) => l.priority - h.priority),
+      ...d.sort((l, h) => l.priority - h.priority)
+    ];
   }
   //* Update search results text (for a11y).
   _updateSearchResultsA11yText() {
@@ -2218,12 +2287,12 @@ class L {
   //* NOTE: this is called from _setInitialState, handleUtils and setNumber.
   _updateValFromNumber(t) {
     let e = t;
-    if (this.options.formatOnDisplay && l.utils && this.selectedCountryData) {
-      const i = this.options.nationalMode || e.charAt(0) !== "+" && !this.options.separateDialCode, { NATIONAL: s, INTERNATIONAL: n } = l.utils.numberFormat, a = i ? s : n;
-      e = l.utils.formatNumber(
+    if (this.options.formatOnDisplay && u.utils && this.selectedCountryData) {
+      const i = this.options.nationalMode || e.charAt(0) !== "+" && !this.options.separateDialCode, { NATIONAL: s, INTERNATIONAL: n } = u.utils.numberFormat, o = i ? s : n;
+      e = u.utils.formatNumber(
         e,
         this.selectedCountryData.iso2,
-        a
+        o
       );
     }
     e = this._beforeSetNumber(e), this.telInput.value = e;
@@ -2238,8 +2307,8 @@ class L {
     const { dialCode: e, nationalPrefix: i } = this.selectedCountryData;
     if (t.charAt(0) === "+" || !e)
       return t;
-    const a = i && t.charAt(0) === i && !this.options.separateDialCode ? t.substring(1) : t;
-    return `+${e}${a}`;
+    const o = i && t.charAt(0) === i && !this.options.separateDialCode ? t.substring(1) : t;
+    return `+${e}${o}`;
   }
   // Get the country ISO2 code from the given number
   // BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
@@ -2249,20 +2318,20 @@ class L {
     let i = e ? t.substring(e) : t;
     const s = this.selectedCountryData.iso2, n = this.selectedCountryData.dialCode;
     i = this._ensureHasDialCode(i);
-    const a = this._getDialCode(i, !0), o = v(i);
-    if (a) {
-      const d = v(a), c = this.dialCodeToIso2Map[d];
-      if (c.length === 1)
-        return c[0] === s ? null : c[0];
-      if (!s && this.defaultCountry && c.includes(this.defaultCountry))
+    const o = this._getDialCode(i, !0), a = I(i);
+    if (o) {
+      const d = I(o), l = this.dialCodeToIso2Map[d];
+      if (l.length === 1)
+        return l[0] === s ? null : l[0];
+      if (!s && this.defaultCountry && l.includes(this.defaultCountry))
         return this.defaultCountry;
-      if (n === "1" && P(o))
+      if (n === "1" && A(a))
         return null;
-      const r = this.selectedCountryData.areaCodes && o.length > d.length;
-      if (!(s && c.includes(s) && !r))
-        return c[0];
+      const p = this.selectedCountryData.areaCodes && a.length > d.length;
+      if (!(s && l.includes(s) && !p))
+        return l[0];
     } else {
-      if (i.charAt(0) === "+" && o.length)
+      if (i.charAt(0) === "+" && a.length)
         return "";
       if ((!i || i === "+") && !s)
         return this.defaultCountry;
@@ -2278,33 +2347,23 @@ class L {
     }
     e && this.highlightedItem.focus();
   }
-  //* Find the country data for the given iso2 code
-  //* the allowFail option is only used during init() for the initialCountry option, and for the iso2 returned from geoIpLookup - in these 2 cases we don't want to error out
-  _getCountryData(t, e) {
-    const i = this.countryByIso2.get(t);
-    if (i)
-      return i;
-    if (e)
-      return null;
-    throw new Error(`No country data for '${t}'`);
-  }
   //* 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 || "";
-    if (this.selectedCountryData = t ? this._getCountryData(t, !1) || {} : {}, this.selectedCountryData.iso2 && (this.defaultCountry = this.selectedCountryData.iso2), this.selectedCountry) {
-      const a = t && i ? `iti__flag iti__${t}` : "iti__flag iti__globe";
-      let o, d;
+    if (this.selectedCountryData = t ? this.countryByIso2.get(t) : {}, this.selectedCountryData.iso2 && (this.defaultCountry = this.selectedCountryData.iso2), this.selectedCountry) {
+      const o = t && i ? `iti__flag iti__${t}` : "iti__flag iti__globe";
+      let a, d;
       if (t) {
-        const { name: c, dialCode: C } = this.selectedCountryData;
-        d = c, o = s.selectedCountryAriaLabel.replace("${countryName}", c).replace("${dialCode}", `+${C}`);
+        const { name: l, dialCode: h } = this.selectedCountryData;
+        d = l, a = s.selectedCountryAriaLabel.replace("${countryName}", l).replace("${dialCode}", `+${h}`);
       } else
-        d = s.noCountrySelected, o = s.noCountrySelected;
-      this.selectedCountryInner.className = a, this.selectedCountry.setAttribute("title", d), this.selectedCountry.setAttribute("aria-label", o);
+        d = s.noCountrySelected, a = s.noCountrySelected;
+      this.selectedCountryInner.className = o, this.selectedCountry.setAttribute("title", d), this.selectedCountry.setAttribute("aria-label", a);
     }
     if (e) {
-      const a = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
-      this.selectedDialCode.innerHTML = a, this._updateInputPadding();
+      const o = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
+      this.selectedDialCode.innerHTML = o, this._updateInputPadding();
     }
     return this._updatePlaceholder(), this._updateMaxLength(), n !== t;
   }
@@ -2318,18 +2377,18 @@ class L {
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode: t, placeholderNumberType: e, validationNumberTypes: i } = this.options, { iso2: s } = this.selectedCountryData;
-    if (t && l.utils)
+    if (t && u.utils)
       if (s) {
-        const n = l.utils.numberType[e];
-        let a = l.utils.getExampleNumber(
+        const n = u.utils.numberType[e];
+        let o = u.utils.getExampleNumber(
           s,
           !1,
           n,
           !0
-        ), o = a;
-        for (; l.utils.isPossibleNumber(a, s, i); )
-          o = a, a += "0";
-        const d = l.utils.getCoreNumber(o, s);
+        ), a = o;
+        for (; u.utils.isPossibleNumber(o, s, i); )
+          a = o, o += "0";
+        const d = u.utils.getCoreNumber(a, s);
         this.maxCoreNumberLength = d.length, s === "by" && (this.maxCoreNumberLength = d.length + 1);
       } else
         this.maxCoreNumberLength = null;
@@ -2365,22 +2424,22 @@ class L {
       nationalMode: i,
       customPlaceholder: s
     } = this.options, n = t === "aggressive" || !this.hadInitialPlaceholder && t === "polite";
-    if (l.utils && n) {
-      const a = l.utils.numberType[e];
-      let o = this.selectedCountryData.iso2 ? l.utils.getExampleNumber(
+    if (u.utils && n) {
+      const o = u.utils.numberType[e];
+      let a = this.selectedCountryData.iso2 ? u.utils.getExampleNumber(
         this.selectedCountryData.iso2,
         i,
-        a
+        o
       ) : "";
-      o = this._beforeSetNumber(o), typeof s == "function" && (o = s(o, this.selectedCountryData)), this.telInput.setAttribute("placeholder", o);
+      a = this._beforeSetNumber(a), typeof s == "function" && (a = s(a, this.selectedCountryData)), this.telInput.setAttribute("placeholder", a);
     }
   }
   //* Called when the user selects a list item from the dropdown.
   _selectListItem(t) {
-    const e = this._setCountry(
-      t.getAttribute("data-country-code")
-    );
-    this._closeDropdown(), this._updateDialCode(t.getAttribute("data-dial-code")), this.options.formatOnDisplay && this._updateValFromNumber(this.telInput.value), this.telInput.focus(), e && this._triggerCountryChange();
+    const e = t.getAttribute("data-country-code"), i = this._setCountry(e);
+    this._closeDropdown();
+    const s = t.getAttribute("data-dial-code");
+    this._updateDialCode(s), this.options.formatOnDisplay && this._updateValFromNumber(this.telInput.value), this.telInput.focus(), i && this._triggerCountryChange();
   }
   //* Close the dropdown and unbind any listeners.
   _closeDropdown() {
@@ -2394,12 +2453,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, a = n + s, o = t.offsetHeight, d = t.getBoundingClientRect().top + i, c = d + o, C = d - n + e.scrollTop;
+    const e = this.countryList, i = document.documentElement.scrollTop, s = e.offsetHeight, n = e.getBoundingClientRect().top + i, o = n + s, a = t.offsetHeight, d = t.getBoundingClientRect().top + i, l = d + a, h = d - n + e.scrollTop;
     if (d < n)
-      e.scrollTop = C;
-    else if (c > a) {
-      const r = s - o;
-      e.scrollTop = C - r;
+      e.scrollTop = h;
+    else if (l > o) {
+      const p = s - a;
+      e.scrollTop = h - p;
     }
   }
   //* Replace any existing dial code with the new one
@@ -2419,9 +2478,9 @@ class L {
     if (t.charAt(0) === "+") {
       let s = "";
       for (let n = 0; n < t.length; n++) {
-        const a = t.charAt(n);
-        if (!isNaN(parseInt(a, 10))) {
-          if (s += a, e)
+        const o = t.charAt(n);
+        if (!isNaN(parseInt(o, 10))) {
+          if (s += o, e)
             this.dialCodeToIso2Map[s] && (i = t.substring(0, n + 1));
           else if (this.dialCodes.has(s)) {
             i = t.substring(0, n + 1);
@@ -2438,48 +2497,40 @@ class L {
   _getFullNumber(t) {
     const e = t || this.telInput.value.trim(), { dialCode: i } = this.selectedCountryData;
     let s;
-    const n = v(e);
+    const n = I(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
   _beforeSetNumber(t) {
-    let e = t;
-    if (this.options.separateDialCode) {
-      let i = this._getDialCode(e);
-      if (i) {
-        i = `+${this.selectedCountryData.dialCode}`;
-        const s = e[i.length] === " " || e[i.length] === "-" ? i.length + 1 : i.length;
-        e = e.substring(s);
-      }
-    }
-    return this._cap(e);
+    const e = this._getDialCode(t), i = Q(
+      t,
+      e,
+      this.options.separateDialCode,
+      this.selectedCountryData
+    );
+    return this._cap(i);
   }
   //* Trigger the 'countrychange' event.
   _triggerCountryChange() {
     this._trigger("countrychange");
   }
-  //* Format the number as the user types.
-  _formatNumberAsYouType() {
-    const t = this._getFullNumber(), e = l.utils ? l.utils.formatNumberAsYouType(t, this.selectedCountryData.iso2) : t, { dialCode: i } = this.selectedCountryData;
-    return this.options.separateDialCode && this.telInput.value.charAt(0) !== "+" && e.includes(`+${i}`) ? (e.split(`+${i}`)[1] || "").trim() : e;
-  }
   //**************************
   //*  SECRET PUBLIC METHODS
   //**************************
   //* This is called when the geoip call returns.
   handleAutoCountry() {
-    this.options.initialCountry === "auto" && l.autoCountry && (this.defaultCountry = l.autoCountry, this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe") || this.setCountry(this.defaultCountry), this.resolveAutoCountryPromise());
+    this.options.initialCountry === "auto" && u.autoCountry && (this.defaultCountry = u.autoCountry, this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe") || this.setCountry(this.defaultCountry), this.resolveAutoCountryPromise());
   }
   //* This is called when the utils request completes.
   handleUtils() {
-    l.utils && (this.telInput.value && this._updateValFromNumber(this.telInput.value), this.selectedCountryData.iso2 && (this._updatePlaceholder(), this._updateMaxLength())), this.resolveUtilsScriptPromise();
+    u.utils && (this.telInput.value && this._updateValFromNumber(this.telInput.value), this.selectedCountryData.iso2 && (this._updatePlaceholder(), this._updateMaxLength())), this.resolveUtilsScriptPromise();
   }
   //********************
   //*  PUBLIC METHODS
   //********************
   //* Remove plugin.
   destroy() {
-    var n, a;
+    var n, o;
     this.telInput.iti = void 0;
     const { allowDropdown: t, separateDialCode: e } = this.options;
     if (t) {
@@ -2490,26 +2541,26 @@ class L {
         "keydown",
         this._handleCountryContainerKeydown
       );
-      const o = this.telInput.closest("label");
-      o && o.removeEventListener("click", this._handleLabelClick);
+      const a = this.telInput.closest("label");
+      a && a.removeEventListener("click", this._handleLabelClick);
     }
     const { form: i } = this.telInput;
-    this._handleHiddenInputSubmit && i && i.removeEventListener("submit", this._handleHiddenInputSubmit), this.telInput.removeEventListener("input", this._handleInputEvent), this._handleKeydownEvent && this.telInput.removeEventListener("keydown", this._handleKeydownEvent), this.telInput.removeAttribute("data-intl-tel-input-id"), e && (this.isRTL ? this.telInput.style.paddingRight = this.originalPaddingRight : this.telInput.style.paddingLeft = this.originalPaddingLeft);
+    this._handleHiddenInputSubmit && i && i.removeEventListener("submit", this._handleHiddenInputSubmit), this.telInput.removeEventListener("input", this._handleInputEvent), this._handleKeydownEvent && this.telInput.removeEventListener("keydown", this._handleKeydownEvent), this._handlePasteEvent && this.telInput.removeEventListener("paste", this._handlePasteEvent), this.telInput.removeAttribute("data-intl-tel-input-id"), e && (this.isRTL ? this.telInput.style.paddingRight = this.originalPaddingRight : this.telInput.style.paddingLeft = this.originalPaddingLeft);
     const s = this.telInput.parentNode;
-    (n = s == null ? void 0 : s.parentNode) == null || n.insertBefore(this.telInput, s), (a = s == null ? void 0 : s.parentNode) == null || a.removeChild(s), delete l.instances[this.id];
+    (n = s == null ? void 0 : s.parentNode) == null || n.insertBefore(this.telInput, s), (o = s == null ? void 0 : s.parentNode) == null || o.removeChild(s), delete u.instances[this.id];
   }
   //* Get the extension from the current number.
   getExtension() {
-    return l.utils ? l.utils.getExtension(
+    return u.utils ? u.utils.getExtension(
       this._getFullNumber(),
       this.selectedCountryData.iso2
     ) : "";
   }
   //* Format the number to the given format.
   getNumber(t) {
-    if (l.utils) {
+    if (u.utils) {
       const { iso2: e } = this.selectedCountryData;
-      return l.utils.formatNumber(
+      return u.utils.formatNumber(
         this._getFullNumber(),
         e,
         t
@@ -2519,7 +2570,7 @@ class L {
   }
   //* Get the type of the entered number e.g. landline/mobile.
   getNumberType() {
-    return l.utils ? l.utils.getNumberType(
+    return u.utils ? u.utils.getNumberType(
       this._getFullNumber(),
       this.selectedCountryData.iso2
     ) : -99;
@@ -2530,9 +2581,9 @@ class L {
   }
   //* Get the validation error.
   getValidationError() {
-    if (l.utils) {
+    if (u.utils) {
       const { iso2: t } = this.selectedCountryData;
-      return l.utils.getValidationError(this._getFullNumber(), t);
+      return u.utils.getValidationError(this._getFullNumber(), t);
     }
     return -99;
   }
@@ -2545,25 +2596,28 @@ class L {
     return this._validateNumber(!0);
   }
   _utilsIsPossibleNumber(t) {
-    return l.utils ? l.utils.isPossibleNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
+    return u.utils ? u.utils.isPossibleNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
   }
   //* Shared internal validation logic to handle alpha character extension rules.
   _validateNumber(t) {
     if (!this.selectedCountryData.iso2)
       return !1;
-    const e = (a) => t ? this._utilsIsValidNumber(a) : this._utilsIsPossibleNumber(a), i = this._getFullNumber(), s = i.search(new RegExp("\\p{L}", "u"));
+    const e = (o) => t ? this._utilsIsValidNumber(o) : this._utilsIsPossibleNumber(o), i = this._getFullNumber(), s = i.search(new RegExp("\\p{L}", "u"));
     if (s > -1 && !this.options.allowPhonewords) {
-      const a = i.substring(0, s), o = e(a), d = e(i);
-      return o && d;
+      const o = i.substring(0, s), a = e(o), d = e(i);
+      return a && d;
     }
     return e(i);
   }
   _utilsIsValidNumber(t) {
-    return l.utils ? l.utils.isValidNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
+    return u.utils ? u.utils.isValidNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
   }
   //* Update the selected country, and update the input val accordingly.
   setCountry(t) {
-    const e = t == null ? void 0 : t.toLowerCase(), i = this.selectedCountryData.iso2;
+    const e = t == null ? void 0 : t.toLowerCase();
+    if (!D(e))
+      throw new Error(`Invalid country code: '${e}'`);
+    const i = this.selectedCountryData.iso2;
     (t && e !== i || !t && i) && (this._setCountry(e), this._updateDialCode(this.selectedCountryData.dialCode), this.options.formatOnDisplay && this._updateValFromNumber(this.telInput.value), this._triggerCountryChange());
   }
   //* Set the input value and update the country.
@@ -2579,53 +2633,53 @@ class L {
     this.telInput.disabled = t, t ? this.selectedCountry.setAttribute("disabled", "true") : this.selectedCountry.removeAttribute("disabled");
   }
 }
-const Y = (u) => {
-  if (!l.utils && !l.startedLoadingUtilsScript) {
+const nt = (r) => {
+  if (!u.utils && !u.startedLoadingUtilsScript) {
     let t;
-    if (typeof u == "function")
+    if (typeof r == "function")
       try {
-        t = Promise.resolve(u());
+        t = Promise.resolve(r());
       } catch (e) {
         return Promise.reject(e);
       }
     else
-      return Promise.reject(new TypeError(`The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof u}`));
-    return l.startedLoadingUtilsScript = !0, t.then((e) => {
+      return Promise.reject(new TypeError(`The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof r}`));
+    return u.startedLoadingUtilsScript = !0, t.then((e) => {
       const i = e == null ? void 0 : e.default;
       if (!i || typeof i != "object")
         throw new TypeError("The loader function passed to attachUtils did not resolve to a module object with utils as its default export.");
-      return l.utils = i, I("handleUtils"), !0;
+      return u.utils = i, w("handleUtils"), !0;
     }).catch((e) => {
-      throw I("rejectUtilsScriptPromise", e), e;
+      throw w("rejectUtilsScriptPromise", e), e;
     });
   }
   return null;
-}, l = Object.assign(
-  (u, t) => {
-    const e = new L(u, t);
-    return e._init(), u.setAttribute("data-intl-tel-input-id", e.id.toString()), l.instances[e.id] = e, u.iti = e, e;
+}, u = Object.assign(
+  (r, t) => {
+    const e = new v(r, t);
+    return e._init(), r.setAttribute("data-intl-tel-input-id", e.id.toString()), u.instances[e.id] = e, r.iti = e, e;
   },
   {
-    defaults: x,
+    defaults: P,
     //* Using a static var like this allows us to mock it in the tests.
     documentReady: () => document.readyState === "complete",
     //* Get the country data object.
-    getCountryData: () => w,
+    getCountryData: () => _,
     //* A getter for the plugin instance.
-    getInstance: (u) => {
-      const t = u.getAttribute("data-intl-tel-input-id");
-      return t ? l.instances[t] : null;
+    getInstance: (r) => {
+      const t = r.getAttribute("data-intl-tel-input-id");
+      return t ? u.instances[t] : null;
     },
     //* A map from instance ID to instance object.
     instances: {},
-    attachUtils: Y,
+    attachUtils: nt,
     startedLoadingUtilsScript: !1,
     startedLoadingAutoCountry: !1,
-    version: "25.10.6"
+    version: "25.10.8"
   }
-), Z = {
+), at = {
   __name: "IntlTelInput",
-  props: /* @__PURE__ */ A({
+  props: /* @__PURE__ */ S({
     disabled: {
       type: Boolean,
       default: !1
@@ -2649,47 +2703,47 @@ const Y = (u) => {
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ A([
+  emits: /* @__PURE__ */ S([
     "changeNumber",
     "changeCountry",
     "changeValidity",
     "changeErrorCode"
   ], ["update:modelValue"]),
-  setup(u, { expose: t, emit: e }) {
-    const i = M(u, "modelValue"), s = u, n = e, a = D(), o = D(), d = D(!1), c = () => o.value ? s.options.strictMode ? o.value.isValidNumberPrecise() : o.value.isValidNumber() : null, C = () => {
-      let p = c();
-      d.value !== p && (d.value = p, n("changeValidity", !!p), n(
+  setup(r, { expose: t, emit: e }) {
+    const i = E(r, "modelValue"), s = r, n = e, o = L(), a = L(), d = L(!1), l = () => a.value ? s.options.strictMode ? a.value.isValidNumberPrecise() : a.value.isValidNumber() : null, h = () => {
+      let c = l();
+      d.value !== c && (d.value = c, n("changeValidity", !!c), n(
         "changeErrorCode",
-        p ? null : o.value.getValidationError()
+        c ? null : a.value.getValidationError()
       ));
-    }, r = () => {
-      var p;
-      n("changeNumber", ((p = o.value) == null ? void 0 : p.getNumber()) ?? ""), C();
-    }, h = () => {
-      var p;
-      n("changeCountry", ((p = o.value) == null ? void 0 : p.getSelectedCountryData().iso2) ?? ""), r(), C();
+    }, p = () => {
+      var c;
+      n("changeNumber", ((c = a.value) == null ? void 0 : c.getNumber()) ?? ""), h();
+    }, f = () => {
+      var c;
+      n("changeCountry", ((c = a.value) == null ? void 0 : c.getSelectedCountryData().iso2) ?? ""), p(), h();
     };
-    return E(() => {
-      a.value && (o.value = l(a.value, s.options), s.value && o.value.setNumber(s.value), s.disabled && o.value.setDisabled(s.disabled), d.value = c());
+    return M(() => {
+      o.value && (a.value = u(o.value, s.options), s.value && a.value.setNumber(s.value), s.disabled && a.value.setDisabled(s.disabled), d.value = l());
     }), B(
       () => s.disabled,
-      (p) => {
-        var m;
-        return (m = o.value) == null ? void 0 : m.setDisabled(p);
+      (c) => {
+        var C;
+        return (C = a.value) == null ? void 0 : C.setDisabled(c);
       }
     ), R(() => {
-      var p;
-      return (p = o.value) == null ? void 0 : p.destroy();
-    }), t({ instance: o, input: a }), (p, m) => F((z(), V("input", O({
+      var c;
+      return (c = a.value) == null ? void 0 : c.destroy();
+    }), t({ instance: a, input: o }), (c, C) => F((V(), z("input", $({
       ref_key: "input",
-      ref: a,
-      "onUpdate:modelValue": m[0] || (m[0] = (g) => i.value = g),
+      ref: o,
+      "onUpdate:modelValue": C[0] || (C[0] = (y) => i.value = y),
       type: "tel",
-      onCountrychange: h,
-      onInput: r
-    }, u.inputProps), null, 16)), [
+      onCountrychange: f,
+      onInput: p
+    }, r.inputProps), null, 16)), [
       [
-        $,
+        O,
         i.value,
         void 0,
         { lazy: !0 }
@@ -2698,5 +2752,5 @@ const Y = (u) => {
   }
 };
 export {
-  Z as default
+  at as default
 };