telpick 1.0.6 → 1.0.8

package/dist/telpick.umd.js

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

package/dist/telpick.vue.es.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telpick",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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",
@@ -8,6 +8,7 @@
   "exports": {
     ".": {
       "import": "./dist/telpick.es.js",
+      "require": "./dist/telpick.umd.js",
       "types": "./dist/telpick.d.ts"
     },
     "./vue": {
@@ -34,7 +35,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && vite build --config vite.config.umd.js",
     "build:demo": "vite build --config vite.config.demo.js",
     "deploy:demo": "npm run build:demo && gh-pages -d docs",
     "dev": "vite",

package/src/telpick.js

@@ -1,3 +1,5 @@
+import countryCodesData from './assets/country-code.json'
+
 class Telpick {
   constructor({ code = null, onChange = () => {}, styleOverrides = {} } = {}) {
     this.code = code
@@ -12,11 +14,19 @@ class Telpick {
     this._outsideHandler = null
   }
 
+  _getAssetsBase() {
+    if (typeof import.meta !== 'undefined' && import.meta.url) {
+      try {
+        return new URL('./assets', import.meta.url).href + '/'
+      } catch {}
+    }
+    return ''
+  }
+
   async init(container) {
     this.container = container
-    const res = await fetch('src/assets/country-code.json')
-    const data = await res.json()
-    this.codes = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
+    this.codes = [...countryCodesData].sort((a, b) => a.country.localeCompare(b.country, 'es'))
+    this._assetsBase = this._getAssetsBase()
     if (!this.code) {
       const services = [
         async () => {
@@ -126,7 +136,7 @@ class Telpick {
     const selectedCountry = this.codes.find(c => c.country_code === this.selectedCode) || { flag: '', code: '', country: '' }
     if (selectedCountry.flag) {
       const img = document.createElement('img')
-      img.src = 'src/assets' + selectedCountry.flag
+      img.src = (this._assetsBase || 'src/assets') + (selectedCountry.flag.startsWith('/') ? selectedCountry.flag : '/' + selectedCountry.flag)
       img.className = 'w-full h-full object-cover'
       img.alt = 'flag'
       flagDiv.appendChild(img)
@@ -176,7 +186,7 @@ class Telpick {
             const flag = document.createElement('div')
             flag.className = 'telpick-flag'
             const img = document.createElement('img')
-            img.src = 'src/assets' + item.flag
+            img.src = (this._assetsBase || 'src/assets') + (item.flag.startsWith('/') ? item.flag : '/' + item.flag)
             img.className = 'w-full h-full object-cover'
             img.alt = 'flag'
             flag.appendChild(img)
@@ -223,7 +233,7 @@ class Telpick {
         const flag = document.createElement('div')
           flag.className = 'telpick-flag'
           const img = document.createElement('img')
-          img.src = 'src/assets' + item.flag
+          img.src = (this._assetsBase || 'src/assets') + (item.flag.startsWith('/') ? item.flag : '/' + item.flag)
         img.className = 'w-full h-full object-cover'
         img.alt = 'flag'
           flag.appendChild(img)