@ozdao/prometheus-framework 0.2.80 → 0.2.82

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

@@ -1,18 +1,17 @@
-import { defineComponent as S, resolveDirective as w, openBlock as r, createElementBlock as l, Fragment as O, createElementVNode as u, normalizeClass as h, normalizeStyle as c, withDirectives as C, withKeys as m, createCommentVNode as p, toDisplayString as y, renderList as j, vShow as $, vModelDynamic as T, renderSlot as k, createVNode as D, Transition as F, withCtx as A } from "vue";
-import v, { getCountry as B, setCaretPosition as P } from "./utils.js";
-import V from "./click-outside.js";
+import { ref as d, reactive as Ce, onMounted as ge, 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 M, 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 "./FieldPhone.vue2.js";
-import M from "../../../../_virtual/_plugin-vue_export-helper.js";
-import { parsePhoneNumber as g } from "../../../node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";
-function o(e) {
-  const t = v.options[e];
-  return typeof t > "u" ? v.options[e] : t;
-}
-const E = S({
-  name: "Vue3ReactiveTelInput",
-  directives: {
-    clickOutside: V
-  },
+import De from "../../../../_virtual/_plugin-vue_export-helper.js";
+import { parsePhoneNumber as H } from "../../../node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";
+const Be = ["tabindex"], Ee = { class: "flex-nowrap flex flex-v-center p-medium vti__selection" }, Fe = ["innerHTML"], Me = {
+  key: 1,
+  class: "vti__country-code"
+}, Pe = ["onClick", "onMousemove"], He = ["innerHTML"], Ve = { key: 1 }, Le = ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex"], Re = {
+  key: 0,
+  class: "mn-t-thin mn-b-thin invalid-feedback"
+}, Ne = {
+  __name: "FieldPhone",
   props: {
     modelValue: { type: String, default: "" },
     badClass: { type: [String, Array, Object], default: "" },
@@ -23,22 +22,20 @@ const E = S({
     goodInputClass: { type: [String, Array, Object], default: "" },
     badInputStyle: { type: [String, Array, Object], default: "" },
     goodInputStyle: { type: [String, Array, Object], default: "" },
-    allCountries: { type: Array, default: () => o("allCountries") },
-    autoFormat: { type: Boolean, default: () => o("autoFormat") },
+    allCountries: { type: Array, default: () => Ae },
+    autoFormat: { type: Boolean, default: () => !0 },
     validation: { type: [Boolean, Object], default: !1 },
-    customValidate: { type: [Boolean, RegExp], default: () => o("customValidate") },
-    defaultCountry: { type: String, default: () => o("defaultCountry") },
-    disabled: { type: Boolean, default: () => o("disabled") },
-    autoDefaultCountry: { type: Boolean, default: () => o("autoDefaultCountry") },
-    dropdownOptions: { type: Object, default: () => o("dropdownOptions") },
-    ignoredCountries: { type: Array, default: () => o("ignoredCountries") },
-    inputOptions: { type: Object, default: () => o("inputOptions") },
-    invalidMsg: { type: String, default: () => o("invalidMsg") },
-    mode: { type: String, default: () => o("mode") },
-    onlyCountries: { type: Array, default: () => o("onlyCountries") },
-    preferredCountries: { type: Array, default: () => o("preferredCountries") },
-    validCharactersOnly: { type: Boolean, default: () => o("validCharactersOnly") },
-    rootClass: { type: [String, Array, Object], default: () => o("styleClasses") },
+    customValidate: { type: [Boolean, RegExp], default: () => !1 },
+    defaultCountry: { type: String, default: () => "" },
+    disabled: { type: Boolean, default: () => !1 },
+    autoDefaultCountry: { type: Boolean, default: () => !0 },
+    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 },
+    rootClass: { type: [String, Array, Object], default: () => "" },
     inputClass: { type: [String, Array, Object], default: () => "" },
     divInputClass: { type: [String, Array, Object], default: () => "" },
     rootStyle: { type: [String, Array, Object], default: () => "" },
@@ -46,343 +43,331 @@ const E = S({
     listStyle: { type: [String, Array, Object], default: () => "" },
     inputStyle: { type: [String, Array, Object], default: () => "" },
     inputId: { type: [String, Array, Object], default: () => "" },
-    Placeholder: { type: [String, Object, Function], default: () => "" }
-  },
-  data() {
-    return {
-      counter: 5,
-      initCounter: 5,
-      message: {
-        action: null,
-        amount: null
-      },
-      phone: this.modelValue ? this.modelValue : "",
-      activeCountryCode: "",
-      open: !1,
-      finishMounted: !1,
-      selectedIndex: null,
-      typeToFindInput: "",
-      typeToFindTimer: null,
-      dropdownOpenDirection: "below",
-      parsedPlaceholder: this.Placeholder !== "" ? this.Placeholder : this.inputOptions.placeholder
-    };
+    Placeholder: { type: [String, Object, Function], default: () => "" },
+    dropdownOptions: {
+      type: Object,
+      default: () => ({
+        showDialCodeInList: !0,
+        showDialCodeInSelection: !1,
+        showFlags: !0,
+        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: ""
+      })
+    }
   },
-  watch: {
-    activeCountry(e, t) {
-      if (!e && (t != null && t.iso2)) {
-        this.activeCountryCode = t.iso2;
+  emits: [
+    "update:modelValue",
+    "validate",
+    "country-changed",
+    "open",
+    "close",
+    "blur",
+    "focus",
+    "enter",
+    "space"
+  ],
+  setup(l, { emit: W }) {
+    let G = je;
+    const t = l, c = W;
+    d(5), d(5), Ce({
+      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);
+    ge(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);
+      }).catch(console.error).then(() => {
+        J.value = !0;
+      });
+    });
+    const C = p(() => T(v.value)), Q = p(() => C.value ? C.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")), F = 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), g = p(() => [...ae(t.preferredCountries).map((n) => ({ ...n, preferred: !0 })), ...F.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: C.value,
+        formatted: O
+      };
+    }), 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(C, (e, n) => {
+      if (!e && (n != null && n.iso2)) {
+        v.value = n.iso2;
         return;
       }
-      e != null && e.iso2 && this.$emit("country-changed", e);
-    },
-    "phoneObject.countryCode": function(e) {
-      this.activeCountryCode = e;
-    },
-    "phoneObject.valid": function() {
-      this.$emit("validate", this.phoneObject);
-    },
-    "phoneObject.formatted": function(e) {
-      !this.autoFormat || this.customValidate || (this.emitInput(e), this.$nextTick(() => {
-        e && !this.value && (this.phone = e);
+      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);
       }));
-    },
-    // finishMounted() {
-    //   this.resetPlaceholder();
-    // },
-    "inputOptions.placeholder": function() {
-      this.resetPlaceholder();
-    },
-    value(e, t) {
-      this.testCharacters() ? this.phone = e : this.$nextTick(() => {
-        this.phone = t, this.onInput();
+    }), h(() => t.inputOptions.placeholder, () => {
+      $();
+    }), h(() => t.modelValue, (e, n) => {
+      re() ? o.value = e : S(() => {
+        o.value = n, U();
       });
-    },
-    open(e) {
-      e ? (this.setDropdownPosition(), this.$emit("open")) : this.$emit("close");
-    }
-  },
-  mounted() {
-    this.value && (this.phone = this.value), this.cleanInvalidCharacters(), this.initializeCountry().then(() => {
-      var e;
-      !this.phone && ((e = this.inputOptions) != null && e.showDialCode) && this.activeCountryCode && (this.phone = `+${this.activeCountryCode}`), this.$emit("validate", this.phoneObject);
-    }).catch(console.error).then(() => {
-      this.finishMounted = !0;
+    }), h(f, (e) => {
+      e ? (he(), c("open")) : c("close");
     });
-  },
-  computed: {
-    activeCountry() {
-      return this.findCountry(this.activeCountryCode);
-    },
-    activeCountryFlag() {
-      return this.activeCountry ? this.activeCountry.flag : null;
-    },
-    parsedMode() {
-      return this.mode === "auto" ? !this.phone || this.phone[0] !== "+" ? "national" : "international" : ["international", "national"].includes(this.mode) ? this.mode : (console.error('Invalid value of prop "mode"'), "international");
-    },
-    filteredCountries() {
-      return this.onlyCountries.length ? this.allCountries.filter(({ iso2: e }) => this.onlyCountries.some((t) => t.toUpperCase() === e)) : this.ignoredCountries.length ? this.allCountries.filter(
-        ({ iso2: e }) => !this.ignoredCountries.includes(e.toUpperCase()) && !this.ignoredCountries.includes(e.toLowerCase())
-      ) : this.allCountries;
-    },
-    sortedCountries() {
-      return [...this.getCountries(this.preferredCountries).map((t) => ({ ...t, preferred: !0 })), ...this.filteredCountries];
-    },
-    phoneObject() {
-      var d, f, i;
-      let e;
-      ((d = this.phone) == null ? void 0 : d[0]) === "+" ? e = g(this.phone) || {} : e = g(this.phone, this.activeCountryCode) || {};
-      const { metadata: t, ...n } = e;
-      let s = (f = e.isValid) == null ? void 0 : f.call(e), a = this.phone;
-      return s && (a = (i = e.format) == null ? void 0 : i.call(e, this.parsedMode.toUpperCase(), { nationalPrefix: !1 })), e.country && (this.ignoredCountries.length || this.onlyCountries.length) && (this.findCountry(e.country) || (s = !1, Object.assign(e, { country: null }))), Object.assign(n, {
-        countryCode: e.country,
-        valid: s,
-        country: this.activeCountry,
-        formatted: a
-      }), n;
-    },
-    classes() {
-      return this.phoneObject.valid === !0 ? this.goodClass : this.phoneObject.valid === !1 ? this.badClass : void 0;
-    },
-    styles() {
-      return this.phoneObject.valid === !0 ? this.goodStyle : this.phoneObject.valid === !1 ? this.badStyle : void 0;
-    },
-    Iclasses() {
-      return this.phoneObject.valid === !0 ? this.goodInputClass : this.phoneObject.valid === !1 ? this.badInputClass : void 0;
-    },
-    Istyles() {
-      return this.phoneObject.valid === !0 ? this.goodInputStyle : this.phoneObject.valid === !1 ? this.badInputStyle : void 0;
+    function te() {
+      return fetch("https://ip2c.org/s").then((e) => e.text()).then((e) => {
+        const n = (e || "").toString();
+        if (!n || n[0] !== "1")
+          throw new Error("unable to fetch the country");
+        return n.substr(2, 2);
+      });
     }
-  },
-  methods: {
-    resetPlaceholder() {
-      this.parsedPlaceholder = this.inputOptions.placeholder;
-    },
-    initializeCountry() {
+    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 $() {
+      R.value = t.inputOptions.placeholder;
+    }
+    function le() {
       return new Promise((e) => {
-        var n;
-        if (((n = this.phone) == null ? void 0 : n[0]) === "+") {
+        var a;
+        if (((a = o.value) == null ? void 0 : a[0]) === "+") {
           e();
           return;
         }
-        if (this.defaultCountry) {
-          this.choose(this.defaultCountry), e();
+        if (t.defaultCountry) {
+          b(t.defaultCountry), e();
           return;
         }
-        const t = this.preferredCountries[0] || this.filteredCountries[0];
-        this.autoDefaultCountry ? B().then((s) => {
-          this.choose(s || this.activeCountryCode);
-        }).catch((s) => {
-          console.warn(s), this.choose(t);
-        }).then(() => {
+        const n = t.preferredCountries[0] || F.value[0];
+        t.autoDefaultCountry ? te().then((r) => {
+          b(r || v.value);
+        }).catch((r) => {
+          console.warn(r), b(n);
+        }).finally(() => {
           e();
-        }) : (this.choose(t), e());
+        }) : (b(n), e());
       });
-    },
-    // Get the list of countries from the list of iso2 code
-    getCountries(e = []) {
-      return e.map((t) => this.findCountry(t)).filter(Boolean);
-    },
-    findCountry(e = "") {
-      return this.filteredCountries.find((t) => t.iso2 === e.toUpperCase());
-    },
-    getItemClass(e, t) {
-      const n = this.selectedIndex === e, s = e === this.preferredCountries.length - 1, a = this.preferredCountries.some((d) => d.toUpperCase() === t);
-      return {
-        highlighted: n,
-        "last-preferred": s,
-        preferred: a
-      };
-    },
-    choose(e) {
-      var n, s;
-      let t = e;
-      if (typeof t == "string" && (t = this.findCountry(t)), !!t) {
-        if (((n = this.phone) == null ? void 0 : n[0]) === "+" && t.iso2 && this.phoneObject.nationalNumber) {
-          this.activeCountryCode = t.iso2, this.phone = g(
-            this.phoneObject.nationalNumber,
-            t.iso2
-          ).formatInternational();
+    }
+    function ae(e = []) {
+      return e.map((n) => T(n)).filter(Boolean);
+    }
+    function T(e = "") {
+      return F.value.find((n) => n.iso2 === e.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 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 ((s = this.inputOptions) != null && s.showDialCode && t) {
-          this.phone = `+${t.dialCode}`;
+        if ((r = t.inputOptions) != null && r.showDialCode && n) {
+          o.value = `+${n.dialCode}`;
           return;
         }
-        this.activeCountryCode = t.iso2, this.emitInput(this.phone);
+        v.value = n.iso2, k(o.value);
       }
-    },
-    cleanInvalidCharacters() {
-      const e = this.phone;
-      if (this.validCharactersOnly) {
-        const t = this.phone.match(/[()\-+0-9\s]*/g);
-        this.phone = t.join("");
+    }
+    function ue() {
+      const e = o.value;
+      if (t.validCharactersOnly) {
+        const n = o.value.match(/[()\-+0-9\s]*/g);
+        o.value = n.join("");
       }
-      if (this.customValidate && this.customValidate instanceof RegExp) {
-        const t = this.phone.match(this.customValidate);
-        this.phone = t.join("");
+      if (t.customValidate && t.customValidate instanceof RegExp) {
+        const n = o.value.match(t.customValidate);
+        o.value = n ? n.join("") : "";
       }
-      e !== this.phone && this.emitInput(this.phone);
-    },
-    testCharacters() {
-      return this.validCharactersOnly && !/^[()\-+0-9\s]*$/.test(this.phone) ? !1 : this.customValidate ? this.testCustomValidate() : !0;
-    },
-    testCustomValidate() {
-      return this.customValidate instanceof RegExp ? this.customValidate.test(this.phone) : !1;
-    },
-    onInput() {
-      this.$refs.input.setCustomValidity(this.phoneObject.valid ? "" : this.invalidMsg), this.emitInput(this.phoneObject);
-    },
-    emitInput(e) {
-      this.$emit("update:modelValue", e);
-    },
-    onBlur() {
-      this.$emit("blur");
-    },
-    onFocus() {
-      P(this.$refs.input, this.phone.length), this.$emit("focus");
-    },
-    onEnter() {
-      this.$emit("enter");
-    },
-    onSpace() {
-      this.$emit("space");
-    },
-    focus() {
-      this.$refs.input.focus();
-    },
-    toggleDropdown() {
-      this.disabled || (this.open = !this.open);
-    },
-    clickedOutside() {
-      this.open = !1;
-    },
-    keyboardNav(e) {
-      if (e.keyCode === 40) {
-        e.preventDefault(), this.open = !0, this.selectedIndex === null ? this.selectedIndex = 0 : this.selectedIndex = Math.min(this.sortedCountries.length - 1, this.selectedIndex + 1);
-        const t = this.$refs.list.children[this.selectedIndex];
-        t.offsetTop + t.clientHeight > this.$refs.list.scrollTop + this.$refs.list.clientHeight && (this.$refs.list.scrollTop = t.offsetTop - this.$refs.list.clientHeight + t.clientHeight);
-      } else if (e.keyCode === 38) {
-        e.preventDefault(), this.open = !0, this.selectedIndex === null ? this.selectedIndex = this.sortedCountries.length - 1 : this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-        const t = this.$refs.list.children[this.selectedIndex];
-        t.offsetTop < this.$refs.list.scrollTop && (this.$refs.list.scrollTop = t.offsetTop);
-      } else if (e.keyCode === 13)
-        this.selectedIndex !== null && this.choose(this.sortedCountries[this.selectedIndex]), this.open = !this.open;
-      else {
-        this.typeToFindInput += e.key, clearTimeout(this.typeToFindTimer), this.typeToFindTimer = setTimeout(() => {
-          this.typeToFindInput = "";
-        }, 700);
-        const t = this.sortedCountries.slice(this.preferredCountries.length).findIndex((n) => n.name.toLowerCase().startsWith(this.typeToFindInput));
-        if (t >= 0) {
-          this.selectedIndex = this.preferredCountries.length + t;
-          const n = this.$refs.list.children[this.selectedIndex], s = n.offsetTop < this.$refs.list.scrollTop, a = n.offsetTop + n.clientHeight > this.$refs.list.scrollTop + this.$refs.list.clientHeight;
-          (s || a) && (this.$refs.list.scrollTop = n.offsetTop - this.$refs.list.clientHeight / 2);
+      e !== o.value && k(o.value);
+    }
+    function re() {
+      return t.validCharactersOnly && !/^[()\-+0-9\s]*$/.test(o.value) ? !1 : t.customValidate ? ie() : !0;
+    }
+    function ie() {
+      return t.customValidate instanceof RegExp ? t.customValidate.test(o.value) : !1;
+    }
+    function U() {
+      E.value.setCustomValidity(u.valid ? "" : t.invalidMsg), k(o.value);
+    }
+    function k(e) {
+      c("update:modelValue", e), u.value.valid ? c("country", u.value.number) : c("country", null);
+    }
+    function se() {
+      c("blur");
+    }
+    function de() {
+      ne(E.value, o.value.length), c("focus");
+    }
+    function ce() {
+      c("enter");
+    }
+    function fe() {
+      c("space");
+    }
+    function ve() {
+      t.disabled || (f.value = !f.value);
+    }
+    function pe() {
+      f.value = !1;
+    }
+    function ye(e) {
+      e.keyCode === 40 ? (e.preventDefault(), f.value = !0, i.value = i.value === null ? 0 : Math.min(g.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 ? g.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(g.value[i.value]), f.value = !f.value) : (B.value += e.key, clearTimeout(V), V = setTimeout(() => {
+        B.value = "";
+      }, 700), S(() => {
+        const n = g.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);
         }
-      }
-    },
-    reset() {
-      this.selectedIndex = this.sortedCountries.map((e) => e.iso2).indexOf(this.activeCountryCode), this.open = !1;
-    },
-    setDropdownPosition() {
-      window.innerHeight - this.$refs.rootElement.getBoundingClientRect().bottom > 200 ? this.dropdownOpenDirection = "below" : this.dropdownOpenDirection = "above";
+      }));
     }
-  }
-}), H = ["tabindex"], N = { class: "flex-nowrap flex flex-v-center p-medium vti__selection" }, L = ["innerHTML"], U = {
-  key: 1,
-  class: "vti__country-code"
-}, R = ["onClick", "onMousemove"], z = ["innerHTML"], q = { key: 1 }, K = ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex"], W = {
-  key: 0,
-  class: "mn-t-thin mn-b-thin invalid-feedback"
-};
-function G(e, t, n, s, a, d) {
-  const f = w("click-outside");
-  return r(), l(O, null, [
-    u("div", {
-      class: h(["vue3-reactive-tel-input", { "bg-fourth-nano": e.validation }, e.$attrs.class, e.rootClass, { disabled: e.disabled }, e.classes]),
-      style: c([e.rootStyle, e.styles]),
-      ref: "rootElement"
-    }, [
-      C((r(), l("div", {
-        class: h([["vti__dropdown", { open: e.open }], "br-solid br-black-transp br-1px radius-medium"]),
-        tabindex: e.dropdownOptions.tabindex,
-        onKeydown: [
-          t[0] || (t[0] = (...i) => e.keyboardNav && e.keyboardNav(...i)),
-          t[2] || (t[2] = m((...i) => e.reset && e.reset(...i), ["esc"]))
-        ],
-        onClick: t[1] || (t[1] = (...i) => e.toggleDropdown && e.toggleDropdown(...i)),
-        style: c([e.dropdownStyle])
-      }, [
-        u("span", N, [
-          e.dropdownOptions.showFlags ? (r(), l("span", {
-            key: 0,
-            innerHTML: e.activeCountryFlag,
-            class: "mn-r-thin"
-          }, null, 8, L)) : p("", !0),
-          e.dropdownOptions.showDialCodeInSelection ? (r(), l("span", U, " +" + y(e.activeCountry && e.activeCountry.dialCode), 1)) : p("", !0)
+    function me() {
+      i.value = g.value.map((e) => e.iso2).indexOf(v.value), f.value = !1;
+    }
+    function he() {
+      const n = window.innerHeight - N.value.getBoundingClientRect().bottom > 200;
+      L.value = n ? "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
         ]),
-        C(u("ul", {
-          ref: "list",
-          class: h(["bs-black radius-small vti__dropdown-list", e.dropdownOpenDirection]),
-          style: c([e.listStyle])
+        ref_key: "rootElement",
+        ref: N
+      }, [
+        M((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
         }, [
-          (r(!0), l(O, null, j(e.sortedCountries, (i, b) => (r(), l("li", {
-            class: h(["flex-nowrap flex w-max", ["vti__dropdown-item", e.getItemClass(b, i.iso2)]]),
-            key: i.iso2 + (i.preferred ? "-preferred" : ""),
-            onClick: (I) => e.choose(i),
-            onMousemove: (I) => e.selectedIndex = b
-          }, [
-            e.dropdownOptions.showFlags ? (r(), l("span", {
+          w("span", Ee, [
+            l.dropdownOptions.showFlags ? (y(), m("span", {
               key: 0,
-              innerHTML: i.flag,
-              class: "mn-r-thin"
-            }, null, 8, z)) : p("", !0),
-            u("strong", null, y(i.name), 1),
-            e.dropdownOptions.showDialCodeInList ? (r(), l("span", q, " +" + y(i.dialCode), 1)) : p("", !0)
-          ], 42, R))), 128))
-        ], 6), [
-          [$, e.open]
-        ])
-      ], 46, H)), [
-        [f, e.clickedOutside]
-      ]),
-      C(u("input", {
-        "onUpdate:modelValue": t[3] || (t[3] = (i) => e.phone = i),
-        inputmode: "numeric",
-        pattern: "\\d*",
-        ref: "input",
-        type: e.inputOptions.type,
-        autocomplete: e.inputOptions.autocomplete,
-        autofocus: e.inputOptions.autofocus,
-        class: h(["vti__input", e.inputOptions.styleClasses, e.inputClass, e.Iclasses]),
-        style: c([e.inputStyle, e.Istyles]),
-        disabled: e.disabled,
-        id: e.inputId !== "" ? e.inputId : e.inputOptions.id,
-        maxlength: e.inputOptions.maxlength,
-        name: e.inputId !== "" ? e.inputId : e.inputOptions.name,
-        placeholder: e.parsedPlaceholder,
-        readonly: e.inputOptions.readonly,
-        required: e.inputOptions.required,
-        tabindex: e.inputOptions.tabindex,
-        onBlur: t[4] || (t[4] = (...i) => e.onBlur && e.onBlur(...i)),
-        onFocus: t[5] || (t[5] = (...i) => e.onFocus && e.onFocus(...i)),
-        onInput: t[6] || (t[6] = (...i) => e.onInput && e.onInput(...i)),
-        onKeyup: [
-          t[7] || (t[7] = m((...i) => e.onEnter && e.onEnter(...i), ["enter"])),
-          t[8] || (t[8] = m((...i) => e.onSpace && e.onSpace(...i), ["space"]))
-        ]
-      }, null, 46, K), [
-        [T, e.phone]
-      ]),
-      k(e.$slots, "default", {}, void 0, !0)
-    ], 6),
-    D(F, { name: "fade" }, {
-      default: A(() => [
-        e.validation ? (r(), l("div", W, " * " + y(e.validation.message), 1)) : p("", !0)
-      ]),
-      _: 1
-    })
-  ], 64);
-}
-const _ = /* @__PURE__ */ M(E, [["render", G], ["__scopeId", "data-v-a2b07445"]]);
+              innerHTML: Q.value,
+              class: "mn-r-nano"
+            }, null, 8, Fe)) : x("", !0),
+            l.dropdownOptions.showDialCodeInSelection ? (y(), m("span", Me, " +" + D(C.value && C.value.dialCode), 1)) : x("", !0)
+          ]),
+          M(w("ul", {
+            ref_key: "list",
+            ref: s,
+            class: I(["bs-black radius-small vti__dropdown-list", L.value]),
+            style: A([l.listStyle])
+          }, [
+            (y(!0), m(K, null, be(g.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", {
+                key: 0,
+                innerHTML: a.flag,
+                class: "mn-r-thin"
+              }, null, 8, He)) : x("", !0),
+              w("strong", null, D(a.name), 1),
+              l.dropdownOptions.showDialCodeInList ? (y(), m("span", Ve, " +" + D(a.dialCode), 1)) : x("", !0)
+            ], 42, Pe))), 128))
+          ], 6), [
+            [Oe, f.value]
+          ])
+        ], 46, Be)), [
+          [Se(G), pe]
+        ]),
+        M(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, Le), [
+          [we, o.value]
+        ]),
+        Ie(e.$slots, "default", {}, void 0, !0)
+      ], 6),
+      xe(Te, { name: "fade" }, {
+        default: ke(() => [
+          l.validation ? (y(), m("div", Re, " * " + D(l.validation.message), 1)) : x("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}, Ge = /* @__PURE__ */ De(Ne, [["__scopeId", "data-v-6cc570f0"]]);
 export {
-  _ as default
+  Ge as default
 };