telpick 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of telpick might be problematic. Click here for more details.
- package/dist/telpick.es.js +74 -102
- package/dist/telpick.react.es.js +12 -0
- package/dist/telpick.vue.es.js +22 -0
- package/package.json +16 -13
- package/dist/telpick.umd.js +0 -1
package/dist/telpick.es.js
CHANGED
|
@@ -1,58 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
this.code = o, this.onChange = n, this.styleOverrides = s, this.codes = [], this.selectedCode = o, this.isDropdownOpen = !1, this.searchQuery = "", this.container = null, this.dropdown = null, this._outsideHandler = null;
|
|
1
|
+
class _ {
|
|
2
|
+
constructor({ code: o = null, onChange: r = () => {
|
|
3
|
+
}, styleOverrides: d = {} } = {}) {
|
|
4
|
+
this.code = o, this.onChange = r, this.styleOverrides = d, this.codes = [], this.selectedCode = o, this.isDropdownOpen = !1, this.searchQuery = "", this.container = null, this.dropdown = null, this._outsideHandler = null;
|
|
6
5
|
}
|
|
7
6
|
async init(o) {
|
|
8
7
|
this.container = o;
|
|
9
|
-
const
|
|
10
|
-
if (this.codes =
|
|
11
|
-
const
|
|
12
|
-
|
|
8
|
+
const d = await (await fetch("src/assets/country-code.json")).json();
|
|
9
|
+
if (this.codes = d.sort((c, e) => c.country.localeCompare(e.country, "es")), this.code) {
|
|
10
|
+
const c = this.codes.find((e) => e.country_code === this.code);
|
|
11
|
+
c && (this.selectedCode = c.country_code);
|
|
13
12
|
} else {
|
|
14
|
-
const
|
|
13
|
+
const c = [
|
|
15
14
|
async () => {
|
|
16
15
|
try {
|
|
17
|
-
const
|
|
18
|
-
if (
|
|
19
|
-
return this.codes.find((t) => t.country_code ===
|
|
16
|
+
const s = await (await fetch("https://ip-api.com/json/?fields=countryCode")).json();
|
|
17
|
+
if (s.countryCode)
|
|
18
|
+
return this.codes.find((t) => t.country_code === s.countryCode);
|
|
20
19
|
} catch {
|
|
21
20
|
}
|
|
22
21
|
return null;
|
|
23
22
|
},
|
|
24
23
|
async () => {
|
|
25
24
|
try {
|
|
26
|
-
const
|
|
27
|
-
if (
|
|
28
|
-
return this.codes.find((t) => t.country_code ===
|
|
25
|
+
const s = await (await fetch("https://get.geojs.io/v1/ip/country.json")).json();
|
|
26
|
+
if (s.country)
|
|
27
|
+
return this.codes.find((t) => t.country_code === s.country);
|
|
29
28
|
} catch {
|
|
30
29
|
}
|
|
31
30
|
return null;
|
|
32
31
|
},
|
|
33
32
|
async () => {
|
|
34
33
|
try {
|
|
35
|
-
const
|
|
36
|
-
if (
|
|
37
|
-
return this.codes.find((t) => t.country_code ===
|
|
34
|
+
const s = await (await fetch("https://ipapi.co/json/")).json();
|
|
35
|
+
if (s.country_code)
|
|
36
|
+
return this.codes.find((t) => t.country_code === s.country_code);
|
|
38
37
|
} catch {
|
|
39
38
|
}
|
|
40
39
|
return null;
|
|
41
40
|
}
|
|
42
41
|
];
|
|
43
42
|
let e = null;
|
|
44
|
-
for (const
|
|
43
|
+
for (const n of c)
|
|
45
44
|
try {
|
|
46
45
|
if (e = await Promise.race([
|
|
47
|
-
|
|
48
|
-
new Promise((
|
|
46
|
+
n(),
|
|
47
|
+
new Promise((s) => setTimeout(() => s(null), 3e3))
|
|
49
48
|
]), e)
|
|
50
49
|
break;
|
|
51
50
|
} catch {
|
|
52
51
|
}
|
|
53
52
|
if (!e)
|
|
54
53
|
try {
|
|
55
|
-
const
|
|
54
|
+
const n = Intl.DateTimeFormat().resolvedOptions().timeZone, t = {
|
|
56
55
|
"America/Lima": "PE",
|
|
57
56
|
"America/Bogota": "CO",
|
|
58
57
|
"America/Mexico_City": "MX",
|
|
@@ -114,20 +113,20 @@ class N {
|
|
|
114
113
|
"Africa/Johannesburg": "ZA",
|
|
115
114
|
"Africa/Nairobi": "KE",
|
|
116
115
|
"Africa/Lagos": "NG"
|
|
117
|
-
}[
|
|
118
|
-
t && (e = this.codes.find((
|
|
116
|
+
}[n];
|
|
117
|
+
t && (e = this.codes.find((i) => i.country_code === t));
|
|
119
118
|
} catch {
|
|
120
119
|
}
|
|
121
120
|
if (e)
|
|
122
121
|
this.selectedCode = e.country_code;
|
|
123
122
|
else {
|
|
124
|
-
const
|
|
125
|
-
|
|
123
|
+
const n = this.codes.find((s) => s.country_code === "CO");
|
|
124
|
+
n && (this.selectedCode = n.country_code);
|
|
126
125
|
}
|
|
127
126
|
}
|
|
128
127
|
this.render();
|
|
129
|
-
const
|
|
130
|
-
|
|
128
|
+
const p = this.codes.find((c) => c.country_code === this.selectedCode);
|
|
129
|
+
p && this.onChange(p), this._setupOutsideClick();
|
|
131
130
|
}
|
|
132
131
|
render() {
|
|
133
132
|
this.container.innerHTML = "";
|
|
@@ -135,72 +134,72 @@ class N {
|
|
|
135
134
|
o.className = "telpick-btn", Object.assign(o.style, this.styleOverrides), o.onclick = () => {
|
|
136
135
|
this.isDropdownOpen = !this.isDropdownOpen, this.render();
|
|
137
136
|
};
|
|
138
|
-
const
|
|
139
|
-
|
|
140
|
-
const
|
|
141
|
-
if (
|
|
137
|
+
const r = document.createElement("div");
|
|
138
|
+
r.className = "telpick-flag";
|
|
139
|
+
const d = this.codes.find((e) => e.country_code === this.selectedCode) || { flag: "", code: "", country: "" };
|
|
140
|
+
if (d.flag) {
|
|
142
141
|
const e = document.createElement("img");
|
|
143
|
-
e.src = "src/assets" +
|
|
142
|
+
e.src = "src/assets" + d.flag, e.className = "w-full h-full object-cover", e.alt = "flag", r.appendChild(e);
|
|
144
143
|
}
|
|
145
|
-
o.appendChild(
|
|
146
|
-
const
|
|
147
|
-
|
|
148
|
-
const
|
|
149
|
-
if (
|
|
144
|
+
o.appendChild(r);
|
|
145
|
+
const p = document.createElement("span");
|
|
146
|
+
p.textContent = d.code, o.appendChild(p);
|
|
147
|
+
const c = document.createElement("span");
|
|
148
|
+
if (c.className = "ml-auto", c.textContent = "▼", o.appendChild(c), this.container.appendChild(o), this.isDropdownOpen) {
|
|
150
149
|
this.dropdown = document.createElement("div"), this.dropdown.className = "telpick-dropdown", this.dropdown.onclick = (t) => t.stopPropagation(), this.dropdown.onmousedown = (t) => t.stopPropagation();
|
|
151
150
|
const e = document.createElement("input");
|
|
152
151
|
e.className = "telpick-search", e.type = "text", e.placeholder = "Buscar país...", e.value = this.searchQuery, e.oninput = (t) => {
|
|
153
|
-
var
|
|
152
|
+
var m;
|
|
154
153
|
t.stopPropagation();
|
|
155
|
-
const
|
|
156
|
-
this.searchQuery =
|
|
157
|
-
const
|
|
158
|
-
|
|
159
|
-
const
|
|
160
|
-
|
|
161
|
-
this.selectedCode =
|
|
154
|
+
const i = t.target, f = i.selectionStart || 0, u = i.value;
|
|
155
|
+
this.searchQuery = u;
|
|
156
|
+
const l = (m = this.dropdown) == null ? void 0 : m.querySelector("ul");
|
|
157
|
+
l ? (l.innerHTML = "", (this.searchQuery ? this.codes.filter((a) => a.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((a) => {
|
|
158
|
+
const h = document.createElement("li"), w = a.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
|
|
159
|
+
h.className = `telpick-item ${w ? "telpick-item-selected" : ""}`, h.onclick = () => {
|
|
160
|
+
this.selectedCode = a.country_code, this.onChange(a), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
|
|
162
161
|
};
|
|
163
|
-
const
|
|
164
|
-
|
|
165
|
-
const
|
|
166
|
-
|
|
162
|
+
const A = document.createElement("div");
|
|
163
|
+
A.className = "telpick-flag";
|
|
164
|
+
const y = document.createElement("img");
|
|
165
|
+
y.src = "src/assets" + a.flag, y.className = "w-full h-full object-cover", y.alt = "flag", A.appendChild(y), h.appendChild(A);
|
|
167
166
|
const E = document.createElement("span");
|
|
168
|
-
E.textContent =
|
|
169
|
-
const
|
|
170
|
-
|
|
167
|
+
E.textContent = a.country, h.appendChild(E);
|
|
168
|
+
const g = document.createElement("span");
|
|
169
|
+
g.className = "ml-auto", g.textContent = a.code, h.appendChild(g), l.appendChild(h);
|
|
171
170
|
}), requestAnimationFrame(() => {
|
|
172
171
|
if (e) {
|
|
173
172
|
e.focus();
|
|
174
|
-
const
|
|
175
|
-
e.setSelectionRange(
|
|
173
|
+
const a = Math.min(f + 1, u.length);
|
|
174
|
+
e.setSelectionRange(a, a);
|
|
176
175
|
}
|
|
177
176
|
})) : this.render();
|
|
178
177
|
}, e.onclick = (t) => t.stopPropagation(), e.onmousedown = (t) => t.stopPropagation(), this.dropdown.appendChild(e);
|
|
179
|
-
const
|
|
180
|
-
|
|
181
|
-
const
|
|
182
|
-
|
|
178
|
+
const n = document.createElement("ul");
|
|
179
|
+
n.style.maxHeight = "130px", n.style.overflowY = "auto", (this.searchQuery ? this.codes.filter((t) => t.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((t) => {
|
|
180
|
+
const i = document.createElement("li"), f = t.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
|
|
181
|
+
i.className = `telpick-item ${f ? "telpick-item-selected" : ""}`, i.setAttribute("aria-selected", f), i.onclick = () => {
|
|
183
182
|
this.selectedCode = t.country_code, this.onChange(t), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
|
|
184
183
|
};
|
|
185
|
-
const
|
|
186
|
-
|
|
187
|
-
const
|
|
188
|
-
|
|
189
|
-
const
|
|
190
|
-
|
|
191
|
-
const
|
|
192
|
-
|
|
193
|
-
}), this.dropdown.appendChild(
|
|
184
|
+
const u = document.createElement("div");
|
|
185
|
+
u.className = "telpick-flag";
|
|
186
|
+
const l = document.createElement("img");
|
|
187
|
+
l.src = "src/assets" + t.flag, l.className = "w-full h-full object-cover", l.alt = "flag", u.appendChild(l), i.appendChild(u);
|
|
188
|
+
const m = document.createElement("span");
|
|
189
|
+
m.textContent = t.country, i.appendChild(m);
|
|
190
|
+
const C = document.createElement("span");
|
|
191
|
+
C.className = "ml-auto", C.textContent = t.code, i.appendChild(C), n.appendChild(i);
|
|
192
|
+
}), this.dropdown.appendChild(n), this.container.appendChild(this.dropdown), requestAnimationFrame(() => {
|
|
194
193
|
e && e.focus();
|
|
195
194
|
});
|
|
196
195
|
}
|
|
197
196
|
}
|
|
198
197
|
_setupOutsideClick() {
|
|
199
198
|
this._outsideHandler && document.removeEventListener("click", this._outsideHandler), this._outsideHandler = (o) => {
|
|
200
|
-
const
|
|
201
|
-
if (this.isDropdownOpen && this.container &&
|
|
202
|
-
const
|
|
203
|
-
!this.container.contains(
|
|
199
|
+
const r = o.target;
|
|
200
|
+
if (this.isDropdownOpen && this.container && r) {
|
|
201
|
+
const d = this.container.querySelector(".telpick-dropdown");
|
|
202
|
+
!this.container.contains(r) && (!d || !d.contains(r)) && (this.isDropdownOpen = !1, this.render());
|
|
204
203
|
}
|
|
205
204
|
}, document.addEventListener("click", this._outsideHandler, !0);
|
|
206
205
|
}
|
|
@@ -208,34 +207,7 @@ class N {
|
|
|
208
207
|
this._outsideHandler && document.removeEventListener("mousedown", this._outsideHandler), this.container.innerHTML = "";
|
|
209
208
|
}
|
|
210
209
|
}
|
|
211
|
-
window.Telpick =
|
|
212
|
-
function P(h, { emit: o }) {
|
|
213
|
-
let n = null;
|
|
214
|
-
return {
|
|
215
|
-
mounted() {
|
|
216
|
-
n = new window.Telpick({
|
|
217
|
-
code: h.code,
|
|
218
|
-
onChange: (s) => o("update:code", s),
|
|
219
|
-
styleOverrides: h.styleOverrides || {}
|
|
220
|
-
}), n.init(this.$el);
|
|
221
|
-
},
|
|
222
|
-
beforeUnmount() {
|
|
223
|
-
n && n.destroy();
|
|
224
|
-
},
|
|
225
|
-
render() {
|
|
226
|
-
return null;
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
}
|
|
230
|
-
function T({ code: h, onChange: o, styleOverrides: n }) {
|
|
231
|
-
const s = v();
|
|
232
|
-
return S(() => {
|
|
233
|
-
const l = new window.Telpick({ code: h, onChange: o, styleOverrides: n });
|
|
234
|
-
return l.init(s.current), () => l.destroy();
|
|
235
|
-
}, [h, o, n]), /* @__PURE__ */ _.createElement("div", { ref: s });
|
|
236
|
-
}
|
|
210
|
+
window.Telpick = _;
|
|
237
211
|
export {
|
|
238
|
-
|
|
239
|
-
T as TelpickReact,
|
|
240
|
-
P as TelpickVue
|
|
212
|
+
_ as Telpick
|
|
241
213
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import i, { useRef as f, useEffect as o } from "react";
|
|
2
|
+
import { Telpick as p } from "./telpick.es.js";
|
|
3
|
+
function s({ code: t, onChange: e, styleOverrides: r }) {
|
|
4
|
+
const c = f();
|
|
5
|
+
return o(() => {
|
|
6
|
+
const n = new p({ code: t, onChange: e, styleOverrides: r });
|
|
7
|
+
return n.init(c.current), () => n.destroy();
|
|
8
|
+
}, [t, e, r]), /* @__PURE__ */ i.createElement("div", { ref: c });
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
s as TelpickReact
|
|
12
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Telpick as i } from "./telpick.es.js";
|
|
2
|
+
function o(n, { emit: t }) {
|
|
3
|
+
let e = null;
|
|
4
|
+
return {
|
|
5
|
+
mounted() {
|
|
6
|
+
e = new i({
|
|
7
|
+
code: n.code,
|
|
8
|
+
onChange: (r) => t("update:code", r),
|
|
9
|
+
styleOverrides: n.styleOverrides || {}
|
|
10
|
+
}), e.init(this.$el);
|
|
11
|
+
},
|
|
12
|
+
beforeUnmount() {
|
|
13
|
+
e && e.destroy();
|
|
14
|
+
},
|
|
15
|
+
render() {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
export {
|
|
21
|
+
o as TelpickVue
|
|
22
|
+
};
|
package/package.json
CHANGED
|
@@ -1,26 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "telpick",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "Multi-platform country and phone code selector with a modern design, smooth animations, and automatic IP detection.",
|
|
5
|
-
"main": "dist/telpick.
|
|
6
|
-
"module": "dist/telpick.
|
|
5
|
+
"main": "dist/telpick.es.js",
|
|
6
|
+
"module": "dist/telpick.es.js",
|
|
7
7
|
"types": "dist/telpick.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
-
"import": "./dist/telpick.
|
|
11
|
-
"require": "./dist/telpick.umd.js",
|
|
10
|
+
"import": "./dist/telpick.es.js",
|
|
12
11
|
"types": "./dist/telpick.d.ts"
|
|
13
12
|
},
|
|
14
13
|
"./vue": {
|
|
15
|
-
"import": "./dist/telpick.vue.js",
|
|
14
|
+
"import": "./dist/telpick.vue.es.js",
|
|
16
15
|
"types": "./dist/telpick.d.ts"
|
|
17
16
|
},
|
|
18
17
|
"./react": {
|
|
19
|
-
"import": "./dist/telpick.react.js",
|
|
18
|
+
"import": "./dist/telpick.react.es.js",
|
|
20
19
|
"types": "./dist/telpick.d.ts"
|
|
21
20
|
},
|
|
22
21
|
"./vanilla": {
|
|
23
|
-
"import": "./dist/telpick.
|
|
22
|
+
"import": "./dist/telpick.es.js",
|
|
24
23
|
"types": "./dist/telpick.d.ts"
|
|
25
24
|
},
|
|
26
25
|
"./style.css": "./dist/style.css",
|
|
@@ -86,11 +85,15 @@
|
|
|
86
85
|
},
|
|
87
86
|
"devDependencies": {
|
|
88
87
|
"gh-pages": "^6.1.1",
|
|
89
|
-
"vite": "^4.0
|
|
90
|
-
"typescript": "^5.
|
|
91
|
-
"vue": "^3.
|
|
92
|
-
"react": "^18.
|
|
93
|
-
"jest": "^29.
|
|
88
|
+
"vite": "^5.4.0",
|
|
89
|
+
"typescript": "^5.6.0",
|
|
90
|
+
"vue": "^3.4.0",
|
|
91
|
+
"react": "^18.3.0",
|
|
92
|
+
"jest": "^29.7.0"
|
|
93
|
+
},
|
|
94
|
+
"overrides": {
|
|
95
|
+
"glob": "^11.0.0",
|
|
96
|
+
"minimatch": "^9.0.0"
|
|
94
97
|
},
|
|
95
98
|
"engines": {
|
|
96
99
|
"node": ">=14.0.0",
|
package/dist/telpick.umd.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(l,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],h):(l=typeof globalThis<"u"?globalThis:l||self,h(l.Telpick={},l.React))})(this,function(l,h){"use strict";const O="";class _{constructor({code:n=null,onChange:o=()=>{},styleOverrides:s={}}={}){this.code=n,this.onChange=o,this.styleOverrides=s,this.codes=[],this.selectedCode=n,this.isDropdownOpen=!1,this.searchQuery="",this.container=null,this.dropdown=null,this._outsideHandler=null}async init(n){this.container=n;const s=await(await fetch("src/assets/country-code.json")).json();if(this.codes=s.sort((a,e)=>a.country.localeCompare(e.country,"es")),this.code){const a=this.codes.find(e=>e.country_code===this.code);a&&(this.selectedCode=a.country_code)}else{const a=[async()=>{try{const i=await(await fetch("https://ip-api.com/json/?fields=countryCode")).json();if(i.countryCode)return this.codes.find(t=>t.country_code===i.countryCode)}catch{}return null},async()=>{try{const i=await(await fetch("https://get.geojs.io/v1/ip/country.json")).json();if(i.country)return this.codes.find(t=>t.country_code===i.country)}catch{}return null},async()=>{try{const i=await(await fetch("https://ipapi.co/json/")).json();if(i.country_code)return this.codes.find(t=>t.country_code===i.country_code)}catch{}return null}];let e=null;for(const c of a)try{if(e=await Promise.race([c(),new Promise(i=>setTimeout(()=>i(null),3e3))]),e)break}catch{}if(!e)try{const c=Intl.DateTimeFormat().resolvedOptions().timeZone,t={"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"}[c];t&&(e=this.codes.find(r=>r.country_code===t))}catch{}if(e)this.selectedCode=e.country_code;else{const c=this.codes.find(i=>i.country_code==="CO");c&&(this.selectedCode=c.country_code)}}this.render();const u=this.codes.find(a=>a.country_code===this.selectedCode);u&&this.onChange(u),this._setupOutsideClick()}render(){this.container.innerHTML="";const n=document.createElement("button");n.className="telpick-btn",Object.assign(n.style,this.styleOverrides),n.onclick=()=>{this.isDropdownOpen=!this.isDropdownOpen,this.render()};const o=document.createElement("div");o.className="telpick-flag";const s=this.codes.find(e=>e.country_code===this.selectedCode)||{flag:"",code:"",country:""};if(s.flag){const e=document.createElement("img");e.src="src/assets"+s.flag,e.className="w-full h-full object-cover",e.alt="flag",o.appendChild(e)}n.appendChild(o);const u=document.createElement("span");u.textContent=s.code,n.appendChild(u);const a=document.createElement("span");if(a.className="ml-auto",a.textContent="▼",n.appendChild(a),this.container.appendChild(n),this.isDropdownOpen){this.dropdown=document.createElement("div"),this.dropdown.className="telpick-dropdown",this.dropdown.onclick=t=>t.stopPropagation(),this.dropdown.onmousedown=t=>t.stopPropagation();const e=document.createElement("input");e.className="telpick-search",e.type="text",e.placeholder="Buscar país...",e.value=this.searchQuery,e.oninput=t=>{var C;t.stopPropagation();const r=t.target,A=r.selectionStart||0,f=r.value;this.searchQuery=f;const p=(C=this.dropdown)==null?void 0:C.querySelector("ul");p?(p.innerHTML="",(this.searchQuery?this.codes.filter(d=>d.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(d=>{const y=document.createElement("li"),N=d.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;y.className=`telpick-item ${N?"telpick-item-selected":""}`,y.onclick=()=>{this.selectedCode=d.country_code,this.onChange(d),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const E=document.createElement("div");E.className="telpick-flag";const w=document.createElement("img");w.src="src/assets"+d.flag,w.className="w-full h-full object-cover",w.alt="flag",E.appendChild(w),y.appendChild(E);const S=document.createElement("span");S.textContent=d.country,y.appendChild(S);const k=document.createElement("span");k.className="ml-auto",k.textContent=d.code,y.appendChild(k),p.appendChild(y)}),requestAnimationFrame(()=>{if(e){e.focus();const d=Math.min(A+1,f.length);e.setSelectionRange(d,d)}})):this.render()},e.onclick=t=>t.stopPropagation(),e.onmousedown=t=>t.stopPropagation(),this.dropdown.appendChild(e);const c=document.createElement("ul");c.style.maxHeight="130px",c.style.overflowY="auto",(this.searchQuery?this.codes.filter(t=>t.country.toLowerCase().includes(this.searchQuery.toLowerCase())):this.codes).forEach(t=>{const r=document.createElement("li"),A=t.country_code===this.selectedCode&&this.selectedCode!==null&&this.selectedCode!==void 0;r.className=`telpick-item ${A?"telpick-item-selected":""}`,r.setAttribute("aria-selected",A),r.onclick=()=>{this.selectedCode=t.country_code,this.onChange(t),this.isDropdownOpen=!1,this.searchQuery="",this.render()};const f=document.createElement("div");f.className="telpick-flag";const p=document.createElement("img");p.src="src/assets"+t.flag,p.className="w-full h-full object-cover",p.alt="flag",f.appendChild(p),r.appendChild(f);const C=document.createElement("span");C.textContent=t.country,r.appendChild(C);const g=document.createElement("span");g.className="ml-auto",g.textContent=t.code,r.appendChild(g),c.appendChild(r)}),this.dropdown.appendChild(c),this.container.appendChild(this.dropdown),requestAnimationFrame(()=>{e&&e.focus()})}}_setupOutsideClick(){this._outsideHandler&&document.removeEventListener("click",this._outsideHandler),this._outsideHandler=n=>{const o=n.target;if(this.isDropdownOpen&&this.container&&o){const s=this.container.querySelector(".telpick-dropdown");!this.container.contains(o)&&(!s||!s.contains(o))&&(this.isDropdownOpen=!1,this.render())}},document.addEventListener("click",this._outsideHandler,!0)}destroy(){this._outsideHandler&&document.removeEventListener("mousedown",this._outsideHandler),this.container.innerHTML=""}}window.Telpick=_;function v(m,{emit:n}){let o=null;return{mounted(){o=new window.Telpick({code:m.code,onChange:s=>n("update:code",s),styleOverrides:m.styleOverrides||{}}),o.init(this.$el)},beforeUnmount(){o&&o.destroy()},render(){return null}}}function T({code:m,onChange:n,styleOverrides:o}){const s=h.useRef();return h.useEffect(()=>{const u=new window.Telpick({code:m,onChange:n,styleOverrides:o});return u.init(s.current),()=>u.destroy()},[m,n,o]),h.createElement("div",{ref:s})}l.Telpick=_,l.TelpickReact=T,l.TelpickVue=v,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|