vue-tel-input 9.5.0 → 9.6.0

package/dist/vue-tel-input.js

@@ -1,6 +1,6 @@
-import { defineComponent as ce, mergeModels as K, shallowRef as R, useModel as pe, watch as w, nextTick as H, reactive as fe, computed as k, onMounted as me, resolveDirective as he, openBlock as m, createElementBlock as h, normalizeClass as C, withDirectives as z, withKeys as x, createElementVNode as D, unref as U, createCommentVNode as S, toDisplayString as P, renderSlot as F, withModifiers as ye, vModelText as ge, Fragment as be, renderList as Ce, vModelDynamic as ve } from "vue";
-import { parsePhoneNumberFromString as j } from "libphonenumber-js";
-const we = [
+import { defineComponent as ye, mergeModels as $, shallowRef as F, ref as be, useModel as ge, watch as O, nextTick as W, reactive as ve, computed as x, onMounted as Ce, resolveDirective as we, openBlock as h, createElementBlock as y, normalizeClass as v, withDirectives as L, withKeys as D, createElementVNode as I, unref as Q, createCommentVNode as k, toDisplayString as R, renderSlot as j, withModifiers as Oe, vModelText as Se, Fragment as ke, renderList as xe, vModelDynamic as De } from "vue";
+import { parsePhoneNumberFromString as T } from "libphonenumber-js";
+const Ie = [
   [
     "Afghanistan (‫افغانستان‬‎)",
     "af",
@@ -1306,34 +1306,34 @@ const we = [
     1,
     ["18"]
   ]
-], Oe = we.map(([o, r, u, d = 0, s = null]) => ({
-  name: o,
-  iso2: r.toUpperCase(),
+], Be = Ie.map(([t, i, u, d = 0, s = null]) => ({
+  name: t,
+  iso2: i.toUpperCase(),
   dialCode: u,
   priority: d,
   areaCodes: s
 }));
-function Se() {
-  return fetch("https://ip2c.org/s").then((o) => o.text()).then((o) => {
-    const r = (o || "").toString();
-    if (!r || r[0] !== "1")
+function Me() {
+  return fetch("https://ip2c.org/s").then((t) => t.text()).then((t) => {
+    const i = (t || "").toString();
+    if (!i || i[0] !== "1")
       throw new Error("unable to fetch the country");
-    return r.substr(2, 2);
+    return i.substr(2, 2);
   });
 }
-function ke(o, r) {
-  if (o.setSelectionRange)
-    o.focus(), o.setSelectionRange(r, r);
-  else if ("createTextRange" in o && typeof o.createTextRange == "function") {
-    const u = o.createTextRange();
-    u.collapse(!0), u.moveEnd("character", r), u.moveStart("character", r), u.select();
+function Te(t, i) {
+  if (t.setSelectionRange)
+    t.focus(), t.setSelectionRange(i, i);
+  else if ("createTextRange" in t && typeof t.createTextRange == "function") {
+    const u = t.createTextRange();
+    u.collapse(!0), u.moveEnd("character", i), u.moveStart("character", i), u.select();
   }
 }
-const xe = [
+const Ne = [
   {
     name: "allCountries",
     type: Array,
-    default: Oe,
+    default: Be,
     description: "All countries that are used in <code>libphonenumber-js</code>, can be overridden by this prop",
     inDemo: !1
   },
@@ -1378,6 +1378,13 @@ const xe = [
     description: "Options for dropdown, see below",
     inDemo: !1
   },
+  {
+    name: "dropdownOptions.ariaLabel",
+    default: "Country Code Selector",
+    type: String,
+    description: "Aria label for the country code selector dropdown",
+    inDemo: !1
+  },
   {
     name: "dropdownOptions.disabled",
     default: !1,
@@ -1580,122 +1587,143 @@ const xe = [
     type: Boolean,
     description: "Only allow valid characters in a phone number (will also verify in <code>mounted</code>, so phone number with invalid characters will be shown as an empty string)",
     inDemo: !1
+  },
+  {
+    name: "strictValidation",
+    default: !1,
+    type: Boolean,
+    description: "Use strict phone number validation with full metadata (libphonenumber-js/max). When false (default), uses minimal metadata for smaller bundle size. When true, validates phone number patterns more precisely but increases bundle size by ~145KB.",
+    inDemo: !1
   }
-], $ = [...xe].reduce((o, r) => {
-  if (r.name.includes(".")) {
-    const [u, d] = r.name.split(".");
-    o[u] ? Object.assign(o[u], { [d]: r.default }) : Object.assign(o, { [u]: { [d]: r.default } });
+], _ = [...Ne].reduce((t, i) => {
+  if (i.name.includes(".")) {
+    const [u, d] = i.name.split(".");
+    t[u] ? Object.assign(t[u], { [d]: i.default }) : Object.assign(t, { [u]: { [d]: i.default } });
   } else
-    Object.assign(o, { [r.name]: r.default });
-  return o;
-}, {}), V = {
-  options: { ...$ }
+    Object.assign(t, { [i.name]: i.default });
+  return t;
+}, {}), G = {
+  options: { ..._ }
 };
-function p(o) {
-  const r = V.options[o];
-  return typeof r > "u" ? V.options[o] : r;
+function c(t) {
+  const i = G.options[t];
+  return typeof i > "u" ? G.options[t] : i;
+}
+function B(t) {
+  return t == null ? void 0 : t.toLowerCase();
+}
+function M(t) {
+  return t == null ? void 0 : t.toUpperCase();
+}
+let C = null, V = null;
+async function Pe() {
+  return C || V || (V = import("./index-z9l8C72U.js").then((t) => (C = t.parsePhoneNumberFromString, C)), V);
 }
-function I(o) {
-  return o == null ? void 0 : o.toLowerCase();
+function J(t, i, u = !1) {
+  return u ? C ? i ? C(t, i) : C(t) : i ? T(t, i) : T(t) : i ? T(t, i) : T(t);
 }
-function B(o) {
-  return o == null ? void 0 : o.toUpperCase();
+function Z() {
+  return C !== null;
 }
-const De = {
-  beforeMount(o, r, u) {
-    if (typeof r.value != "function") {
+const Ee = {
+  beforeMount(t, i, u) {
+    if (typeof i.value != "function") {
       const d = u.context.name;
-      let s = `[Vue-click-outside:] provided expression ${r.expression} is not a function, but has to be`;
+      let s = `[Vue-click-outside:] provided expression ${i.expression} is not a function, but has to be`;
       d && (s += `Found in component ${d}`), console.warn(s);
     }
-    o.clickOutsideEvent = function(d) {
+    t.clickOutsideEvent = function(d) {
       const s = d.composedPath ? d.composedPath() : d.path;
-      o === d.target || o.contains(d.target) || s.includes(o) || r.value(d, o);
-    }, document.body.addEventListener("click", o.clickOutsideEvent);
+      t === d.target || t.contains(d.target) || s.includes(t) || i.value(d, t);
+    }, document.body.addEventListener("click", t.clickOutsideEvent);
   },
-  unmounted(o) {
-    document.body.removeEventListener("click", o.clickOutsideEvent);
+  unmounted(t) {
+    document.body.removeEventListener("click", t.clickOutsideEvent);
   }
-}, Ie = ["aria-expanded", "tabindex"], Be = { class: "vti__selection" }, Me = {
+}, Re = ["aria-label", "aria-expanded", "tabindex"], Ve = { class: "vti__selection" }, ze = {
   key: 1,
   class: "vti__country-code"
-}, Te = { class: "vti__dropdown-arrow" }, Ne = {
+}, Ae = { class: "vti__dropdown-arrow" }, Fe = {
   key: 0,
   class: "vti__search_box_container"
-}, Pe = ["placeholder"], Ee = ["onClick", "onMousemove", "aria-selected"], Ae = { key: 1 }, Re = ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex", "value", "aria-describedby"], ze = /* @__PURE__ */ ce({
+}, Le = ["placeholder"], je = ["onClick", "onMousemove", "aria-selected"], Ge = { key: 1 }, qe = ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex", "value", "aria-describedby"], Ke = /* @__PURE__ */ ye({
   name: "VueTelInput",
   directives: {
-    clickOutside: De
+    clickOutside: Ee
   },
   __name: "vue-tel-input",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ $({
     allCountries: {
       type: Array,
-      default: () => p("allCountries")
+      default: () => c("allCountries")
     },
     autoFormat: {
       type: Boolean,
-      default: () => p("autoFormat")
+      default: () => c("autoFormat")
     },
     customValidate: {
       type: [Boolean, RegExp],
-      default: () => p("customValidate")
+      default: () => c("customValidate")
     },
     defaultCountry: {
       // Default country code, ie: 'AU'
       // Will override the current country of user
       type: [String, Number],
-      default: () => p("defaultCountry")
+      default: () => c("defaultCountry")
     },
     disabled: {
       type: Boolean,
-      default: () => p("disabled")
+      default: () => c("disabled")
     },
     autoDefaultCountry: {
       type: Boolean,
-      default: () => p("autoDefaultCountry")
+      default: () => c("autoDefaultCountry")
     },
     dropdownOptions: {
       type: Object,
-      default: () => p("dropdownOptions")
+      default: () => c("dropdownOptions")
     },
     ignoredCountries: {
       type: Array,
-      default: () => p("ignoredCountries")
+      default: () => c("ignoredCountries")
     },
     inputOptions: {
       type: Object,
-      default: () => p("inputOptions")
+      default: () => c("inputOptions")
     },
     invalidMsg: {
       type: String,
-      default: () => p("invalidMsg")
+      default: () => c("invalidMsg")
     },
     mode: {
       type: String,
-      default: () => p("mode")
+      default: () => c("mode")
     },
     onlyCountries: {
       type: Array,
-      default: () => p("onlyCountries")
+      default: () => c("onlyCountries")
     },
     preferredCountries: {
       type: Array,
-      default: () => p("preferredCountries")
+      default: () => c("preferredCountries")
     },
     validCharactersOnly: {
       type: Boolean,
-      default: () => p("validCharactersOnly")
+      default: () => c("validCharactersOnly")
     },
     styleClasses: {
       type: [String, Array, Object],
-      default: () => p("styleClasses")
+      default: () => c("styleClasses")
+    },
+    strictValidation: {
+      type: Boolean,
+      default: () => c("strictValidation")
     }
   }, {
     modelValue: { type: String },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ K([
+  emits: /* @__PURE__ */ $([
     "blur",
     "close",
     "country-changed",
@@ -1706,14 +1734,14 @@ const De = {
     "space",
     "validate"
   ], ["update:modelValue"]),
-  setup(o, { expose: r, emit: u }) {
-    const d = R(), s = R(), g = R(), f = u, a = o, O = pe(o, "modelValue");
-    w(O, (e, t) => {
-      ee() ? n.phone = e ?? "" : H(() => {
-        n.phone = t ?? "", L();
+  setup(t, { expose: i, emit: u }) {
+    const d = F(), s = F(), b = F(), f = u, a = t, q = be(Z()), S = ge(t, "modelValue");
+    O(S, (e, o) => {
+      ie() ? n.phone = e ?? "" : W(() => {
+        n.phone = o ?? "", K();
       });
     });
-    const n = fe({
+    const n = ve({
       phone: "",
       activeCountryCode: void 0,
       open: !1,
@@ -1725,34 +1753,35 @@ const De = {
       parsedPlaceholder: a.inputOptions.placeholder,
       searchQuery: ""
     });
-    w(() => n.open, (e) => {
-      e ? (ue(), f("open")) : f("close");
+    O(() => n.open, (e) => {
+      e ? (he(), f("open")) : f("close");
     });
-    const M = k(() => a.onlyCountries.length ? a.allCountries.filter(({ iso2: e }) => a.onlyCountries.some((t) => B(t) === e)) : a.ignoredCountries.length ? a.allCountries.filter(
-      ({ iso2: e }) => !a.ignoredCountries.includes(B(e)) && !a.ignoredCountries.includes(I(e))
-    ) : a.allCountries), E = k(() => T(n.activeCountryCode));
-    w(E, (e, t) => {
-      if (!e && (t != null && t.iso2)) {
-        n.activeCountryCode = t.iso2;
+    const N = x(() => a.onlyCountries.length ? a.allCountries.filter(({ iso2: e }) => a.onlyCountries.some((o) => M(o) === e)) : a.ignoredCountries.length ? a.allCountries.filter(
+      ({ iso2: e }) => !a.ignoredCountries.includes(M(e)) && !a.ignoredCountries.includes(B(e))
+    ) : a.allCountries), z = x(() => P(n.activeCountryCode));
+    O(z, (e, o) => {
+      if (!e && (o != null && o.iso2)) {
+        n.activeCountryCode = o.iso2;
         return;
       }
       e != null && e.iso2 && f("country-changed", e);
     });
-    const Q = k(() => {
-      var t;
-      const e = I(a.mode);
-      return e === "auto" ? (t = n.phone) != null && t.startsWith("+") ? "international" : "national" : ["national", "international", "e.164", "rfc3966", "idd"].includes(e) ? e : (console.error('Invalid value of prop "mode"'), "international");
-    }), b = k(() => {
-      const t = [..._(a.preferredCountries).map((c) => ({ ...c, preferred: !0 })), ...M.value];
+    const Y = x(() => {
+      var o;
+      const e = B(a.mode);
+      return e === "auto" ? (o = n.phone) != null && o.startsWith("+") ? "international" : "national" : ["national", "international", "e.164", "rfc3966", "idd"].includes(e) ? e : (console.error('Invalid value of prop "mode"'), "international");
+    }), g = x(() => {
+      const o = [...ne(a.preferredCountries).map((p) => ({ ...p, preferred: !0 })), ...N.value];
       if (!a.dropdownOptions.showSearchBox)
-        return t;
-      const i = n.searchQuery.toLowerCase().replace(/[~`!@#$%^&*()+={}\[\];:\'\"<>.,\/\\\?-_]/g, "");
-      return t.filter(
-        (c) => new RegExp(i, "i").test(c.name) || new RegExp(i, "i").test(c.iso2) || new RegExp(i, "i").test(c.dialCode)
+        return o;
+      const r = n.searchQuery.toLowerCase().replace(/[~`!@#$%^&*()+={}\[\];:\'\"<>.,\/\\\?-_]/g, "");
+      return o.filter(
+        (p) => new RegExp(r, "i").test(p.name) || new RegExp(r, "i").test(p.iso2) || new RegExp(r, "i").test(p.dialCode)
       );
-    }), y = k(() => {
+    }), m = x(() => {
       var l;
-      const e = n.phone.startsWith("+") ? j(n.phone) : j(n.phone, n.activeCountryCode), t = {
+      q.value;
+      const e = n.phone.startsWith("+") ? J(n.phone, void 0, a.strictValidation) : J(n.phone, n.activeCountryCode, a.strictValidation), o = {
         country: e == null ? void 0 : e.country,
         countryCode: e == null ? void 0 : e.country,
         formatted: n.phone,
@@ -1760,31 +1789,33 @@ const De = {
         possible: (l = e == null ? void 0 : e.isPossible) == null ? void 0 : l.call(e),
         nationalNumber: e == null ? void 0 : e.nationalNumber
       };
-      return t.valid && (t.formatted = e == null ? void 0 : e.format(B(Q.value))), e != null && e.country && (a.ignoredCountries.length || a.onlyCountries.length) && !T(e.country) && (t.valid = !1, t.possible = !1, e.country = null), e ? {
-        ...t,
+      return o.valid && (o.formatted = e == null ? void 0 : e.format(M(Y.value))), e != null && e.country && (a.ignoredCountries.length || a.onlyCountries.length) && !P(e.country) && (o.valid = !1, o.possible = !1, e.country = null), e ? {
+        ...o,
         ...e
-      } : t;
+      } : o;
     });
-    w(() => y.value.countryCode, (e) => {
+    O(() => m.value.countryCode, (e) => {
       e && (n.activeCountryCode = e);
-    }), w(() => y.value.valid, () => {
-      f("validate", y.value);
-    }), w(() => y.value.formatted, (e) => {
-      !a.autoFormat || a.customValidate || (N(e), H(() => {
-        e && !O.value && (n.phone = e);
+    }), O(() => m.value.valid, () => {
+      f("validate", m.value);
+    }), O(() => m.value.formatted, (e) => {
+      !a.autoFormat || a.customValidate || (E(e), W(() => {
+        e && !S.value && (n.phone = e);
       }));
-    }), w(() => a.inputOptions.placeholder, W), me(() => {
-      O.value && (n.phone = O.value.trim()), X(), J().then(() => {
+    }), O(() => a.inputOptions.placeholder, X), Ce(() => {
+      a.strictValidation && !Z() && Pe().then(() => {
+        q.value = !0, f("validate", m.value);
+      }), S.value && (n.phone = S.value.trim()), ae(), ee().then(() => {
         var e;
-        !n.phone && ((e = a.inputOptions) != null && e.showDialCode) && n.activeCountryCode && (n.phone = `+${n.activeCountryCode}`), f("validate", y.value);
+        !n.phone && ((e = a.inputOptions) != null && e.showDialCode) && n.activeCountryCode && (n.phone = `+${n.activeCountryCode}`), f("validate", m.value);
       }).catch(console.error).then(() => {
         n.finishMounted = !0;
       });
     });
-    function W() {
+    function X() {
       n.parsedPlaceholder = a.inputOptions.placeholder;
     }
-    function J() {
+    function ee() {
       return new Promise((e) => {
         var l;
         if (((l = n.phone) == null ? void 0 : l[0]) === "+") {
@@ -1793,278 +1824,278 @@ const De = {
         }
         if (a.defaultCountry) {
           if (typeof a.defaultCountry == "string") {
-            v(a.defaultCountry), e();
+            w(a.defaultCountry), e();
             return;
           }
           if (typeof a.defaultCountry == "number") {
-            const i = Z(a.defaultCountry);
-            if (i) {
-              v(i.iso2), e();
+            const r = te(a.defaultCountry);
+            if (r) {
+              w(r.iso2), e();
               return;
             }
           }
         }
-        const t = a.preferredCountries[0] || M.value[0];
-        a.autoDefaultCountry ? Se().then((i) => {
-          v(i || n.activeCountryCode);
-        }).catch((i) => {
-          console.warn(i), v(t);
+        const o = a.preferredCountries[0] || N.value[0];
+        a.autoDefaultCountry ? Me().then((r) => {
+          w(r || n.activeCountryCode);
+        }).catch((r) => {
+          console.warn(r), w(o);
         }).then(() => {
           e();
-        }) : (v(t), e());
+        }) : (w(o), e());
       });
     }
-    function _(e = []) {
-      return e.map(T).filter(Boolean);
+    function ne(e = []) {
+      return e.map(P).filter(Boolean);
     }
-    function T(e = "") {
-      return M.value.find((t) => t.iso2 === B(e));
+    function P(e = "") {
+      return N.value.find((o) => o.iso2 === M(e));
     }
-    function Z(e) {
-      return M.value.find((t) => Number(t.dialCode) === e);
+    function te(e) {
+      return N.value.find((o) => Number(o.dialCode) === e);
     }
-    function Y(e, t) {
-      const l = n.selectedIndex === e, i = e === a.preferredCountries.length - 1, c = a.preferredCountries.some((A) => B(A) === t);
+    function oe(e, o) {
+      const l = n.selectedIndex === e, r = e === a.preferredCountries.length - 1, p = a.preferredCountries.some((A) => M(A) === o);
       return {
         highlighted: l,
-        "last-preferred": i,
-        preferred: c
+        "last-preferred": r,
+        preferred: p
       };
     }
-    function v(e) {
-      var l, i, c;
-      let t = e;
-      if (typeof t == "string" && (t = T(t)), !!t) {
-        if (((l = n.phone) == null ? void 0 : l[0]) === "+" && t.iso2 && y.value.nationalNumber) {
-          n.activeCountryCode = t.iso2, n.phone = ((i = j(
-            y.value.nationalNumber,
-            t.iso2
-          )) == null ? void 0 : i.formatInternational()) ?? "";
+    function w(e) {
+      var l, r, p;
+      let o = e;
+      if (typeof o == "string" && (o = P(o)), !!o) {
+        if (((l = n.phone) == null ? void 0 : l[0]) === "+" && o.iso2 && m.value.nationalNumber) {
+          n.activeCountryCode = o.iso2, n.phone = ((r = T(
+            m.value.nationalNumber,
+            o.iso2
+          )) == null ? void 0 : r.formatInternational()) ?? "";
           return;
         }
-        if ((c = a.inputOptions) != null && c.showDialCode && t) {
-          n.phone = `+${t.dialCode}`, n.activeCountryCode = t.iso2;
+        if ((p = a.inputOptions) != null && p.showDialCode && o) {
+          n.phone = `+${o.dialCode}`, n.activeCountryCode = o.iso2;
           return;
         }
-        n.activeCountryCode = t.iso2, N(n.phone);
+        n.activeCountryCode = o.iso2, E(n.phone);
       }
     }
-    function X() {
+    function ae() {
       const e = n.phone;
       if (a.validCharactersOnly) {
-        const t = n.phone.match(/[()\-+0-9\s]*/g);
-        n.phone = t.join("");
+        const o = n.phone.match(/[()\-+0-9\s]*/g);
+        n.phone = o.join("");
       }
       if (a.customValidate && a.customValidate instanceof RegExp) {
-        const t = n.phone.match(a.customValidate);
-        n.phone = t.join("");
+        const o = n.phone.match(a.customValidate);
+        n.phone = o.join("");
       }
-      e !== n.phone && N(n.phone);
+      e !== n.phone && E(n.phone);
     }
-    function ee() {
-      return a.validCharactersOnly && !/^[()\-+0-9\s]*$/.test(n.phone) ? !1 : a.customValidate ? ne() : !0;
+    function ie() {
+      return a.validCharactersOnly && !/^[()\-+0-9\s]*$/.test(n.phone) ? !1 : a.customValidate ? re() : !0;
     }
-    function ne() {
+    function re() {
       return a.customValidate instanceof RegExp ? a.customValidate.test(n.phone) : !1;
     }
-    function L() {
+    function K() {
       var e;
-      (e = g.value) == null || e.setCustomValidity(y.value.valid ? "" : a.invalidMsg), N(n.phone);
+      (e = b.value) == null || e.setCustomValidity(m.value.valid ? "" : a.invalidMsg), E(n.phone);
     }
-    function N(e) {
-      O.value = e, f("on-input", e, y.value, g.value);
+    function E(e) {
+      S.value = e, f("on-input", e, m.value, b.value);
     }
-    function te(e) {
+    function se(e) {
       f("blur", e);
     }
-    function oe(e) {
-      ke(g.value, n.phone.length), f("focus", e);
+    function le(e) {
+      Te(b.value, n.phone.length), f("focus", e);
     }
-    function ae(e) {
+    function de(e) {
       f("enter", e);
     }
-    function ie(e) {
+    function ue(e) {
       f("space", e);
     }
-    function re() {
+    function ce() {
       var e;
-      (e = g.value) == null || e.focus();
+      (e = b.value) == null || e.focus();
     }
-    function se() {
+    function pe() {
       var e;
-      (e = g.value) == null || e.blur();
+      (e = b.value) == null || e.blur();
     }
-    function G() {
+    function H() {
       a.disabled || a.dropdownOptions.disabled || (n.searchQuery = "", n.open = !n.open);
     }
-    function le() {
+    function fe() {
       n.open = !1;
     }
-    function de(e) {
+    function me(e) {
       if (e.keyCode === 40) {
-        e.preventDefault(), n.open = !0, n.selectedIndex === null ? n.selectedIndex = 0 : n.selectedIndex = Math.min(b.value.length - 1, n.selectedIndex + 1);
-        const t = s.value.children[n.selectedIndex];
-        t.focus(), t.offsetTop + t.clientHeight > s.value.scrollTop + s.value.clientHeight && (s.value.scrollTop = t.offsetTop - s.value.clientHeight + t.clientHeight);
+        e.preventDefault(), n.open = !0, n.selectedIndex === null ? n.selectedIndex = 0 : n.selectedIndex = Math.min(g.value.length - 1, n.selectedIndex + 1);
+        const o = s.value.children[n.selectedIndex];
+        o.focus(), o.offsetTop + o.clientHeight > s.value.scrollTop + s.value.clientHeight && (s.value.scrollTop = o.offsetTop - s.value.clientHeight + o.clientHeight);
       } else if (e.keyCode === 38) {
-        e.preventDefault(), n.open = !0, n.selectedIndex === null ? n.selectedIndex = b.value.length - 1 : n.selectedIndex = Math.max(0, n.selectedIndex - 1);
-        const t = s.value.children[n.selectedIndex];
-        t.focus(), t.offsetTop < s.value.scrollTop && (s.value.scrollTop = t.offsetTop);
+        e.preventDefault(), n.open = !0, n.selectedIndex === null ? n.selectedIndex = g.value.length - 1 : n.selectedIndex = Math.max(0, n.selectedIndex - 1);
+        const o = s.value.children[n.selectedIndex];
+        o.focus(), o.offsetTop < s.value.scrollTop && (s.value.scrollTop = o.offsetTop);
       } else if (e.keyCode === 13)
-        n.selectedIndex !== null && v(b.value[n.selectedIndex]), n.open = !n.open;
+        n.selectedIndex !== null && w(g.value[n.selectedIndex]), n.open = !n.open;
       else if (n.open) {
         n.typeToFindInput += e.key, clearTimeout(n.typeToFindTimer), n.typeToFindTimer = setTimeout(() => {
           n.typeToFindInput = "";
         }, 700);
-        const t = b.value.slice(a.preferredCountries.length).findIndex((l) => I(l.name).startsWith(n.typeToFindInput));
-        if (t >= 0) {
-          n.selectedIndex = a.preferredCountries.length + t;
-          const l = s.value.children[n.selectedIndex], i = l.offsetTop < s.value.scrollTop, c = l.offsetTop + l.clientHeight > s.value.scrollTop + s.value.clientHeight;
-          (i || c) && (s.value.scrollTop = l.offsetTop - s.value.clientHeight / 2);
+        const o = g.value.slice(a.preferredCountries.length).findIndex((l) => B(l.name).startsWith(n.typeToFindInput));
+        if (o >= 0) {
+          n.selectedIndex = a.preferredCountries.length + o;
+          const l = s.value.children[n.selectedIndex], r = l.offsetTop < s.value.scrollTop, p = l.offsetTop + l.clientHeight > s.value.scrollTop + s.value.clientHeight;
+          (r || p) && (s.value.scrollTop = l.offsetTop - s.value.clientHeight / 2);
         }
       }
     }
-    function q() {
-      n.selectedIndex = b.value.map((e) => e.iso2).indexOf(n.activeCountryCode), n.open = !1;
+    function U() {
+      n.selectedIndex = g.value.map((e) => e.iso2).indexOf(n.activeCountryCode), n.open = !1;
     }
-    function ue() {
+    function he() {
       window.innerHeight - d.value.getBoundingClientRect().bottom > 200 ? n.dropdownOpenDirection = "below" : n.dropdownOpenDirection = "above";
     }
-    return r({
-      focus: re,
-      blur: se
-    }), (e, t) => {
-      const l = he("click-outside");
-      return m(), h("div", {
+    return i({
+      focus: ce,
+      blur: pe
+    }), (e, o) => {
+      const l = we("click-outside");
+      return h(), y("div", {
         ref_key: "refRoot",
         ref: d,
-        class: C(["vue-tel-input", o.styleClasses, { disabled: o.disabled }])
+        class: v(["vue-tel-input", t.styleClasses, { disabled: t.disabled }])
       }, [
-        z((m(), h("div", {
-          "aria-label": "Country Code Selector",
+        L((h(), y("div", {
+          "aria-label": t.dropdownOptions.ariaLabel,
           "aria-haspopup": "listbox",
           "aria-expanded": n.open,
           role: "button",
-          class: C(["vti__dropdown", { open: n.open, disabled: o.dropdownOptions.disabled }]),
-          tabindex: o.dropdownOptions.tabindex,
+          class: v(["vti__dropdown", { open: n.open, disabled: t.dropdownOptions.disabled }]),
+          tabindex: t.dropdownOptions.tabindex,
           onKeydown: [
-            de,
-            x(G, ["space"]),
-            x(q, ["esc"]),
-            x(q, ["tab"])
+            me,
+            D(H, ["space"]),
+            D(U, ["esc"]),
+            D(U, ["tab"])
           ],
-          onClick: G
+          onClick: H
         }, [
-          D("span", Be, [
-            o.dropdownOptions.showFlags ? (m(), h("span", {
+          I("span", Ve, [
+            t.dropdownOptions.showFlags ? (h(), y("span", {
               key: 0,
-              class: C(["vti__flag", U(I)(n.activeCountryCode)])
-            }, null, 2)) : S("", !0),
-            o.dropdownOptions.showDialCodeInSelection ? (m(), h("span", Me, " +" + P(E.value && E.value.dialCode), 1)) : S("", !0),
-            F(e.$slots, "arrow-icon", {
+              class: v(["vti__flag", Q(B)(n.activeCountryCode)])
+            }, null, 2)) : k("", !0),
+            t.dropdownOptions.showDialCodeInSelection ? (h(), y("span", ze, " +" + R(z.value && z.value.dialCode), 1)) : k("", !0),
+            j(e.$slots, "arrow-icon", {
               open: n.open
             }, () => [
-              D("span", Te, P(n.open ? "▲" : "▼"), 1)
+              I("span", Ae, R(n.open ? "▲" : "▼"), 1)
             ])
           ]),
-          n.open ? (m(), h("ul", {
+          n.open ? (h(), y("ul", {
             key: 0,
             ref_key: "refList",
             ref: s,
-            class: C(["vti__dropdown-list", n.dropdownOpenDirection]),
+            class: v(["vti__dropdown-list", n.dropdownOpenDirection]),
             role: "listbox"
           }, [
-            o.dropdownOptions.showSearchBox ? (m(), h("div", Ne, [
-              F(e.$slots, "search-icon"),
-              z(D("input", {
-                class: C(["vti__input", "vti__search_box"]),
+            t.dropdownOptions.showSearchBox ? (h(), y("div", Fe, [
+              j(e.$slots, "search-icon"),
+              L(I("input", {
+                class: v(["vti__input", "vti__search_box"]),
                 "aria-label": "Search by country name or country code",
-                placeholder: o.dropdownOptions.searchBoxPlaceholder || (b.value.length ? b.value[0].name : ""),
+                placeholder: t.dropdownOptions.searchBoxPlaceholder || (g.value.length ? g.value[0].name : ""),
                 type: "text",
-                "onUpdate:modelValue": t[0] || (t[0] = (i) => n.searchQuery = i),
-                onClick: t[1] || (t[1] = ye(() => {
+                "onUpdate:modelValue": o[0] || (o[0] = (r) => n.searchQuery = r),
+                onClick: o[1] || (o[1] = Oe(() => {
                 }, ["stop"]))
-              }, null, 8, Pe), [
-                [ge, n.searchQuery]
+              }, null, 8, Le), [
+                [Se, n.searchQuery]
               ])
-            ])) : S("", !0),
-            (m(!0), h(be, null, Ce(b.value, (i, c) => (m(), h("li", {
+            ])) : k("", !0),
+            (h(!0), y(ke, null, xe(g.value, (r, p) => (h(), y("li", {
               role: "option",
-              class: C(["vti__dropdown-item", Y(c, i.iso2)]),
-              key: i.iso2 + (i.preferred ? "-preferred" : ""),
+              class: v(["vti__dropdown-item", oe(p, r.iso2)]),
+              key: r.iso2 + (r.preferred ? "-preferred" : ""),
               tabindex: "-1",
-              onClick: (A) => v(i),
-              onMousemove: (A) => n.selectedIndex = c,
-              "aria-selected": n.activeCountryCode === i.iso2 && !i.preferred
+              onClick: (A) => w(r),
+              onMousemove: (A) => n.selectedIndex = p,
+              "aria-selected": n.activeCountryCode === r.iso2 && !r.preferred
             }, [
-              o.dropdownOptions.showFlags ? (m(), h("span", {
+              t.dropdownOptions.showFlags ? (h(), y("span", {
                 key: 0,
-                class: C(["vti__flag", U(I)(i.iso2)])
-              }, null, 2)) : S("", !0),
-              D("strong", null, P(i.name), 1),
-              o.dropdownOptions.showDialCodeInList ? (m(), h("span", Ae, " +" + P(i.dialCode), 1)) : S("", !0)
-            ], 42, Ee))), 128))
-          ], 2)) : S("", !0)
-        ], 42, Ie)), [
-          [l, le]
+                class: v(["vti__flag", Q(B)(r.iso2)])
+              }, null, 2)) : k("", !0),
+              I("strong", null, R(r.name), 1),
+              t.dropdownOptions.showDialCodeInList ? (h(), y("span", Ge, " +" + R(r.dialCode), 1)) : k("", !0)
+            ], 42, je))), 128))
+          ], 2)) : k("", !0)
+        ], 42, Re)), [
+          [l, fe]
         ]),
-        z(D("input", {
-          "onUpdate:modelValue": t[2] || (t[2] = (i) => n.phone = i),
+        L(I("input", {
+          "onUpdate:modelValue": o[2] || (o[2] = (r) => n.phone = r),
           ref_key: "refInput",
-          ref: g,
-          type: o.inputOptions.type,
-          autocomplete: o.inputOptions.autocomplete,
-          autofocus: o.inputOptions.autofocus,
-          class: C(["vti__input", "vti__phone", o.inputOptions.styleClasses]),
-          disabled: o.disabled,
-          id: o.inputOptions.id,
-          maxlength: o.inputOptions.maxlength,
-          name: o.inputOptions.name,
+          ref: b,
+          type: t.inputOptions.type,
+          autocomplete: t.inputOptions.autocomplete,
+          autofocus: t.inputOptions.autofocus,
+          class: v(["vti__input", "vti__phone", t.inputOptions.styleClasses]),
+          disabled: t.disabled,
+          id: t.inputOptions.id,
+          maxlength: t.inputOptions.maxlength,
+          name: t.inputOptions.name,
           placeholder: n.parsedPlaceholder,
-          readonly: o.inputOptions.readonly,
-          required: o.inputOptions.required,
-          tabindex: o.inputOptions.tabindex,
-          value: O.value,
-          "aria-describedby": o.inputOptions["aria-describedby"],
-          onBlur: te,
-          onFocus: oe,
-          onInput: L,
+          readonly: t.inputOptions.readonly,
+          required: t.inputOptions.required,
+          tabindex: t.inputOptions.tabindex,
+          value: S.value,
+          "aria-describedby": t.inputOptions["aria-describedby"],
+          onBlur: se,
+          onFocus: le,
+          onInput: K,
           onKeyup: [
-            x(ae, ["enter"]),
-            x(ie, ["space"])
+            D(de, ["enter"]),
+            D(ue, ["space"])
           ]
-        }, null, 42, Re), [
-          [ve, n.phone]
+        }, null, 42, qe), [
+          [De, n.phone]
         ]),
-        F(e.$slots, "icon-right")
+        j(e.$slots, "icon-right")
       ], 2);
     };
   }
-}), Ve = {
-  install(o, r = {}) {
+}), $e = {
+  install(t, i = {}) {
     const {
       dropdownOptions: u,
       inputOptions: d,
       ...s
-    } = r, {
-      dropdownOptions: g,
+    } = i, {
+      dropdownOptions: b,
       inputOptions: f,
       ...a
-    } = $;
-    V.options = {
+    } = _;
+    G.options = {
       inputOptions: {
         ...f,
         ...d
       },
       dropdownOptions: {
-        ...g,
+        ...b,
         ...u
       },
       ...a,
       ...s
-    }, o.component("vue-tel-input", ze);
+    }, t.component("vue-tel-input", Ke);
   }
 };
 export {
-  ze as VueTelInput,
-  Ve as default
+  Ke as VueTelInput,
+  $e as default
 };