@jacksonavila/phone-lib 2.0.3 → 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 +49 -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 +72 -11
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.3/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.3/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.3/`
93
- - **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.3/`
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.3/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.3/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;
@@ -548,6 +548,19 @@ const phoneLib = new PhoneLib('#container', {
548
548
  valid: '✓ Valid number'
549
549
  },
550
550
 
551
+ // Width control / Control de anchos
552
+ width: '500px', // Wrapper width / Ancho del wrapper
553
+ maxWidth: '100%', // Max width / Ancho máximo
554
+ dropdownWidth: '150px', // Country selector width (integrated) / Ancho selector (integrado)
555
+ inputWidth: '350px', // Phone input width (integrated) / Ancho input (integrado)
556
+ gridColumns: '3fr 1fr 4fr', // Grid columns (separated) / Columnas grid (separado)
557
+ countryWidth: '250px', // Country field width (separated) / Ancho campo país (separado)
558
+ dialCodeWidth: '100px', // Dial code width (separated) / Ancho código (separado)
559
+ phoneWidth: '350px', // Phone field width (separated) / Ancho campo teléfono (separado)
560
+
561
+ // Arrow icon / Icono de flecha
562
+ arrowIcon: null, // Custom arrow HTML (SVG, emoji, image) / HTML personalizado para flecha
563
+
551
564
  // Styles / Estilos
552
565
  customClasses: {
553
566
  wrapper: 'my-class',
@@ -772,6 +785,25 @@ const phoneLib = new PhoneLib('#container', {
772
785
  });
773
786
  ```
774
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
+
775
807
  ### Customizable Elements / Elementos Personalizables
776
808
 
777
809
  - `wrapper` - Main container / Contenedor principal
@@ -779,6 +811,7 @@ const phoneLib = new PhoneLib('#container', {
779
811
  - `input` - Phone input field / Campo de entrada de teléfono
780
812
  - `dialCodeInput` - Dial code field (separated layout only) / Campo de código (solo layout separado)
781
813
  - `row` - Grid row (separated layout only) / Fila del grid (solo layout separado)
814
+ - `arrowIcon` - Dropdown arrow icon / Icono de flecha del dropdown
782
815
 
783
816
  ---
784
817
 
@@ -860,8 +893,17 @@ const phoneLib = new PhoneLib('#container', {
860
893
  | `countryLabel` | string | `'Country'` / `'País'` | Label for selector / Label para selector |
861
894
  | `dialCodeLabel` | string | `'Code'` / `'Código'` | Label for code / Label para código |
862
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 |
863
897
  | `customClasses` | object | `{}` | Custom CSS classes / Clases CSS personalizadas |
864
898
  | `customStyles` | object | `{}` | Inline styles / Estilos inline personalizados |
899
+ | `width` | string | `null` | Wrapper width (e.g., `'500px'`, `'100%'`) / Ancho del wrapper |
900
+ | `maxWidth` | string | `null` | Max wrapper width / Ancho máximo del wrapper |
901
+ | `dropdownWidth` | string | `null` | Country selector width (integrated) / Ancho selector (integrado) |
902
+ | `inputWidth` | string | `null` | Phone input width (integrated) / Ancho input (integrado) |
903
+ | `gridColumns` | string | `null` | Grid columns (separated, e.g., `'3fr 1fr 4fr'`) / Columnas grid (separado) |
904
+ | `countryWidth` | string | `null` | Country field width (separated) / Ancho campo país (separado) |
905
+ | `dialCodeWidth` | string | `null` | Dial code width (separated) / Ancho código (separado) |
906
+ | `phoneWidth` | string | `null` | Phone field width (separated) / Ancho campo teléfono (separado) |
865
907
  | `messages` | object | `{}` | Custom messages / Mensajes personalizables |
866
908
  | `ariaLabels` | object | `{}` | ARIA labels / Labels ARIA personalizables |
867
909
  | `onCountryChange` | function | `null` | Callback when country changes / Callback cuando cambia el país |
@@ -895,6 +937,7 @@ This will open `http://localhost:3004` with all available demos / Esto abrirá `
895
937
  - `demo-react.html` - React example / Ejemplo con React
896
938
  - `demo-cdn-importmap.html` - CDN with Import Maps / CDN con Import Maps
897
939
  - `demo-cdn-script.html` - CDN with Script Tag / CDN con Script Tag
940
+ - `demo-widths.html` - Width control examples / Ejemplos de control de anchos
898
941
 
899
942
  ---
900
943
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jacksonavila/phone-lib",
3
- "version": "2.0.3",
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.3/phone-lib.css">
8
- * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.3/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.3';
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,18 @@ 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.)
32
+ // Control de anchos
33
+ width: options.width || null, // Ancho del wrapper (ej: '500px', '100%', '50rem')
34
+ maxWidth: options.maxWidth || null, // Ancho máximo del wrapper
35
+ dropdownWidth: options.dropdownWidth || null, // Ancho del selector de país (layout integrado)
36
+ inputWidth: options.inputWidth || null, // Ancho del campo de teléfono (layout integrado)
37
+ // Para layout separado
38
+ gridColumns: options.gridColumns || null, // Columnas del grid (ej: '1fr 1fr 2fr', '2fr 1fr 3fr')
39
+ countryWidth: options.countryWidth || null, // Ancho del campo país (layout separado)
40
+ dialCodeWidth: options.dialCodeWidth || null, // Ancho del campo código (layout separado)
41
+ phoneWidth: options.phoneWidth || null, // Ancho del campo teléfono (layout separado)
30
42
  // Callbacks y eventos
31
43
  onCountryChange: options.onCountryChange || null,
32
44
  onPhoneChange: options.onPhoneChange || null,
@@ -390,6 +402,24 @@ class PhoneLib {
390
402
  .join(' ');
391
403
  }
392
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
+
393
423
  renderIntegrated() {
394
424
  const selectedCountryData = this.countries.find(c => c.iso2 === this.selectedCountry);
395
425
  const defaultFlag = this.getFlagImage('UN');
@@ -398,19 +428,33 @@ class PhoneLib {
398
428
  'phone-lib-wrapper phone-lib-layout-integrated',
399
429
  this.options.customClasses?.wrapper
400
430
  );
401
- const wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
431
+
432
+ // Aplicar estilos personalizados y anchos
433
+ let wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
434
+ if (this.options.width) {
435
+ wrapperStyle += ` width: ${this.options.width};`;
436
+ }
437
+ if (this.options.maxWidth) {
438
+ wrapperStyle += ` max-width: ${this.options.maxWidth};`;
439
+ }
402
440
 
403
441
  const dropdownButtonClass = this.applyCustomClasses(
404
442
  'phone-lib-dropdown-button',
405
443
  this.options.customClasses?.dropdownButton
406
444
  );
407
- const dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
445
+ let dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
446
+ if (this.options.dropdownWidth) {
447
+ dropdownButtonStyle += ` min-width: ${this.options.dropdownWidth}; width: ${this.options.dropdownWidth};`;
448
+ }
408
449
 
409
450
  const inputClass = this.applyCustomClasses(
410
451
  'phone-lib-input',
411
452
  this.options.customClasses?.input
412
453
  );
413
- const inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
454
+ let inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
455
+ if (this.options.inputWidth) {
456
+ inputStyle += ` width: ${this.options.inputWidth};`;
457
+ }
414
458
 
415
459
  this.container.innerHTML = `
416
460
  <div class="${wrapperClass}" ${wrapperStyle ? `style="${wrapperStyle}"` : ''}>
@@ -418,7 +462,7 @@ class PhoneLib {
418
462
  <button type="button" class="${dropdownButtonClass}" ${dropdownButtonStyle ? `style="${dropdownButtonStyle}"` : ''} aria-expanded="false" ${this.isDisabled ? 'disabled' : ''} aria-label="${this.options.ariaLabels.dropdownButton}">
419
463
  <span class="phone-lib-flag">${selectedCountryData?.flag || defaultFlag}</span>
420
464
  ${this.options.showDialCode ? `<span class="phone-lib-dial-code">+${selectedCountryData?.dialCode || ''}</span>` : ''}
421
- <span class="phone-lib-arrow">▼</span>
465
+ <span class="phone-lib-arrow">${this.getArrowIcon()}</span>
422
466
  </button>
423
467
  <div class="phone-lib-dropdown-menu" style="display: none;">
424
468
  <div class="phone-lib-countries-list">
@@ -466,13 +510,21 @@ class PhoneLib {
466
510
  const defaultFlag = this.getFlagImage('UN');
467
511
 
468
512
  // Determinar las columnas del grid según si se muestra el código
469
- const gridColumns = this.options.showDialCode ? '2fr 1fr 2fr' : '1fr 2fr';
513
+ let gridColumns = this.options.gridColumns || (this.options.showDialCode ? '2fr 1fr 2fr' : '1fr 2fr');
470
514
 
471
515
  const wrapperClass = this.applyCustomClasses(
472
516
  'phone-lib-wrapper phone-lib-layout-separated',
473
517
  this.options.customClasses?.wrapper
474
518
  );
475
- const wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
519
+
520
+ // Aplicar estilos personalizados y anchos
521
+ let wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
522
+ if (this.options.width) {
523
+ wrapperStyle += ` width: ${this.options.width};`;
524
+ }
525
+ if (this.options.maxWidth) {
526
+ wrapperStyle += ` max-width: ${this.options.maxWidth};`;
527
+ }
476
528
 
477
529
  const rowStyle = this.applyCustomStyles(this.options.customStyles?.row);
478
530
  const finalRowStyle = `grid-template-columns: ${gridColumns};${rowStyle ? ` ${rowStyle}` : ''}`;
@@ -481,19 +533,28 @@ class PhoneLib {
481
533
  'phone-lib-dropdown-button-separated',
482
534
  this.options.customClasses?.dropdownButton
483
535
  );
484
- const dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
536
+ let dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
537
+ if (this.options.countryWidth) {
538
+ dropdownButtonStyle += ` width: ${this.options.countryWidth};`;
539
+ }
485
540
 
486
541
  const dialCodeInputClass = this.applyCustomClasses(
487
542
  'phone-lib-dial-code-input',
488
543
  this.options.customClasses?.dialCodeInput
489
544
  );
490
- const dialCodeInputStyle = this.applyCustomStyles(this.options.customStyles?.dialCodeInput);
545
+ let dialCodeInputStyle = this.applyCustomStyles(this.options.customStyles?.dialCodeInput);
546
+ if (this.options.dialCodeWidth) {
547
+ dialCodeInputStyle += ` width: ${this.options.dialCodeWidth};`;
548
+ }
491
549
 
492
550
  const inputClass = this.applyCustomClasses(
493
551
  'phone-lib-input-separated',
494
552
  this.options.customClasses?.input
495
553
  );
496
- const inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
554
+ let inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
555
+ if (this.options.phoneWidth) {
556
+ inputStyle += ` width: ${this.options.phoneWidth};`;
557
+ }
497
558
 
498
559
  this.container.innerHTML = `
499
560
  <div class="${wrapperClass}" ${wrapperStyle ? `style="${wrapperStyle}"` : ''}>
@@ -504,7 +565,7 @@ class PhoneLib {
504
565
  <button type="button" class="${dropdownButtonClass}" ${dropdownButtonStyle ? `style="${dropdownButtonStyle}"` : ''} aria-expanded="false" ${this.isDisabled ? 'disabled' : ''} aria-label="${this.options.ariaLabels.dropdownButton}">
505
566
  <span class="phone-lib-flag">${selectedCountryData?.flag || defaultFlag}</span>
506
567
  <span class="phone-lib-country-name-display">${selectedCountryData?.name || ''}</span>
507
- <span class="phone-lib-arrow">▼</span>
568
+ <span class="phone-lib-arrow">${this.getArrowIcon()}</span>
508
569
  </button>
509
570
  <div class="phone-lib-dropdown-menu" style="display: none;">
510
571
  <div class="phone-lib-countries-list">
@@ -1235,7 +1296,7 @@ class PhoneLib {
1235
1296
  }
1236
1297
 
1237
1298
  // Re-renderizar si cambió layout u opciones visuales importantes
1238
- if (newOptions.layout || newOptions.showDialCode !== undefined || newOptions.customClasses || newOptions.customStyles) {
1299
+ if (newOptions.layout || newOptions.showDialCode !== undefined || newOptions.customClasses || newOptions.customStyles || newOptions.arrowIcon !== undefined) {
1239
1300
  this.render();
1240
1301
  this.attachEventListeners();
1241
1302
  }