vue-tel-num-input/dist/index.cjs.js

A flexible and fully customizable Vue 3 component for phone number input with country code selection, flags, masking, and localization.

"use strict";const e=require("vue"),W=require("libphonenumber-js"),K=require("libphonenumber-js/core"),D=require("libphonenumber-js/metadata.min.json"),T=(t=!1)=>(...o)=>!t&&console.warn(...o),ue=()=>({getNames:o=>{const a=new Intl.DisplayNames(["en"],{type:"region"}),l=new Intl.DisplayNames([o.toLowerCase()],{type:"region"});return{name:a.of(o),nativeName:l.of(o)}}}),Ce=(t,o,a,l)=>{let r=T(l.value);e.watch(l,m=>r=T(m));const c=W.getCountries(),{getNames:p}=ue(),h=e.computed(()=>{const m=Array.from(new Set(t.value.map(n=>n.toUpperCase())));let f;if(!m?.length)f=c;else{const n=m.filter(i=>c.includes(i)),s=m.filter(i=>!c.includes(i));s.length>0&&r(`[TelNumInput] Country codes not found: ${s.join(", ")}`),f=n}const N=o.value.map(n=>n.toUpperCase());return f=f.filter(n=>!N.includes(n)),f}),g=e.computed(()=>h.value.map(m=>{const{name:f,nativeName:N}=p(m);return console.log(f,N),{iso:m,name:f,nativeName:N}})),y=e.computed(()=>{const m=a.value?.toUpperCase();return!m||!c.includes(m)?"US":m});return{isoCodes:c,validCountries:g,defaultIso:y}},oe=(t,o,a,l)=>{let r=T(a.value);return e.watch(a,p=>r=T(p)),{placVal:e.computed(()=>{const p=t?t.value:null,h=o?o.value:null;if(typeof h=="string")return typeof p=="string"&&r("Please provide 'placeholder' as an object when 'locale' is a string to support localization. Using string 'placeholder' and ignoring 'locale'."),h;if(h&&typeof h=="object"){if(!p){r("Prop 'locale' is not set while 'placeholder' is an object. First available key from 'placeholder' is used.");const y=Object.keys(h)[0];return y?h[y]:l}const g=h[p];if(!g){const y=Object.keys(h);return r(`No placeholder found for locale '${p}'. First available key from 'placeholder' is used.`),y.length?h[y[0]]:l}return g}return h==null&&typeof p=="string"&&r("Prop 'placeholder' is not set while 'locale' is a string. Using default placeholder."),l})}},Se={1:["US","CA","PR","SX","TT","JM","BS","BB","AG","AI","DM","GD","KN","LC","VC","VG","VI","KY","MS"],7:["RU","KZ"],39:["IT","VA"],44:["GB","GG","IM","JE"],47:["NO","SJ"],61:["AU","CX","CC"],262:["RE","YT"],358:["FI","AX"],500:["FK","GS"],590:["GP","BL","MF"],599:["CW","BQ"]};function Ee(t,o){const a=Se[t];if(!a||a.length===0)return null;const l=new Set(o.map(r=>r.toUpperCase()));for(const r of a)if(l.has(r))return r;return null}const xe=(()=>{const t=new Map,o=D.countries;for(const a of Object.keys(o)){const l=String(o[a][0]),r=t.get(l)||[];r.push(a.toUpperCase()),t.set(l,r)}return t})();function we(t){const o=e.ref(!1),a=e.ref(!1),l=n=>Array.isArray(t.excludeCountryCodes.value)&&t.excludeCountryCodes.value.some(s=>s.toUpperCase()===n.toUpperCase()),r=n=>a.value=n,c=n=>new K.AsYouType(void 0,D).input(n),p=()=>(t.iso.value||"").toUpperCase(),h=/^\+\d{1,3}[\s\u00A0\u202F\-\)]*/,g=n=>{if(!n)return{cc:"",prefix:"",formattedPrefix:""};const s=K.getCountryCallingCode(n,D),i=`+${s}`,x=c(i);return{cc:s,prefix:i,formattedPrefix:x}},y=n=>{if(!t.international.value)return;const s=n.match(/^\+(\d{1,3})/);if(!s)return;const i=s[1];for(const x of[3,2,1]){const w=i.slice(0,x);if(!w)continue;const S=xe.get(w);if(!S||S.length===0)continue;const k=S.filter(v=>!l(v));if(k.length===0)return;if(k.length===1){const v=k[0];v&&v!==(t.iso.value||"").toUpperCase()&&(t.iso.value=v);return}const C=Ee(w,k);if(C&&C!==(t.iso.value||"").toUpperCase()){t.iso.value=C;return}return}},m=()=>{if(!t.international.value)return!1;const n=p();if(!n)return!1;const s=t.value.value||"";if(s.startsWith("+"))return!1;const{formattedPrefix:i}=g(n);return s===""||!s.startsWith(i)?(o.value=!0,t.value.value=i,e.nextTick(()=>{const x=t.inputEl.value;if(x){const w=x.value.length;try{x.setSelectionRange(w,w)}catch{}}t.onAfterFormat?.(t.value.value)}),!0):!1},f=(n,s,i)=>{if(t.international.value){if(n.startsWith("+")){const R=c(n);let b=c(n.slice(0,s)).length,O=b;if(i!==s){const z=c(n.slice(0,i)).length;O=Math.max(z,b)}return{formattedAll:R,newStart:b,newEnd:O}}const x=p();if(!x)return{formattedAll:n,newStart:s,newEnd:i};const{prefix:w,formattedPrefix:S}=g(x),k=n.replace(h,""),C=n.length-k.length,v=Math.max(0,s-Math.min(C,s)),_=Math.max(0,i-Math.min(C,i)),I=w+k,A=k?c(I):S,$=c(I.slice(0,w.length+v)).length,B=c(I.slice(0,w.length+_)).length,P=S.length;let U=Math.max(P,$),L=Math.max(U,B);return{formattedAll:A,newStart:U,newEnd:L}}else{const x=p();if(!x)return{formattedAll:n,newStart:s,newEnd:i};const w=K.getCountryCallingCode(x,D),S=`+${w}`,k=new RegExp(`^\\+?${w}[\\s\\u00A0\\u202F\\-\\)]*`),C=k.exec(n)?.[0]?.length??0,v=n.replace(k,""),_=Math.max(0,s-Math.min(C,s)),I=Math.max(0,i-Math.min(C,i)),A=S+v,$=c(A),B=c(S),P=$.slice(B.length).trimStart(),U=c(A.slice(0,S.length+_)).length;let L=Math.max(0,U-B.length),R=L;if(I!==_){const V=c(A.slice(0,S.length+I)).length;R=Math.max(L,V-B.length)}return{formattedAll:P,newStart:L,newEnd:R}}},N=n=>{const s=t.inputEl.value,i=n??t.value.value;if(!s)if(t.international.value)if(i.startsWith("+")){const v=c(i);v!==i&&(t.value.value=v),y(t.value.value),t.onAfterFormat?.(t.value.value);return}else{const v=p();if(!v)return;const{prefix:_,formattedPrefix:I}=g(v),A=i.replace(h,""),$=_+A,B=A?c($):I;B!==i&&(t.value.value=B),t.onAfterFormat?.(t.value.value);return}else{const v=p();if(!v)return;const{prefix:_}=g(v),I=new RegExp(`^\\+?${K.getCountryCallingCode(v,D)}[\\s\\u00A0\\u202F\\-\\)]*`),A=i.replace(I,""),$=_+A,B=c($),P=c(_),U=B.slice(P.length).trimStart();U!==i&&(t.value.value=U),t.onAfterFormat?.(t.value.value);return}const x=s.selectionStart??i.length,w=s.selectionEnd??x,{formattedAll:S,newStart:k,newEnd:C}=f(i,x,w);S!==i&&(o.value=!0,t.value.value=S,e.nextTick(()=>{const v=t.inputEl.value;if(!v)return;const _=v.value.length;let I=Math.min(k,_),A=Math.min(C,_);if(t.international.value)if(v.value.startsWith("+"))y(v.value);else{const $=p();if($){const{formattedPrefix:B}=g($),P=B.length;I=Math.max(I,P),A=Math.max(A,P)}}try{v.setSelectionRange(I,A)}catch{}t.onAfterFormat?.(v.value)}))};return e.watch(()=>t.value.value,(n,s)=>{if(t.needFormat.value&&!a.value){if(o.value){o.value=!1;return}n==null||n===s||t.international.value&&!String(n).startsWith("+")&&m()||N(n)}}),e.watch(()=>t.needFormat.value,n=>{n&&(t.international.value&&m(),N())},{immediate:!0}),e.watch(()=>t.international.value,n=>{t.needFormat.value&&(n&&m(),N())},{immediate:!0}),e.watch(()=>t.iso.value,()=>{t.needFormat.value&&(t.international.value&&m(),N())},{immediate:!0}),t.needFormat.value&&t.international.value&&m(),{isComposing:a,setComposing:r,formatNow:N}}const Z=(t,o=!0)=>{const a=(t??"").toLowerCase();return o?a.normalize("NFD").replace(/[\u0300-\u036f]/g,""):a};function ke(t){const{countries:o,query:a,codeGetter:l,limit:r=null,normalizeDiacritics:c=!0}=t;return{results:e.computed(()=>{const h=Array.isArray(o)?o:o.value,g=(a.value??"").trim();if(!g)return h;const y=g.startsWith("+"),m=Z(g,c),f=[];for(const n of h){const s=Z(n.name,c),i=Z(n.nativeName,c),x=n.iso.toLowerCase(),w=l(n.iso).toLowerCase(),S=s.split(/\s+/),k=i.split(/\s+/);let C=0;y&&(w.startsWith(g.toLowerCase())?C=1e3:w.includes(m)&&(C=600)),C===0&&(s.startsWith(m)||i.startsWith(m)?C=900:S.some(v=>v.startsWith(m))||k.some(v=>v.startsWith(m))?C=850:(s.includes(m)||i.includes(m))&&(C=800)),C===0&&(!y&&w.includes(m)?C=500:x.startsWith(m)?C=400:x.includes(m)&&(C=300)),C>0&&f.push({c:n,score:C,sortKey:s||i||x})}f.sort((n,s)=>s.score!==n.score?s.score-n.score:n.sortKey.localeCompare(s.sortKey));const N=f.map(n=>n.c);return typeof r=="number"&&r>0?N.slice(0,r):N})}}const Ne=(t,o)=>{const a=l=>{const r=t.value;r&&(r===l.target||r.contains(l.target)||o(l))};e.onMounted(()=>{document.addEventListener("click",a,!0)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",a,!0)})},Fe=({enabled:t,validCountries:o,isoRef:a,silent:l})=>{let r=T(l.value);e.watch(l,g=>r=T(g));const c="https://ipapi.co/country/",p=e.ref(null),h=async()=>{try{const y=await(await fetch(c)).text();o.value.find(m=>m.iso===y)&&(p.value=y,a&&(a.value=y))}catch(g){return r("Error fetching user country:",g),null}return p.value};return e.watch(t,g=>{g&&h()}),t.value&&h(),{country:p,requestUserCountry:h}},Ie=(t,o,a,l)=>{let r=T(l.value);e.watch(l,p=>r=T(p));let c=null;if(o.length)if(a){t.value&&r("Prop 'country-code' is ignored when 'initial-value' is set and 'international' is true.");try{c=W.parsePhoneNumberWithError(o)}catch{r(`Initial value '${o}' is not a valid phone number.`)}}else if(!t.value)r("Prop 'country-code' should be set when 'initial-value' is provided and 'international' is false.");else try{c=W.parsePhoneNumberWithError(o,{defaultCountry:t.value})}catch{r(`Initial value '${o}' is not a valid phone number when 'country-code' is set as ${t.value}.`)}return{initialData:c}},Ae='"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';function $e(){const t=document.createElement("canvas");t.width=t.height=1;const o=t.getContext("2d",{willReadFrequently:!0});return o.textBaseline="top",o.font=`100px ${Ae}`,o.scale(.01,.01),o}function le(t,o,a){return t.clearRect(0,0,100,100),t.fillStyle=a,t.fillText(o,0,0),t.getImageData(0,0,1,1).data.join(",")}function re(t){const o=$e(),a=le(o,t,"#fff"),l=le(o,t,"#000");return l===a&&!l.startsWith("0,0,0,")}function _e(t="Twemoji Country Flags",o="https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2"){if(typeof window<"u"&&re("😊")&&!re("🇨🇭")){const a=document.createElement("style");return a.textContent=`@font-face {
      font-family: "${t}";
      unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
        U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
      src: url('${o}') format('woff2');
      font-display: swap;
    }`,document.head.appendChild(a),!0}return!1}const Be=["src"],Ue="flagsapi.com",Pe="flagcdn.com",Le="sprite",ae=24,be="w20",Te="flat",Re=44/30,Ve=e.defineComponent({__name:"FlagIcon",props:{flag:{},value:{}},setup(t){_e();const o=t,a=e.toRefs(o),l=e.computed(()=>a.flag.value||{strategy:Le,size:ae}),r=e.computed(()=>l.value.strategy==="sprite"),c=e.computed(()=>l.value.strategy==="emoji"),p=e.computed(()=>l.value.strategy==="api"),h=e.computed(()=>a.value.value.toLowerCase()),g=e.computed(()=>{if(r.value){const f=l.value;return{width:f.size&&`${f.size}px`,height:f.size&&`${f.size/Re}px`}}if(c.value){const f=l.value;return{fontSize:f.fontSize&&(typeof f.fontSize=="string"?f.fontSize:`${f.fontSize}px`)}}return{}}),y=e.computed(()=>c.value?h.value.toUpperCase().split("").map(f=>String.fromCodePoint(f.charCodeAt(0)+127397)).join(""):""),m=e.computed(()=>{if(!p.value)return"";let f=l.value;if(f.cdn=="flagapi")return f=l.value,`https://${Ue}/${h.value.toUpperCase()}/${f.style||Te}/${f.size||ae}.png`;if(f.cdn=="flagcdn")return f=l.value,`https://${Pe}/${f.size||be}/${h.value}.png`});return(f,N)=>r.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["flag",`flag-${h.value}`]),style:e.normalizeStyle(g.value)},null,6)):c.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"emoji",style:e.normalizeStyle(g.value)},e.toDisplayString(y.value),5)):p.value?(e.openBlock(),e.createElementBlock("img",{key:2,src:m.value,style:e.normalizeStyle(g.value),loading:"lazy",decoding:"async",fetchpriority:"low",alt:""},null,12,Be)):e.createCommentVNode("",!0)}}),ce=(t,o)=>{const a=t.__vccOpts||t;for(const[l,r]of o)a[l]=r;return a},se=ce(Ve,[["__scopeId","data-v-38c41da2"]]),ze={class:"tel-num-input__head"},Me={key:0,class:"prefix-container__code"},je={key:0,class:"prefix-container__country-name"},De={key:0,class:"prefix-container__chevron",viewBox:"0 0 16 16"},We=["maxLength","placeholder","disabled","required"],Oe={key:0,class:"tel-num-input__body"},Ge=["placeholder"],qe=["tabindex","onClick"],Ke={key:0,class:"tel-num-input__body--item__code"},He={key:0,class:"tel-num-input__body--item__country-name"},ie=5,Ye=e.defineComponent({__name:"TelNumInput",props:{size:{default:"lg"},disableSizing:{type:Boolean,default:!1},countryCodes:{default:()=>[]},excludeCountryCodes:{default:()=>[]},defaultCountryCode:{default:"US"},placeholder:{},locale:{},itemHeight:{},disabled:{type:Boolean,default:!1},silent:{type:Boolean,default:!1},flag:{},animationName:{default:"fade"},initialValue:{default:""},international:{type:Boolean,default:!0},displayName:{default:"english"},autoDetectCountry:{type:Boolean,default:!1},input:{default:()=>({required:!1,clearOnCountrySelect:!0,focusAfterCountrySelect:!0,formatterEnabled:!0})},search:{default:()=>({hidden:!1,clearOnSelect:!0,autoFocus:!0})},prefix:{default:()=>({hidden:!1,hideCode:!1,hideFlag:!1,hideCountryName:!1,hideChevron:!1})},list:{default:()=>({hidden:!1,hideCode:!1,hideFlag:!1,hideCountryName:!1,returnToSelected:!0,itemsPerView:ie})}},emits:["update:modelValue","toggle","focus","blur"],setup(t,{expose:o,emit:a}){const l=a,r=t,c={sm:32,md:36,lg:40,xl:48,xxl:56},{countryCodes:p,excludeCountryCodes:h,international:g,input:y,displayName:m,defaultCountryCode:f,silent:N,locale:n,placeholder:s,search:i,disableSizing:x,size:w,list:S,prefix:k,itemHeight:C,animationName:v,autoDetectCountry:_}=e.toRefs(r),I=e.toRef(()=>r.search.locale),A=e.toRef(()=>r.search.placeholder),$=u=>`+${W.getCountryCallingCode(u)}`,B=e.computed(()=>x.value?"":`tel-num-input--${w.value??"lg"}`),P=e.computed(()=>(S.value.itemsPerView||ie)*U.value),U=e.computed(()=>C.value||c[w.value||"lg"]),L=e.computed(()=>z.value.findIndex(u=>$(u.iso)===d.value.code)),R=e.computed(()=>!!y.value?.formatterEnabled),{validCountries:V,defaultIso:b}=Ce(p,h,f,N),O=e.computed(()=>d.value.search),{results:z}=ke({countries:V,query:O,codeGetter:$,limit:null}),{initialData:M}=Ie(b,r.initialValue,g.value,N),{placVal:de}=oe(n,s,N,"Enter phone number"),{placVal:fe}=oe(I,A,N,"Search..."),H=e.computed(()=>m.value=="english"?"name":"nativeName"),{getNames:me}=ue(),{name:ve,nativeName:pe}=me(M?.country||b.value),d=e.ref({iso:M?.country.toString()||b.value,name:(H.value=="name"?ve:pe)||"",code:M?.countryCallingCode?`+${M?.countryCallingCode}`:$(b.value),value:M?r.initialValue:"",search:"",expanded:!1,valid:!1}),he=e.computed({get:()=>d.value.value,set:u=>d.value.value=u}),J=e.computed({get:()=>d.value.iso,set:u=>d.value.iso=u}),X=e.useTemplateRef("telNumInput"),Q=e.useTemplateRef("scrollList"),G=e.useTemplateRef("inputEl"),j=e.useTemplateRef("searchEl");Ne(X,()=>{Y(!1)}),e.onMounted(()=>{R.value&&d.value.value&&ne()});const Y=u=>{u==null?d.value.expanded=!d.value.expanded:d.value.expanded=u,S.value.returnToSelected&&d.value.expanded&&L.value>=0&&e.nextTick(()=>Q.value?.scrollTo({top:L.value*U.value})),l("toggle",d.value.expanded)},ee=u=>{d.value={...d.value,...u,expanded:!1},i.value.clearOnSelect&&(d.value.search=""),y.value.clearOnCountrySelect&&(d.value.value=""),y.value.focusAfterCountrySelect&&G.value?.focus()},{setComposing:te,formatNow:ne}=we({value:he,iso:J,needFormat:R,inputEl:G,international:g,excludeCountryCodes:h,onAfterFormat:()=>{l("update:modelValue",d.value)}}),{country:ge,requestUserCountry:ye}=Fe({enabled:_,validCountries:V,isoRef:J,silent:N});return e.watch(()=>d.value.search,()=>Q.value?.scrollTo({top:0})),e.watch(()=>d.value.iso,u=>{if(!u)return;const E=u.toUpperCase(),F=V.value.find(q=>q.iso===E);F&&(d.value={...d.value,iso:E,name:F[H.value]||"",code:$(E)})}),e.watch(j,()=>{i.value.autoFocus&&j.value&&j.value.focus()}),e.watch(()=>d.value.value,u=>{if(!u||u.trim()===d.value.code){d.value.valid=!y.value.required;return}try{const E=W.parsePhoneNumberFromString(u,d.value.iso);E&&E.isValid()?d.value.valid=!0:d.value.valid=!1}catch{d.value.valid=!1}},{immediate:!0}),o({switchDropdown:Y,selectItem:ee,formatNow:ne,inputEl:G,searchEl:j,telNumInputEl:X,country:ge,requestUserCountry:ye}),(u,E)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["tel-num-input",[B.value,{expanded:d.value.expanded,empty:!e.unref(z).length,listHidden:e.unref(S).hidden}]]),ref:"telNumInput"},[e.createElementVNode("div",ze,[e.unref(k).hidden?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:"prefix-container",onClick:E[0]||(E[0]=F=>Y())},[e.renderSlot(u.$slots,"prefix:before",{},void 0,!0),e.renderSlot(u.$slots,"prefix:flag",{},()=>[e.unref(k).hideFlag?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(se,{key:0,flag:u.flag,value:d.value.iso,class:"prefix-container__flag"},null,8,["flag","value"]))],!0),e.renderSlot(u.$slots,"prefix:code",{},()=>[e.unref(k).hideCode?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",Me,e.toDisplayString(d.value.code),1))],!0),e.renderSlot(u.$slots,"prefix:countryName",{},()=>[e.unref(k).hideCountryName?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",je,e.toDisplayString(d.value.name),1))],!0),e.unref(S).hidden?e.createCommentVNode("",!0):e.renderSlot(u.$slots,"prefix:chevron",{key:0},()=>[e.unref(k).hideChevron?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",De,[...E[7]||(E[7]=[e.createElementVNode("path",{d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"},null,-1)])]))],!0),e.renderSlot(u.$slots,"prefix:after",{},void 0,!0)])),e.renderSlot(u.$slots,"input",{},()=>[e.withDirectives(e.createElementVNode("input",{type:"text",ref_key:"inputEl",ref:G,maxLength:e.unref(y).maxLength,onCompositionstart:E[1]||(E[1]=F=>e.unref(te)(!0)),onCompositionend:E[2]||(E[2]=F=>e.unref(te)(!1)),"onUpdate:modelValue":E[3]||(E[3]=F=>d.value.value=F),onFocus:E[4]||(E[4]=F=>l("focus")),onBlur:E[5]||(E[5]=F=>l("blur")),placeholder:e.unref(de),disabled:u.disabled,required:e.unref(y).required},null,40,We),[[e.vModelText,d.value.value]])],!0)]),e.createVNode(e.Transition,{name:e.unref(v)},{default:e.withCtx(()=>[d.value.expanded&&!e.unref(S).hidden?(e.openBlock(),e.createElementBlock("div",Oe,[e.renderSlot(u.$slots,"body:search",{},()=>[e.createElementVNode("div",{class:"search-container",style:e.normalizeStyle({height:`${U.value}px`})},[e.renderSlot(u.$slots,"search:before",{},void 0,!0),e.renderSlot(u.$slots,"search:icon",{},()=>[E[8]||(E[8]=e.createElementVNode("svg",{width:"50",height:"50",viewBox:"0 0 50 50"},[e.createElementVNode("path",{d:"M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"})],-1))],!0),e.renderSlot(u.$slots,"search:input",{},()=>[e.unref(i).hidden?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:0,ref_key:"searchEl",ref:j,type:"text","onUpdate:modelValue":E[6]||(E[6]=F=>d.value.search=F),placeholder:e.unref(fe)},null,8,Ge)),[[e.vModelText,d.value.search]])],!0),e.renderSlot(u.$slots,"search:after",{},void 0,!0)],4)],!0),e.createElementVNode("div",{class:"list-container",ref:"scrollList",style:e.normalizeStyle({maxHeight:`${P.value}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(z),(F,q)=>(e.openBlock(),e.createElementBlock("div",{tabindex:q,onClick:Je=>ee(F),class:e.normalizeClass([{selected:d.value.iso==F.iso},"tel-num-input__body--item"]),key:q,style:e.normalizeStyle({height:`${U.value}px`})},[e.renderSlot(u.$slots,"item:before",{},void 0,!0),e.renderSlot(u.$slots,"item:flag",{},()=>[e.unref(S).hideFlag?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(se,{key:0,flag:u.flag,value:F.iso,class:"tel-num-input__body--item__flag"},null,8,["flag","value"]))],!0),e.renderSlot(u.$slots,"item:code",{},()=>[e.unref(S).hideCode?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",Ke,e.toDisplayString($(F.iso)),1))],!0),e.renderSlot(u.$slots,"item:countryName",{},()=>[e.unref(S).hideCountryName?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",He,e.toDisplayString(F[H.value]),1))],!0),e.renderSlot(u.$slots,"item:after",{},void 0,!0)],14,qe))),128))],4)])):e.createCommentVNode("",!0)]),_:3},8,["name"])],2))}}),Ze=ce(Ye,[["__scopeId","data-v-c1f79fd7"]]);module.exports=Ze;