telpick 2.0.1 → 2.0.3

package/dist/telpick.es.js

@@ -554,41 +554,41 @@ const S = [
 ];
 (function() {
   if (typeof document < "u" && document.currentScript && document.currentScript.src) {
-    const i = document.currentScript.src.replace(/\/[^/]*$/, "");
-    typeof globalThis < "u" ? globalThis.__TELPICK_SCRIPT_BASE__ = i : typeof window < "u" && (window.__TELPICK_SCRIPT_BASE__ = i);
+    const d = document.currentScript.src.replace(/\/[^/]*$/, "");
+    typeof globalThis < "u" ? globalThis.__TELPICK_SCRIPT_BASE__ = d : typeof window < "u" && (window.__TELPICK_SCRIPT_BASE__ = d);
   }
 })();
 function P() {
-  const i = typeof globalThis < "u" && globalThis.__TELPICK_SCRIPT_BASE__ ? globalThis.__TELPICK_SCRIPT_BASE__ : typeof window < "u" && window.__TELPICK_SCRIPT_BASE__ || "";
-  return i ? `${i.replace(/\/$/, "")}/assets/flags` : "";
+  const d = typeof globalThis < "u" && globalThis.__TELPICK_SCRIPT_BASE__ ? globalThis.__TELPICK_SCRIPT_BASE__ : typeof window < "u" && window.__TELPICK_SCRIPT_BASE__ || "";
+  return d ? `${d.replace(/\/$/, "")}/assets/flags` : typeof import.meta < "u" && import.meta.url ? new URL("./assets/flags/", self.location).href : "";
 }
 class T {
-  constructor({ code: c = null, onChange: r = () => {
+  constructor({ code: n = null, onChange: r = () => {
   }, styleOverrides: o = {}, baseFlagUrl: t = "" } = {}) {
-    this.code = c, this.onChange = r, this.styleOverrides = o, this.baseFlagUrl = t || P(), this.codes = [], this.selectedCode = c, this.isDropdownOpen = !1, this.searchQuery = "", this.container = null, this.dropdown = null, this._outsideHandler = null, this._scrollResizeCleanup = null, this._boundUpdatePosition = () => this._updateDropdownPosition(), this._getFlagUrl = this._getFlagUrl.bind(this);
+    this.code = n, this.onChange = r, this.styleOverrides = o, this.baseFlagUrl = t || P(), this.codes = [], this.selectedCode = n, this.isDropdownOpen = !1, this.searchQuery = "", this.container = null, this.dropdown = null, this._outsideHandler = null, this._scrollResizeCleanup = null, this._boundUpdatePosition = () => this._updateDropdownPosition(), this._getFlagUrl = this._getFlagUrl.bind(this);
   }
   _updateDropdownPosition() {
     if (!this.dropdown || !this.container)
       return;
-    const c = this.container.getBoundingClientRect();
-    this.dropdown.style.position = "fixed", this.dropdown.style.top = `${c.bottom + 4}px`, this.dropdown.style.left = `${c.left}px`, this.dropdown.style.marginTop = "0";
+    const n = this.container.getBoundingClientRect();
+    this.dropdown.style.position = "fixed", this.dropdown.style.top = `${n.bottom + 4}px`, this.dropdown.style.left = `${n.left}px`, this.dropdown.style.marginTop = "0";
   }
-  _getFlagUrl(c, r) {
-    const o = c ? c.replace(/^.*\//, "") : r ? `${String(r).toLowerCase()}.webp` : "";
+  _getFlagUrl(n, r) {
+    const o = n ? n.replace(/^.*\//, "") : r ? `${String(r).toLowerCase()}.webp` : "";
     if (!o && !r)
       return "";
     if (this.baseFlagUrl) {
       const t = this.baseFlagUrl.replace(/\/$/, "");
       if (t.includes("flagcdn.com")) {
-        const l = String(r || o && o.replace(/\.[^.]+$/, "") || "").toLowerCase();
-        return l ? `${t}/${l}.png` : "";
+        const i = String(r || o && o.replace(/\.[^.]+$/, "") || "").toLowerCase();
+        return i ? `${t}/${i}.png` : "";
       }
       return `${t}/${o}`;
     }
-    return c || (r ? `/flags/${String(r).toLowerCase()}.webp` : "");
+    return "";
   }
-  async init(c) {
-    if (this.container = c, this.codes = [...S].sort((o, t) => o.country.localeCompare(t.country, "es")), this.code) {
+  async init(n) {
+    if (this.container = n, this.codes = [...S].sort((o, t) => o.country.localeCompare(t.country, "es")), this.code) {
       const o = this.codes.find((t) => t.country_code === this.code);
       o && (this.selectedCode = o.country_code);
     } else {
@@ -622,10 +622,10 @@ class T {
         }
       ];
       let t = null;
-      for (const l of o)
+      for (const i of o)
         try {
           if (t = await Promise.race([
-            l(),
+            i(),
             new Promise((s) => setTimeout(() => s(null), 3e3))
           ]), t)
             break;
@@ -633,7 +633,7 @@ class T {
         }
       if (!t)
         try {
-          const l = Intl.DateTimeFormat().resolvedOptions().timeZone, e = {
+          const i = Intl.DateTimeFormat().resolvedOptions().timeZone, e = {
             "America/Lima": "PE",
             "America/Bogota": "CO",
             "America/Mexico_City": "MX",
@@ -695,15 +695,15 @@ class T {
             "Africa/Johannesburg": "ZA",
             "Africa/Nairobi": "KE",
             "Africa/Lagos": "NG"
-          }[l];
+          }[i];
           e && (t = this.codes.find((u) => u.country_code === e));
         } catch {
         }
       if (t)
         this.selectedCode = t.country_code;
       else {
-        const l = this.codes.find((s) => s.country_code === "CO");
-        l && (this.selectedCode = l.country_code);
+        const i = this.codes.find((s) => s.country_code === "CO");
+        i && (this.selectedCode = i.country_code);
       }
     }
     this.render();
@@ -712,8 +712,8 @@ class T {
   }
   render() {
     this._scrollResizeCleanup && (this._scrollResizeCleanup(), this._scrollResizeCleanup = null), this.dropdown && this.dropdown.parentNode && (this.dropdown.parentNode.removeChild(this.dropdown), this.dropdown = null), this.container.innerHTML = "";
-    const c = document.createElement("button");
-    c.className = "telpick-btn", Object.assign(c.style, this.styleOverrides), c.onclick = () => {
+    const n = document.createElement("button");
+    n.className = "telpick-btn", Object.assign(n.style, this.styleOverrides), n.onclick = () => {
       this.isDropdownOpen = !this.isDropdownOpen, this.render();
     };
     const r = document.createElement("div");
@@ -723,17 +723,17 @@ class T {
       const e = document.createElement("img");
       e.src = t, e.className = "w-full h-full object-cover", e.alt = o.country || "flag", e.loading = "lazy", e.referrerPolicy = "no-referrer", r.appendChild(e);
     }
-    c.appendChild(r);
-    const l = document.createElement("span");
-    l.textContent = o.code, c.appendChild(l);
+    n.appendChild(r);
+    const i = document.createElement("span");
+    i.textContent = o.code, n.appendChild(i);
     const s = document.createElement("span");
-    if (s.className = "ml-auto", s.textContent = "▼", c.appendChild(s), this.container.appendChild(c), this.isDropdownOpen) {
-      this.dropdown = document.createElement("div"), this.dropdown.className = "telpick-dropdown", this.dropdown.onclick = (n) => n.stopPropagation(), this.dropdown.onmousedown = (n) => n.stopPropagation();
+    if (s.className = "ml-auto", s.textContent = "▼", n.appendChild(s), this.container.appendChild(n), this.isDropdownOpen) {
+      this.dropdown = document.createElement("div"), this.dropdown.className = "telpick-dropdown", this.dropdown.onclick = (c) => c.stopPropagation(), this.dropdown.onmousedown = (c) => c.stopPropagation();
       const e = document.createElement("input");
-      e.className = "telpick-search", e.type = "text", e.placeholder = "Buscar país...", e.value = this.searchQuery, e.oninput = (n) => {
+      e.className = "telpick-search", e.type = "text", e.placeholder = "Buscar país...", e.value = this.searchQuery, e.oninput = (c) => {
         var h;
-        n.stopPropagation();
-        const d = n.target, _ = d.selectionStart || 0, f = d.value;
+        c.stopPropagation();
+        const l = c.target, _ = l.selectionStart || 0, f = l.value;
         this.searchQuery = f;
         const p = (h = this.dropdown) == null ? void 0 : h.querySelector("ul");
         p ? (p.innerHTML = "", (this.searchQuery ? this.codes.filter((a) => a.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((a) => {
@@ -760,25 +760,25 @@ class T {
             e.setSelectionRange(a, a);
           }
         })) : this.render();
-      }, e.onclick = (n) => n.stopPropagation(), e.onmousedown = (n) => n.stopPropagation(), this.dropdown.appendChild(e);
+      }, e.onclick = (c) => c.stopPropagation(), e.onmousedown = (c) => c.stopPropagation(), this.dropdown.appendChild(e);
       const u = document.createElement("ul");
-      u.style.maxHeight = "130px", u.style.overflowY = "auto", (this.searchQuery ? this.codes.filter((n) => n.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((n) => {
-        const d = document.createElement("li"), _ = n.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
-        d.className = `telpick-item ${_ ? "telpick-item-selected" : ""}`, d.setAttribute("aria-selected", _), d.onclick = () => {
-          this.selectedCode = n.country_code, this.onChange(n), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
+      u.style.maxHeight = "130px", u.style.overflowY = "auto", (this.searchQuery ? this.codes.filter((c) => c.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((c) => {
+        const l = document.createElement("li"), _ = c.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
+        l.className = `telpick-item ${_ ? "telpick-item-selected" : ""}`, l.setAttribute("aria-selected", _), l.onclick = () => {
+          this.selectedCode = c.country_code, this.onChange(c), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
         };
         const f = document.createElement("div");
         f.className = "telpick-flag";
-        const p = this._getFlagUrl(n.flag, n.country_code);
+        const p = this._getFlagUrl(c.flag, c.country_code);
         if (p) {
           const a = document.createElement("img");
-          a.src = p, a.className = "w-full h-full object-cover", a.alt = n.country || "flag", a.loading = "lazy", a.referrerPolicy = "no-referrer", f.appendChild(a);
+          a.src = p, a.className = "w-full h-full object-cover", a.alt = c.country || "flag", a.loading = "lazy", a.referrerPolicy = "no-referrer", f.appendChild(a);
         }
-        d.appendChild(f);
+        l.appendChild(f);
         const h = document.createElement("span");
-        h.textContent = n.country, d.appendChild(h);
+        h.textContent = c.country, l.appendChild(h);
         const w = document.createElement("span");
-        w.className = "ml-auto", w.textContent = n.code, d.appendChild(w), u.appendChild(d);
+        w.className = "ml-auto", w.textContent = c.code, l.appendChild(w), u.appendChild(l);
       }), this.dropdown.appendChild(u), document.body.appendChild(this.dropdown), this._updateDropdownPosition(), this._scrollResizeCleanup = () => {
         window.removeEventListener("scroll", this._boundUpdatePosition, !0), window.removeEventListener("resize", this._boundUpdatePosition);
       }, window.addEventListener("scroll", this._boundUpdatePosition, !0), window.addEventListener("resize", this._boundUpdatePosition), requestAnimationFrame(() => {
@@ -787,8 +787,8 @@ class T {
     }
   }
   _setupOutsideClick() {
-    this._outsideHandler && document.removeEventListener("click", this._outsideHandler), this._outsideHandler = (c) => {
-      const r = c.target;
+    this._outsideHandler && document.removeEventListener("click", this._outsideHandler), this._outsideHandler = (n) => {
+      const r = n.target;
       if (this.isDropdownOpen && this.container && r) {
         const o = this.container.contains(r), t = this.dropdown && this.dropdown.contains(r);
         !o && !t && (this.isDropdownOpen = !1, this.render());

package/dist/telpick.umd.js

@@ -1 +1 @@
-(function(l,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(l=typeof globalThis<"u"?globalThis:l||self,w(l.Telpick={}))})(this,function(l){"use strict";const w="",T=[{country:"Afganistán",code:"+93",flag:"/flags/af.png",country_code:"AF"},{country:"Albania",code:"+355",flag:"/flags/al.webp",country_code:"AL"},{country:"Alemania",code:"+49",flag:"/flags/de.webp",country_code:"DE"},{country:"Andorra",code:"+376",flag:"/flags/ad.webp",country_code:"AD"},{country:"Antigua y Barbuda",code:"+1",flag:"/flags/ag.webp",country_code:"AG"},{country:"Arabia Saudita",code:"+966",flag:"/flags/sa.webp",country_code:"SA"},{country:"Argentina",code:"+54",flag:"/flags/ar.webp",country_code:"AR"},{country:"Australia",code:"+61",flag:"/flags/au.webp",country_code:"AU"},{country:"Austria",code:"+43",flag:"/flags/at.webp",country_code:"AT"},{country:"Bahamas",code:"+1",flag:"/flags/bs.webp",country_code:"BS"},{country:"Bangladés",code:"+880",flag:"/flags/bd.webp",country_code:"BD"},{country:"Barbados",code:"+1",flag:"/flags/bb.webp",country_code:"BB"},{country:"Bélgica",code:"+32",flag:"/flags/be.webp",country_code:"BE"},{country:"Belice",code:"+501",flag:"/flags/bz.webp",country_code:"BZ"},{country:"Bielorrusia",code:"+375",flag:"/flags/by.webp",country_code:"BY"},{country:"Bolivia",code:"+591",flag:"/flags/bo.webp",country_code:"BO"},{country:"Bosnia y Herzegovina",code:"+387",flag:"/flags/ba.webp",country_code:"BA"},{country:"Brasil",code:"+55",flag:"/flags/br.webp",country_code:"BR"},{country:"Bulgaria",code:"+359",flag:"/flags/bg.webp",country_code:"BG"},{country:"Canadá",code:"+1",flag:"/flags/ca.webp",country_code:"CA"},{country:"Chile",code:"+56",flag:"/flags/cl.webp",country_code:"CL"},{country:"China",code:"+86",flag:"/flags/cn.webp",country_code:"CN"},{country:"Colombia",code:"+57",flag:"/flags/co.webp",country_code:"CO"},{country:"Corea del Sur",code:"+82",flag:"/flags/kr.webp",country_code:"KR"},{country:"Costa Rica",code:"+506",flag:"/flags/cr.webp",country_code:"CR"},{country:"Croacia",code:"+385",flag:"/flags/hr.webp",country_code:"HR"},{country:"Cuba",code:"+53",flag:"/flags/cu.webp",country_code:"CU"},{country:"Dinamarca",code:"+45",flag:"/flags/dk.webp",country_code:"DK"},{country:"Dominica",code:"+1",flag:"/flags/dm.webp",country_code:"DM"},{country:"Ecuador",code:"+593",flag:"/flags/ec.webp",country_code:"EC"},{country:"Egipto",code:"+20",flag:"/flags/eg.webp",country_code:"EG"},{country:"El Salvador",code:"+503",flag:"/flags/sv.webp",country_code:"SV"},{country:"España",code:"+34",flag:"/flags/es.webp",country_code:"ES"},{country:"Estados Unidos",code:"+1",flag:"/flags/us.webp",country_code:"US"},{country:"Estonia",code:"+372",flag:"/flags/ee.webp",country_code:"EE"},{country:"Filipinas",code:"+63",flag:"/flags/ph.webp",country_code:"PH"},{country:"Finlandia",code:"+358",flag:"/flags/fi.webp",country_code:"FI"},{country:"Francia",code:"+33",flag:"/flags/fr.webp",country_code:"FR"},{country:"Granada",code:"+1",flag:"/flags/gd.webp",country_code:"GD"},{country:"Grecia",code:"+30",flag:"/flags/gr.webp",country_code:"GR"},{country:"Guatemala",code:"+502",flag:"/flags/gt.webp",country_code:"GT"},{country:"Guyana",code:"+592",flag:"/flags/gy.webp",country_code:"GY"},{country:"Haití",code:"+509",flag:"/flags/ht.webp",country_code:"HT"},{country:"Honduras",code:"+504",flag:"/flags/hn.webp",country_code:"HN"},{country:"Hungría",code:"+36",flag:"/flags/hu.webp",country_code:"HU"},{country:"India",code:"+91",flag:"/flags/in.webp",country_code:"IN"},{country:"Indonesia",code:"+62",flag:"/flags/id.webp",country_code:"ID"},{country:"Irak",code:"+964",flag:"/flags/iq.webp",country_code:"IQ"},{country:"Irlanda",code:"+353",flag:"/flags/ie.webp",country_code:"IE"},{country:"Islandia",code:"+354",flag:"/flags/is.webp",country_code:"IS"},{country:"Israel",code:"+972",flag:"/flags/il.webp",country_code:"IL"},{country:"Italia",code:"+39",flag:"/flags/it.webp",country_code:"IT"},{country:"Jamaica",code:"+1",flag:"/flags/jm.webp",country_code:"JM"},{country:"Japón",code:"+81",flag:"/flags/jp.webp",country_code:"JP"},{country:"Kenia",code:"+254",flag:"/flags/ke.webp",country_code:"KE"},{country:"Letonia",code:"+371",flag:"/flags/lv.webp",country_code:"LV"},{country:"Lituania",code:"+370",flag:"/flags/lt.webp",country_code:"LT"},{country:"Luxemburgo",code:"+352",flag:"/flags/lu.webp",country_code:"LU"},{country:"Malasia",code:"+60",flag:"/flags/my.webp",country_code:"MY"},{country:"Malta",code:"+356",flag:"/flags/mt.webp",country_code:"MT"},{country:"México",code:"+52",flag:"/flags/mx.webp",country_code:"MX"},{country:"Mónaco",code:"+377",flag:"/flags/mc.webp",country_code:"MC"},{country:"Nicaragua",code:"+505",flag:"/flags/ni.webp",country_code:"NI"},{country:"Nigeria",code:"+234",flag:"/flags/ng.webp",country_code:"NG"},{country:"Noruega",code:"+47",flag:"/flags/no.webp",country_code:"NO"},{country:"Nueva Zelanda",code:"+64",flag:"/flags/nz.webp",country_code:"NZ"},{country:"Países Bajos",code:"+31",flag:"/flags/nl.webp",country_code:"NL"},{country:"Pakistán",code:"+92",flag:"/flags/pk.webp",country_code:"PK"},{country:"Panamá",code:"+507",flag:"/flags/pa.webp",country_code:"PA"},{country:"Paraguay",code:"+595",flag:"/flags/py.webp",country_code:"PY"},{country:"Perú",code:"+51",flag:"/flags/pe.webp",country_code:"PE"},{country:"Polonia",code:"+48",flag:"/flags/pl.webp",country_code:"PL"},{country:"Portugal",code:"+351",flag:"/flags/pt.webp",country_code:"PT"},{country:"Reino Unido",code:"+44",flag:"/flags/gb.webp",country_code:"GB"},{country:"República Checa",code:"+420",flag:"/flags/cz.webp",country_code:"CZ"},{country:"República Dominicana",code:"+1",flag:"/flags/do.webp",country_code:"DO"},{country:"Rumanía",code:"+40",flag:"/flags/ro.webp",country_code:"RO"},{country:"Rusia",code:"+7",flag:"/flags/ru.webp",country_code:"RU"},{country:"San Cristóbal y Nieves",code:"+1",flag:"/flags/kn.webp",country_code:"KN"},{country:"San Vicente y las Granadinas",code:"+1",flag:"/flags/vc.webp",country_code:"VC"},{country:"Santa Lucía",code:"+1",flag:"/flags/lc.webp",country_code:"LC"},{country:"Singapur",code:"+65",flag:"/flags/sg.webp",country_code:"SG"},{country:"Sudáfrica",code:"+27",flag:"/flags/za.webp",country_code:"ZA"},{country:"Suecia",code:"+46",flag:"/flags/se.webp",country_code:"SE"},{country:"Suiza",code:"+41",flag:"/flags/ch.webp",country_code:"CH"},{country:"Surinam",code:"+597",flag:"/flags/sr.webp",country_code:"SR"},{country:"Tailandia",code:"+66",flag:"/flags/th.webp",country_code:"TH"},{country:"Trinidad y Tobago",code:"+1",flag:"/flags/tt.webp",country_code:"TT"},{country:"Ucrania",code:"+380",flag:"/flags/ua.webp",country_code:"UA"},{country:"Uruguay",code:"+598",flag:"/flags/uy.webp",country_code:"UY"},{country:"Venezuela",code:"+58",flag:"/flags/ve.webp",country_code:"VE"},{country:"Vietnam",code:"+84",flag:"/flags/vn.webp",country_code:"VN"}];(function(){if(typeof document<"u"&&document.currentScript&&document.currentScript.src){const u=document.currentScript.src.replace(/\/[^/]*$/,"");typeof globalThis<"u"?globalThis.__TELPICK_SCRIPT_BASE__=u:typeof window<"u"&&(window.__TELPICK_SCRIPT_BASE__=u)}})();function v(){const u=typeof globalThis<"u"&&globalThis.__TELPICK_SCRIPT_BASE__?globalThis.__TELPICK_SCRIPT_BASE__:typeof window<"u"&&window.__TELPICK_SCRIPT_BASE__||"";return u?`${u.replace(/\/$/,"")}/assets/flags`:""}class E{constructor({code:t=null,onChange:r=()=>{},styleOverrides:o={},baseFlagUrl:c=""}={}){this.code=t,this.onChange=r,this.styleOverrides=o,this.baseFlagUrl=c||v(),this.codes=[],this.selectedCode=t,this.isDropdownOpen=!1,this.searchQuery="",this.container=null,this.dropdown=null,this._outsideHandler=null,this._scrollResizeCleanup=null,this._boundUpdatePosition=()=>this._updateDropdownPosition(),this._getFlagUrl=this._getFlagUrl.bind(this)}_updateDropdownPosition(){if(!this.dropdown||!this.container)return;const t=this.container.getBoundingClientRect();this.dropdown.style.position="fixed",this.dropdown.style.top=`${t.bottom+4}px`,this.dropdown.style.left=`${t.left}px`,this.dropdown.style.marginTop="0"}_getFlagUrl(t,r){const o=t?t.replace(/^.*\//,""):r?`${String(r).toLowerCase()}.webp`:"";if(!o&&!r)return"";if(this.baseFlagUrl){const c=this.baseFlagUrl.replace(/\/$/,"");if(c.includes("flagcdn.com")){const i=String(r||o&&o.replace(/\.[^.]+$/,"")||"").toLowerCase();return i?`${c}/${i}.png`:""}return`${c}/${o}`}return t||(r?`/flags/${String(r).toLowerCase()}.webp`:"")}async init(t){if(this.container=t,this.codes=[...T].sort((o,c)=>o.country.localeCompare(c.country,"es")),this.code){const o=this.codes.find(c=>c.country_code===this.code);o&&(this.selectedCode=o.country_code)}else{const o=[async()=>{try{const s=await(await fetch("https://ip-api.com/json/?fields=countryCode")).json();if(s.countryCode)return this.codes.find(e=>e.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(e=>e.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(e=>e.country_code===s.country_code)}catch{}return null}];let c=null;for(const i of o)try{if(c=await Promise.race([i(),new Promise(s=>setTimeout(()=>s(null),3e3))]),c)break}catch{}if(!c)try{const i=Intl.DateTimeFormat().resolvedOptions().timeZone,e={"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"}[i];e&&(c=this.codes.find(f=>f.country_code===e))}catch{}if(c)this.selectedCode=c.country_code;else{const i=this.codes.find(s=>s.country_code==="CO");i&&(this.selectedCode=i.country_code)}}this.render();const r=this.codes.find(o=>o.country_code===this.selectedCode);r&&this.onChange(r),this._setupOutsideClick()}render(){this._scrollResizeCleanup&&(this._scrollResizeCleanup(),this._scrollResizeCleanup=null),this.dropdown&&this.dropdown.parentNode&&(this.dropdown.parentNode.removeChild(this.dropdown),this.dropdown=null),this.container.innerHTML="";const t=document.createElement("button");t.className="telpick-btn",Object.assign(t.style,this.styleOverrides),t.onclick=()=>{this.isDropdownOpen=!this.isDropdownOpen,this.render()};const r=document.createElement("div");r.className="telpick-flag";const o=this.codes.find(e=>e.country_code===this.selectedCode)||{country_code:"",code:"",country:"",flag:""},c=this._getFlagUrl(o.flag,o.country_code);if(c){const e=document.createElement("img");e.src=c,e.className="w-full h-full object-cover",e.alt=o.country||"flag",e.loading="lazy",e.referrerPolicy="no-referrer",r.appendChild(e)}t.appendChild(r);const i=document.createElement("span");i.textContent=o.code,t.appendChild(i);const s=document.createElement("span");if(s.className="ml-auto",s.textContent="▼",t.appendChild(s),this.container.appendChild(t),this.isDropdownOpen){this.dropdown=document.createElement("div"),this.dropdown.className="telpick-dropdown",this.dropdown.onclick=n=>n.stopPropagation(),this.dropdown.onmousedown=n=>n.stopPropagation();const e=document.createElement("input");e.className="telpick-search",e.type="text",e.placeholder="Buscar país...",e.value=this.searchQuery,e.oninput=n=>{var _;n.stopPropagation();const d=n.target,b=d.selectionStart||0,p=d.value;this.searchQuery=p;const g=(_=this.dropdown)==null?void 0:_.querySelector("ul");g?(g.innerHTML="",(this.searchQuery?this.codes.filter(a=>a.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(a=>{const y=document.createElement("li"),N=a.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;y.className=`telpick-item ${N?"telpick-item-selected":""}`,y.onclick=()=>{this.selectedCode=a.country_code,this.onChange(a),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const C=document.createElement("div");C.className="telpick-flag";const S=this._getFlagUrl(a.flag,a.country_code);if(S){const h=document.createElement("img");h.src=S,h.className="w-full h-full object-cover",h.alt=a.country||"flag",h.loading="lazy",h.referrerPolicy="no-referrer",C.appendChild(h)}y.appendChild(C);const P=document.createElement("span");P.textContent=a.country,y.appendChild(P);const A=document.createElement("span");A.className="ml-auto",A.textContent=a.code,y.appendChild(A),g.appendChild(y)}),requestAnimationFrame(()=>{if(e){e.focus();const a=Math.min(b+1,p.length);e.setSelectionRange(a,a)}})):this.render()},e.onclick=n=>n.stopPropagation(),e.onmousedown=n=>n.stopPropagation(),this.dropdown.appendChild(e);const f=document.createElement("ul");f.style.maxHeight="130px",f.style.overflowY="auto",(this.searchQuery?this.codes.filter(n=>n.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(n=>{const d=document.createElement("li"),b=n.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;d.className=`telpick-item ${b?"telpick-item-selected":""}`,d.setAttribute("aria-selected",b),d.onclick=()=>{this.selectedCode=n.country_code,this.onChange(n),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const p=document.createElement("div");p.className="telpick-flag";const g=this._getFlagUrl(n.flag,n.country_code);if(g){const a=document.createElement("img");a.src=g,a.className="w-full h-full object-cover",a.alt=n.country||"flag",a.loading="lazy",a.referrerPolicy="no-referrer",p.appendChild(a)}d.appendChild(p);const _=document.createElement("span");_.textContent=n.country,d.appendChild(_);const m=document.createElement("span");m.className="ml-auto",m.textContent=n.code,d.appendChild(m),f.appendChild(d)}),this.dropdown.appendChild(f),document.body.appendChild(this.dropdown),this._updateDropdownPosition(),this._scrollResizeCleanup=()=>{window.removeEventListener("scroll",this._boundUpdatePosition,!0),window.removeEventListener("resize",this._boundUpdatePosition)},window.addEventListener("scroll",this._boundUpdatePosition,!0),window.addEventListener("resize",this._boundUpdatePosition),requestAnimationFrame(()=>{e&&e.focus()})}}_setupOutsideClick(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._outsideHandler=t=>{const r=t.target;if(this.isDropdownOpen&&this.container&&r){const o=this.container.contains(r),c=this.dropdown&&this.dropdown.contains(r);!o&&!c&&(this.isDropdownOpen=!1,this.render())}},document.addEventListener("click",this._outsideHandler,!0)}destroy(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._scrollResizeCleanup&&(this._scrollResizeCleanup(),this._scrollResizeCleanup=null),this.dropdown&&this.dropdown.parentNode&&(this.dropdown.parentNode.removeChild(this.dropdown),this.dropdown=null),this.container.innerHTML=""}}window.Telpick=E,l.Telpick=E,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(u,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(u=typeof globalThis<"u"?globalThis:u||self,d(u.Telpick={}))})(this,function(u){"use strict";var d=typeof document<"u"?document.currentScript:null;const v="",T=[{country:"Afganistán",code:"+93",flag:"/flags/af.png",country_code:"AF"},{country:"Albania",code:"+355",flag:"/flags/al.webp",country_code:"AL"},{country:"Alemania",code:"+49",flag:"/flags/de.webp",country_code:"DE"},{country:"Andorra",code:"+376",flag:"/flags/ad.webp",country_code:"AD"},{country:"Antigua y Barbuda",code:"+1",flag:"/flags/ag.webp",country_code:"AG"},{country:"Arabia Saudita",code:"+966",flag:"/flags/sa.webp",country_code:"SA"},{country:"Argentina",code:"+54",flag:"/flags/ar.webp",country_code:"AR"},{country:"Australia",code:"+61",flag:"/flags/au.webp",country_code:"AU"},{country:"Austria",code:"+43",flag:"/flags/at.webp",country_code:"AT"},{country:"Bahamas",code:"+1",flag:"/flags/bs.webp",country_code:"BS"},{country:"Bangladés",code:"+880",flag:"/flags/bd.webp",country_code:"BD"},{country:"Barbados",code:"+1",flag:"/flags/bb.webp",country_code:"BB"},{country:"Bélgica",code:"+32",flag:"/flags/be.webp",country_code:"BE"},{country:"Belice",code:"+501",flag:"/flags/bz.webp",country_code:"BZ"},{country:"Bielorrusia",code:"+375",flag:"/flags/by.webp",country_code:"BY"},{country:"Bolivia",code:"+591",flag:"/flags/bo.webp",country_code:"BO"},{country:"Bosnia y Herzegovina",code:"+387",flag:"/flags/ba.webp",country_code:"BA"},{country:"Brasil",code:"+55",flag:"/flags/br.webp",country_code:"BR"},{country:"Bulgaria",code:"+359",flag:"/flags/bg.webp",country_code:"BG"},{country:"Canadá",code:"+1",flag:"/flags/ca.webp",country_code:"CA"},{country:"Chile",code:"+56",flag:"/flags/cl.webp",country_code:"CL"},{country:"China",code:"+86",flag:"/flags/cn.webp",country_code:"CN"},{country:"Colombia",code:"+57",flag:"/flags/co.webp",country_code:"CO"},{country:"Corea del Sur",code:"+82",flag:"/flags/kr.webp",country_code:"KR"},{country:"Costa Rica",code:"+506",flag:"/flags/cr.webp",country_code:"CR"},{country:"Croacia",code:"+385",flag:"/flags/hr.webp",country_code:"HR"},{country:"Cuba",code:"+53",flag:"/flags/cu.webp",country_code:"CU"},{country:"Dinamarca",code:"+45",flag:"/flags/dk.webp",country_code:"DK"},{country:"Dominica",code:"+1",flag:"/flags/dm.webp",country_code:"DM"},{country:"Ecuador",code:"+593",flag:"/flags/ec.webp",country_code:"EC"},{country:"Egipto",code:"+20",flag:"/flags/eg.webp",country_code:"EG"},{country:"El Salvador",code:"+503",flag:"/flags/sv.webp",country_code:"SV"},{country:"España",code:"+34",flag:"/flags/es.webp",country_code:"ES"},{country:"Estados Unidos",code:"+1",flag:"/flags/us.webp",country_code:"US"},{country:"Estonia",code:"+372",flag:"/flags/ee.webp",country_code:"EE"},{country:"Filipinas",code:"+63",flag:"/flags/ph.webp",country_code:"PH"},{country:"Finlandia",code:"+358",flag:"/flags/fi.webp",country_code:"FI"},{country:"Francia",code:"+33",flag:"/flags/fr.webp",country_code:"FR"},{country:"Granada",code:"+1",flag:"/flags/gd.webp",country_code:"GD"},{country:"Grecia",code:"+30",flag:"/flags/gr.webp",country_code:"GR"},{country:"Guatemala",code:"+502",flag:"/flags/gt.webp",country_code:"GT"},{country:"Guyana",code:"+592",flag:"/flags/gy.webp",country_code:"GY"},{country:"Haití",code:"+509",flag:"/flags/ht.webp",country_code:"HT"},{country:"Honduras",code:"+504",flag:"/flags/hn.webp",country_code:"HN"},{country:"Hungría",code:"+36",flag:"/flags/hu.webp",country_code:"HU"},{country:"India",code:"+91",flag:"/flags/in.webp",country_code:"IN"},{country:"Indonesia",code:"+62",flag:"/flags/id.webp",country_code:"ID"},{country:"Irak",code:"+964",flag:"/flags/iq.webp",country_code:"IQ"},{country:"Irlanda",code:"+353",flag:"/flags/ie.webp",country_code:"IE"},{country:"Islandia",code:"+354",flag:"/flags/is.webp",country_code:"IS"},{country:"Israel",code:"+972",flag:"/flags/il.webp",country_code:"IL"},{country:"Italia",code:"+39",flag:"/flags/it.webp",country_code:"IT"},{country:"Jamaica",code:"+1",flag:"/flags/jm.webp",country_code:"JM"},{country:"Japón",code:"+81",flag:"/flags/jp.webp",country_code:"JP"},{country:"Kenia",code:"+254",flag:"/flags/ke.webp",country_code:"KE"},{country:"Letonia",code:"+371",flag:"/flags/lv.webp",country_code:"LV"},{country:"Lituania",code:"+370",flag:"/flags/lt.webp",country_code:"LT"},{country:"Luxemburgo",code:"+352",flag:"/flags/lu.webp",country_code:"LU"},{country:"Malasia",code:"+60",flag:"/flags/my.webp",country_code:"MY"},{country:"Malta",code:"+356",flag:"/flags/mt.webp",country_code:"MT"},{country:"México",code:"+52",flag:"/flags/mx.webp",country_code:"MX"},{country:"Mónaco",code:"+377",flag:"/flags/mc.webp",country_code:"MC"},{country:"Nicaragua",code:"+505",flag:"/flags/ni.webp",country_code:"NI"},{country:"Nigeria",code:"+234",flag:"/flags/ng.webp",country_code:"NG"},{country:"Noruega",code:"+47",flag:"/flags/no.webp",country_code:"NO"},{country:"Nueva Zelanda",code:"+64",flag:"/flags/nz.webp",country_code:"NZ"},{country:"Países Bajos",code:"+31",flag:"/flags/nl.webp",country_code:"NL"},{country:"Pakistán",code:"+92",flag:"/flags/pk.webp",country_code:"PK"},{country:"Panamá",code:"+507",flag:"/flags/pa.webp",country_code:"PA"},{country:"Paraguay",code:"+595",flag:"/flags/py.webp",country_code:"PY"},{country:"Perú",code:"+51",flag:"/flags/pe.webp",country_code:"PE"},{country:"Polonia",code:"+48",flag:"/flags/pl.webp",country_code:"PL"},{country:"Portugal",code:"+351",flag:"/flags/pt.webp",country_code:"PT"},{country:"Reino Unido",code:"+44",flag:"/flags/gb.webp",country_code:"GB"},{country:"República Checa",code:"+420",flag:"/flags/cz.webp",country_code:"CZ"},{country:"República Dominicana",code:"+1",flag:"/flags/do.webp",country_code:"DO"},{country:"Rumanía",code:"+40",flag:"/flags/ro.webp",country_code:"RO"},{country:"Rusia",code:"+7",flag:"/flags/ru.webp",country_code:"RU"},{country:"San Cristóbal y Nieves",code:"+1",flag:"/flags/kn.webp",country_code:"KN"},{country:"San Vicente y las Granadinas",code:"+1",flag:"/flags/vc.webp",country_code:"VC"},{country:"Santa Lucía",code:"+1",flag:"/flags/lc.webp",country_code:"LC"},{country:"Singapur",code:"+65",flag:"/flags/sg.webp",country_code:"SG"},{country:"Sudáfrica",code:"+27",flag:"/flags/za.webp",country_code:"ZA"},{country:"Suecia",code:"+46",flag:"/flags/se.webp",country_code:"SE"},{country:"Suiza",code:"+41",flag:"/flags/ch.webp",country_code:"CH"},{country:"Surinam",code:"+597",flag:"/flags/sr.webp",country_code:"SR"},{country:"Tailandia",code:"+66",flag:"/flags/th.webp",country_code:"TH"},{country:"Trinidad y Tobago",code:"+1",flag:"/flags/tt.webp",country_code:"TT"},{country:"Ucrania",code:"+380",flag:"/flags/ua.webp",country_code:"UA"},{country:"Uruguay",code:"+598",flag:"/flags/uy.webp",country_code:"UY"},{country:"Venezuela",code:"+58",flag:"/flags/ve.webp",country_code:"VE"},{country:"Vietnam",code:"+84",flag:"/flags/vn.webp",country_code:"VN"}];(function(){if(typeof document<"u"&&document.currentScript&&document.currentScript.src){const f=document.currentScript.src.replace(/\/[^/]*$/,"");typeof globalThis<"u"?globalThis.__TELPICK_SCRIPT_BASE__=f:typeof window<"u"&&(window.__TELPICK_SCRIPT_BASE__=f)}})();function R(){const f=typeof globalThis<"u"&&globalThis.__TELPICK_SCRIPT_BASE__?globalThis.__TELPICK_SCRIPT_BASE__:typeof window<"u"&&window.__TELPICK_SCRIPT_BASE__||"";return f?`${f.replace(/\/$/,"")}/assets/flags`:typeof{url:typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:d&&d.tagName.toUpperCase()==="SCRIPT"&&d.src||new URL("telpick.umd.js",document.baseURI).href}<"u"&&(typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:d&&d.tagName.toUpperCase()==="SCRIPT"&&d.src||new URL("telpick.umd.js",document.baseURI).href)?new URL("./assets/flags/",self.location).href:""}class E{constructor({code:n=null,onChange:r=()=>{},styleOverrides:o={},baseFlagUrl:t=""}={}){this.code=n,this.onChange=r,this.styleOverrides=o,this.baseFlagUrl=t||R(),this.codes=[],this.selectedCode=n,this.isDropdownOpen=!1,this.searchQuery="",this.container=null,this.dropdown=null,this._outsideHandler=null,this._scrollResizeCleanup=null,this._boundUpdatePosition=()=>this._updateDropdownPosition(),this._getFlagUrl=this._getFlagUrl.bind(this)}_updateDropdownPosition(){if(!this.dropdown||!this.container)return;const n=this.container.getBoundingClientRect();this.dropdown.style.position="fixed",this.dropdown.style.top=`${n.bottom+4}px`,this.dropdown.style.left=`${n.left}px`,this.dropdown.style.marginTop="0"}_getFlagUrl(n,r){const o=n?n.replace(/^.*\//,""):r?`${String(r).toLowerCase()}.webp`:"";if(!o&&!r)return"";if(this.baseFlagUrl){const t=this.baseFlagUrl.replace(/\/$/,"");if(t.includes("flagcdn.com")){const i=String(r||o&&o.replace(/\.[^.]+$/,"")||"").toLowerCase();return i?`${t}/${i}.png`:""}return`${t}/${o}`}return""}async init(n){if(this.container=n,this.codes=[...T].sort((o,t)=>o.country.localeCompare(t.country,"es")),this.code){const o=this.codes.find(t=>t.country_code===this.code);o&&(this.selectedCode=o.country_code)}else{const o=[async()=>{try{const s=await(await fetch("https://ip-api.com/json/?fields=countryCode")).json();if(s.countryCode)return this.codes.find(e=>e.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(e=>e.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(e=>e.country_code===s.country_code)}catch{}return null}];let t=null;for(const i of o)try{if(t=await Promise.race([i(),new Promise(s=>setTimeout(()=>s(null),3e3))]),t)break}catch{}if(!t)try{const i=Intl.DateTimeFormat().resolvedOptions().timeZone,e={"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"}[i];e&&(t=this.codes.find(p=>p.country_code===e))}catch{}if(t)this.selectedCode=t.country_code;else{const i=this.codes.find(s=>s.country_code==="CO");i&&(this.selectedCode=i.country_code)}}this.render();const r=this.codes.find(o=>o.country_code===this.selectedCode);r&&this.onChange(r),this._setupOutsideClick()}render(){this._scrollResizeCleanup&&(this._scrollResizeCleanup(),this._scrollResizeCleanup=null),this.dropdown&&this.dropdown.parentNode&&(this.dropdown.parentNode.removeChild(this.dropdown),this.dropdown=null),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 r=document.createElement("div");r.className="telpick-flag";const o=this.codes.find(e=>e.country_code===this.selectedCode)||{country_code:"",code:"",country:"",flag:""},t=this._getFlagUrl(o.flag,o.country_code);if(t){const e=document.createElement("img");e.src=t,e.className="w-full h-full object-cover",e.alt=o.country||"flag",e.loading="lazy",e.referrerPolicy="no-referrer",r.appendChild(e)}n.appendChild(r);const i=document.createElement("span");i.textContent=o.code,n.appendChild(i);const s=document.createElement("span");if(s.className="ml-auto",s.textContent="▼",n.appendChild(s),this.container.appendChild(n),this.isDropdownOpen){this.dropdown=document.createElement("div"),this.dropdown.className="telpick-dropdown",this.dropdown.onclick=c=>c.stopPropagation(),this.dropdown.onmousedown=c=>c.stopPropagation();const e=document.createElement("input");e.className="telpick-search",e.type="text",e.placeholder="Buscar país...",e.value=this.searchQuery,e.oninput=c=>{var w;c.stopPropagation();const l=c.target,m=l.selectionStart||0,g=l.value;this.searchQuery=g;const y=(w=this.dropdown)==null?void 0:w.querySelector("ul");y?(y.innerHTML="",(this.searchQuery?this.codes.filter(a=>a.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(a=>{const h=document.createElement("li"),U=a.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;h.className=`telpick-item ${U?"telpick-item-selected":""}`,h.onclick=()=>{this.selectedCode=a.country_code,this.onChange(a),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const C=document.createElement("div");C.className="telpick-flag";const S=this._getFlagUrl(a.flag,a.country_code);if(S){const _=document.createElement("img");_.src=S,_.className="w-full h-full object-cover",_.alt=a.country||"flag",_.loading="lazy",_.referrerPolicy="no-referrer",C.appendChild(_)}h.appendChild(C);const P=document.createElement("span");P.textContent=a.country,h.appendChild(P);const A=document.createElement("span");A.className="ml-auto",A.textContent=a.code,h.appendChild(A),y.appendChild(h)}),requestAnimationFrame(()=>{if(e){e.focus();const a=Math.min(m+1,g.length);e.setSelectionRange(a,a)}})):this.render()},e.onclick=c=>c.stopPropagation(),e.onmousedown=c=>c.stopPropagation(),this.dropdown.appendChild(e);const p=document.createElement("ul");p.style.maxHeight="130px",p.style.overflowY="auto",(this.searchQuery?this.codes.filter(c=>c.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(c=>{const l=document.createElement("li"),m=c.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;l.className=`telpick-item ${m?"telpick-item-selected":""}`,l.setAttribute("aria-selected",m),l.onclick=()=>{this.selectedCode=c.country_code,this.onChange(c),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const g=document.createElement("div");g.className="telpick-flag";const y=this._getFlagUrl(c.flag,c.country_code);if(y){const a=document.createElement("img");a.src=y,a.className="w-full h-full object-cover",a.alt=c.country||"flag",a.loading="lazy",a.referrerPolicy="no-referrer",g.appendChild(a)}l.appendChild(g);const w=document.createElement("span");w.textContent=c.country,l.appendChild(w);const b=document.createElement("span");b.className="ml-auto",b.textContent=c.code,l.appendChild(b),p.appendChild(l)}),this.dropdown.appendChild(p),document.body.appendChild(this.dropdown),this._updateDropdownPosition(),this._scrollResizeCleanup=()=>{window.removeEventListener("scroll",this._boundUpdatePosition,!0),window.removeEventListener("resize",this._boundUpdatePosition)},window.addEventListener("scroll",this._boundUpdatePosition,!0),window.addEventListener("resize",this._boundUpdatePosition),requestAnimationFrame(()=>{e&&e.focus()})}}_setupOutsideClick(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._outsideHandler=n=>{const r=n.target;if(this.isDropdownOpen&&this.container&&r){const o=this.container.contains(r),t=this.dropdown&&this.dropdown.contains(r);!o&&!t&&(this.isDropdownOpen=!1,this.render())}},document.addEventListener("click",this._outsideHandler,!0)}destroy(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._scrollResizeCleanup&&(this._scrollResizeCleanup(),this._scrollResizeCleanup=null),this.dropdown&&this.dropdown.parentNode&&(this.dropdown.parentNode.removeChild(this.dropdown),this.dropdown=null),this.container.innerHTML=""}}window.Telpick=E,u.Telpick=E,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telpick",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Multi-platform country and phone code selector with a modern design, smooth animations, and automatic IP detection.",
   "main": "dist/telpick.es.js",
   "module": "dist/telpick.es.js",

package/src/demo-init.js

@@ -6,8 +6,8 @@ import Telpick from './telpick.js'
 
 window.Telpick = Telpick
 
-// Base para banderas locales (src/assets/flags). En otros proyectos pasa baseFlagUrl al constructor o usa 'https://flagcdn.com/w40' si no tienes banderas.
-const flagsBase = new URL('./assets/flags', import.meta.url).href
+// Base para banderas: en build (GitHub Pages) están en /telpick/src/assets/flags; en dev en /src/assets/flags.
+const flagsBase = `${(import.meta.env.BASE_URL || '/').replace(/([^/])$/, '$1/')}src/assets/flags`
 
 function initDemo() {
   const container = document.getElementById('telpick-container')

package/src/telpick.js

@@ -1,6 +1,6 @@
 import countryCodesData from './assets/country-code.json'
 
-// Al cargar por <script src="...">, guardar la URL base para resolver assets (banderas) en CDN
+
 ;(function () {
   if (typeof document !== 'undefined' && document.currentScript && document.currentScript.src) {
     const base = document.currentScript.src.replace(/\/[^/]*$/, '')
@@ -10,10 +10,14 @@ import countryCodesData from './assets/country-code.json'
 })()
 
 function _getDefaultBaseFlagUrl() {
-  const base = typeof globalThis !== 'undefined' && globalThis.__TELPICK_SCRIPT_BASE__
+  const scriptBase = typeof globalThis !== 'undefined' && globalThis.__TELPICK_SCRIPT_BASE__
     ? globalThis.__TELPICK_SCRIPT_BASE__
     : (typeof window !== 'undefined' && window.__TELPICK_SCRIPT_BASE__) || ''
-  return base ? `${base.replace(/\/$/, '')}/assets/flags` : ''
+  if (scriptBase) return `${scriptBase.replace(/\/$/, '')}/assets/flags`
+  if (typeof import.meta !== 'undefined' && import.meta.url) {
+    return new URL('./assets/flags/', import.meta.url).href
+  }
+  return ''
 }
 
 class Telpick {
@@ -54,7 +58,8 @@ class Telpick {
       }
       return `${base}/${filename}`
     }
-    return flagPathFromJson || (countryCode ? `/flags/${String(countryCode).toLowerCase()}.webp` : '')
+    
+    return ''
   }
 
   async init(container) {

package/src/telpick.cdn.js

@@ -1,7 +0,0 @@
-// Telpick CDN loader
-// <script src="https://unpkg.com/telpick/dist/telpick.umd.js"></script>
-// window.Telpick disponible
-
-// Ejemplo de uso:
-// const telpick = new Telpick({ code: null, onChange: (country) => console.log(country) })
-// telpick.init(document.getElementById('telpick-container'))

package/src/telpick.react.tsx

@@ -1,186 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
-import { createPortal } from 'react-dom'
-import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
-import './telpick.css'
-
-function getFlagUrl(baseFlagUrl: string, flagPath: string, countryCode: string): string {
-  const base = (baseFlagUrl || '').replace(/\/$/, '')
-  if (!base) return flagPath || (countryCode ? `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png` : '')
-  if (base.includes('flagcdn.com')) {
-    const code = (countryCode || (flagPath && flagPath.replace(/^.*\//, '').replace(/\.[^.]+$/, '')) || '').toLowerCase()
-    return code ? `${base}/${code}.png` : ''
-  }
-  const filename = flagPath ? flagPath.replace(/^.*\//, '') : `${(countryCode || '').toLowerCase()}.webp`
-  return filename ? `${base}/${filename}` : ''
-}
-
-export function TelpickReact({ code, onChange, styleOverrides, baseFlagUrl = '' }: TelpickProps) {
-  const [codes, setCodes] = useState<CountryCode[]>([])
-  const [selectedCode, setSelectedCode] = useState(code)
-  const [isDropdownOpen, setDropdownOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 })
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const portalDropdownRef = useRef<HTMLDivElement>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    fetch('/resources/api/country-codes.json')
-      .then(res => res.json())
-      .then(data => {
-        const sorted = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
-        setCodes(sorted)
-        if (!code) {
-          getDefaultCountry(data).then(def => {
-            if (def) {
-              setSelectedCode(def.country_code)
-              onChange && onChange(def)
-            }
-          })
-        } else {
-          setSelectedCode(code)
-        }
-      })
-  }, [code, onChange])
-
-  useEffect(() => {
-    if (code !== undefined && code !== selectedCode) {
-      setSelectedCode(code)
-    }
-  }, [code])
-
-  function updateDropdownPosition() {
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect()
-      setDropdownPosition({ top: rect.bottom + 4, left: rect.left })
-    }
-  }
-
-  useEffect(() => {
-    if (isDropdownOpen) {
-      updateDropdownPosition()
-      window.addEventListener('scroll', updateDropdownPosition, true)
-      window.addEventListener('resize', updateDropdownPosition)
-      return () => {
-        window.removeEventListener('scroll', updateDropdownPosition, true)
-        window.removeEventListener('resize', updateDropdownPosition)
-      }
-    }
-  }, [isDropdownOpen])
-
-  useEffect(() => {
-    if (wrapperRef.current) {
-      const remove = useClickOutside(wrapperRef.current, () => setDropdownOpen(false), () => portalDropdownRef.current)
-      return remove
-    }
-  }, [])
-
-  useEffect(() => {
-    if (isDropdownOpen && searchInputRef.current) {
-      searchInputRef.current.focus()
-    }
-  }, [isDropdownOpen])
-
-  const selectCode = (item: CountryCode) => {
-    setSelectedCode(item.country_code)
-    onChange && onChange(item)
-    setDropdownOpen(false)
-    setSearchQuery('')
-  }
-
-  const selectedCountry = codes.find(c => c.country_code === selectedCode) || {
-    country_code: selectedCode,
-    flag: '',
-    country: '',
-    code: '',
-  }
-
-  const filteredCodes = useMemo(() => {
-    if (!searchQuery) return codes
-    return codes.filter(c => c.country.toLowerCase().includes(searchQuery.toLowerCase()))
-  }, [codes, searchQuery])
-
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const cursorPosition = e.target.selectionStart || 0
-    const newValue = e.target.value
-    setSearchQuery(newValue)
-    requestAnimationFrame(() => {
-      if (searchInputRef.current) {
-        searchInputRef.current.focus()
-        const newCursorPos = Math.min(cursorPosition + 1, newValue.length)
-        searchInputRef.current.setSelectionRange(newCursorPos, newCursorPos)
-      }
-    })
-  }
-
-  const dropdownContent = isDropdownOpen ? (
-    <div
-      ref={portalDropdownRef}
-      className="telpick-dropdown"
-      role="listbox"
-      style={{
-        position: 'fixed',
-        top: dropdownPosition.top,
-        left: dropdownPosition.left,
-        marginTop: 0
-      }}
-      onClick={(e) => e.stopPropagation()}
-      onMouseDown={(e) => e.stopPropagation()}
-    >
-      <input
-        ref={searchInputRef}
-        value={searchQuery}
-        onChange={handleSearchChange}
-        onClick={(e) => e.stopPropagation()}
-        onMouseDown={(e) => e.stopPropagation()}
-        type="text"
-        placeholder="Buscar país..."
-        className="telpick-search"
-        autoFocus
-      />
-      <ul>
-        {filteredCodes.map((item, index) => {
-          const isSelected = item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined
-          return (
-            <li
-              key={`${item.country_code}-${index}`}
-              onClick={() => selectCode(item)}
-              className={`telpick-item ${isSelected ? 'telpick-item-selected' : ''}`}
-              role="option"
-              aria-selected={isSelected}
-            >
-              <div className="telpick-flag">
-                <img src={getFlagUrl(baseFlagUrl, item.flag, item.country_code)} alt={item.country} />
-              </div>
-              <span>{item.country}</span>
-              <span className="ml-auto">{item.code}</span>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  ) : null
-
-  return (
-    <div className="telpick-wrapper relative" ref={wrapperRef}>
-      <button
-        ref={buttonRef}
-        onClick={() => setDropdownOpen(!isDropdownOpen)}
-        className="telpick-btn"
-        style={styleOverrides}
-        aria-expanded={isDropdownOpen}
-        aria-haspopup="listbox"
-      >
-        <div className="telpick-flag">
-          {getFlagUrl(baseFlagUrl, selectedCountry.flag, selectedCountry.country_code) && (
-            <img src={getFlagUrl(baseFlagUrl, selectedCountry.flag, selectedCountry.country_code)} alt={selectedCountry.country || 'flag'} />
-          )}
-        </div>
-        <span>{selectedCountry.code}</span>
-        <span className="telpick-arrow ml-auto">▼</span>
-      </button>
-      {createPortal(dropdownContent, document.body)}
-    </div>
-  )
-}

package/src/telpick.ts

@@ -1,163 +0,0 @@
-export interface CountryCode {
-  country_code: string;
-  flag: string;
-  country: string;
-  code: string;
-}
-
-export interface TelpickProps {
-  code?: string;
-  onChange?: (country: CountryCode) => void;
-  styleOverrides?: Partial<Record<string, string>>;
-  baseFlagUrl?: string;
-}
-
-export async function getDefaultCountry(codes: CountryCode[]): Promise<CountryCode | null> {
-  const services = [
-    async () => {
-      try {
-        const res = await fetch('https://ip-api.com/json/?fields=countryCode')
-        const data = await res.json()
-        if (data.countryCode) {
-          return codes.find(c => c.country_code === data.countryCode) || null
-        }
-      } catch {}
-      return null
-    },
-    async () => {
-      try {
-        const res = await fetch('https://get.geojs.io/v1/ip/country.json')
-        const data = await res.json()
-        if (data.country) {
-          return codes.find(c => c.country_code === data.country) || null
-        }
-      } catch {}
-      return null
-    },
-    async () => {
-      try {
-        const res = await fetch('https://ipapi.co/json/')
-        const data = await res.json()
-        if (data.country_code) {
-          return codes.find(c => c.country_code === data.country_code) || null
-        }
-      } catch {}
-      return null
-    },
-    async () => {
-      try {
-        const res = await fetch('https://ip-api.io/json/')
-        const data = await res.json()
-        if (data.country_code) {
-          return codes.find(c => c.country_code === data.country_code) || null
-        }
-      } catch {}
-      return null
-    }
-  ]
-
-  for (const service of services) {
-    try {
-      const result = await Promise.race([
-        service(),
-        new Promise<null>((resolve) => setTimeout(() => resolve(null), 3000))
-      ])
-      if (result) return result
-    } catch {
-      continue
-    }
-  }
-
-  try {
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-    const timezoneToCountry: Record<string, string> = {
-      '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'
-    }
-    
-    const countryCode = timezoneToCountry[timezone]
-    if (countryCode) {
-      return codes.find(c => c.country_code === countryCode) || null
-    }
-  } catch {}
-
-  return codes.find(c => c.country_code === 'CO') || null
-}
-
-export function useClickOutside(
-  ref: HTMLElement,
-  cb: () => void,
-  /** Cuando el dropdown se renderiza en un portal/Teleport, pasar su ref (o getter) para no cerrar al hacer click dentro */
-  ignoreRef?: HTMLElement | null | (() => HTMLElement | null)
-) {
-  function handler(e: MouseEvent) {
-    const target = e.target as Node
-    if (!ref || !target) return
-    const ignore = typeof ignoreRef === 'function' ? ignoreRef() : ignoreRef
-    if (ignore && ignore.contains(target)) return
-    const dropdown = ref.querySelector('.telpick-dropdown')
-    const inDropdown = dropdown ? dropdown.contains(target) : false
-    if (!ref.contains(target) && !inDropdown) cb()
-  }
-  document.addEventListener('click', handler, true)
-  return () => document.removeEventListener('click', handler, true)
-}

package/src/telpick.vanilla.js

@@ -1,199 +0,0 @@
-import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
-import './telpick.css'
-
-export class TelpickVanilla {
-  constructor(options = {}) {
-    this.code = options.code || null
-    this.onChange = options.onChange || (() => {})
-    this.styleOverrides = options.styleOverrides || {}
-    this.codes = []
-    this.selectedCode = this.code
-    this.isDropdownOpen = false
-    this.searchQuery = ''
-    this.container = null
-    this.dropdown = null
-    this.searchInput = null
-  }
-
-  async init(container) {
-    this.container = container
-    const res = await fetch('/resources/api/country-codes.json')
-    const data = await res.json()
-    this.codes = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
-    if (!this.code) {
-      const def = await getDefaultCountry(this.codes)
-      if (def) this.selectedCode = def.country_code
-    }
-    this.render()
-    useClickOutside(this.container, () => {
-      this.closeDropdown()
-    })
-  }
-
-  render() {
-    if (this.isDropdownOpen && this.dropdown && this.searchInput) {
-      const ul = this.dropdown.querySelector('ul')
-      if (ul) {
-        ul.innerHTML = ''
-        const filtered = !this.searchQuery 
-          ? this.codes 
-          : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
-        
-        filtered.forEach((item, index) => {
-          const li = document.createElement('li')
-          const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
-          li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
-          li.setAttribute('role', 'option')
-          li.setAttribute('aria-selected', isSelected)
-          li.onclick = () => {
-            this.selectedCode = item.country_code
-            this.onChange(item)
-            this.isDropdownOpen = false
-            this.searchQuery = ''
-            this.render()
-          }
-          
-          const flag = document.createElement('div')
-          flag.className = 'telpick-flag'
-          const img = document.createElement('img')
-          img.src = item.flag
-          img.alt = item.country
-          flag.appendChild(img)
-          li.appendChild(flag)
-          
-          const countrySpan = document.createElement('span')
-          countrySpan.textContent = item.country
-          li.appendChild(countrySpan)
-          
-          const codeSpan = document.createElement('span')
-          codeSpan.className = 'ml-auto'
-          codeSpan.textContent = item.code
-          li.appendChild(codeSpan)
-          
-          ul.appendChild(li)
-        })
-      }
-      return
-    }
-
-    this.container.innerHTML = ''
-    this.container.className = 'telpick-wrapper relative'
-    
-    const btn = document.createElement('button')
-    btn.className = 'telpick-btn'
-    btn.setAttribute('aria-expanded', this.isDropdownOpen)
-    btn.setAttribute('aria-haspopup', 'listbox')
-    Object.assign(btn.style, this.styleOverrides)
-    btn.onclick = () => {
-      this.isDropdownOpen = !this.isDropdownOpen
-      this.render()
-    }
-    
-    const flagDiv = document.createElement('div')
-    flagDiv.className = 'telpick-flag'
-    const selectedCountry = this.codes.find(c => c.country_code === this.selectedCode) || { flag: '', code: '', country: '' }
-    if (selectedCountry.flag) {
-      const img = document.createElement('img')
-      img.src = selectedCountry.flag
-      img.alt = selectedCountry.country || 'flag'
-      flagDiv.appendChild(img)
-    }
-    btn.appendChild(flagDiv)
-    
-    const codeSpan = document.createElement('span')
-    codeSpan.textContent = selectedCountry.code
-    btn.appendChild(codeSpan)
-    
-    const arrowSpan = document.createElement('span')
-    arrowSpan.className = 'telpick-arrow ml-auto'
-    arrowSpan.textContent = '▼'
-    btn.appendChild(arrowSpan)
-    this.container.appendChild(btn)
-
-    if (this.isDropdownOpen) {
-      this.dropdown = document.createElement('div')
-      this.dropdown.className = 'telpick-dropdown'
-      this.dropdown.setAttribute('role', 'listbox')
-      this.dropdown.onclick = e => e.stopPropagation()
-      this.dropdown.onmousedown = e => e.stopPropagation()
-      
-      const input = document.createElement('input')
-      input.className = 'telpick-search'
-      input.type = 'text'
-      input.placeholder = 'Buscar país...'
-      input.value = this.searchQuery
-      input.autofocus = true
-      this.searchInput = input
-      input.oninput = e => {
-        e.stopPropagation()
-        const inputEl = e.target
-        const cursorPos = inputEl.selectionStart || 0
-        const newValue = inputEl.value
-        this.searchQuery = newValue
-        this.render()
-        requestAnimationFrame(() => {
-          if (this.searchInput) {
-            this.searchInput.focus()
-            const newCursorPos = Math.min(cursorPos + 1, newValue.length)
-            this.searchInput.setSelectionRange(newCursorPos, newCursorPos)
-          }
-        })
-      }
-      input.onclick = e => e.stopPropagation()
-      input.onmousedown = e => e.stopPropagation()
-      this.dropdown.appendChild(input)
-      
-      const ul = document.createElement('ul')
-      const filtered = !this.searchQuery 
-        ? this.codes 
-        : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
-      
-      filtered.forEach((item, index) => {
-        const li = document.createElement('li')
-        const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
-        li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
-        li.setAttribute('role', 'option')
-        li.setAttribute('aria-selected', isSelected)
-        li.onclick = () => {
-          this.selectedCode = item.country_code
-          this.onChange(item)
-          this.isDropdownOpen = false
-          this.searchQuery = ''
-          this.render()
-        }
-        
-        const flag = document.createElement('div')
-        flag.className = 'telpick-flag'
-        const img = document.createElement('img')
-        img.src = item.flag
-        img.alt = item.country
-          flag.appendChild(img)
-          li.appendChild(flag)
-          
-          const countrySpan = document.createElement('span')
-          countrySpan.textContent = item.country
-          li.appendChild(countrySpan)
-          
-          const codeSpan = document.createElement('span')
-        codeSpan.className = 'ml-auto'
-        codeSpan.textContent = item.code
-        li.appendChild(codeSpan)
-        
-        ul.appendChild(li)
-      })
-      this.dropdown.appendChild(ul)
-      this.container.appendChild(this.dropdown)
-      
-      requestAnimationFrame(() => {
-        if (this.searchInput) {
-          this.searchInput.focus()
-        }
-      })
-    }
-  }
-
-  closeDropdown() {
-    this.isDropdownOpen = false
-    this.render()
-  }
-}

package/src/telpick.vue.ts

@@ -1,191 +0,0 @@
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
-import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
-import './telpick.css'
-
-export const TelpickVue = defineComponent({
-  name: 'TelpickVue',
-  props: {
-    code: { type: String, default: null },
-    styleOverrides: { type: Object, default: () => ({}) },
-    baseFlagUrl: { type: String, default: '' }
-  },
-  emits: ['update:code'],
-  setup(props, { emit }) {
-    const codes = ref<CountryCode[]>([])
-    const selectedCode = ref(props.code)
-    const isDropdownOpen = ref(false)
-    const searchQuery = ref('')
-    const wrapperRef = ref<HTMLElement | null>(null)
-    const buttonRef = ref<HTMLElement | null>(null)
-    const dropdownRef = ref<HTMLElement | null>(null)
-    const searchInputRef = ref<HTMLInputElement | null>(null)
-    const dropdownStyle = ref<Record<string, string>>({})
-
-    const handleSearchInput = (e: Event) => {
-      const input = e.target as HTMLInputElement
-      const cursorPos = input.selectionStart || 0
-      const newValue = input.value
-      searchQuery.value = newValue
-      requestAnimationFrame(() => {
-        if (searchInputRef.value) {
-          searchInputRef.value.focus()
-          const newCursorPos = Math.min(cursorPos + 1, newValue.length)
-          searchInputRef.value.setSelectionRange(newCursorPos, newCursorPos)
-        }
-      })
-    }
-
-    const selectCode = (item: CountryCode) => {
-      selectedCode.value = item.country_code
-      emit('update:code', item)
-      isDropdownOpen.value = false
-      searchQuery.value = ''
-    }
-
-    const selectedCountry = computed(() => {
-      return (
-        codes.value.find((c) => c.country_code === selectedCode.value) || {
-          country_code: selectedCode.value,
-          flag: '',
-          country: '',
-          code: '',
-        }
-      )
-    })
-
-    function getFlagUrl(flagPath: string, countryCode: string) {
-      const base = (props.baseFlagUrl || '').replace(/\/$/, '')
-      if (!base) return flagPath || (countryCode ? `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png` : '')
-      if (base.includes('flagcdn.com')) {
-        const code = (countryCode || (flagPath && flagPath.replace(/^.*\//, '').replace(/\.[^.]+$/, '')) || '').toLowerCase()
-        return code ? `${base}/${code}.png` : ''
-      }
-      const filename = flagPath ? flagPath.replace(/^.*\//, '') : `${(countryCode || '').toLowerCase()}.webp`
-      return filename ? `${base}/${filename}` : ''
-    }
-
-    function updateDropdownPosition() {
-      if (!buttonRef.value) return
-      const rect = buttonRef.value.getBoundingClientRect()
-      dropdownStyle.value = {
-        position: 'fixed',
-        top: `${rect.bottom + 4}px`,
-        left: `${rect.left}px`,
-        marginTop: '0'
-      }
-    }
-
-    const filteredCodes = computed(() => {
-      if (!searchQuery.value) return codes.value
-      return codes.value.filter((c) =>
-        c.country.toLowerCase().includes(searchQuery.value.toLowerCase())
-      )
-    })
-
-    watch(() => props.code, (newCode) => {
-      if (newCode !== undefined && newCode !== null) {
-        selectedCode.value = newCode
-      }
-    })
-
-    const scrollResizeCleanup = ref<(() => void) | null>(null)
-    watch(isDropdownOpen, async () => {
-      if (scrollResizeCleanup.value) {
-        scrollResizeCleanup.value()
-        scrollResizeCleanup.value = null
-      }
-      if (isDropdownOpen.value) {
-        await nextTick()
-        updateDropdownPosition()
-        if (searchInputRef.value) searchInputRef.value.focus()
-        const onScrollResize = () => updateDropdownPosition()
-        window.addEventListener('scroll', onScrollResize, true)
-        window.addEventListener('resize', onScrollResize)
-        scrollResizeCleanup.value = () => {
-          window.removeEventListener('scroll', onScrollResize, true)
-          window.removeEventListener('resize', onScrollResize)
-        }
-      }
-    })
-    onUnmounted(() => {
-      if (scrollResizeCleanup.value) scrollResizeCleanup.value()
-    })
-
-    onMounted(async () => {
-      const response = await fetch('/resources/api/country-codes.json')
-      const data = await response.json()
-      codes.value = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
-      if (!props.code) {
-        const def = await getDefaultCountry(codes.value)
-        if (def) selectCode(def)
-      }
-      if (wrapperRef.value) {
-        const remove = useClickOutside(wrapperRef.value, () => {
-          isDropdownOpen.value = false
-        }, () => dropdownRef.value)
-        onUnmounted(remove)
-      }
-    })
-
-    return {
-      codes,
-      selectedCode,
-      isDropdownOpen,
-      searchQuery,
-      selectCode,
-      selectedCountry,
-      filteredCodes,
-      wrapperRef,
-      buttonRef,
-      dropdownRef,
-      dropdownStyle,
-      searchInputRef,
-      handleSearchInput,
-      getFlagUrl
-    }
-  },
-  template: `
-    <div class="telpick-wrapper relative" ref="wrapperRef">
-      <button
-        ref="buttonRef"
-        @click="isDropdownOpen = !isDropdownOpen"
-        class="telpick-btn"
-        :style="styleOverrides"
-        :aria-expanded="isDropdownOpen"
-        aria-haspopup="listbox"
-      >
-        <div class="telpick-flag">
-          <img v-if="getFlagUrl(selectedCountry.flag, selectedCountry.country_code)" :src="getFlagUrl(selectedCountry.flag, selectedCountry.country_code)" :alt="selectedCountry.country || 'flag'" />
-        </div>
-        <span>{{ selectedCountry.code }}</span>
-        <span class="telpick-arrow ml-auto">▼</span>
-      </button>
-      <Teleport to="body">
-        <Transition name="telpick-dropdown">
-          <div v-if="isDropdownOpen" ref="dropdownRef" class="telpick-dropdown" role="listbox" :style="dropdownStyle" @click.stop @mousedown.stop>
-            <input 
-              ref="searchInputRef" 
-              v-model="searchQuery" 
-              type="text" 
-              placeholder="Buscar país..." 
-              class="telpick-search" 
-              @input="handleSearchInput"
-              @click.stop
-              @mousedown.stop
-              autofocus 
-            />
-            <ul>
-              <li v-for="(item, index) in filteredCodes" :key="\`\${item.country_code}-\${index}\`" @click="selectCode(item)" :class="['telpick-item', { 'telpick-item-selected': item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined }]" role="option" :aria-selected="item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined">
-                <div class="telpick-flag">
-                  <img :src="getFlagUrl(item.flag, item.country_code)" :alt="item.country" />
-                </div>
-                <span>{{ item.country }}</span>
-                <span class="ml-auto">{{ item.code }}</span>
-              </li>
-            </ul>
-          </div>
-        </Transition>
-      </Teleport>
-    </div>
-  `
-})

package/src/telpick.wrappers.jsx

@@ -1,37 +0,0 @@
-// Wrapper para Vue, React y CDN usando Vanilla JS
-// Vue y React pueden usar el componente vanilla vía ref
-
-// Vue wrapper
-export function TelpickVue(props, { emit }) {
-	let telpickInstance = null
-	return {
-		mounted() {
-			telpickInstance = new window.Telpick({
-				code: props.code,
-				onChange: country => emit('update:code', country),
-				styleOverrides: props.styleOverrides || {}
-			})
-			telpickInstance.init(this.$el)
-		},
-		beforeUnmount() {
-			telpickInstance && telpickInstance.destroy()
-		},
-		render() {
-			return null // Render handled by vanilla
-		}
-	}
-}
-
-// React wrapper
-import React, { useRef, useEffect } from 'react'
-export function TelpickReact({ code, onChange, styleOverrides }) {
-	const ref = useRef()
-	useEffect(() => {
-		const telpickInstance = new window.Telpick({ code, onChange, styleOverrides })
-		telpickInstance.init(ref.current)
-		return () => telpickInstance.destroy()
-	}, [code, onChange, styleOverrides])
-	return <div ref={ref}></div>
-}
-
-// CDN usage: window.Telpick