telpick 1.0.5 → 1.0.7

package/dist/telpick.es.js

@@ -1,58 +1,57 @@
-import _, { useRef as v, useEffect as S } from "react";
-class N {
-  constructor({ code: o = null, onChange: n = () => {
-  }, styleOverrides: s = {} } = {}) {
-    this.code = o, this.onChange = n, this.styleOverrides = s, this.codes = [], this.selectedCode = o, this.isDropdownOpen = !1, this.searchQuery = "", this.container = null, this.dropdown = null, this._outsideHandler = null;
+class _ {
+  constructor({ code: o = null, onChange: r = () => {
+  }, styleOverrides: d = {} } = {}) {
+    this.code = o, this.onChange = r, this.styleOverrides = d, this.codes = [], this.selectedCode = o, this.isDropdownOpen = !1, this.searchQuery = "", this.container = null, this.dropdown = null, this._outsideHandler = null;
   }
   async init(o) {
     this.container = o;
-    const s = await (await fetch("src/assets/country-code.json")).json();
-    if (this.codes = s.sort((a, e) => a.country.localeCompare(e.country, "es")), this.code) {
-      const a = this.codes.find((e) => e.country_code === this.code);
-      a && (this.selectedCode = a.country_code);
+    const d = await (await fetch("src/assets/country-code.json")).json();
+    if (this.codes = d.sort((c, e) => c.country.localeCompare(e.country, "es")), this.code) {
+      const c = this.codes.find((e) => e.country_code === this.code);
+      c && (this.selectedCode = c.country_code);
     } else {
-      const a = [
+      const c = [
         async () => {
           try {
-            const i = await (await fetch("https://ip-api.com/json/?fields=countryCode")).json();
-            if (i.countryCode)
-              return this.codes.find((t) => t.country_code === i.countryCode);
+            const s = await (await fetch("https://ip-api.com/json/?fields=countryCode")).json();
+            if (s.countryCode)
+              return this.codes.find((t) => t.country_code === s.countryCode);
           } catch {
           }
           return null;
         },
         async () => {
           try {
-            const i = await (await fetch("https://get.geojs.io/v1/ip/country.json")).json();
-            if (i.country)
-              return this.codes.find((t) => t.country_code === i.country);
+            const s = await (await fetch("https://get.geojs.io/v1/ip/country.json")).json();
+            if (s.country)
+              return this.codes.find((t) => t.country_code === s.country);
           } catch {
           }
           return null;
         },
         async () => {
           try {
-            const i = await (await fetch("https://ipapi.co/json/")).json();
-            if (i.country_code)
-              return this.codes.find((t) => t.country_code === i.country_code);
+            const s = await (await fetch("https://ipapi.co/json/")).json();
+            if (s.country_code)
+              return this.codes.find((t) => t.country_code === s.country_code);
           } catch {
           }
           return null;
         }
       ];
       let e = null;
-      for (const c of a)
+      for (const n of c)
         try {
           if (e = await Promise.race([
-            c(),
-            new Promise((i) => setTimeout(() => i(null), 3e3))
+            n(),
+            new Promise((s) => setTimeout(() => s(null), 3e3))
           ]), e)
             break;
         } catch {
         }
       if (!e)
         try {
-          const c = Intl.DateTimeFormat().resolvedOptions().timeZone, t = {
+          const n = Intl.DateTimeFormat().resolvedOptions().timeZone, t = {
             "America/Lima": "PE",
             "America/Bogota": "CO",
             "America/Mexico_City": "MX",
@@ -114,20 +113,20 @@ class N {
             "Africa/Johannesburg": "ZA",
             "Africa/Nairobi": "KE",
             "Africa/Lagos": "NG"
-          }[c];
-          t && (e = this.codes.find((r) => r.country_code === t));
+          }[n];
+          t && (e = this.codes.find((i) => i.country_code === t));
         } catch {
         }
       if (e)
         this.selectedCode = e.country_code;
       else {
-        const c = this.codes.find((i) => i.country_code === "CO");
-        c && (this.selectedCode = c.country_code);
+        const n = this.codes.find((s) => s.country_code === "CO");
+        n && (this.selectedCode = n.country_code);
       }
     }
     this.render();
-    const l = this.codes.find((a) => a.country_code === this.selectedCode);
-    l && this.onChange(l), this._setupOutsideClick();
+    const p = this.codes.find((c) => c.country_code === this.selectedCode);
+    p && this.onChange(p), this._setupOutsideClick();
   }
   render() {
     this.container.innerHTML = "";
@@ -135,72 +134,72 @@ class N {
     o.className = "telpick-btn", Object.assign(o.style, this.styleOverrides), o.onclick = () => {
       this.isDropdownOpen = !this.isDropdownOpen, this.render();
     };
-    const n = document.createElement("div");
-    n.className = "telpick-flag";
-    const s = this.codes.find((e) => e.country_code === this.selectedCode) || { flag: "", code: "", country: "" };
-    if (s.flag) {
+    const r = document.createElement("div");
+    r.className = "telpick-flag";
+    const d = this.codes.find((e) => e.country_code === this.selectedCode) || { flag: "", code: "", country: "" };
+    if (d.flag) {
       const e = document.createElement("img");
-      e.src = "src/assets" + s.flag, e.className = "w-full h-full object-cover", e.alt = "flag", n.appendChild(e);
+      e.src = "src/assets" + d.flag, e.className = "w-full h-full object-cover", e.alt = "flag", r.appendChild(e);
     }
-    o.appendChild(n);
-    const l = document.createElement("span");
-    l.textContent = s.code, o.appendChild(l);
-    const a = document.createElement("span");
-    if (a.className = "ml-auto", a.textContent = "▼", o.appendChild(a), this.container.appendChild(o), this.isDropdownOpen) {
+    o.appendChild(r);
+    const p = document.createElement("span");
+    p.textContent = d.code, o.appendChild(p);
+    const c = document.createElement("span");
+    if (c.className = "ml-auto", c.textContent = "▼", o.appendChild(c), this.container.appendChild(o), this.isDropdownOpen) {
       this.dropdown = document.createElement("div"), this.dropdown.className = "telpick-dropdown", this.dropdown.onclick = (t) => t.stopPropagation(), this.dropdown.onmousedown = (t) => t.stopPropagation();
       const e = document.createElement("input");
       e.className = "telpick-search", e.type = "text", e.placeholder = "Buscar país...", e.value = this.searchQuery, e.oninput = (t) => {
-        var f;
+        var m;
         t.stopPropagation();
-        const r = t.target, C = r.selectionStart || 0, p = r.value;
-        this.searchQuery = p;
-        const u = (f = this.dropdown) == null ? void 0 : f.querySelector("ul");
-        u ? (u.innerHTML = "", (this.searchQuery ? this.codes.filter((d) => d.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((d) => {
-          const m = document.createElement("li"), k = d.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
-          m.className = `telpick-item ${k ? "telpick-item-selected" : ""}`, m.onclick = () => {
-            this.selectedCode = d.country_code, this.onChange(d), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
+        const i = t.target, f = i.selectionStart || 0, u = i.value;
+        this.searchQuery = u;
+        const l = (m = this.dropdown) == null ? void 0 : m.querySelector("ul");
+        l ? (l.innerHTML = "", (this.searchQuery ? this.codes.filter((a) => a.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((a) => {
+          const h = document.createElement("li"), w = a.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
+          h.className = `telpick-item ${w ? "telpick-item-selected" : ""}`, h.onclick = () => {
+            this.selectedCode = a.country_code, this.onChange(a), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
           };
-          const g = document.createElement("div");
-          g.className = "telpick-flag";
-          const A = document.createElement("img");
-          A.src = "src/assets" + d.flag, A.className = "w-full h-full object-cover", A.alt = "flag", g.appendChild(A), m.appendChild(g);
+          const A = document.createElement("div");
+          A.className = "telpick-flag";
+          const y = document.createElement("img");
+          y.src = "src/assets" + a.flag, y.className = "w-full h-full object-cover", y.alt = "flag", A.appendChild(y), h.appendChild(A);
           const E = document.createElement("span");
-          E.textContent = d.country, m.appendChild(E);
-          const w = document.createElement("span");
-          w.className = "ml-auto", w.textContent = d.code, m.appendChild(w), u.appendChild(m);
+          E.textContent = a.country, h.appendChild(E);
+          const g = document.createElement("span");
+          g.className = "ml-auto", g.textContent = a.code, h.appendChild(g), l.appendChild(h);
         }), requestAnimationFrame(() => {
           if (e) {
             e.focus();
-            const d = Math.min(C + 1, p.length);
-            e.setSelectionRange(d, d);
+            const a = Math.min(f + 1, u.length);
+            e.setSelectionRange(a, a);
           }
         })) : this.render();
       }, e.onclick = (t) => t.stopPropagation(), e.onmousedown = (t) => t.stopPropagation(), this.dropdown.appendChild(e);
-      const c = document.createElement("ul");
-      c.style.maxHeight = "130px", c.style.overflowY = "auto", (this.searchQuery ? this.codes.filter((t) => t.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((t) => {
-        const r = document.createElement("li"), C = t.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
-        r.className = `telpick-item ${C ? "telpick-item-selected" : ""}`, r.setAttribute("aria-selected", C), r.onclick = () => {
+      const n = document.createElement("ul");
+      n.style.maxHeight = "130px", n.style.overflowY = "auto", (this.searchQuery ? this.codes.filter((t) => t.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((t) => {
+        const i = document.createElement("li"), f = t.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
+        i.className = `telpick-item ${f ? "telpick-item-selected" : ""}`, i.setAttribute("aria-selected", f), i.onclick = () => {
           this.selectedCode = t.country_code, this.onChange(t), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
         };
-        const p = document.createElement("div");
-        p.className = "telpick-flag";
-        const u = document.createElement("img");
-        u.src = "src/assets" + t.flag, u.className = "w-full h-full object-cover", u.alt = "flag", p.appendChild(u), r.appendChild(p);
-        const f = document.createElement("span");
-        f.textContent = t.country, r.appendChild(f);
-        const y = document.createElement("span");
-        y.className = "ml-auto", y.textContent = t.code, r.appendChild(y), c.appendChild(r);
-      }), this.dropdown.appendChild(c), this.container.appendChild(this.dropdown), requestAnimationFrame(() => {
+        const u = document.createElement("div");
+        u.className = "telpick-flag";
+        const l = document.createElement("img");
+        l.src = "src/assets" + t.flag, l.className = "w-full h-full object-cover", l.alt = "flag", u.appendChild(l), i.appendChild(u);
+        const m = document.createElement("span");
+        m.textContent = t.country, i.appendChild(m);
+        const C = document.createElement("span");
+        C.className = "ml-auto", C.textContent = t.code, i.appendChild(C), n.appendChild(i);
+      }), this.dropdown.appendChild(n), this.container.appendChild(this.dropdown), requestAnimationFrame(() => {
         e && e.focus();
       });
     }
   }
   _setupOutsideClick() {
     this._outsideHandler && document.removeEventListener("click", this._outsideHandler), this._outsideHandler = (o) => {
-      const n = o.target;
-      if (this.isDropdownOpen && this.container && n) {
-        const s = this.container.querySelector(".telpick-dropdown");
-        !this.container.contains(n) && (!s || !s.contains(n)) && (this.isDropdownOpen = !1, this.render());
+      const r = o.target;
+      if (this.isDropdownOpen && this.container && r) {
+        const d = this.container.querySelector(".telpick-dropdown");
+        !this.container.contains(r) && (!d || !d.contains(r)) && (this.isDropdownOpen = !1, this.render());
       }
     }, document.addEventListener("click", this._outsideHandler, !0);
   }
@@ -208,34 +207,7 @@ class N {
     this._outsideHandler && document.removeEventListener("mousedown", this._outsideHandler), this.container.innerHTML = "";
   }
 }
-window.Telpick = N;
-function P(h, { emit: o }) {
-  let n = null;
-  return {
-    mounted() {
-      n = new window.Telpick({
-        code: h.code,
-        onChange: (s) => o("update:code", s),
-        styleOverrides: h.styleOverrides || {}
-      }), n.init(this.$el);
-    },
-    beforeUnmount() {
-      n && n.destroy();
-    },
-    render() {
-      return null;
-    }
-  };
-}
-function T({ code: h, onChange: o, styleOverrides: n }) {
-  const s = v();
-  return S(() => {
-    const l = new window.Telpick({ code: h, onChange: o, styleOverrides: n });
-    return l.init(s.current), () => l.destroy();
-  }, [h, o, n]), /* @__PURE__ */ _.createElement("div", { ref: s });
-}
+window.Telpick = _;
 export {
-  N as Telpick,
-  T as TelpickReact,
-  P as TelpickVue
+  _ as Telpick
 };

package/dist/telpick.react.es.js

@@ -0,0 +1,12 @@
+import i, { useRef as f, useEffect as o } from "react";
+import { Telpick as p } from "./telpick.es.js";
+function s({ code: t, onChange: e, styleOverrides: r }) {
+  const c = f();
+  return o(() => {
+    const n = new p({ code: t, onChange: e, styleOverrides: r });
+    return n.init(c.current), () => n.destroy();
+  }, [t, e, r]), /* @__PURE__ */ i.createElement("div", { ref: c });
+}
+export {
+  s as TelpickReact
+};

package/dist/telpick.umd.js

@@ -1 +1 @@
-(function(l,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],h):(l=typeof globalThis<"u"?globalThis:l||self,h(l.Telpick={},l.React))})(this,function(l,h){"use strict";const O="";class _{constructor({code:n=null,onChange:o=()=>{},styleOverrides:s={}}={}){this.code=n,this.onChange=o,this.styleOverrides=s,this.codes=[],this.selectedCode=n,this.isDropdownOpen=!1,this.searchQuery="",this.container=null,this.dropdown=null,this._outsideHandler=null}async init(n){this.container=n;const s=await(await fetch("src/assets/country-code.json")).json();if(this.codes=s.sort((a,e)=>a.country.localeCompare(e.country,"es")),this.code){const a=this.codes.find(e=>e.country_code===this.code);a&&(this.selectedCode=a.country_code)}else{const a=[async()=>{try{const i=await(await fetch("https://ip-api.com/json/?fields=countryCode")).json();if(i.countryCode)return this.codes.find(t=>t.country_code===i.countryCode)}catch{}return null},async()=>{try{const i=await(await fetch("https://get.geojs.io/v1/ip/country.json")).json();if(i.country)return this.codes.find(t=>t.country_code===i.country)}catch{}return null},async()=>{try{const i=await(await fetch("https://ipapi.co/json/")).json();if(i.country_code)return this.codes.find(t=>t.country_code===i.country_code)}catch{}return null}];let e=null;for(const c of a)try{if(e=await Promise.race([c(),new Promise(i=>setTimeout(()=>i(null),3e3))]),e)break}catch{}if(!e)try{const c=Intl.DateTimeFormat().resolvedOptions().timeZone,t={"America/Lima":"PE","America/Bogota":"CO","America/Mexico_City":"MX","America/Argentina/Buenos_Aires":"AR","America/Santiago":"CL","America/Caracas":"VE","America/Montevideo":"UY","America/Asuncion":"PY","America/La_Paz":"BO","America/Guayaquil":"EC","America/Panama":"PA","America/Costa_Rica":"CR","America/Managua":"NI","America/Tegucigalpa":"HN","America/Guatemala":"GT","America/El_Salvador":"SV","America/Havana":"CU","America/Santo_Domingo":"DO","America/Jamaica":"JM","America/Port-au-Prince":"HT","Europe/Madrid":"ES","Europe/London":"GB","Europe/Paris":"FR","Europe/Berlin":"DE","Europe/Rome":"IT","Europe/Amsterdam":"NL","Europe/Brussels":"BE","Europe/Vienna":"AT","Europe/Zurich":"CH","Europe/Stockholm":"SE","Europe/Oslo":"NO","Europe/Copenhagen":"DK","Europe/Helsinki":"FI","Europe/Warsaw":"PL","Europe/Prague":"CZ","Europe/Bucharest":"RO","Europe/Moscow":"RU","America/New_York":"US","America/Chicago":"US","America/Denver":"US","America/Los_Angeles":"US","America/Toronto":"CA","America/Vancouver":"CA","Asia/Tokyo":"JP","Asia/Shanghai":"CN","Asia/Hong_Kong":"CN","Asia/Seoul":"KR","Asia/Singapore":"SG","Asia/Bangkok":"TH","Asia/Jakarta":"ID","Asia/Manila":"PH","Asia/Kolkata":"IN","Asia/Dubai":"AE","Asia/Riyadh":"SA","Australia/Sydney":"AU","Australia/Melbourne":"AU","Pacific/Auckland":"NZ","Africa/Cairo":"EG","Africa/Johannesburg":"ZA","Africa/Nairobi":"KE","Africa/Lagos":"NG"}[c];t&&(e=this.codes.find(r=>r.country_code===t))}catch{}if(e)this.selectedCode=e.country_code;else{const c=this.codes.find(i=>i.country_code==="CO");c&&(this.selectedCode=c.country_code)}}this.render();const u=this.codes.find(a=>a.country_code===this.selectedCode);u&&this.onChange(u),this._setupOutsideClick()}render(){this.container.innerHTML="";const n=document.createElement("button");n.className="telpick-btn",Object.assign(n.style,this.styleOverrides),n.onclick=()=>{this.isDropdownOpen=!this.isDropdownOpen,this.render()};const o=document.createElement("div");o.className="telpick-flag";const s=this.codes.find(e=>e.country_code===this.selectedCode)||{flag:"",code:"",country:""};if(s.flag){const e=document.createElement("img");e.src="src/assets"+s.flag,e.className="w-full h-full object-cover",e.alt="flag",o.appendChild(e)}n.appendChild(o);const u=document.createElement("span");u.textContent=s.code,n.appendChild(u);const a=document.createElement("span");if(a.className="ml-auto",a.textContent="▼",n.appendChild(a),this.container.appendChild(n),this.isDropdownOpen){this.dropdown=document.createElement("div"),this.dropdown.className="telpick-dropdown",this.dropdown.onclick=t=>t.stopPropagation(),this.dropdown.onmousedown=t=>t.stopPropagation();const e=document.createElement("input");e.className="telpick-search",e.type="text",e.placeholder="Buscar país...",e.value=this.searchQuery,e.oninput=t=>{var C;t.stopPropagation();const r=t.target,A=r.selectionStart||0,f=r.value;this.searchQuery=f;const p=(C=this.dropdown)==null?void 0:C.querySelector("ul");p?(p.innerHTML="",(this.searchQuery?this.codes.filter(d=>d.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(d=>{const y=document.createElement("li"),N=d.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;y.className=`telpick-item ${N?"telpick-item-selected":""}`,y.onclick=()=>{this.selectedCode=d.country_code,this.onChange(d),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const E=document.createElement("div");E.className="telpick-flag";const w=document.createElement("img");w.src="src/assets"+d.flag,w.className="w-full h-full object-cover",w.alt="flag",E.appendChild(w),y.appendChild(E);const S=document.createElement("span");S.textContent=d.country,y.appendChild(S);const k=document.createElement("span");k.className="ml-auto",k.textContent=d.code,y.appendChild(k),p.appendChild(y)}),requestAnimationFrame(()=>{if(e){e.focus();const d=Math.min(A+1,f.length);e.setSelectionRange(d,d)}})):this.render()},e.onclick=t=>t.stopPropagation(),e.onmousedown=t=>t.stopPropagation(),this.dropdown.appendChild(e);const c=document.createElement("ul");c.style.maxHeight="130px",c.style.overflowY="auto",(this.searchQuery?this.codes.filter(t=>t.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(t=>{const r=document.createElement("li"),A=t.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;r.className=`telpick-item ${A?"telpick-item-selected":""}`,r.setAttribute("aria-selected",A),r.onclick=()=>{this.selectedCode=t.country_code,this.onChange(t),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const f=document.createElement("div");f.className="telpick-flag";const p=document.createElement("img");p.src="src/assets"+t.flag,p.className="w-full h-full object-cover",p.alt="flag",f.appendChild(p),r.appendChild(f);const C=document.createElement("span");C.textContent=t.country,r.appendChild(C);const g=document.createElement("span");g.className="ml-auto",g.textContent=t.code,r.appendChild(g),c.appendChild(r)}),this.dropdown.appendChild(c),this.container.appendChild(this.dropdown),requestAnimationFrame(()=>{e&&e.focus()})}}_setupOutsideClick(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._outsideHandler=n=>{const o=n.target;if(this.isDropdownOpen&&this.container&&o){const s=this.container.querySelector(".telpick-dropdown");!this.container.contains(o)&&(!s||!s.contains(o))&&(this.isDropdownOpen=!1,this.render())}},document.addEventListener("click",this._outsideHandler,!0)}destroy(){this._outsideHandler&&document.removeEventListener("mousedown",this._outsideHandler),this.container.innerHTML=""}}window.Telpick=_;function v(m,{emit:n}){let o=null;return{mounted(){o=new window.Telpick({code:m.code,onChange:s=>n("update:code",s),styleOverrides:m.styleOverrides||{}}),o.init(this.$el)},beforeUnmount(){o&&o.destroy()},render(){return null}}}function T({code:m,onChange:n,styleOverrides:o}){const s=h.useRef();return h.useEffect(()=>{const u=new window.Telpick({code:m,onChange:n,styleOverrides:o});return u.init(s.current),()=>u.destroy()},[m,n,o]),h.createElement("div",{ref:s})}l.Telpick=_,l.TelpickReact=T,l.TelpickVue=v,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(u,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(u=typeof globalThis<"u"?globalThis:u||self,C(u.Telpick={}))})(this,function(u){"use strict";const C="";class k{constructor({code:o=null,onChange:r=()=>{},styleOverrides:d={}}={}){this.code=o,this.onChange=r,this.styleOverrides=d,this.codes=[],this.selectedCode=o,this.isDropdownOpen=!1,this.searchQuery="",this.container=null,this.dropdown=null,this._outsideHandler=null}async init(o){this.container=o;const d=await(await fetch("src/assets/country-code.json")).json();if(this.codes=d.sort((i,e)=>i.country.localeCompare(e.country,"es")),this.code){const i=this.codes.find(e=>e.country_code===this.code);i&&(this.selectedCode=i.country_code)}else{const i=[async()=>{try{const s=await(await fetch("https://ip-api.com/json/?fields=countryCode")).json();if(s.countryCode)return this.codes.find(t=>t.country_code===s.countryCode)}catch{}return null},async()=>{try{const s=await(await fetch("https://get.geojs.io/v1/ip/country.json")).json();if(s.country)return this.codes.find(t=>t.country_code===s.country)}catch{}return null},async()=>{try{const s=await(await fetch("https://ipapi.co/json/")).json();if(s.country_code)return this.codes.find(t=>t.country_code===s.country_code)}catch{}return null}];let e=null;for(const n of i)try{if(e=await Promise.race([n(),new Promise(s=>setTimeout(()=>s(null),3e3))]),e)break}catch{}if(!e)try{const n=Intl.DateTimeFormat().resolvedOptions().timeZone,t={"America/Lima":"PE","America/Bogota":"CO","America/Mexico_City":"MX","America/Argentina/Buenos_Aires":"AR","America/Santiago":"CL","America/Caracas":"VE","America/Montevideo":"UY","America/Asuncion":"PY","America/La_Paz":"BO","America/Guayaquil":"EC","America/Panama":"PA","America/Costa_Rica":"CR","America/Managua":"NI","America/Tegucigalpa":"HN","America/Guatemala":"GT","America/El_Salvador":"SV","America/Havana":"CU","America/Santo_Domingo":"DO","America/Jamaica":"JM","America/Port-au-Prince":"HT","Europe/Madrid":"ES","Europe/London":"GB","Europe/Paris":"FR","Europe/Berlin":"DE","Europe/Rome":"IT","Europe/Amsterdam":"NL","Europe/Brussels":"BE","Europe/Vienna":"AT","Europe/Zurich":"CH","Europe/Stockholm":"SE","Europe/Oslo":"NO","Europe/Copenhagen":"DK","Europe/Helsinki":"FI","Europe/Warsaw":"PL","Europe/Prague":"CZ","Europe/Bucharest":"RO","Europe/Moscow":"RU","America/New_York":"US","America/Chicago":"US","America/Denver":"US","America/Los_Angeles":"US","America/Toronto":"CA","America/Vancouver":"CA","Asia/Tokyo":"JP","Asia/Shanghai":"CN","Asia/Hong_Kong":"CN","Asia/Seoul":"KR","Asia/Singapore":"SG","Asia/Bangkok":"TH","Asia/Jakarta":"ID","Asia/Manila":"PH","Asia/Kolkata":"IN","Asia/Dubai":"AE","Asia/Riyadh":"SA","Australia/Sydney":"AU","Australia/Melbourne":"AU","Pacific/Auckland":"NZ","Africa/Cairo":"EG","Africa/Johannesburg":"ZA","Africa/Nairobi":"KE","Africa/Lagos":"NG"}[n];t&&(e=this.codes.find(c=>c.country_code===t))}catch{}if(e)this.selectedCode=e.country_code;else{const n=this.codes.find(s=>s.country_code==="CO");n&&(this.selectedCode=n.country_code)}}this.render();const m=this.codes.find(i=>i.country_code===this.selectedCode);m&&this.onChange(m),this._setupOutsideClick()}render(){this.container.innerHTML="";const o=document.createElement("button");o.className="telpick-btn",Object.assign(o.style,this.styleOverrides),o.onclick=()=>{this.isDropdownOpen=!this.isDropdownOpen,this.render()};const r=document.createElement("div");r.className="telpick-flag";const d=this.codes.find(e=>e.country_code===this.selectedCode)||{flag:"",code:"",country:""};if(d.flag){const e=document.createElement("img");e.src="src/assets"+d.flag,e.className="w-full h-full object-cover",e.alt="flag",r.appendChild(e)}o.appendChild(r);const m=document.createElement("span");m.textContent=d.code,o.appendChild(m);const i=document.createElement("span");if(i.className="ml-auto",i.textContent="▼",o.appendChild(i),this.container.appendChild(o),this.isDropdownOpen){this.dropdown=document.createElement("div"),this.dropdown.className="telpick-dropdown",this.dropdown.onclick=t=>t.stopPropagation(),this.dropdown.onmousedown=t=>t.stopPropagation();const e=document.createElement("input");e.className="telpick-search",e.type="text",e.placeholder="Buscar país...",e.value=this.searchQuery,e.oninput=t=>{var f;t.stopPropagation();const c=t.target,y=c.selectionStart||0,h=c.value;this.searchQuery=h;const l=(f=this.dropdown)==null?void 0:f.querySelector("ul");l?(l.innerHTML="",(this.searchQuery?this.codes.filter(a=>a.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(a=>{const p=document.createElement("li"),S=a.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;p.className=`telpick-item ${S?"telpick-item-selected":""}`,p.onclick=()=>{this.selectedCode=a.country_code,this.onChange(a),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const E=document.createElement("div");E.className="telpick-flag";const g=document.createElement("img");g.src="src/assets"+a.flag,g.className="w-full h-full object-cover",g.alt="flag",E.appendChild(g),p.appendChild(E);const _=document.createElement("span");_.textContent=a.country,p.appendChild(_);const w=document.createElement("span");w.className="ml-auto",w.textContent=a.code,p.appendChild(w),l.appendChild(p)}),requestAnimationFrame(()=>{if(e){e.focus();const a=Math.min(y+1,h.length);e.setSelectionRange(a,a)}})):this.render()},e.onclick=t=>t.stopPropagation(),e.onmousedown=t=>t.stopPropagation(),this.dropdown.appendChild(e);const n=document.createElement("ul");n.style.maxHeight="130px",n.style.overflowY="auto",(this.searchQuery?this.codes.filter(t=>t.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(t=>{const c=document.createElement("li"),y=t.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;c.className=`telpick-item ${y?"telpick-item-selected":""}`,c.setAttribute("aria-selected",y),c.onclick=()=>{this.selectedCode=t.country_code,this.onChange(t),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const h=document.createElement("div");h.className="telpick-flag";const l=document.createElement("img");l.src="src/assets"+t.flag,l.className="w-full h-full object-cover",l.alt="flag",h.appendChild(l),c.appendChild(h);const f=document.createElement("span");f.textContent=t.country,c.appendChild(f);const A=document.createElement("span");A.className="ml-auto",A.textContent=t.code,c.appendChild(A),n.appendChild(c)}),this.dropdown.appendChild(n),this.container.appendChild(this.dropdown),requestAnimationFrame(()=>{e&&e.focus()})}}_setupOutsideClick(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._outsideHandler=o=>{const r=o.target;if(this.isDropdownOpen&&this.container&&r){const d=this.container.querySelector(".telpick-dropdown");!this.container.contains(r)&&(!d||!d.contains(r))&&(this.isDropdownOpen=!1,this.render())}},document.addEventListener("click",this._outsideHandler,!0)}destroy(){this._outsideHandler&&document.removeEventListener("mousedown",this._outsideHandler),this.container.innerHTML=""}}window.Telpick=k,u.Telpick=k,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/dist/telpick.vue.es.js

@@ -0,0 +1,25 @@
+import { h as t } from "vue";
+import { Telpick as i } from "./telpick.es.js";
+const r = {
+  props: {
+    code: { type: String, default: null },
+    styleOverrides: { type: Object, default: () => ({}) }
+  },
+  emits: ["update:code"],
+  mounted() {
+    this.telpickInstance = new i({
+      code: this.code,
+      onChange: (e) => this.$emit("update:code", e),
+      styleOverrides: this.styleOverrides || {}
+    }), this.telpickInstance.init(this.$el);
+  },
+  beforeUnmount() {
+    this.telpickInstance && this.telpickInstance.destroy();
+  },
+  render() {
+    return t("div");
+  }
+};
+export {
+  r as TelpickVue
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "telpick",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Multi-platform country and phone code selector with a modern design, smooth animations, and automatic IP detection.",
-  "main": "dist/telpick.umd.js",
+  "main": "dist/telpick.es.js",
   "module": "dist/telpick.es.js",
   "types": "dist/telpick.d.ts",
   "exports": {
@@ -12,11 +12,11 @@
       "types": "./dist/telpick.d.ts"
     },
     "./vue": {
-      "import": "./dist/telpick.es.js",
+      "import": "./dist/telpick.vue.es.js",
       "types": "./dist/telpick.d.ts"
     },
     "./react": {
-      "import": "./dist/telpick.es.js",
+      "import": "./dist/telpick.react.es.js",
       "types": "./dist/telpick.d.ts"
     },
     "./vanilla": {
@@ -35,7 +35,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && vite build --config vite.config.umd.js",
     "build:demo": "vite build --config vite.config.demo.js",
     "deploy:demo": "npm run build:demo && gh-pages -d docs",
     "dev": "vite",