telpick 2.0.0

package/dist/telpick.es.js

@@ -0,0 +1,787 @@
+const S = [
+  {
+    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 i = document.currentScript.src.replace(/\/[^/]*$/, "");
+    typeof globalThis < "u" ? globalThis.__TELPICK_SCRIPT_BASE__ = i : typeof window < "u" && (window.__TELPICK_SCRIPT_BASE__ = i);
+  }
+})();
+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` : "";
+}
+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);
+  }
+  _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 = [...S].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((u) => u.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 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 b = document.createElement("div");
+          b.className = "telpick-flag";
+          const C = this._getFlagUrl(t.flag, t.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);
+          }
+          y.appendChild(b);
+          const A = document.createElement("span");
+          A.textContent = t.country, y.appendChild(A);
+          const m = document.createElement("span");
+          m.className = "ml-auto", m.textContent = t.code, y.appendChild(m), f.appendChild(y);
+        }), requestAnimationFrame(() => {
+          if (e) {
+            e.focus();
+            const t = Math.min(_ + 1, g.length);
+            e.setSelectionRange(t, t);
+          }
+        })) : 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 = () => {
+          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);
+        }
+        d.appendChild(g);
+        const h = document.createElement("span");
+        h.textContent = c.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(() => {
+        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 = T;
+export {
+  T as Telpick
+};