telpick 2.0.0 → 2.0.1

package/dist/telpick.es.js

@@ -563,59 +563,75 @@ function P() {
   return i ? `${i.replace(/\/$/, "")}/assets/flags` : "";
 }
 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: c = 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);
   }
-  _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 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";
   }
-  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(c, r) {
+    const o = c ? c.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` : "";
+      }
+      return `${t}/${o}`;
+    }
+    return c || (r ? `/flags/${String(r).toLowerCase()}.webp` : "");
+  }
+  async init(c) {
+    if (this.container = c, 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;
+      let t = null;
       for (const l of o)
         try {
-          if (s = await Promise.race([
+          if (t = await Promise.race([
             l(),
-            new Promise((r) => setTimeout(() => r(null), 3e3))
-          ]), s)
+            new Promise((s) => setTimeout(() => s(null), 3e3))
+          ]), t)
             break;
         } catch {
         }
-      if (!s)
+      if (!t)
         try {
           const l = Intl.DateTimeFormat().resolvedOptions().timeZone, e = {
             "America/Lima": "PE",
@@ -680,105 +696,107 @@ class T {
             "Africa/Nairobi": "KE",
             "Africa/Lagos": "NG"
           }[l];
-          e && (s = this.codes.find((u) => u.country_code === e));
+          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");
+        const l = this.codes.find((s) => s.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();
+    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 c = document.createElement("button");
+    c.className = "telpick-btn", Object.assign(c.style, this.styleOverrides), c.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);
+    c.appendChild(r);
     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();
+    l.textContent = o.code, c.appendChild(l);
+    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();
       const e = document.createElement("input");
-      e.className = "telpick-search", e.type = "text", e.placeholder = "Buscar país...", e.value = this.searchQuery, e.oninput = (c) => {
+      e.className = "telpick-search", e.type = "text", e.placeholder = "Buscar país...", e.value = this.searchQuery, e.oninput = (n) => {
         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();
+        n.stopPropagation();
+        const d = n.target, _ = d.selectionStart || 0, f = d.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);
+      }, e.onclick = (n) => n.stopPropagation(), e.onmousedown = (n) => n.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;
+      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 = c.country_code, this.onChange(c), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
+          this.selectedCode = n.country_code, this.onChange(n), 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(n.flag, n.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);
         }
-        d.appendChild(g);
+        d.appendChild(f);
         const h = document.createElement("span");
-        h.textContent = c.country, d.appendChild(h);
+        h.textContent = n.country, d.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 = n.code, d.appendChild(w), u.appendChild(d);
+      }), 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 = (c) => {
+      const r = c.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(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"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telpick",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "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 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
+
 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

@@ -29,14 +29,29 @@ 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` : '')
@@ -141,6 +156,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 +302,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 +324,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 +336,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.react.tsx

@@ -1,13 +1,28 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
+import { createPortal } from 'react-dom'
 import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
 import './telpick.css'
 
-export function TelpickReact({ code, onChange, styleOverrides }: TelpickProps) {
+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 dropdownRef = useRef<HTMLDivElement>(null)
+  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(() => {
@@ -35,12 +50,31 @@ export function TelpickReact({ code, onChange, styleOverrides }: TelpickProps) {
     }
   }, [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 (dropdownRef.current) {
-      const remove = useClickOutside(dropdownRef.current, () => setDropdownOpen(false))
+    if (wrapperRef.current) {
+      const remove = useClickOutside(wrapperRef.current, () => setDropdownOpen(false), () => portalDropdownRef.current)
       return remove
     }
-  }, [dropdownRef])
+  }, [])
 
   useEffect(() => {
     if (isDropdownOpen && searchInputRef.current) {
@@ -80,9 +114,58 @@ export function TelpickReact({ code, onChange, styleOverrides }: TelpickProps) {
     })
   }
 
+  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={dropdownRef}>
+    <div className="telpick-wrapper relative" ref={wrapperRef}>
       <button
+        ref={buttonRef}
         onClick={() => setDropdownOpen(!isDropdownOpen)}
         className="telpick-btn"
         style={styleOverrides}
@@ -90,51 +173,14 @@ export function TelpickReact({ code, onChange, styleOverrides }: TelpickProps) {
         aria-haspopup="listbox"
       >
         <div className="telpick-flag">
-          {selectedCountry.flag && <img src={selectedCountry.flag} alt={selectedCountry.country || '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>
-      {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>
-      )}
+      {createPortal(dropdownContent, document.body)}
     </div>
   )
 }

package/src/telpick.ts

@@ -9,6 +9,7 @@ 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> {
@@ -142,15 +143,20 @@ export async function getDefaultCountry(codes: CountryCode[]): Promise<CountryCo
   return codes.find(c => c.country_code === 'CO') || null
 }
 
-export function useClickOutside(ref: HTMLElement, cb: () => void) {
+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 && !ref.contains(target)) {
-      const dropdown = ref.querySelector('.telpick-dropdown')
-      if (!dropdown || !dropdown.contains(target)) {
-        cb()
-      }
-    }
+    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.vue.ts

@@ -6,7 +6,8 @@ export const TelpickVue = defineComponent({
   name: 'TelpickVue',
   props: {
     code: { type: String, default: null },
-    styleOverrides: { type: Object, default: () => ({}) }
+    styleOverrides: { type: Object, default: () => ({}) },
+    baseFlagUrl: { type: String, default: '' }
   },
   emits: ['update:code'],
   setup(props, { emit }) {
@@ -14,8 +15,11 @@ export const TelpickVue = defineComponent({
     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
@@ -49,6 +53,28 @@ export const TelpickVue = defineComponent({
       )
     })
 
+    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) =>
@@ -62,14 +88,28 @@ export const TelpickVue = defineComponent({
       }
     })
 
+    const scrollResizeCleanup = ref<(() => void) | null>(null)
     watch(isDropdownOpen, async () => {
+      if (scrollResizeCleanup.value) {
+        scrollResizeCleanup.value()
+        scrollResizeCleanup.value = null
+      }
       if (isDropdownOpen.value) {
         await nextTick()
-        if (searchInputRef.value) {
-          searchInputRef.value.focus()
+        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')
@@ -79,10 +119,10 @@ export const TelpickVue = defineComponent({
         const def = await getDefaultCountry(codes.value)
         if (def) selectCode(def)
       }
-      if (dropdownRef.value) {
-        const remove = useClickOutside(dropdownRef.value, () => {
+      if (wrapperRef.value) {
+        const remove = useClickOutside(wrapperRef.value, () => {
           isDropdownOpen.value = false
-        })
+        }, () => dropdownRef.value)
         onUnmounted(remove)
       }
     })
@@ -95,14 +135,19 @@ export const TelpickVue = defineComponent({
       selectCode,
       selectedCountry,
       filteredCodes,
+      wrapperRef,
+      buttonRef,
       dropdownRef,
+      dropdownStyle,
       searchInputRef,
-      handleSearchInput
+      handleSearchInput,
+      getFlagUrl
     }
   },
   template: `
-    <div class="telpick-wrapper relative" ref="dropdownRef">
+    <div class="telpick-wrapper relative" ref="wrapperRef">
       <button
+        ref="buttonRef"
         @click="isDropdownOpen = !isDropdownOpen"
         class="telpick-btn"
         :style="styleOverrides"
@@ -110,35 +155,37 @@ export const TelpickVue = defineComponent({
         aria-haspopup="listbox"
       >
         <div class="telpick-flag">
-          <img v-if="selectedCountry.flag" :src="selectedCountry.flag" :alt="selectedCountry.country || '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>
-      <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>
+      <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>
   `
 })