telpick 2.0.0 → 2.0.2

package/dist/telpick.es.js

@@ -554,70 +554,86 @@ 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: a = null, onChange: n = () => {
-  }, styleOverrides: o = {}, baseFlagUrl: s = "" } = {}) {
-    this.code = a, this.onChange = n, this.styleOverrides = o, this.baseFlagUrl = s || P(), this.codes = [], this.selectedCode = a, this.isDropdownOpen = !1, this.searchQuery = "", this.container = null, this.dropdown = null, this._outsideHandler = null, this._getFlagUrl = this._getFlagUrl.bind(this);
+  constructor({ code: n = null, onChange: r = () => {
+  }, styleOverrides: o = {}, baseFlagUrl: t = "" } = {}) {
+    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);
   }
-  _getFlagUrl(a, n) {
-    const o = a ? a.replace(/^.*\//, "") : n ? `${String(n).toLowerCase()}.webp` : "";
-    return o ? this.baseFlagUrl ? `${this.baseFlagUrl.replace(/\/$/, "")}/${o}` : a || (n ? `/flags/${String(n).toLowerCase()}.webp` : "") : "";
+  _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";
   }
-  async init(a) {
-    if (this.container = a, this.codes = [...S].sort((o, s) => o.country.localeCompare(s.country, "es")), this.code) {
-      const o = this.codes.find((s) => s.country_code === this.code);
+  _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 = [...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 {
       const o = [
         async () => {
           try {
-            const r = await (await fetch("https://ip-api.com/json/?fields=countryCode")).json();
-            if (r.countryCode)
-              return this.codes.find((e) => e.country_code === r.countryCode);
+            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 r = await (await fetch("https://get.geojs.io/v1/ip/country.json")).json();
-            if (r.country)
-              return this.codes.find((e) => e.country_code === r.country);
+            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 r = await (await fetch("https://ipapi.co/json/")).json();
-            if (r.country_code)
-              return this.codes.find((e) => e.country_code === r.country_code);
+            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 s = null;
-      for (const l of o)
+      let t = null;
+      for (const i of o)
         try {
-          if (s = await Promise.race([
-            l(),
-            new Promise((r) => setTimeout(() => r(null), 3e3))
-          ]), s)
+          if (t = await Promise.race([
+            i(),
+            new Promise((s) => setTimeout(() => s(null), 3e3))
+          ]), t)
             break;
         } catch {
         }
-      if (!s)
+      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",
@@ -679,106 +695,108 @@ class T {
             "Africa/Johannesburg": "ZA",
             "Africa/Nairobi": "KE",
             "Africa/Lagos": "NG"
-          }[l];
-          e && (s = this.codes.find((u) => u.country_code === e));
+          }[i];
+          e && (t = this.codes.find((u) => u.country_code === e));
         } catch {
         }
-      if (s)
-        this.selectedCode = s.country_code;
+      if (t)
+        this.selectedCode = t.country_code;
       else {
-        const l = this.codes.find((r) => r.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();
-    const n = this.codes.find((o) => o.country_code === this.selectedCode);
-    n && this.onChange(n), this._setupOutsideClick();
+    const r = this.codes.find((o) => o.country_code === this.selectedCode);
+    r && this.onChange(r), this._setupOutsideClick();
   }
   render() {
-    this.container.innerHTML = "";
-    const a = document.createElement("button");
-    a.className = "telpick-btn", Object.assign(a.style, this.styleOverrides), a.onclick = () => {
+    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 n = document.createElement("div");
-    n.className = "telpick-flag";
-    const o = this.codes.find((e) => e.country_code === this.selectedCode) || { country_code: "", code: "", country: "", flag: "" }, s = this._getFlagUrl(o.flag, o.country_code);
-    if (s) {
+    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 = s, e.className = "w-full h-full object-cover", e.alt = o.country || "flag", e.loading = "lazy", e.referrerPolicy = "no-referrer", n.appendChild(e);
+      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);
     }
-    a.appendChild(n);
-    const l = document.createElement("span");
-    l.textContent = o.code, a.appendChild(l);
-    const r = document.createElement("span");
-    if (r.className = "ml-auto", r.textContent = "▼", a.appendChild(r), this.container.appendChild(a), this.isDropdownOpen) {
+    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 h;
         c.stopPropagation();
-        const d = c.target, _ = d.selectionStart || 0, g = d.value;
-        this.searchQuery = g;
-        const f = (h = this.dropdown) == null ? void 0 : h.querySelector("ul");
-        f ? (f.innerHTML = "", (this.searchQuery ? this.codes.filter((t) => t.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((t) => {
-          const y = document.createElement("li"), E = t.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
-          y.className = `telpick-item ${E ? "telpick-item-selected" : ""}`, y.onclick = () => {
-            this.selectedCode = t.country_code, this.onChange(t), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
+        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) => {
+          const g = document.createElement("li"), E = a.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
+          g.className = `telpick-item ${E ? "telpick-item-selected" : ""}`, g.onclick = () => {
+            this.selectedCode = a.country_code, this.onChange(a), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
           };
           const b = document.createElement("div");
           b.className = "telpick-flag";
-          const C = this._getFlagUrl(t.flag, t.country_code);
+          const C = this._getFlagUrl(a.flag, a.country_code);
           if (C) {
-            const p = document.createElement("img");
-            p.src = C, p.className = "w-full h-full object-cover", p.alt = t.country || "flag", p.loading = "lazy", p.referrerPolicy = "no-referrer", b.appendChild(p);
+            const y = document.createElement("img");
+            y.src = C, y.className = "w-full h-full object-cover", y.alt = a.country || "flag", y.loading = "lazy", y.referrerPolicy = "no-referrer", b.appendChild(y);
           }
-          y.appendChild(b);
+          g.appendChild(b);
           const A = document.createElement("span");
-          A.textContent = t.country, y.appendChild(A);
+          A.textContent = a.country, g.appendChild(A);
           const m = document.createElement("span");
-          m.className = "ml-auto", m.textContent = t.code, y.appendChild(m), f.appendChild(y);
+          m.className = "ml-auto", m.textContent = a.code, g.appendChild(m), p.appendChild(g);
         }), requestAnimationFrame(() => {
           if (e) {
             e.focus();
-            const t = Math.min(_ + 1, g.length);
-            e.setSelectionRange(t, t);
+            const a = Math.min(_ + 1, f.length);
+            e.setSelectionRange(a, a);
           }
         })) : this.render();
       }, 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((c) => c.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((c) => {
-        const d = document.createElement("li"), _ = c.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
-        d.className = `telpick-item ${_ ? "telpick-item-selected" : ""}`, d.setAttribute("aria-selected", _), d.onclick = () => {
+        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 g = document.createElement("div");
-        g.className = "telpick-flag";
-        const f = this._getFlagUrl(c.flag, c.country_code);
-        if (f) {
-          const t = document.createElement("img");
-          t.src = f, t.className = "w-full h-full object-cover", t.alt = c.country || "flag", t.loading = "lazy", t.referrerPolicy = "no-referrer", g.appendChild(t);
+        const f = document.createElement("div");
+        f.className = "telpick-flag";
+        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 = c.country || "flag", a.loading = "lazy", a.referrerPolicy = "no-referrer", f.appendChild(a);
         }
-        d.appendChild(g);
+        l.appendChild(f);
         const h = document.createElement("span");
-        h.textContent = c.country, d.appendChild(h);
+        h.textContent = c.country, l.appendChild(h);
         const w = document.createElement("span");
-        w.className = "ml-auto", w.textContent = c.code, d.appendChild(w), u.appendChild(d);
-      }), this.dropdown.appendChild(u), this.container.appendChild(this.dropdown), requestAnimationFrame(() => {
+        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(() => {
         e && e.focus();
       });
     }
   }
   _setupOutsideClick() {
-    this._outsideHandler && document.removeEventListener("click", this._outsideHandler), this._outsideHandler = (a) => {
-      const n = a.target;
-      if (this.isDropdownOpen && this.container && n) {
-        const o = this.container.querySelector(".telpick-dropdown");
-        !this.container.contains(n) && (!o || !o.contains(n)) && (this.isDropdownOpen = !1, this.render());
+    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("mousedown", this._outsideHandler), this.container.innerHTML = "";
+    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 = T;

package/dist/telpick.umd.js

@@ -1 +1 @@
-(function(i,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(i=typeof globalThis<"u"?globalThis:i||self,w(i.Telpick={}))})(this,function(i){"use strict";const w="",P=[{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 k(){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:a=null,onChange:n=()=>{},styleOverrides:o={},baseFlagUrl:s=""}={}){this.code=a,this.onChange=n,this.styleOverrides=o,this.baseFlagUrl=s||k(),this.codes=[],this.selectedCode=a,this.isDropdownOpen=!1,this.searchQuery="",this.container=null,this.dropdown=null,this._outsideHandler=null,this._getFlagUrl=this._getFlagUrl.bind(this)}_getFlagUrl(a,n){const o=a?a.replace(/^.*\//,""):n?`${String(n).toLowerCase()}.webp`:"";return o?this.baseFlagUrl?`${this.baseFlagUrl.replace(/\/$/,"")}/${o}`:a||(n?`/flags/${String(n).toLowerCase()}.webp`:""):""}async init(a){if(this.container=a,this.codes=[...P].sort((o,s)=>o.country.localeCompare(s.country,"es")),this.code){const o=this.codes.find(s=>s.country_code===this.code);o&&(this.selectedCode=o.country_code)}else{const o=[async()=>{try{const r=await(await fetch("https://ip-api.com/json/?fields=countryCode")).json();if(r.countryCode)return this.codes.find(e=>e.country_code===r.countryCode)}catch{}return null},async()=>{try{const r=await(await fetch("https://get.geojs.io/v1/ip/country.json")).json();if(r.country)return this.codes.find(e=>e.country_code===r.country)}catch{}return null},async()=>{try{const r=await(await fetch("https://ipapi.co/json/")).json();if(r.country_code)return this.codes.find(e=>e.country_code===r.country_code)}catch{}return null}];let s=null;for(const l of o)try{if(s=await Promise.race([l(),new Promise(r=>setTimeout(()=>r(null),3e3))]),s)break}catch{}if(!s)try{const l=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"}[l];e&&(s=this.codes.find(f=>f.country_code===e))}catch{}if(s)this.selectedCode=s.country_code;else{const l=this.codes.find(r=>r.country_code==="CO");l&&(this.selectedCode=l.country_code)}}this.render();const n=this.codes.find(o=>o.country_code===this.selectedCode);n&&this.onChange(n),this._setupOutsideClick()}render(){this.container.innerHTML="";const a=document.createElement("button");a.className="telpick-btn",Object.assign(a.style,this.styleOverrides),a.onclick=()=>{this.isDropdownOpen=!this.isDropdownOpen,this.render()};const n=document.createElement("div");n.className="telpick-flag";const o=this.codes.find(e=>e.country_code===this.selectedCode)||{country_code:"",code:"",country:"",flag:""},s=this._getFlagUrl(o.flag,o.country_code);if(s){const e=document.createElement("img");e.src=s,e.className="w-full h-full object-cover",e.alt=o.country||"flag",e.loading="lazy",e.referrerPolicy="no-referrer",n.appendChild(e)}a.appendChild(n);const l=document.createElement("span");l.textContent=o.code,a.appendChild(l);const r=document.createElement("span");if(r.className="ml-auto",r.textContent="▼",a.appendChild(r),this.container.appendChild(a),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 _;c.stopPropagation();const d=c.target,b=d.selectionStart||0,g=d.value;this.searchQuery=g;const y=(_=this.dropdown)==null?void 0:_.querySelector("ul");y?(y.innerHTML="",(this.searchQuery?this.codes.filter(t=>t.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(t=>{const p=document.createElement("li"),B=t.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;p.className=`telpick-item ${B?"telpick-item-selected":""}`,p.onclick=()=>{this.selectedCode=t.country_code,this.onChange(t),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const C=document.createElement("div");C.className="telpick-flag";const S=this._getFlagUrl(t.flag,t.country_code);if(S){const h=document.createElement("img");h.src=S,h.className="w-full h-full object-cover",h.alt=t.country||"flag",h.loading="lazy",h.referrerPolicy="no-referrer",C.appendChild(h)}p.appendChild(C);const T=document.createElement("span");T.textContent=t.country,p.appendChild(T);const A=document.createElement("span");A.className="ml-auto",A.textContent=t.code,p.appendChild(A),y.appendChild(p)}),requestAnimationFrame(()=>{if(e){e.focus();const t=Math.min(b+1,g.length);e.setSelectionRange(t,t)}})):this.render()},e.onclick=c=>c.stopPropagation(),e.onmousedown=c=>c.stopPropagation(),this.dropdown.appendChild(e);const f=document.createElement("ul");f.style.maxHeight="130px",f.style.overflowY="auto",(this.searchQuery?this.codes.filter(c=>c.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(c=>{const d=document.createElement("li"),b=c.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=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 t=document.createElement("img");t.src=y,t.className="w-full h-full object-cover",t.alt=c.country||"flag",t.loading="lazy",t.referrerPolicy="no-referrer",g.appendChild(t)}d.appendChild(g);const _=document.createElement("span");_.textContent=c.country,d.appendChild(_);const m=document.createElement("span");m.className="ml-auto",m.textContent=c.code,d.appendChild(m),f.appendChild(d)}),this.dropdown.appendChild(f),this.container.appendChild(this.dropdown),requestAnimationFrame(()=>{e&&e.focus()})}}_setupOutsideClick(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._outsideHandler=a=>{const n=a.target;if(this.isDropdownOpen&&this.container&&n){const o=this.container.querySelector(".telpick-dropdown");!this.container.contains(n)&&(!o||!o.contains(n))&&(this.isDropdownOpen=!1,this.render())}},document.addEventListener("click",this._outsideHandler,!0)}destroy(){this._outsideHandler&&document.removeEventListener("mousedown",this._outsideHandler),this.container.innerHTML=""}}window.Telpick=E,i.Telpick=E,Object.defineProperty(i,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.0",
+  "version": "2.0.2",
   "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,12 +6,16 @@ import Telpick from './telpick.js'
 
 window.Telpick = Telpick
 
+// 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')
   if (!container) return
 
   const telpick = new Telpick({
     code: null,
+    baseFlagUrl: flagsBase,
     onChange: (country) => {
       const infoEl = document.getElementById('selected-info')
       if (infoEl) {

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 {
@@ -29,17 +33,33 @@ class Telpick {
     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 rect = this.container.getBoundingClientRect()
+    this.dropdown.style.position = 'fixed'
+    this.dropdown.style.top = `${rect.bottom + 4}px`
+    this.dropdown.style.left = `${rect.left}px`
+    this.dropdown.style.marginTop = '0'
+  }
+
   _getFlagUrl(flagPathFromJson, countryCode) {
     const filename = flagPathFromJson ? flagPathFromJson.replace(/^.*\//, '') : (countryCode ? `${String(countryCode).toLowerCase()}.webp` : '')
-    if (!filename) return ''
+    if (!filename && !countryCode) return ''
     if (this.baseFlagUrl) {
       const base = this.baseFlagUrl.replace(/\/$/, '')
+      if (base.includes('flagcdn.com')) {
+        const code = String(countryCode || (filename && filename.replace(/\.[^.]+$/, '')) || '').toLowerCase()
+        return code ? `${base}/${code}.png` : ''
+      }
       return `${base}/${filename}`
     }
-    return flagPathFromJson || (countryCode ? `/flags/${String(countryCode).toLowerCase()}.webp` : '')
+    
+    return ''
   }
 
   async init(container) {
@@ -141,6 +161,14 @@ class Telpick {
   }
 
   render() {
+    if (this._scrollResizeCleanup) {
+      this._scrollResizeCleanup()
+      this._scrollResizeCleanup = null
+    }
+    if (this.dropdown && this.dropdown.parentNode) {
+      this.dropdown.parentNode.removeChild(this.dropdown)
+      this.dropdown = null
+    }
     this.container.innerHTML = ''
     const btn = document.createElement('button')
     btn.className = 'telpick-btn'
@@ -279,8 +307,15 @@ class Telpick {
         ul.appendChild(li)
       })
       this.dropdown.appendChild(ul)
-      this.container.appendChild(this.dropdown)
-      
+      document.body.appendChild(this.dropdown)
+      this._updateDropdownPosition()
+      this._scrollResizeCleanup = () => {
+        window.removeEventListener('scroll', this._boundUpdatePosition, true)
+        window.removeEventListener('resize', this._boundUpdatePosition)
+      }
+      window.addEventListener('scroll', this._boundUpdatePosition, true)
+      window.addEventListener('resize', this._boundUpdatePosition)
+
       requestAnimationFrame(() => {
         if (input) {
           input.focus()
@@ -294,8 +329,9 @@ class Telpick {
     this._outsideHandler = e => {
       const target = e.target
       if (this.isDropdownOpen && this.container && target) {
-        const dropdown = this.container.querySelector('.telpick-dropdown')
-        if (!this.container.contains(target) && (!dropdown || !dropdown.contains(target))) {
+        const inContainer = this.container.contains(target)
+        const inDropdown = this.dropdown && this.dropdown.contains(target)
+        if (!inContainer && !inDropdown) {
           this.isDropdownOpen = false
           this.render()
         }
@@ -305,7 +341,15 @@ class Telpick {
   }
 
   destroy() {
-    if (this._outsideHandler) document.removeEventListener('mousedown', this._outsideHandler)
+    if (this._outsideHandler) document.removeEventListener('click', this._outsideHandler)
+    if (this._scrollResizeCleanup) {
+      this._scrollResizeCleanup()
+      this._scrollResizeCleanup = null
+    }
+    if (this.dropdown && this.dropdown.parentNode) {
+      this.dropdown.parentNode.removeChild(this.dropdown)
+      this.dropdown = null
+    }
     this.container.innerHTML = ''
   }
 }

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,140 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
-import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
-import './telpick.css'
-
-export function TelpickReact({ code, onChange, styleOverrides }: TelpickProps) {
-  const [codes, setCodes] = useState<CountryCode[]>([])
-  const [selectedCode, setSelectedCode] = useState(code)
-  const [isDropdownOpen, setDropdownOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
-  const dropdownRef = 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])
-
-  useEffect(() => {
-    if (dropdownRef.current) {
-      const remove = useClickOutside(dropdownRef.current, () => setDropdownOpen(false))
-      return remove
-    }
-  }, [dropdownRef])
-
-  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)
-      }
-    })
-  }
-
-  return (
-    <div className="telpick-wrapper relative" ref={dropdownRef}>
-      <button
-        onClick={() => setDropdownOpen(!isDropdownOpen)}
-        className="telpick-btn"
-        style={styleOverrides}
-        aria-expanded={isDropdownOpen}
-        aria-haspopup="listbox"
-      >
-        <div className="telpick-flag">
-          {selectedCountry.flag && <img src={selectedCountry.flag} alt={selectedCountry.country || 'flag'} />}
-        </div>
-        <span>{selectedCountry.code}</span>
-        <span className="telpick-arrow ml-auto">▼</span>
-      </button>
-      {isDropdownOpen && (
-        <div 
-          className="telpick-dropdown" 
-          role="listbox"
-          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={item.flag} alt={item.country} />
-                </div>
-                <span>{item.country}</span>
-                <span className="ml-auto">{item.code}</span>
-              </li>
-              )
-            })}
-          </ul>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/telpick.ts

@@ -1,157 +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>>;
-}
-
-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) {
-  function handler(e: MouseEvent) {
-    const target = e.target as Node
-    if (ref && target && !ref.contains(target)) {
-      const dropdown = ref.querySelector('.telpick-dropdown')
-      if (!dropdown || !dropdown.contains(target)) {
-        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,144 +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: () => ({}) }
-  },
-  emits: ['update:code'],
-  setup(props, { emit }) {
-    const codes = ref<CountryCode[]>([])
-    const selectedCode = ref(props.code)
-    const isDropdownOpen = ref(false)
-    const searchQuery = ref('')
-    const dropdownRef = ref<HTMLElement | null>(null)
-    const searchInputRef = ref<HTMLInputElement | null>(null)
-
-    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: '',
-        }
-      )
-    })
-
-    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
-      }
-    })
-
-    watch(isDropdownOpen, async () => {
-      if (isDropdownOpen.value) {
-        await nextTick()
-        if (searchInputRef.value) {
-          searchInputRef.value.focus()
-        }
-      }
-    })
-
-    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 (dropdownRef.value) {
-        const remove = useClickOutside(dropdownRef.value, () => {
-          isDropdownOpen.value = false
-        })
-        onUnmounted(remove)
-      }
-    })
-
-    return {
-      codes,
-      selectedCode,
-      isDropdownOpen,
-      searchQuery,
-      selectCode,
-      selectedCountry,
-      filteredCodes,
-      dropdownRef,
-      searchInputRef,
-      handleSearchInput
-    }
-  },
-  template: `
-    <div class="telpick-wrapper relative" ref="dropdownRef">
-      <button
-        @click="isDropdownOpen = !isDropdownOpen"
-        class="telpick-btn"
-        :style="styleOverrides"
-        :aria-expanded="isDropdownOpen"
-        aria-haspopup="listbox"
-      >
-        <div class="telpick-flag">
-          <img v-if="selectedCountry.flag" :src="selectedCountry.flag" :alt="selectedCountry.country || 'flag'" />
-        </div>
-        <span>{{ selectedCountry.code }}</span>
-        <span class="telpick-arrow ml-auto">▼</span>
-      </button>
-      <Transition name="telpick-dropdown">
-        <div v-if="isDropdownOpen" class="telpick-dropdown" role="listbox" @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="item.flag" :alt="item.country" />
-              </div>
-              <span>{{ item.country }}</span>
-              <span class="ml-auto">{{ item.code }}</span>
-            </li>
-          </ul>
-        </div>
-      </Transition>
-    </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