@ozdao/prometheus-framework 0.2.199 → 0.2.201

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

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