telpick 1.0.0

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.

Files changed (271) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +215 -0
  3. package/dist/style.css +1 -0
  4. package/dist/telpick.es.js +241 -0
  5. package/dist/telpick.umd.js +1 -0
  6. package/package.json +93 -0
  7. package/src/assets/country-code.json +94 -0
  8. package/src/assets/flags/ad.webp +0 -0
  9. package/src/assets/flags/ae.webp +0 -0
  10. package/src/assets/flags/af.png +0 -0
  11. package/src/assets/flags/ag.webp +0 -0
  12. package/src/assets/flags/ai.webp +0 -0
  13. package/src/assets/flags/al.webp +0 -0
  14. package/src/assets/flags/am.webp +0 -0
  15. package/src/assets/flags/ao.webp +0 -0
  16. package/src/assets/flags/aq.webp +0 -0
  17. package/src/assets/flags/ar.webp +0 -0
  18. package/src/assets/flags/as.webp +0 -0
  19. package/src/assets/flags/at.webp +0 -0
  20. package/src/assets/flags/au.webp +0 -0
  21. package/src/assets/flags/aw.webp +0 -0
  22. package/src/assets/flags/ax.webp +0 -0
  23. package/src/assets/flags/az.webp +0 -0
  24. package/src/assets/flags/ba.webp +0 -0
  25. package/src/assets/flags/bb.webp +0 -0
  26. package/src/assets/flags/bd.webp +0 -0
  27. package/src/assets/flags/be.webp +0 -0
  28. package/src/assets/flags/bf.webp +0 -0
  29. package/src/assets/flags/bg.webp +0 -0
  30. package/src/assets/flags/bh.webp +0 -0
  31. package/src/assets/flags/bi.webp +0 -0
  32. package/src/assets/flags/bj.webp +0 -0
  33. package/src/assets/flags/bl.webp +0 -0
  34. package/src/assets/flags/bm.webp +0 -0
  35. package/src/assets/flags/bn.webp +0 -0
  36. package/src/assets/flags/bo.webp +0 -0
  37. package/src/assets/flags/bq.webp +0 -0
  38. package/src/assets/flags/br.webp +0 -0
  39. package/src/assets/flags/bs.webp +0 -0
  40. package/src/assets/flags/bt.webp +0 -0
  41. package/src/assets/flags/bv.webp +0 -0
  42. package/src/assets/flags/bw.webp +0 -0
  43. package/src/assets/flags/by.webp +0 -0
  44. package/src/assets/flags/bz.webp +0 -0
  45. package/src/assets/flags/ca.webp +0 -0
  46. package/src/assets/flags/cc.webp +0 -0
  47. package/src/assets/flags/cd.webp +0 -0
  48. package/src/assets/flags/cf.webp +0 -0
  49. package/src/assets/flags/cg.webp +0 -0
  50. package/src/assets/flags/ch.webp +0 -0
  51. package/src/assets/flags/ci.webp +0 -0
  52. package/src/assets/flags/ck.webp +0 -0
  53. package/src/assets/flags/cl.webp +0 -0
  54. package/src/assets/flags/cm.webp +0 -0
  55. package/src/assets/flags/cn.webp +0 -0
  56. package/src/assets/flags/co.webp +0 -0
  57. package/src/assets/flags/cr.webp +0 -0
  58. package/src/assets/flags/cu.webp +0 -0
  59. package/src/assets/flags/cv.webp +0 -0
  60. package/src/assets/flags/cw.webp +0 -0
  61. package/src/assets/flags/cx.webp +0 -0
  62. package/src/assets/flags/cy.webp +0 -0
  63. package/src/assets/flags/cz.webp +0 -0
  64. package/src/assets/flags/de.webp +0 -0
  65. package/src/assets/flags/dj.webp +0 -0
  66. package/src/assets/flags/dk.webp +0 -0
  67. package/src/assets/flags/dm.webp +0 -0
  68. package/src/assets/flags/do.webp +0 -0
  69. package/src/assets/flags/dz.webp +0 -0
  70. package/src/assets/flags/ec.webp +0 -0
  71. package/src/assets/flags/ee.webp +0 -0
  72. package/src/assets/flags/eg.webp +0 -0
  73. package/src/assets/flags/eh.webp +0 -0
  74. package/src/assets/flags/er.webp +0 -0
  75. package/src/assets/flags/es.webp +0 -0
  76. package/src/assets/flags/et.webp +0 -0
  77. package/src/assets/flags/fi.webp +0 -0
  78. package/src/assets/flags/fj.webp +0 -0
  79. package/src/assets/flags/fk.webp +0 -0
  80. package/src/assets/flags/fm.webp +0 -0
  81. package/src/assets/flags/fo.webp +0 -0
  82. package/src/assets/flags/fr.webp +0 -0
  83. package/src/assets/flags/ga.webp +0 -0
  84. package/src/assets/flags/gb-eng.webp +0 -0
  85. package/src/assets/flags/gb-nir.webp +0 -0
  86. package/src/assets/flags/gb-sct.webp +0 -0
  87. package/src/assets/flags/gb-wls.webp +0 -0
  88. package/src/assets/flags/gb.webp +0 -0
  89. package/src/assets/flags/gd.webp +0 -0
  90. package/src/assets/flags/ge.webp +0 -0
  91. package/src/assets/flags/gf.webp +0 -0
  92. package/src/assets/flags/gg.webp +0 -0
  93. package/src/assets/flags/gh.webp +0 -0
  94. package/src/assets/flags/gi.webp +0 -0
  95. package/src/assets/flags/gl.webp +0 -0
  96. package/src/assets/flags/gm.webp +0 -0
  97. package/src/assets/flags/gn.webp +0 -0
  98. package/src/assets/flags/gp.webp +0 -0
  99. package/src/assets/flags/gq.webp +0 -0
  100. package/src/assets/flags/gr.webp +0 -0
  101. package/src/assets/flags/gs.webp +0 -0
  102. package/src/assets/flags/gt.webp +0 -0
  103. package/src/assets/flags/gu.webp +0 -0
  104. package/src/assets/flags/gw.webp +0 -0
  105. package/src/assets/flags/gy.webp +0 -0
  106. package/src/assets/flags/hk.webp +0 -0
  107. package/src/assets/flags/hm.webp +0 -0
  108. package/src/assets/flags/hn.webp +0 -0
  109. package/src/assets/flags/hr.webp +0 -0
  110. package/src/assets/flags/ht.webp +0 -0
  111. package/src/assets/flags/hu.webp +0 -0
  112. package/src/assets/flags/id.webp +0 -0
  113. package/src/assets/flags/ie.webp +0 -0
  114. package/src/assets/flags/il.webp +0 -0
  115. package/src/assets/flags/im.webp +0 -0
  116. package/src/assets/flags/in.webp +0 -0
  117. package/src/assets/flags/io.webp +0 -0
  118. package/src/assets/flags/iq.webp +0 -0
  119. package/src/assets/flags/ir.webp +0 -0
  120. package/src/assets/flags/is.webp +0 -0
  121. package/src/assets/flags/it.webp +0 -0
  122. package/src/assets/flags/je.webp +0 -0
  123. package/src/assets/flags/jm.webp +0 -0
  124. package/src/assets/flags/jo.webp +0 -0
  125. package/src/assets/flags/jp.webp +0 -0
  126. package/src/assets/flags/ke.webp +0 -0
  127. package/src/assets/flags/kg.webp +0 -0
  128. package/src/assets/flags/kh.webp +0 -0
  129. package/src/assets/flags/ki.webp +0 -0
  130. package/src/assets/flags/km.webp +0 -0
  131. package/src/assets/flags/kn.webp +0 -0
  132. package/src/assets/flags/kp.webp +0 -0
  133. package/src/assets/flags/kr.webp +0 -0
  134. package/src/assets/flags/kw.webp +0 -0
  135. package/src/assets/flags/ky.webp +0 -0
  136. package/src/assets/flags/kz.webp +0 -0
  137. package/src/assets/flags/la.webp +0 -0
  138. package/src/assets/flags/lb.webp +0 -0
  139. package/src/assets/flags/lc.webp +0 -0
  140. package/src/assets/flags/li.webp +0 -0
  141. package/src/assets/flags/lista.txt +0 -0
  142. package/src/assets/flags/lk.webp +0 -0
  143. package/src/assets/flags/lr.webp +0 -0
  144. package/src/assets/flags/ls.webp +0 -0
  145. package/src/assets/flags/lt.webp +0 -0
  146. package/src/assets/flags/lu.webp +0 -0
  147. package/src/assets/flags/lv.webp +0 -0
  148. package/src/assets/flags/ly.webp +0 -0
  149. package/src/assets/flags/ma.webp +0 -0
  150. package/src/assets/flags/mc.webp +0 -0
  151. package/src/assets/flags/md.webp +0 -0
  152. package/src/assets/flags/me.webp +0 -0
  153. package/src/assets/flags/mf.webp +0 -0
  154. package/src/assets/flags/mg.webp +0 -0
  155. package/src/assets/flags/mh.webp +0 -0
  156. package/src/assets/flags/mk.webp +0 -0
  157. package/src/assets/flags/ml.webp +0 -0
  158. package/src/assets/flags/mm.webp +0 -0
  159. package/src/assets/flags/mn.webp +0 -0
  160. package/src/assets/flags/mo.webp +0 -0
  161. package/src/assets/flags/mp.webp +0 -0
  162. package/src/assets/flags/mq.webp +0 -0
  163. package/src/assets/flags/mr.webp +0 -0
  164. package/src/assets/flags/ms.webp +0 -0
  165. package/src/assets/flags/mt.webp +0 -0
  166. package/src/assets/flags/mu.webp +0 -0
  167. package/src/assets/flags/mv.webp +0 -0
  168. package/src/assets/flags/mw.webp +0 -0
  169. package/src/assets/flags/mx.webp +0 -0
  170. package/src/assets/flags/my.webp +0 -0
  171. package/src/assets/flags/mz.webp +0 -0
  172. package/src/assets/flags/na.webp +0 -0
  173. package/src/assets/flags/nc.webp +0 -0
  174. package/src/assets/flags/ne.webp +0 -0
  175. package/src/assets/flags/nf.webp +0 -0
  176. package/src/assets/flags/ng.webp +0 -0
  177. package/src/assets/flags/ni.webp +0 -0
  178. package/src/assets/flags/nl.webp +0 -0
  179. package/src/assets/flags/no.webp +0 -0
  180. package/src/assets/flags/np.webp +0 -0
  181. package/src/assets/flags/nr.webp +0 -0
  182. package/src/assets/flags/nu.webp +0 -0
  183. package/src/assets/flags/nz.webp +0 -0
  184. package/src/assets/flags/om.webp +0 -0
  185. package/src/assets/flags/pa.webp +0 -0
  186. package/src/assets/flags/pe.webp +0 -0
  187. package/src/assets/flags/pf.webp +0 -0
  188. package/src/assets/flags/pg.webp +0 -0
  189. package/src/assets/flags/ph.webp +0 -0
  190. package/src/assets/flags/pk.webp +0 -0
  191. package/src/assets/flags/pl.webp +0 -0
  192. package/src/assets/flags/pm.webp +0 -0
  193. package/src/assets/flags/pn.webp +0 -0
  194. package/src/assets/flags/pr.webp +0 -0
  195. package/src/assets/flags/ps.webp +0 -0
  196. package/src/assets/flags/pt.webp +0 -0
  197. package/src/assets/flags/pw.webp +0 -0
  198. package/src/assets/flags/py.webp +0 -0
  199. package/src/assets/flags/qa.webp +0 -0
  200. package/src/assets/flags/re.webp +0 -0
  201. package/src/assets/flags/ro.webp +0 -0
  202. package/src/assets/flags/rs.webp +0 -0
  203. package/src/assets/flags/ru.webp +0 -0
  204. package/src/assets/flags/rw.webp +0 -0
  205. package/src/assets/flags/sa.webp +0 -0
  206. package/src/assets/flags/sb.webp +0 -0
  207. package/src/assets/flags/sc.webp +0 -0
  208. package/src/assets/flags/sd.webp +0 -0
  209. package/src/assets/flags/se (1).webp +0 -0
  210. package/src/assets/flags/se.webp +0 -0
  211. package/src/assets/flags/sg.webp +0 -0
  212. package/src/assets/flags/sh.webp +0 -0
  213. package/src/assets/flags/si.webp +0 -0
  214. package/src/assets/flags/sj.webp +0 -0
  215. package/src/assets/flags/sk.webp +0 -0
  216. package/src/assets/flags/sl.webp +0 -0
  217. package/src/assets/flags/sm.webp +0 -0
  218. package/src/assets/flags/sn.webp +0 -0
  219. package/src/assets/flags/so.webp +0 -0
  220. package/src/assets/flags/sr.webp +0 -0
  221. package/src/assets/flags/ss.webp +0 -0
  222. package/src/assets/flags/st.webp +0 -0
  223. package/src/assets/flags/sv.webp +0 -0
  224. package/src/assets/flags/sx.webp +0 -0
  225. package/src/assets/flags/sy.webp +0 -0
  226. package/src/assets/flags/sz.webp +0 -0
  227. package/src/assets/flags/tc.webp +0 -0
  228. package/src/assets/flags/td.webp +0 -0
  229. package/src/assets/flags/tf.webp +0 -0
  230. package/src/assets/flags/tg.webp +0 -0
  231. package/src/assets/flags/th.webp +0 -0
  232. package/src/assets/flags/tj.webp +0 -0
  233. package/src/assets/flags/tk.webp +0 -0
  234. package/src/assets/flags/tl.webp +0 -0
  235. package/src/assets/flags/tm.webp +0 -0
  236. package/src/assets/flags/tn.webp +0 -0
  237. package/src/assets/flags/to.webp +0 -0
  238. package/src/assets/flags/tr.webp +0 -0
  239. package/src/assets/flags/tt.webp +0 -0
  240. package/src/assets/flags/tv.webp +0 -0
  241. package/src/assets/flags/tw.webp +0 -0
  242. package/src/assets/flags/tz.webp +0 -0
  243. package/src/assets/flags/ua.webp +0 -0
  244. package/src/assets/flags/ug.webp +0 -0
  245. package/src/assets/flags/um.webp +0 -0
  246. package/src/assets/flags/us.webp +0 -0
  247. package/src/assets/flags/uy.webp +0 -0
  248. package/src/assets/flags/uz.webp +0 -0
  249. package/src/assets/flags/va.webp +0 -0
  250. package/src/assets/flags/vc.webp +0 -0
  251. package/src/assets/flags/ve.webp +0 -0
  252. package/src/assets/flags/vg.webp +0 -0
  253. package/src/assets/flags/vi.webp +0 -0
  254. package/src/assets/flags/vn.webp +0 -0
  255. package/src/assets/flags/vu.webp +0 -0
  256. package/src/assets/flags/wf.webp +0 -0
  257. package/src/assets/flags/ws.webp +0 -0
  258. package/src/assets/flags/xk.webp +0 -0
  259. package/src/assets/flags/ye.webp +0 -0
  260. package/src/assets/flags/yt.webp +0 -0
  261. package/src/assets/flags/za.webp +0 -0
  262. package/src/assets/flags/zm.webp +0 -0
  263. package/src/assets/flags/zw.webp +0 -0
  264. package/src/telpick.cdn.js +7 -0
  265. package/src/telpick.css +289 -0
  266. package/src/telpick.js +273 -0
  267. package/src/telpick.react.tsx +140 -0
  268. package/src/telpick.ts +157 -0
  269. package/src/telpick.vanilla.js +199 -0
  270. package/src/telpick.vue.ts +144 -0
  271. package/src/telpick.wrappers.jsx +37 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Julio Almiro
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,215 @@
1
+ # Telpick
2
+
3
+ Selector de país y código telefónico multiplataforma con diseño moderno y animaciones suaves.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/telpick)](https://www.npmjs.com/package/telpick)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+ [![npm downloads](https://img.shields.io/npm/dm/telpick)](https://www.npmjs.com/package/telpick)
8
+
9
+ ## Características
10
+
11
+ - Diseño moderno con animaciones suaves
12
+ - Detección automática del país por IP (múltiples servicios de fallback)
13
+ - Compatible con Vue 3, React y Vanilla JavaScript
14
+ - Personalizable mediante variables CSS
15
+ - Accesible con atributos ARIA
16
+ - Diseño responsive
17
+ - Búsqueda integrada de países
18
+ - Ligero y sin dependencias pesadas
19
+
20
+ ## Instalación
21
+
22
+ ### npm
23
+ ```bash
24
+ npm install telpick
25
+ ```
26
+
27
+ ### pnpm
28
+ ```bash
29
+ pnpm add telpick
30
+ ```
31
+
32
+ ### yarn
33
+ ```bash
34
+ yarn add telpick
35
+ ```
36
+
37
+ ### CDN
38
+ ```html
39
+ <link rel="stylesheet" href="https://unpkg.com/telpick@latest/dist/style.css">
40
+ <script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>
41
+ ```
42
+
43
+ ## Uso
44
+
45
+ ### React
46
+
47
+ ```tsx
48
+ import React, { useState } from 'react'
49
+ import { TelpickReact } from 'telpick/react'
50
+ import 'telpick/dist/style.css'
51
+
52
+ function App() {
53
+ const [selectedCountry, setSelectedCountry] = useState(null)
54
+
55
+ return (
56
+ <TelpickReact
57
+ code={null}
58
+ onChange={(country) => {
59
+ console.log('País seleccionado:', country)
60
+ setSelectedCountry(country)
61
+ }}
62
+ />
63
+ )
64
+ }
65
+ ```
66
+
67
+ ### Vue 3
68
+
69
+ ```vue
70
+ <template>
71
+ <TelpickVue
72
+ :code="selectedCode"
73
+ @update:code="handleCountryChange"
74
+ />
75
+ </template>
76
+
77
+ <script setup>
78
+ import { ref } from 'vue'
79
+ import { TelpickVue } from 'telpick/vue'
80
+ import 'telpick/dist/style.css'
81
+
82
+ const selectedCode = ref(null)
83
+
84
+ const handleCountryChange = (country) => {
85
+ console.log('País seleccionado:', country)
86
+ selectedCode.value = country.country_code
87
+ }
88
+ </script>
89
+ ```
90
+
91
+ ### Vanilla JavaScript
92
+
93
+ ```html
94
+ <!DOCTYPE html>
95
+ <html>
96
+ <head>
97
+ <link rel="stylesheet" href="https://unpkg.com/telpick@latest/dist/style.css">
98
+ </head>
99
+ <body>
100
+ <div id="telpick-container"></div>
101
+
102
+ <script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>
103
+ <script>
104
+ const telpick = new Telpick({
105
+ code: null,
106
+ onChange: (country) => {
107
+ console.log('País seleccionado:', country)
108
+ }
109
+ })
110
+ telpick.init(document.getElementById('telpick-container'))
111
+ </script>
112
+ </body>
113
+ </html>
114
+ ```
115
+
116
+ ## Props
117
+
118
+ ### `code` (opcional)
119
+ Código de país inicial (ISO 3166-1 alpha-2). Si es `null`, se detecta automáticamente por IP.
120
+
121
+ **Tipo:** `string | null`
122
+ **Por defecto:** `null`
123
+
124
+ ```tsx
125
+ <TelpickReact code="ES" onChange={handleChange} />
126
+ ```
127
+
128
+ ### `onChange` (opcional)
129
+ Callback que se ejecuta cuando el usuario selecciona un país.
130
+
131
+ **Tipo:** `(country: CountryCode) => void`
132
+
133
+ ```tsx
134
+ <TelpickReact
135
+ onChange={(country) => {
136
+ console.log('Código:', country.code)
137
+ console.log('País:', country.country)
138
+ console.log('Bandera:', country.flag)
139
+ console.log('Código ISO:', country.country_code)
140
+ }}
141
+ />
142
+ ```
143
+
144
+ ### `styleOverrides` (opcional)
145
+ Objeto con estilos CSS en línea para personalizar el botón principal.
146
+
147
+ **Tipo:** `Partial<Record<string, string>>`
148
+
149
+ ```tsx
150
+ <TelpickReact
151
+ styleOverrides={{
152
+ padding: '12px 16px',
153
+ fontSize: '16px',
154
+ backgroundColor: '#f0f0f0'
155
+ }}
156
+ />
157
+ ```
158
+
159
+ ## Personalización
160
+
161
+ Puedes personalizar los estilos usando variables CSS:
162
+
163
+ ```css
164
+ :root {
165
+ --telpick-bg: #ffffff;
166
+ --telpick-border: #e5e7eb;
167
+ --telpick-radius: 12px;
168
+ --telpick-flag-size: 24px;
169
+ --telpick-font-size: 14px;
170
+ --telpick-selected-bg: #eff6ff;
171
+ --telpick-selected-border: #3b82f6;
172
+ --telpick-selected-shadow: 2px 0 4px rgba(59, 130, 246, 0.3);
173
+ --telpick-selected-text: #1f2937;
174
+ --telpick-text: #1f2937;
175
+ --telpick-text-secondary: #6b7280;
176
+ --telpick-border-focus: #3b82f6;
177
+ --telpick-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
178
+ --telpick-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
179
+ }
180
+ ```
181
+
182
+ ## Interfaz CountryCode
183
+
184
+ ```typescript
185
+ interface CountryCode {
186
+ country_code: string // Código ISO 3166-1 alpha-2 (ej: "ES", "US")
187
+ flag: string // URL de la bandera del país
188
+ country: string // Nombre del país (ej: "España", "United States")
189
+ code: string // Código telefónico (ej: "+34", "+1")
190
+ }
191
+ ```
192
+
193
+ ## Licencia
194
+
195
+ MIT
196
+
197
+ ---
198
+
199
+ ## Creado por
200
+
201
+ **Julio Almiro**
202
+
203
+ - Sitio web: [julioalmiro.com](https://julioalmiro.com)
204
+ - GitHub: [@julioalmirooficial](https://github.com/julioalmirooficial)
205
+ - Email: almiror.info@gmail.com
206
+
207
+ ## Donaciones
208
+
209
+ Si este proyecto te ha sido útil, considera hacer una donación para apoyar su desarrollo y mantenimiento continuo.
210
+
211
+ <div align="center">
212
+
213
+ [![PayPal](https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.me/almiror)
214
+
215
+ </div>
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ :root{--telpick-bg: #ffffff;--telpick-border: #e5e7eb;--telpick-radius: 12px;--telpick-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--telpick-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--telpick-flag-size: 24px;--telpick-font-size: 14px;--telpick-hover-bg: #f3f4f6;--telpick-active-bg: #eff6ff;--telpick-selected-bg: #eff6ff;--telpick-selected-border: #3b82f6;--telpick-selected-shadow: 2px 0 4px rgba(59, 130, 246, .3);--telpick-selected-text: #1f2937;--telpick-text: #1f2937;--telpick-text-secondary: #6b7280;--telpick-border-focus: #3b82f6;--telpick-transition: all .2s cubic-bezier(.4, 0, .2, 1);--telpick-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.telpick-wrapper,.telpick-wrapper *{font-family:var(--telpick-font-family)}.telpick-wrapper{position:relative;display:inline-block}.telpick-btn{display:inline-flex;align-items:center;gap:.75rem;padding:.625rem 1rem;background:var(--telpick-bg);border:1.5px solid var(--telpick-border);border-radius:var(--telpick-radius);font-size:var(--telpick-font-size);color:var(--telpick-text);cursor:pointer;transition:var(--telpick-transition);box-shadow:0 1px 2px #0000000d;font-weight:500;min-width:120px}.telpick-btn:hover{border-color:#d1d5db;box-shadow:var(--telpick-shadow);transform:translateY(-1px)}.telpick-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.telpick-btn:focus{outline:none;border-color:var(--telpick-border-focus);box-shadow:0 0 0 3px #3b82f61a}.telpick-btn .telpick-arrow{margin-left:auto;transition:transform .2s cubic-bezier(.4,0,.2,1);font-size:.75rem;color:var(--telpick-text-secondary)}.telpick-btn[aria-expanded=true] .telpick-arrow{transform:rotate(180deg)}.telpick-flag{width:var(--telpick-flag-size);height:calc(var(--telpick-flag-size) * .75);border-radius:4px;object-fit:cover;overflow:hidden;flex-shrink:0;box-shadow:0 1px 2px #0000001a}.telpick-flag img{width:100%;height:100%;object-fit:cover;display:block}.telpick-dropdown{background:var(--telpick-bg);border:1.5px solid var(--telpick-border);border-radius:var(--telpick-radius);box-shadow:var(--telpick-shadow-lg);width:280px;position:absolute;z-index:1000;margin-top:.5rem;overflow:hidden;opacity:0;transform:translateY(-10px) scale(.95);animation:telpick-dropdown-open .2s cubic-bezier(.4,0,.2,1) forwards}@keyframes telpick-dropdown-open{to{opacity:1;transform:translateY(0) scale(1)}}.telpick-dropdown.telpick-dropdown-closing{animation:telpick-dropdown-close .15s cubic-bezier(.4,0,.2,1) forwards}@keyframes telpick-dropdown-close{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.95)}}.telpick-search{width:100%;padding:.75rem 1rem;border:none;border-bottom:1.5px solid var(--telpick-border);font-size:var(--telpick-font-size);outline:none;background:var(--telpick-bg);color:var(--telpick-text);transition:var(--telpick-transition)}.telpick-search::placeholder{color:var(--telpick-text-secondary)}.telpick-search:focus{border-bottom-color:var(--telpick-border-focus);background:#fafafa}.telpick-dropdown ul{max-height:300px;overflow-y:auto;margin:0;padding:.25rem 0;list-style:none}.telpick-dropdown ul::-webkit-scrollbar{width:6px}.telpick-dropdown ul::-webkit-scrollbar-track{background:transparent}.telpick-dropdown ul::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.telpick-dropdown ul::-webkit-scrollbar-thumb:hover{background:#9ca3af}.telpick-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:var(--telpick-font-size);color:var(--telpick-text);cursor:pointer;transition:var(--telpick-transition);position:relative}.telpick-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--telpick-border-focus);transform:scaleY(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}.telpick-item:hover{background:var(--telpick-hover-bg);padding-left:1.25rem}.telpick-item:hover:before{transform:scaleY(1)}.telpick-item:active{background:var(--telpick-active-bg)}.telpick-item-selected{background:var(--telpick-selected-bg)!important;box-shadow:var(--telpick-selected-shadow)!important;padding-left:1.25rem!important;font-weight:600;color:var(--telpick-selected-text)!important;position:relative}.telpick-item-selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--telpick-selected-border);transform:scaleY(1)!important}.telpick-item-selected:hover{background:var(--telpick-selected-bg)!important;box-shadow:var(--telpick-selected-shadow)!important;color:var(--telpick-selected-text)!important}.telpick-item-selected span,.telpick-item-selected span:last-child{color:var(--telpick-selected-text)!important;font-weight:600}.telpick-item span:last-child{margin-left:auto;color:var(--telpick-text-secondary);font-weight:600;font-size:.875rem}.telpick-item .telpick-flag{flex-shrink:0}.telpick-dropdown-enter-active,.telpick-dropdown-leave-active{transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.telpick-dropdown-enter-from{opacity:0;transform:translateY(-10px) scale(.95)}.telpick-dropdown-enter-to,.telpick-dropdown-leave-from{opacity:1;transform:translateY(0) scale(1)}.telpick-dropdown-leave-to{opacity:0;transform:translateY(-10px) scale(.95)}.relative{position:relative}.ml-auto{margin-left:auto}
package/dist/telpick.es.js ADDED
@@ -0,0 +1,241 @@
1
+ import _, { useRef as v, useEffect as S } from "react";
2
+ class N {
3
+ constructor({ code: o = null, onChange: n = () => {
4
+ }, styleOverrides: s = {} } = {}) {
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;
6
+ }
7
+ async init(o) {
8
+ this.container = o;
9
+ const s = await (await fetch("src/assets/country-code.json")).json();
10
+ if (this.codes = s.sort((a, e) => a.country.localeCompare(e.country, "es")), this.code) {
11
+ const a = this.codes.find((e) => e.country_code === this.code);
12
+ a && (this.selectedCode = a.country_code);
13
+ } else {
14
+ const a = [
15
+ async () => {
16
+ try {
17
+ const i = await (await fetch("https://ip-api.com/json/?fields=countryCode")).json();
18
+ if (i.countryCode)
19
+ return this.codes.find((t) => t.country_code === i.countryCode);
20
+ } catch {
21
+ }
22
+ return null;
23
+ },
24
+ async () => {
25
+ try {
26
+ const i = await (await fetch("https://get.geojs.io/v1/ip/country.json")).json();
27
+ if (i.country)
28
+ return this.codes.find((t) => t.country_code === i.country);
29
+ } catch {
30
+ }
31
+ return null;
32
+ },
33
+ async () => {
34
+ try {
35
+ const i = await (await fetch("https://ipapi.co/json/")).json();
36
+ if (i.country_code)
37
+ return this.codes.find((t) => t.country_code === i.country_code);
38
+ } catch {
39
+ }
40
+ return null;
41
+ }
42
+ ];
43
+ let e = null;
44
+ for (const c of a)
45
+ try {
46
+ if (e = await Promise.race([
47
+ c(),
48
+ new Promise((i) => setTimeout(() => i(null), 3e3))
49
+ ]), e)
50
+ break;
51
+ } catch {
52
+ }
53
+ if (!e)
54
+ try {
55
+ const c = Intl.DateTimeFormat().resolvedOptions().timeZone, t = {
56
+ "America/Lima": "PE",
57
+ "America/Bogota": "CO",
58
+ "America/Mexico_City": "MX",
59
+ "America/Argentina/Buenos_Aires": "AR",
60
+ "America/Santiago": "CL",
61
+ "America/Caracas": "VE",
62
+ "America/Montevideo": "UY",
63
+ "America/Asuncion": "PY",
64
+ "America/La_Paz": "BO",
65
+ "America/Guayaquil": "EC",
66
+ "America/Panama": "PA",
67
+ "America/Costa_Rica": "CR",
68
+ "America/Managua": "NI",
69
+ "America/Tegucigalpa": "HN",
70
+ "America/Guatemala": "GT",
71
+ "America/El_Salvador": "SV",
72
+ "America/Havana": "CU",
73
+ "America/Santo_Domingo": "DO",
74
+ "America/Jamaica": "JM",
75
+ "America/Port-au-Prince": "HT",
76
+ "Europe/Madrid": "ES",
77
+ "Europe/London": "GB",
78
+ "Europe/Paris": "FR",
79
+ "Europe/Berlin": "DE",
80
+ "Europe/Rome": "IT",
81
+ "Europe/Amsterdam": "NL",
82
+ "Europe/Brussels": "BE",
83
+ "Europe/Vienna": "AT",
84
+ "Europe/Zurich": "CH",
85
+ "Europe/Stockholm": "SE",
86
+ "Europe/Oslo": "NO",
87
+ "Europe/Copenhagen": "DK",
88
+ "Europe/Helsinki": "FI",
89
+ "Europe/Warsaw": "PL",
90
+ "Europe/Prague": "CZ",
91
+ "Europe/Bucharest": "RO",
92
+ "Europe/Moscow": "RU",
93
+ "America/New_York": "US",
94
+ "America/Chicago": "US",
95
+ "America/Denver": "US",
96
+ "America/Los_Angeles": "US",
97
+ "America/Toronto": "CA",
98
+ "America/Vancouver": "CA",
99
+ "Asia/Tokyo": "JP",
100
+ "Asia/Shanghai": "CN",
101
+ "Asia/Hong_Kong": "CN",
102
+ "Asia/Seoul": "KR",
103
+ "Asia/Singapore": "SG",
104
+ "Asia/Bangkok": "TH",
105
+ "Asia/Jakarta": "ID",
106
+ "Asia/Manila": "PH",
107
+ "Asia/Kolkata": "IN",
108
+ "Asia/Dubai": "AE",
109
+ "Asia/Riyadh": "SA",
110
+ "Australia/Sydney": "AU",
111
+ "Australia/Melbourne": "AU",
112
+ "Pacific/Auckland": "NZ",
113
+ "Africa/Cairo": "EG",
114
+ "Africa/Johannesburg": "ZA",
115
+ "Africa/Nairobi": "KE",
116
+ "Africa/Lagos": "NG"
117
+ }[c];
118
+ t && (e = this.codes.find((r) => r.country_code === t));
119
+ } catch {
120
+ }
121
+ if (e)
122
+ this.selectedCode = e.country_code;
123
+ else {
124
+ const c = this.codes.find((i) => i.country_code === "CO");
125
+ c && (this.selectedCode = c.country_code);
126
+ }
127
+ }
128
+ this.render();
129
+ const l = this.codes.find((a) => a.country_code === this.selectedCode);
130
+ l && this.onChange(l), this._setupOutsideClick();
131
+ }
132
+ render() {
133
+ this.container.innerHTML = "";
134
+ const o = document.createElement("button");
135
+ o.className = "telpick-btn", Object.assign(o.style, this.styleOverrides), o.onclick = () => {
136
+ this.isDropdownOpen = !this.isDropdownOpen, this.render();
137
+ };
138
+ const n = document.createElement("div");
139
+ n.className = "telpick-flag";
140
+ const s = this.codes.find((e) => e.country_code === this.selectedCode) || { flag: "", code: "", country: "" };
141
+ if (s.flag) {
142
+ const e = document.createElement("img");
143
+ e.src = "src/assets" + s.flag, e.className = "w-full h-full object-cover", e.alt = "flag", n.appendChild(e);
144
+ }
145
+ o.appendChild(n);
146
+ const l = document.createElement("span");
147
+ l.textContent = s.code, o.appendChild(l);
148
+ const a = document.createElement("span");
149
+ if (a.className = "ml-auto", a.textContent = "▼", o.appendChild(a), this.container.appendChild(o), this.isDropdownOpen) {
150
+ this.dropdown = document.createElement("div"), this.dropdown.className = "telpick-dropdown", this.dropdown.onclick = (t) => t.stopPropagation(), this.dropdown.onmousedown = (t) => t.stopPropagation();
151
+ const e = document.createElement("input");
152
+ e.className = "telpick-search", e.type = "text", e.placeholder = "Buscar país...", e.value = this.searchQuery, e.oninput = (t) => {
153
+ var f;
154
+ t.stopPropagation();
155
+ const r = t.target, C = r.selectionStart || 0, p = r.value;
156
+ this.searchQuery = p;
157
+ const u = (f = this.dropdown) == null ? void 0 : f.querySelector("ul");
158
+ u ? (u.innerHTML = "", (this.searchQuery ? this.codes.filter((d) => d.country.toLowerCase().includes(this.searchQuery.toLowerCase())) : this.codes).forEach((d) => {
159
+ const m = document.createElement("li"), k = d.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
160
+ m.className = `telpick-item ${k ? "telpick-item-selected" : ""}`, m.onclick = () => {
161
+ this.selectedCode = d.country_code, this.onChange(d), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
162
+ };
163
+ const g = document.createElement("div");
164
+ g.className = "telpick-flag";
165
+ const A = document.createElement("img");
166
+ A.src = "src/assets" + d.flag, A.className = "w-full h-full object-cover", A.alt = "flag", g.appendChild(A), m.appendChild(g);
167
+ const E = document.createElement("span");
168
+ E.textContent = d.country, m.appendChild(E);
169
+ const w = document.createElement("span");
170
+ w.className = "ml-auto", w.textContent = d.code, m.appendChild(w), u.appendChild(m);
171
+ }), requestAnimationFrame(() => {
172
+ if (e) {
173
+ e.focus();
174
+ const d = Math.min(C + 1, p.length);
175
+ e.setSelectionRange(d, d);
176
+ }
177
+ })) : this.render();
178
+ }, e.onclick = (t) => t.stopPropagation(), e.onmousedown = (t) => t.stopPropagation(), this.dropdown.appendChild(e);
179
+ const c = document.createElement("ul");
180
+ 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) => {
181
+ const r = document.createElement("li"), C = t.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== void 0;
182
+ r.className = `telpick-item ${C ? "telpick-item-selected" : ""}`, r.setAttribute("aria-selected", C), r.onclick = () => {
183
+ this.selectedCode = t.country_code, this.onChange(t), this.isDropdownOpen = !1, this.searchQuery = "", this.render();
184
+ };
185
+ const p = document.createElement("div");
186
+ p.className = "telpick-flag";
187
+ const u = document.createElement("img");
188
+ u.src = "src/assets" + t.flag, u.className = "w-full h-full object-cover", u.alt = "flag", p.appendChild(u), r.appendChild(p);
189
+ const f = document.createElement("span");
190
+ f.textContent = t.country, r.appendChild(f);
191
+ const y = document.createElement("span");
192
+ y.className = "ml-auto", y.textContent = t.code, r.appendChild(y), c.appendChild(r);
193
+ }), this.dropdown.appendChild(c), this.container.appendChild(this.dropdown), requestAnimationFrame(() => {
194
+ e && e.focus();
195
+ });
196
+ }
197
+ }
198
+ _setupOutsideClick() {
199
+ this._outsideHandler && document.removeEventListener("click", this._outsideHandler), this._outsideHandler = (o) => {
200
+ const n = o.target;
201
+ if (this.isDropdownOpen && this.container && n) {
202
+ const s = this.container.querySelector(".telpick-dropdown");
203
+ !this.container.contains(n) && (!s || !s.contains(n)) && (this.isDropdownOpen = !1, this.render());
204
+ }
205
+ }, document.addEventListener("click", this._outsideHandler, !0);
206
+ }
207
+ destroy() {
208
+ this._outsideHandler && document.removeEventListener("mousedown", this._outsideHandler), this.container.innerHTML = "";
209
+ }
210
+ }
211
+ window.Telpick = N;
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
+ }
237
+ export {
238
+ N as Telpick,
239
+ T as TelpickReact,
240
+ P as TelpickVue
241
+ };
package/dist/telpick.umd.js ADDED
@@ -0,0 +1 @@
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"})});
package/package.json ADDED
@@ -0,0 +1,93 @@
1
+ {
2
+ "name": "telpick",
3
+ "version": "1.0.0",
4
+ "description": "Selector de país y código telefónico multiplataforma con diseño moderno, animaciones suaves y detección automática por IP",
5
+ "main": "dist/telpick.umd.js",
6
+ "module": "dist/telpick.esm.js",
7
+ "types": "dist/telpick.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/telpick.esm.js",
11
+ "require": "./dist/telpick.umd.js",
12
+ "types": "./dist/telpick.d.ts"
13
+ },
14
+ "./vue": {
15
+ "import": "./dist/telpick.vue.js",
16
+ "types": "./dist/telpick.d.ts"
17
+ },
18
+ "./react": {
19
+ "import": "./dist/telpick.react.js",
20
+ "types": "./dist/telpick.d.ts"
21
+ },
22
+ "./vanilla": {
23
+ "import": "./dist/telpick.vanilla.js",
24
+ "types": "./dist/telpick.d.ts"
25
+ },
26
+ "./style.css": "./dist/style.css"
27
+ },
28
+ "files": [
29
+ "dist",
30
+ "src",
31
+ "README.md",
32
+ "LICENSE"
33
+ ],
34
+ "scripts": {
35
+ "build": "vite build",
36
+ "dev": "vite",
37
+ "prepublishOnly": "npm run build",
38
+ "test": "jest"
39
+ },
40
+ "repository": {
41
+ "type": "git",
42
+ "url": "https://github.com/julioalmirooficial/telpick.git"
43
+ },
44
+ "keywords": [
45
+ "country",
46
+ "phone",
47
+ "selector",
48
+ "country-selector",
49
+ "phone-code",
50
+ "dial-code",
51
+ "vue",
52
+ "react",
53
+ "vanilla",
54
+ "cdn",
55
+ "telpick",
56
+ "geolocation",
57
+ "ip-detection",
58
+ "typescript"
59
+ ],
60
+ "author": {
61
+ "name": "Julio Almiro",
62
+ "email": "almiror.info@gmail.com",
63
+ "url": "https://julioalmiro.com"
64
+ },
65
+ "license": "MIT",
66
+ "bugs": {
67
+ "url": "https://github.com/julioalmirooficial/telpick/issues"
68
+ },
69
+ "homepage": "https://github.com/julioalmirooficial/telpick#readme",
70
+ "peerDependencies": {
71
+ "vue": ">=3.0.0",
72
+ "react": ">=17.0.0"
73
+ },
74
+ "peerDependenciesMeta": {
75
+ "vue": {
76
+ "optional": true
77
+ },
78
+ "react": {
79
+ "optional": true
80
+ }
81
+ },
82
+ "devDependencies": {
83
+ "vite": "^4.0.0",
84
+ "typescript": "^5.0.0",
85
+ "vue": "^3.0.0",
86
+ "react": "^18.0.0",
87
+ "jest": "^29.0.0"
88
+ },
89
+ "engines": {
90
+ "node": ">=14.0.0",
91
+ "npm": ">=6.0.0"
92
+ }
93
+ }