@ozdao/prometheus-framework 0.2.199 → 0.2.201

package/dist/prometheus-framework/src/components/FieldPhone/FieldPhone.vue.js

@@ -1,15 +1,24 @@
-import { ref as d, reactive as ge, onMounted as Ce, computed as p, watch as h, nextTick as S, openBlock as y, createElementBlock as m, Fragment as K, createElementVNode as w, normalizeClass as I, normalizeStyle as A, withDirectives as F, withKeys as P, createCommentVNode as x, toDisplayString as D, renderList as be, vShow as Oe, unref as Se, vModelDynamic as we, renderSlot as Ie, createVNode as xe, Transition as Te, withCtx as ke } from "vue";
-import je from "./click-outside.js";
-import Ae from "./all-countries.js";
+import { ref, reactive, onMounted, computed, watch, nextTick, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, withDirectives, withKeys, createCommentVNode, toDisplayString, renderList, vShow, unref, vModelDynamic, renderSlot, createVNode, Transition, withCtx } from "vue";
+import clickOutside from "./click-outside.js";
+import allCountries from "./all-countries.js";
 /* empty css                */
-import { parsePhoneNumber as H } from "../../../node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";
-const De = ["tabindex"], Be = { class: "flex-nowrap flex flex-v-center p-medium vti__selection" }, Ee = ["innerHTML"], Me = {
+import { parsePhoneNumber } from "../../../node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";
+const _hoisted_1 = ["tabindex"];
+const _hoisted_2 = { class: "flex-nowrap flex flex-v-center p-medium vti__selection" };
+const _hoisted_3 = ["innerHTML"];
+const _hoisted_4 = {
   key: 1,
   class: "vti__country-code"
-}, Fe = ["onClick", "onMousemove"], Pe = ["innerHTML"], He = { key: 1 }, Ve = ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex"], Le = {
+};
+const _hoisted_5 = ["onClick", "onMousemove"];
+const _hoisted_6 = ["innerHTML"];
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex"];
+const _hoisted_9 = {
   key: 0,
   class: "mn-t-thin mn-b-thin invalid-feedback"
-}, ze = {
+};
+const _sfc_main = {
   __name: "FieldPhone",
   props: {
     modelValue: { type: String, default: "" },
@@ -21,52 +30,72 @@ const De = ["tabindex"], Be = { class: "flex-nowrap flex flex-v-center p-medium
     goodInputClass: { type: [String, Array, Object], default: "" },
     badInputStyle: { type: [String, Array, Object], default: "" },
     goodInputStyle: { type: [String, Array, Object], default: "" },
-    allCountries: { type: Array, default: () => Ae },
-    autoFormat: { type: Boolean, default: () => !0 },
-    validation: { type: [Boolean, Object], default: !1 },
-    customValidate: { type: [Boolean, RegExp], default: () => !1 },
+    allCountries: { type: Array, default: () => allCountries },
+    autoFormat: { type: Boolean, default: () => true },
+    validation: { type: [Boolean, Object], default: false },
+    customValidate: { type: [Boolean, RegExp], default: () => false },
     defaultCountry: { type: String, default: () => "" },
-    disabled: { type: Boolean, default: () => !1 },
-    autoDefaultCountry: { type: Boolean, default: () => !0 },
+    disabled: { type: Boolean, default: () => false },
+    autoDefaultCountry: { type: Boolean, default: () => true },
     ignoredCountries: { type: Array, default: () => [] },
     invalidMsg: { type: String, default: () => "" },
     mode: { type: String, default: () => "auto" },
     onlyCountries: { type: Array, default: () => [] },
     preferredCountries: { type: Array, default: () => [] },
-    validCharactersOnly: { type: Boolean, default: () => !1 },
+    validCharactersOnly: { type: Boolean, default: () => false },
     rootClass: { type: [String, Array, Object], default: () => "" },
-    inputClass: { type: [String, Array, Object], default: () => "" },
-    divInputClass: { type: [String, Array, Object], default: () => "" },
-    rootStyle: { type: [String, Array, Object], default: () => "" },
-    dropdownStyle: { type: [String, Array, Object], default: () => "" },
-    listStyle: { type: [String, Array, Object], default: () => "" },
-    inputStyle: { type: [String, Array, Object], default: () => "" },
-    inputId: { type: [String, Array, Object], default: () => "" },
-    Placeholder: { type: [String, Object, Function], default: () => "" },
+    inputClass: { type: [String, Array, Object], default: () => {
+      return "";
+    } },
+    divInputClass: { type: [String, Array, Object], default: () => {
+      return "";
+    } },
+    rootStyle: { type: [String, Array, Object], default: () => {
+      return "";
+    } },
+    dropdownStyle: { type: [String, Array, Object], default: () => {
+      return "";
+    } },
+    listStyle: { type: [String, Array, Object], default: () => {
+      return "";
+    } },
+    inputStyle: { type: [String, Array, Object], default: () => {
+      return "";
+    } },
+    inputId: { type: [String, Array, Object], default: () => {
+      return "";
+    } },
+    Placeholder: { type: [String, Object, Function], default: () => {
+      return "";
+    } },
     dropdownOptions: {
       type: Object,
-      default: () => ({
-        showDialCodeInList: !0,
-        showDialCodeInSelection: !1,
-        showFlags: !0,
-        tabindex: 0
-      })
+      default: () => {
+        return {
+          showDialCodeInList: true,
+          showDialCodeInSelection: false,
+          showFlags: true,
+          tabindex: 0
+        };
+      }
     },
     inputOptions: {
       type: Object,
-      default: () => ({
-        autocomplete: "on",
-        autofocus: !1,
-        id: "",
-        maxlength: 25,
-        name: "telephone",
-        placeholder: "Enter a phone number",
-        readonly: !1,
-        required: !1,
-        tabindex: 0,
-        type: "tel",
-        styleClasses: ""
-      })
+      default: () => {
+        return {
+          autocomplete: "on",
+          autofocus: false,
+          id: "",
+          maxlength: 25,
+          name: "telephone",
+          placeholder: "Enter a phone number",
+          readonly: false,
+          required: false,
+          tabindex: 0,
+          type: "tel",
+          styleClasses: ""
+        };
+      }
     }
   },
   emits: [
@@ -81,293 +110,465 @@ const De = ["tabindex"], Be = { class: "flex-nowrap flex flex-v-center p-medium
     "enter",
     "space"
   ],
-  setup(l, { emit: W }) {
-    let G = je;
-    const t = l, c = W;
-    d(5), d(5), ge({
+  setup(__props, { emit: __emit }) {
+    let vClickOutside = clickOutside;
+    const props = __props;
+    const emits = __emit;
+    ref(5);
+    ref(5);
+    reactive({
       action: null,
       amount: null
     });
-    const o = d(t.modelValue ? t.modelValue : ""), v = d(""), f = d(!1), J = d(!1), i = d(null), B = d(""), V = d(null), L = d("below"), R = d(t.Placeholder !== "" ? t.Placeholder : t.inputOptions.placeholder), N = d(null), s = d(null), E = d(null);
-    Ce(async () => {
-      t.modelValue && (o.value = t.modelValue), ue(), le().then(() => {
-        var e;
-        !o.value && ((e = t.inputOptions) != null && e.showDialCode) && v.value && (o.value = `+${v.value}`), c("validate", u.value);
+    const phone = ref(props.modelValue ? props.modelValue : "");
+    const activeCountryCode = ref("");
+    const open = ref(false);
+    const finishMounted = ref(false);
+    const selectedIndex = ref(null);
+    const typeToFindInput = ref("");
+    const typeToFindTimer = ref(null);
+    const dropdownOpenDirection = ref("below");
+    const parsedPlaceholder = ref(props.Placeholder !== "" ? props.Placeholder : props.inputOptions.placeholder);
+    const rootElement = ref(null);
+    const list = ref(null);
+    const input = ref(null);
+    onMounted(async () => {
+      if (props.modelValue) {
+        phone.value = props.modelValue;
+      }
+      cleanInvalidCharacters();
+      initializeCountry().then(() => {
+        var _a;
+        if (!phone.value && ((_a = props.inputOptions) == null ? void 0 : _a.showDialCode) && activeCountryCode.value) {
+          phone.value = `+${activeCountryCode.value}`;
+        }
+        emits("validate", phoneObject.value);
       }).catch(console.error).then(() => {
-        J.value = !0;
+        finishMounted.value = true;
       });
     });
-    const g = p(() => T(v.value)), Q = p(() => g.value ? g.value.flag : null), X = p(() => t.mode === "auto" ? !o.value || o.value[0] !== "+" ? "national" : "international" : ["international", "national"].includes(t.mode) ? t.mode : (console.error('Invalid value of prop "mode"'), "international")), M = p(() => t.onlyCountries && t.onlyCountries.length ? t.allCountries.filter(({ iso2: e }) => t.onlyCountries.includes(e.toUpperCase())) : t.ignoredCountries && t.ignoredCountries.length ? t.allCountries.filter(
-      ({ iso2: e }) => !t.ignoredCountries.includes(e.toUpperCase()) && !t.ignoredCountries.includes(e.toLowerCase())
-    ) : t.allCountries), C = p(() => [...ae(t.preferredCountries).map((n) => ({ ...n, preferred: !0 })), ...M.value]), u = p(() => {
-      var j, q, z;
-      let e = {};
-      ((j = o.value) == null ? void 0 : j[0]) === "+" ? e = H(o.value) || {} : e = H(o.value, v.value) || {};
-      const { metadata: n, ...a } = e;
-      let r = (q = e.isValid) == null ? void 0 : q.call(e), O = o.value;
-      return r && (O = (z = e.format) == null ? void 0 : z.call(e, X.value.toUpperCase(), { nationalPrefix: !1 })), e.country && (t.ignoredCountries.length || t.onlyCountries.length) && (T(e.country) || (r = !1, e = { ...e, country: null })), {
-        ...a,
-        countryCode: e.country,
-        valid: r,
-        country: g.value,
-        formatted: O
+    const activeCountry = computed(() => {
+      return findCountry(activeCountryCode.value);
+    });
+    const activeCountryFlag = computed(() => {
+      return activeCountry.value ? activeCountry.value.flag : null;
+    });
+    const parsedMode = computed(() => {
+      if (props.mode === "auto") {
+        if (!phone.value || phone.value[0] !== "+") {
+          return "national";
+        }
+        return "international";
+      }
+      if (!["international", "national"].includes(props.mode)) {
+        console.error('Invalid value of prop "mode"');
+        return "international";
+      }
+      return props.mode;
+    });
+    const filteredCountries = computed(() => {
+      if (props.onlyCountries && props.onlyCountries.length) {
+        return props.allCountries.filter(({ iso2 }) => props.onlyCountries.includes(iso2.toUpperCase()));
+      }
+      if (props.ignoredCountries && props.ignoredCountries.length) {
+        return props.allCountries.filter(
+          ({ iso2 }) => !props.ignoredCountries.includes(iso2.toUpperCase()) && !props.ignoredCountries.includes(iso2.toLowerCase())
+        );
+      }
+      return props.allCountries;
+    });
+    const sortedCountries = computed(() => {
+      const preferredCountries = getCountries(props.preferredCountries).map((country) => ({ ...country, preferred: true }));
+      return [...preferredCountries, ...filteredCountries.value];
+    });
+    const phoneObject = computed(() => {
+      var _a, _b, _c;
+      let result = {};
+      if (((_a = phone.value) == null ? void 0 : _a[0]) === "+") {
+        result = parsePhoneNumber(phone.value) || {};
+      } else {
+        result = parsePhoneNumber(phone.value, activeCountryCode.value) || {};
+      }
+      const { metadata, ...phoneDetails } = result;
+      let valid = (_b = result.isValid) == null ? void 0 : _b.call(result);
+      let formatted = phone.value;
+      if (valid) {
+        formatted = (_c = result.format) == null ? void 0 : _c.call(result, parsedMode.value.toUpperCase(), { nationalPrefix: false });
+      }
+      if (result.country && (props.ignoredCountries.length || props.onlyCountries.length)) {
+        if (!findCountry(result.country)) {
+          valid = false;
+          result = { ...result, country: null };
+        }
+      }
+      return {
+        ...phoneDetails,
+        countryCode: result.country,
+        valid,
+        country: activeCountry.value,
+        formatted
       };
-    }), Y = p(() => u.value.valid === !0 ? t.goodClass : u.value.valid === !1 ? t.badClass : void 0), Z = p(() => u.value.valid === !0 ? t.goodStyle : u.value.valid === !1 ? t.badStyle : void 0), _ = p(() => u.value.valid === !0 ? t.goodInputClass : u.value.valid === !1 ? t.badInputClass : void 0), ee = p(() => u.value.valid === !0 ? t.goodInputStyle : u.value.valid === !1 ? t.badInputStyle : void 0);
-    h(g, (e, n) => {
-      if (!e && (n != null && n.iso2)) {
-        v.value = n.iso2;
+    });
+    const classes = computed(() => {
+      return phoneObject.value.valid === true ? props.goodClass : phoneObject.value.valid === false ? props.badClass : void 0;
+    });
+    const styles = computed(() => {
+      return phoneObject.value.valid === true ? props.goodStyle : phoneObject.value.valid === false ? props.badStyle : void 0;
+    });
+    const Iclasses = computed(() => {
+      return phoneObject.value.valid === true ? props.goodInputClass : phoneObject.value.valid === false ? props.badInputClass : void 0;
+    });
+    const Istyles = computed(() => {
+      return phoneObject.value.valid === true ? props.goodInputStyle : phoneObject.value.valid === false ? props.badInputStyle : void 0;
+    });
+    watch(activeCountry, (newValue, oldValue) => {
+      if (!newValue && (oldValue == null ? void 0 : oldValue.iso2)) {
+        activeCountryCode.value = oldValue.iso2;
+        return;
+      }
+      if (newValue == null ? void 0 : newValue.iso2) {
+        emits("country-changed", newValue);
+        resetPlaceholder();
+      }
+    });
+    watch(() => phoneObject.value.countryCode, (newValue) => {
+      activeCountryCode.value = newValue;
+    });
+    watch(() => phoneObject.value.valid, () => {
+      emits("validate", phoneObject.value);
+    });
+    watch(() => phoneObject.value.formatted, (newValue) => {
+      if (!props.autoFormat || props.customValidate) {
         return;
       }
-      e != null && e.iso2 && (c("country-changed", e), $());
-    }), h(() => u.value.countryCode, (e) => {
-      v.value = e;
-    }), h(() => u.value.valid, () => {
-      c("validate", u.value);
-    }), h(() => u.value.formatted, (e) => {
-      !t.autoFormat || t.customValidate || (k(e), S(() => {
-        e && !t.modelValue && (o.value = e);
-      }));
-    }), h(() => t.inputOptions.placeholder, () => {
-      $();
-    }), h(() => t.modelValue, (e, n) => {
-      re() ? o.value = e : S(() => {
-        o.value = n, U();
+      emitInput(newValue);
+      nextTick(() => {
+        if (newValue && !props.modelValue) {
+          phone.value = newValue;
+        }
       });
-    }), h(f, (e) => {
-      e ? (he(), c("open")) : c("close");
     });
-    function te() {
-      return fetch("https://ip2c.org/s").then((e) => e.text()).then((e) => {
-        const n = (e || "").toString();
-        if (!n || n[0] !== "1")
+    watch(() => props.inputOptions.placeholder, () => {
+      resetPlaceholder();
+    });
+    watch(() => props.modelValue, (newValue, oldValue) => {
+      if (!testCharacters()) {
+        nextTick(() => {
+          phone.value = oldValue;
+          onInput();
+        });
+      } else {
+        phone.value = newValue;
+      }
+    });
+    watch(open, (isDropdownOpened) => {
+      if (isDropdownOpened) {
+        setDropdownPosition();
+        emits("open");
+      } else {
+        emits("close");
+      }
+    });
+    function getCountry() {
+      return fetch("https://ip2c.org/s").then((response) => response.text()).then((response) => {
+        const result = (response || "").toString();
+        if (!result || result[0] !== "1") {
           throw new Error("unable to fetch the country");
-        return n.substr(2, 2);
+        }
+        return result.substr(2, 2);
       });
     }
-    function ne(e, n) {
-      if (e.setSelectionRange)
-        e.focus(), e.setSelectionRange(n, n);
-      else if (e.createTextRange) {
-        const a = e.createTextRange();
-        a.collapse(!0), a.moveEnd("character", n), a.moveStart("character", n), a.select();
+    function setCaretPosition(ctrl, pos) {
+      if (ctrl.setSelectionRange) {
+        ctrl.focus();
+        ctrl.setSelectionRange(pos, pos);
+      } else if (ctrl.createTextRange) {
+        const range = ctrl.createTextRange();
+        range.collapse(true);
+        range.moveEnd("character", pos);
+        range.moveStart("character", pos);
+        range.select();
       }
     }
-    function $() {
-      R.value = t.inputOptions.placeholder;
+    function resetPlaceholder() {
+      parsedPlaceholder.value = props.inputOptions.placeholder;
     }
-    function le() {
-      return new Promise((e) => {
-        var a;
-        if (((a = o.value) == null ? void 0 : a[0]) === "+") {
-          e();
+    function initializeCountry() {
+      return new Promise((resolve) => {
+        var _a;
+        if (((_a = phone.value) == null ? void 0 : _a[0]) === "+") {
+          resolve();
           return;
         }
-        if (t.defaultCountry) {
-          b(t.defaultCountry), e();
+        if (props.defaultCountry) {
+          choose(props.defaultCountry);
+          resolve();
           return;
         }
-        const n = t.preferredCountries[0] || M.value[0];
-        t.autoDefaultCountry ? te().then((r) => {
-          b(r || v.value);
-        }).catch((r) => {
-          console.warn(r), b(n);
-        }).finally(() => {
-          e();
-        }) : (b(n), e());
+        const fallbackCountry = props.preferredCountries[0] || filteredCountries.value[0];
+        if (props.autoDefaultCountry) {
+          getCountry().then((res) => {
+            choose(res || activeCountryCode.value);
+          }).catch((error) => {
+            console.warn(error);
+            choose(fallbackCountry);
+          }).finally(() => {
+            resolve();
+          });
+        } else {
+          choose(fallbackCountry);
+          resolve();
+        }
       });
     }
-    function ae(e = []) {
-      return e.map((n) => T(n)).filter(Boolean);
+    function getCountries(list2 = []) {
+      return list2.map((countryCode) => findCountry(countryCode)).filter(Boolean);
     }
-    function T(e = "") {
-      return M.value.find((n) => n.iso2 === e.toUpperCase());
+    function findCountry(iso = "") {
+      return filteredCountries.value.find((country) => country.iso2 === iso.toUpperCase());
     }
-    function oe(e, n) {
-      const a = i.value === e, r = e === t.preferredCountries.length - 1, O = t.preferredCountries.some((j) => j.toUpperCase() === n);
-      return { highlighted: a, "last-preferred": r, preferred: O };
+    function getItemClass(index, iso2) {
+      const highlighted = selectedIndex.value === index;
+      const lastPreferred = index === props.preferredCountries.length - 1;
+      const preferred = props.preferredCountries.some((c) => c.toUpperCase() === iso2);
+      return { highlighted, "last-preferred": lastPreferred, preferred };
     }
-    function b(e) {
-      var a, r;
-      let n = typeof e == "string" ? T(e) : e;
-      if (n) {
-        if (((a = o.value) == null ? void 0 : a[0]) === "+" && n.iso2 && u.value.nationalNumber) {
-          v.value = n.iso2, o.value = H(u.value.nationalNumber, n.iso2).formatInternational();
-          return;
-        }
-        if ((r = t.inputOptions) != null && r.showDialCode && n) {
-          o.value = `+${n.dialCode}`;
-          return;
-        }
-        v.value = n.iso2, k(o.value);
+    function choose(country) {
+      var _a, _b;
+      let parsedCountry = typeof country === "string" ? findCountry(country) : country;
+      if (!parsedCountry) return;
+      if (((_a = phone.value) == null ? void 0 : _a[0]) === "+" && parsedCountry.iso2 && phoneObject.value.nationalNumber) {
+        activeCountryCode.value = parsedCountry.iso2;
+        phone.value = parsePhoneNumber(phoneObject.value.nationalNumber, parsedCountry.iso2).formatInternational();
+        return;
       }
+      if (((_b = props.inputOptions) == null ? void 0 : _b.showDialCode) && parsedCountry) {
+        phone.value = `+${parsedCountry.dialCode}`;
+        return;
+      }
+      activeCountryCode.value = parsedCountry.iso2;
+      emitInput(phone.value);
     }
-    function ue() {
-      const e = o.value;
-      if (t.validCharactersOnly) {
-        const n = o.value.match(/[()\-+0-9\s]*/g);
-        o.value = n.join("");
+    function cleanInvalidCharacters() {
+      const currentPhone = phone.value;
+      if (props.validCharactersOnly) {
+        const results = phone.value.match(/[()\-+0-9\s]*/g);
+        phone.value = results.join("");
       }
-      if (t.customValidate && t.customValidate instanceof RegExp) {
-        const n = o.value.match(t.customValidate);
-        o.value = n ? n.join("") : "";
+      if (props.customValidate && props.customValidate instanceof RegExp) {
+        const results = phone.value.match(props.customValidate);
+        phone.value = results ? results.join("") : "";
+      }
+      if (currentPhone !== phone.value) {
+        emitInput(phone.value);
       }
-      e !== o.value && k(o.value);
     }
-    function re() {
-      return t.validCharactersOnly && !/^[()\-+0-9\s]*$/.test(o.value) ? !1 : t.customValidate ? ie() : !0;
+    function testCharacters() {
+      if (props.validCharactersOnly) {
+        const result = /^[()\-+0-9\s]*$/.test(phone.value);
+        if (!result) return false;
+      }
+      if (props.customValidate) {
+        return testCustomValidate();
+      }
+      return true;
     }
-    function ie() {
-      return t.customValidate instanceof RegExp ? t.customValidate.test(o.value) : !1;
+    function testCustomValidate() {
+      return props.customValidate instanceof RegExp ? props.customValidate.test(phone.value) : false;
     }
-    function U() {
-      E.value.setCustomValidity(u.valid ? "" : t.invalidMsg), k(o.value);
+    function onInput() {
+      input.value.setCustomValidity(phoneObject.valid ? "" : props.invalidMsg);
+      emitInput(phone.value);
     }
-    function k(e) {
-      c("update:modelValue", e), u.value.valid ? (c("change", u.value.number), c("country", u.value.number)) : c("country", null);
+    function emitInput(value) {
+      emits("update:modelValue", value);
+      if (phoneObject.value.valid) {
+        emits("change", phoneObject.value.number);
+        emits("country", phoneObject.value.number);
+      } else {
+        emits("country", null);
+      }
     }
-    function se() {
-      c("blur");
+    function onBlur() {
+      emits("blur");
     }
-    function de() {
-      ne(E.value, o.value.length), c("focus");
+    function onFocus() {
+      setCaretPosition(input.value, phone.value.length);
+      emits("focus");
     }
-    function ce() {
-      c("enter");
+    function onEnter() {
+      emits("enter");
     }
-    function fe() {
-      c("space");
+    function onSpace() {
+      emits("space");
     }
-    function ve() {
-      t.disabled || (f.value = !f.value);
+    function toggleDropdown() {
+      if (props.disabled) return;
+      open.value = !open.value;
     }
-    function pe() {
-      f.value = !1;
+    function clickedOutside() {
+      open.value = false;
     }
-    function ye(e) {
-      e.keyCode === 40 ? (e.preventDefault(), f.value = !0, i.value = i.value === null ? 0 : Math.min(C.value.length - 1, i.value + 1), S(() => {
-        const n = s.value.children[i.value];
-        n.offsetTop + n.clientHeight > s.value.scrollTop + s.value.clientHeight && (s.value.scrollTop = n.offsetTop - s.value.clientHeight + n.clientHeight);
-      })) : e.keyCode === 38 ? (e.preventDefault(), f.value = !0, i.value = i.value === null ? C.value.length - 1 : Math.max(0, i.value - 1), S(() => {
-        const n = s.value.children[i.value];
-        n.offsetTop < s.value.scrollTop && (s.value.scrollTop = n.offsetTop);
-      })) : e.keyCode === 13 ? (e.preventDefault(), i.value !== null && b(C.value[i.value]), f.value = !f.value) : (B.value += e.key, clearTimeout(V), V = setTimeout(() => {
-        B.value = "";
-      }, 700), S(() => {
-        const n = C.value.slice(t.preferredCountries.length).findIndex((a) => a.name.toLowerCase().startsWith(B.value));
-        if (n >= 0) {
-          i.value = t.preferredCountries.length + n;
-          const a = s.value.children[i.value];
-          (a.offsetTop < s.value.scrollTop || a.offsetTop + a.clientHeight > s.value.scrollTop + s.value.clientHeight) && (s.value.scrollTop = a.offsetTop - s.value.clientHeight / 2);
+    function keyboardNav(e) {
+      if (e.keyCode === 40) {
+        e.preventDefault();
+        open.value = true;
+        selectedIndex.value = selectedIndex.value === null ? 0 : Math.min(sortedCountries.value.length - 1, selectedIndex.value + 1);
+        nextTick(() => {
+          const selEle = list.value.children[selectedIndex.value];
+          if (selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight) {
+            list.value.scrollTop = selEle.offsetTop - list.value.clientHeight + selEle.clientHeight;
+          }
+        });
+      } else if (e.keyCode === 38) {
+        e.preventDefault();
+        open.value = true;
+        selectedIndex.value = selectedIndex.value === null ? sortedCountries.value.length - 1 : Math.max(0, selectedIndex.value - 1);
+        nextTick(() => {
+          const selEle = list.value.children[selectedIndex.value];
+          if (selEle.offsetTop < list.value.scrollTop) {
+            list.value.scrollTop = selEle.offsetTop;
+          }
+        });
+      } else if (e.keyCode === 13) {
+        e.preventDefault();
+        if (selectedIndex.value !== null) {
+          choose(sortedCountries.value[selectedIndex.value]);
         }
-      }));
+        open.value = !open.value;
+      } else {
+        typeToFindInput.value += e.key;
+        clearTimeout(typeToFindTimer);
+        typeToFindTimer = setTimeout(() => {
+          typeToFindInput.value = "";
+        }, 700);
+        nextTick(() => {
+          const typedCountryI = sortedCountries.value.slice(props.preferredCountries.length).findIndex((c) => c.name.toLowerCase().startsWith(typeToFindInput.value));
+          if (typedCountryI >= 0) {
+            selectedIndex.value = props.preferredCountries.length + typedCountryI;
+            const selEle = list.value.children[selectedIndex.value];
+            const needToScroll = selEle.offsetTop < list.value.scrollTop || selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight;
+            if (needToScroll) {
+              list.value.scrollTop = selEle.offsetTop - list.value.clientHeight / 2;
+            }
+          }
+        });
+      }
     }
-    function me() {
-      i.value = C.value.map((e) => e.iso2).indexOf(v.value), f.value = !1;
+    function reset() {
+      selectedIndex.value = sortedCountries.value.map((c) => c.iso2).indexOf(activeCountryCode.value);
+      open.value = false;
     }
-    function he() {
-      const n = window.innerHeight - N.value.getBoundingClientRect().bottom > 200;
-      L.value = n ? "below" : "above";
+    function setDropdownPosition() {
+      const spaceBelow = window.innerHeight - rootElement.value.getBoundingClientRect().bottom;
+      const hasEnoughSpaceBelow = spaceBelow > 200;
+      dropdownOpenDirection.value = hasEnoughSpaceBelow ? "below" : "above";
     }
-    return (e, n) => (y(), m(K, null, [
-      w("div", {
-        class: I([[
-          l.rootClass,
-          Y.value,
-          e.$attrs.class,
-          { "bg-fourth-nano": l.validation },
-          { disabled: l.disabled }
-        ], "vue3-reactive-tel-input"]),
-        style: A([
-          l.rootStyle,
-          Z.value
-        ]),
-        ref_key: "rootElement",
-        ref: N
-      }, [
-        F((y(), m("div", {
-          class: I([["vti__dropdown", { open: f.value }], "br-solid br-black-transp br-1px radius-thin"]),
-          style: A([l.dropdownStyle]),
-          tabindex: l.dropdownOptions.tabindex,
-          onKeydown: [
-            ye,
-            P(me, ["esc"])
-          ],
-          onClick: ve
-        }, [
-          w("span", Be, [
-            l.dropdownOptions.showFlags ? (y(), m("span", {
-              key: 0,
-              innerHTML: Q.value,
-              class: "mn-r-nano"
-            }, null, 8, Ee)) : x("", !0),
-            l.dropdownOptions.showDialCodeInSelection ? (y(), m("span", Me, " +" + D(g.value && g.value.dialCode), 1)) : x("", !0)
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: normalizeClass([[
+            __props.rootClass,
+            classes.value,
+            _ctx.$attrs.class,
+            { "bg-fourth-nano": __props.validation },
+            { disabled: __props.disabled }
+          ], "vue3-reactive-tel-input"]),
+          style: normalizeStyle([
+            __props.rootStyle,
+            styles.value
           ]),
-          F(w("ul", {
-            ref_key: "list",
-            ref: s,
-            class: I(["bs-black radius-small vti__dropdown-list", L.value]),
-            style: A([l.listStyle])
+          ref_key: "rootElement",
+          ref: rootElement
+        }, [
+          withDirectives((openBlock(), createElementBlock("div", {
+            class: normalizeClass([["vti__dropdown", { open: open.value }], "br-solid br-black-transp br-1px radius-thin"]),
+            style: normalizeStyle([__props.dropdownStyle]),
+            tabindex: __props.dropdownOptions.tabindex,
+            onKeydown: [
+              keyboardNav,
+              withKeys(reset, ["esc"])
+            ],
+            onClick: toggleDropdown
           }, [
-            (y(!0), m(K, null, be(C.value, (a, r) => (y(), m("li", {
-              class: I(["flex-nowrap flex w-max", ["vti__dropdown-item", oe(r, a.iso2)]]),
-              key: a.iso2 + (a.preferred ? "-preferred" : ""),
-              onClick: (O) => b(a),
-              onMousemove: (O) => i.value = r
-            }, [
-              l.dropdownOptions.showFlags ? (y(), m("span", {
+            createElementVNode("span", _hoisted_2, [
+              __props.dropdownOptions.showFlags ? (openBlock(), createElementBlock("span", {
                 key: 0,
-                innerHTML: a.flag,
-                class: "mn-r-thin"
-              }, null, 8, Pe)) : x("", !0),
-              w("strong", null, D(a.name), 1),
-              l.dropdownOptions.showDialCodeInList ? (y(), m("span", He, " +" + D(a.dialCode), 1)) : x("", !0)
-            ], 42, Fe))), 128))
-          ], 6), [
-            [Oe, f.value]
-          ])
-        ], 46, De)), [
-          [Se(G), pe]
-        ]),
-        F(w("input", {
-          "onUpdate:modelValue": n[0] || (n[0] = (a) => o.value = a),
-          inputmode: "numeric",
-          pattern: "\\d*",
-          ref_key: "input",
-          ref: E,
-          type: l.inputOptions.type,
-          autocomplete: l.inputOptions.autocomplete,
-          autofocus: l.inputOptions.autofocus,
-          class: I(["vti__input", l.inputOptions.styleClasses, l.inputClass, _.value]),
-          style: A([l.inputStyle, ee.value]),
-          disabled: l.disabled,
-          id: l.inputId !== "" ? l.inputId : l.inputOptions.id,
-          maxlength: l.inputOptions.maxlength,
-          name: l.inputId !== "" ? l.inputId : l.inputOptions.name,
-          placeholder: R.value,
-          readonly: l.inputOptions.readonly,
-          required: l.inputOptions.required,
-          tabindex: l.inputOptions.tabindex,
-          onBlur: se,
-          onFocus: de,
-          onInput: U,
-          onKeyup: [
-            P(ce, ["enter"]),
-            P(fe, ["space"])
-          ]
-        }, null, 46, Ve), [
-          [we, o.value]
-        ]),
-        Ie(e.$slots, "default")
-      ], 6),
-      xe(Te, { name: "fade" }, {
-        default: ke(() => [
-          l.validation ? (y(), m("div", Le, " * " + D(l.validation.message), 1)) : x("", !0)
-        ]),
-        _: 1
-      })
-    ], 64));
+                innerHTML: activeCountryFlag.value,
+                class: "mn-r-nano"
+              }, null, 8, _hoisted_3)) : createCommentVNode("", true),
+              __props.dropdownOptions.showDialCodeInSelection ? (openBlock(), createElementBlock("span", _hoisted_4, " +" + toDisplayString(activeCountry.value && activeCountry.value.dialCode), 1)) : createCommentVNode("", true)
+            ]),
+            withDirectives(createElementVNode("ul", {
+              ref_key: "list",
+              ref: list,
+              class: normalizeClass(["bs-black radius-small vti__dropdown-list", dropdownOpenDirection.value]),
+              style: normalizeStyle([__props.listStyle])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(sortedCountries.value, (pb, index) => {
+                return openBlock(), createElementBlock("li", {
+                  class: normalizeClass(["flex-nowrap flex w-max", ["vti__dropdown-item", getItemClass(index, pb.iso2)]]),
+                  key: pb.iso2 + (pb.preferred ? "-preferred" : ""),
+                  onClick: ($event) => choose(pb),
+                  onMousemove: ($event) => selectedIndex.value = index
+                }, [
+                  __props.dropdownOptions.showFlags ? (openBlock(), createElementBlock("span", {
+                    key: 0,
+                    innerHTML: pb.flag,
+                    class: "mn-r-thin"
+                  }, null, 8, _hoisted_6)) : createCommentVNode("", true),
+                  createElementVNode("strong", null, toDisplayString(pb.name), 1),
+                  __props.dropdownOptions.showDialCodeInList ? (openBlock(), createElementBlock("span", _hoisted_7, " +" + toDisplayString(pb.dialCode), 1)) : createCommentVNode("", true)
+                ], 42, _hoisted_5);
+              }), 128))
+            ], 6), [
+              [vShow, open.value]
+            ])
+          ], 46, _hoisted_1)), [
+            [unref(vClickOutside), clickedOutside]
+          ]),
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => phone.value = $event),
+            inputmode: "numeric",
+            pattern: "\\d*",
+            ref_key: "input",
+            ref: input,
+            type: __props.inputOptions.type,
+            autocomplete: __props.inputOptions.autocomplete,
+            autofocus: __props.inputOptions.autofocus,
+            class: normalizeClass(["vti__input", __props.inputOptions.styleClasses, __props.inputClass, Iclasses.value]),
+            style: normalizeStyle([__props.inputStyle, Istyles.value]),
+            disabled: __props.disabled,
+            id: __props.inputId !== "" ? __props.inputId : __props.inputOptions.id,
+            maxlength: __props.inputOptions.maxlength,
+            name: __props.inputId !== "" ? __props.inputId : __props.inputOptions.name,
+            placeholder: parsedPlaceholder.value,
+            readonly: __props.inputOptions.readonly,
+            required: __props.inputOptions.required,
+            tabindex: __props.inputOptions.tabindex,
+            onBlur,
+            onFocus,
+            onInput,
+            onKeyup: [
+              withKeys(onEnter, ["enter"]),
+              withKeys(onSpace, ["space"])
+            ]
+          }, null, 46, _hoisted_8), [
+            [vModelDynamic, phone.value]
+          ]),
+          renderSlot(_ctx.$slots, "default")
+        ], 6),
+        createVNode(Transition, { name: "fade" }, {
+          default: withCtx(() => [
+            __props.validation ? (openBlock(), createElementBlock("div", _hoisted_9, " * " + toDisplayString(__props.validation.message), 1)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 64);
+    };
   }
 };
 export {
-  ze as default
+  _sfc_main as default
 };
+//# sourceMappingURL=FieldPhone.vue.js.map