@jacksonavila/phone-lib 2.0.4 → 2.0.5

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.
Files changed (5) hide show
  1. package/README.md +30 -6
  2. package/package.json +1 -1
  3. package/phone-lib.cdn.js +3 -3
  4. package/phone-lib.css +31 -2
  5. package/phone-lib.js +23 -3
package/README.md CHANGED
@@ -61,7 +61,7 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
61
61
  <!DOCTYPE html>
62
62
  <html>
63
63
  <head>
64
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.css">
64
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.css">
65
65
  </head>
66
66
  <body>
67
67
  <div id="phone-container"></div>
@@ -69,7 +69,7 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
69
69
  <script type="importmap">
70
70
  {
71
71
  "imports": {
72
- "@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.js",
72
+ "@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.js",
73
73
  "libphonenumber-js": "https://esm.sh/libphonenumber-js@1.11.0"
74
74
  }
75
75
  }
@@ -89,8 +89,8 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
89
89
  ```
90
90
 
91
91
  **CDN URLs / URLs de CDN:**
92
- - **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/`
93
- - **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.4/`
92
+ - **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/`
93
+ - **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.5/`
94
94
 
95
95
  ### Method 2: Script Tag (All Browsers) / Método 2: Script Tag (Todos los Navegadores)
96
96
 
@@ -98,12 +98,12 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
98
98
  <!DOCTYPE html>
99
99
  <html>
100
100
  <head>
101
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.css">
101
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.css">
102
102
  </head>
103
103
  <body>
104
104
  <div id="phone-container"></div>
105
105
 
106
- <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.cdn.js"></script>
106
+ <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.cdn.js"></script>
107
107
 
108
108
  <script>
109
109
  let phoneLib = null;
@@ -558,6 +558,9 @@ const phoneLib = new PhoneLib('#container', {
558
558
  dialCodeWidth: '100px', // Dial code width (separated) / Ancho código (separado)
559
559
  phoneWidth: '350px', // Phone field width (separated) / Ancho campo teléfono (separado)
560
560
 
561
+ // Arrow icon / Icono de flecha
562
+ arrowIcon: null, // Custom arrow HTML (SVG, emoji, image) / HTML personalizado para flecha
563
+
561
564
  // Styles / Estilos
562
565
  customClasses: {
563
566
  wrapper: 'my-class',
@@ -782,6 +785,25 @@ const phoneLib = new PhoneLib('#container', {
782
785
  });
783
786
  ```
784
787
 
788
+ ### Custom Arrow Icon / Icono de Flecha Personalizado
789
+
790
+ ```javascript
791
+ const phoneLib = new PhoneLib('#container', {
792
+ // Opción 1: SVG personalizado
793
+ arrowIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
794
+ <path d="M3 4.5 L6 7.5 L9 4.5" stroke="#333" stroke-width="2" fill="none"/>
795
+ </svg>`,
796
+
797
+ // Opción 2: Emoji
798
+ arrowIcon: '▼',
799
+
800
+ // Opción 3: Imagen
801
+ arrowIcon: '<img src="arrow.png" alt="▼" style="width: 12px; height: 12px;">'
802
+ });
803
+ ```
804
+
805
+ **Nota:** Si no se especifica `arrowIcon`, se usa un chevron SVG por defecto.
806
+
785
807
  ### Customizable Elements / Elementos Personalizables
786
808
 
787
809
  - `wrapper` - Main container / Contenedor principal
@@ -789,6 +811,7 @@ const phoneLib = new PhoneLib('#container', {
789
811
  - `input` - Phone input field / Campo de entrada de teléfono
790
812
  - `dialCodeInput` - Dial code field (separated layout only) / Campo de código (solo layout separado)
791
813
  - `row` - Grid row (separated layout only) / Fila del grid (solo layout separado)
814
+ - `arrowIcon` - Dropdown arrow icon / Icono de flecha del dropdown
792
815
 
793
816
  ---
794
817
 
@@ -870,6 +893,7 @@ const phoneLib = new PhoneLib('#container', {
870
893
  | `countryLabel` | string | `'Country'` / `'País'` | Label for selector / Label para selector |
871
894
  | `dialCodeLabel` | string | `'Code'` / `'Código'` | Label for code / Label para código |
872
895
  | `phoneLabel` | string | `'Phone number'` / `'Número de teléfono'` | Label for number / Label para número |
896
+ | `arrowIcon` | string | `null` | Custom arrow HTML (SVG, emoji, image) / HTML personalizado para flecha |
873
897
  | `customClasses` | object | `{}` | Custom CSS classes / Clases CSS personalizadas |
874
898
  | `customStyles` | object | `{}` | Inline styles / Estilos inline personalizados |
875
899
  | `width` | string | `null` | Wrapper width (e.g., `'500px'`, `'100%'`) / Ancho del wrapper |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jacksonavila/phone-lib",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "description": "Librería JavaScript para input de teléfono con selector de país y banderas - Compatible con Vanilla JS y React",
5
5
  "main": "phone-lib.js",
6
6
  "module": "phone-lib.js",
package/phone-lib.cdn.js CHANGED
@@ -4,8 +4,8 @@
4
4
  * Carga libphonenumber-js dinámicamente y expone PhoneLib globalmente
5
5
  *
6
6
  * Uso:
7
- * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.css">
8
- * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.cdn.js"></script>
7
+ * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.css">
8
+ * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.cdn.js"></script>
9
9
  * <script>
10
10
  * document.addEventListener('phoneLibReady', () => {
11
11
  * const phoneLib = new PhoneLib('#container', {...});
@@ -17,7 +17,7 @@
17
17
  'use strict';
18
18
 
19
19
  // Versión del paquete (actualizar cuando se publique nueva versión)
20
- const PACKAGE_VERSION = '2.0.4';
20
+ const PACKAGE_VERSION = '2.0.5';
21
21
  const PACKAGE_NAME = '@jacksonavila/phone-lib';
22
22
 
23
23
  // URLs de CDN
package/phone-lib.css CHANGED
@@ -30,6 +30,7 @@
30
30
  font-size: 16px;
31
31
  min-width: 120px;
32
32
  height: 100%;
33
+ overflow: visible;
33
34
  }
34
35
 
35
36
  .phone-lib-dropdown-button:hover {
@@ -66,10 +67,27 @@
66
67
  }
67
68
 
68
69
  .phone-lib-arrow {
69
- font-size: 10px;
70
- color: #666;
70
+ width: 14px;
71
+ height: 14px;
71
72
  margin-left: auto;
72
73
  transition: transform 0.2s ease;
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ flex-shrink: 0;
78
+ color: #666;
79
+ }
80
+
81
+ .phone-lib-arrow svg {
82
+ width: 100%;
83
+ height: 100%;
84
+ display: block;
85
+ }
86
+
87
+ .phone-lib-arrow svg path,
88
+ .phone-lib-arrow svg line {
89
+ stroke: currentColor;
90
+ fill: none;
73
91
  }
74
92
 
75
93
  .phone-lib-dropdown-button.active .phone-lib-arrow {
@@ -105,6 +123,8 @@
105
123
  cursor: pointer;
106
124
  transition: background-color 0.15s ease;
107
125
  border-bottom: 1px solid #f0f0f0;
126
+ min-width: 0;
127
+ overflow: visible;
108
128
  }
109
129
 
110
130
  .phone-lib-country-item:last-child {
@@ -140,6 +160,9 @@
140
160
  .phone-lib-country-name {
141
161
  flex: 1;
142
162
  color: #333;
163
+ white-space: nowrap;
164
+ overflow: visible;
165
+ text-overflow: clip;
143
166
  }
144
167
 
145
168
  .phone-lib-country-dial-code {
@@ -271,6 +294,8 @@
271
294
  font-size: 16px;
272
295
  width: 100%;
273
296
  text-align: left;
297
+ min-width: 0;
298
+ overflow: visible;
274
299
  }
275
300
 
276
301
  .phone-lib-dropdown-button-separated:hover {
@@ -287,6 +312,10 @@
287
312
  flex: 1;
288
313
  color: #333;
289
314
  font-weight: 500;
315
+ white-space: nowrap;
316
+ overflow: visible;
317
+ text-overflow: clip;
318
+ min-width: 0;
290
319
  }
291
320
 
292
321
  .phone-lib-dial-code-input {
package/phone-lib.js CHANGED
@@ -27,6 +27,8 @@ class PhoneLib {
27
27
  showDialCode: options.showDialCode !== undefined ? options.showDialCode : true, // Mostrar código de marcación
28
28
  customClasses: options.customClasses || {}, // Clases CSS personalizadas
29
29
  customStyles: options.customStyles || {}, // Estilos inline personalizados
30
+ // Icono de flecha personalizable
31
+ arrowIcon: options.arrowIcon || null, // HTML personalizado para la flecha (ej: SVG, imagen, etc.)
30
32
  // Control de anchos
31
33
  width: options.width || null, // Ancho del wrapper (ej: '500px', '100%', '50rem')
32
34
  maxWidth: options.maxWidth || null, // Ancho máximo del wrapper
@@ -400,6 +402,24 @@ class PhoneLib {
400
402
  .join(' ');
401
403
  }
402
404
 
405
+ /**
406
+ * Obtiene el HTML del icono de flecha
407
+ */
408
+ getArrowIcon() {
409
+ // Si hay un icono personalizado, usarlo
410
+ if (this.options.arrowIcon) {
411
+ return this.options.arrowIcon;
412
+ }
413
+
414
+ // Chevron SVG por defecto (simple, apuntando hacia abajo - solo líneas, sin relleno)
415
+ // Forma de chevron: dos líneas que forman una V apuntando hacia abajo
416
+ // Usa dos paths separados para asegurar que se vea como chevron, no triángulo
417
+ return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
418
+ <line x1="3" y1="5" x2="6" y2="8"/>
419
+ <line x1="6" y1="8" x2="9" y2="5"/>
420
+ </svg>`;
421
+ }
422
+
403
423
  renderIntegrated() {
404
424
  const selectedCountryData = this.countries.find(c => c.iso2 === this.selectedCountry);
405
425
  const defaultFlag = this.getFlagImage('UN');
@@ -442,7 +462,7 @@ class PhoneLib {
442
462
  <button type="button" class="${dropdownButtonClass}" ${dropdownButtonStyle ? `style="${dropdownButtonStyle}"` : ''} aria-expanded="false" ${this.isDisabled ? 'disabled' : ''} aria-label="${this.options.ariaLabels.dropdownButton}">
443
463
  <span class="phone-lib-flag">${selectedCountryData?.flag || defaultFlag}</span>
444
464
  ${this.options.showDialCode ? `<span class="phone-lib-dial-code">+${selectedCountryData?.dialCode || ''}</span>` : ''}
445
- <span class="phone-lib-arrow">▼</span>
465
+ <span class="phone-lib-arrow">${this.getArrowIcon()}</span>
446
466
  </button>
447
467
  <div class="phone-lib-dropdown-menu" style="display: none;">
448
468
  <div class="phone-lib-countries-list">
@@ -545,7 +565,7 @@ class PhoneLib {
545
565
  <button type="button" class="${dropdownButtonClass}" ${dropdownButtonStyle ? `style="${dropdownButtonStyle}"` : ''} aria-expanded="false" ${this.isDisabled ? 'disabled' : ''} aria-label="${this.options.ariaLabels.dropdownButton}">
546
566
  <span class="phone-lib-flag">${selectedCountryData?.flag || defaultFlag}</span>
547
567
  <span class="phone-lib-country-name-display">${selectedCountryData?.name || ''}</span>
548
- <span class="phone-lib-arrow">▼</span>
568
+ <span class="phone-lib-arrow">${this.getArrowIcon()}</span>
549
569
  </button>
550
570
  <div class="phone-lib-dropdown-menu" style="display: none;">
551
571
  <div class="phone-lib-countries-list">
@@ -1276,7 +1296,7 @@ class PhoneLib {
1276
1296
  }
1277
1297
 
1278
1298
  // Re-renderizar si cambió layout u opciones visuales importantes
1279
- if (newOptions.layout || newOptions.showDialCode !== undefined || newOptions.customClasses || newOptions.customStyles) {
1299
+ if (newOptions.layout || newOptions.showDialCode !== undefined || newOptions.customClasses || newOptions.customStyles || newOptions.arrowIcon !== undefined) {
1280
1300
  this.render();
1281
1301
  this.attachEventListeners();
1282
1302
  }