@jacksonavila/phone-lib 2.0.3 → 2.0.4

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 (4) hide show
  1. package/README.md +25 -6
  2. package/package.json +1 -1
  3. package/phone-lib.cdn.js +3 -3
  4. package/phone-lib.js +49 -8
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.4/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.4/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.4/`
93
+ - **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.4/`
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.4/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.4/phone-lib.cdn.js"></script>
107
107
 
108
108
  <script>
109
109
  let phoneLib = null;
@@ -548,6 +548,16 @@ 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
+
551
561
  // Styles / Estilos
552
562
  customClasses: {
553
563
  wrapper: 'my-class',
@@ -862,6 +872,14 @@ const phoneLib = new PhoneLib('#container', {
862
872
  | `phoneLabel` | string | `'Phone number'` / `'Número de teléfono'` | Label for number / Label para número |
863
873
  | `customClasses` | object | `{}` | Custom CSS classes / Clases CSS personalizadas |
864
874
  | `customStyles` | object | `{}` | Inline styles / Estilos inline personalizados |
875
+ | `width` | string | `null` | Wrapper width (e.g., `'500px'`, `'100%'`) / Ancho del wrapper |
876
+ | `maxWidth` | string | `null` | Max wrapper width / Ancho máximo del wrapper |
877
+ | `dropdownWidth` | string | `null` | Country selector width (integrated) / Ancho selector (integrado) |
878
+ | `inputWidth` | string | `null` | Phone input width (integrated) / Ancho input (integrado) |
879
+ | `gridColumns` | string | `null` | Grid columns (separated, e.g., `'3fr 1fr 4fr'`) / Columnas grid (separado) |
880
+ | `countryWidth` | string | `null` | Country field width (separated) / Ancho campo país (separado) |
881
+ | `dialCodeWidth` | string | `null` | Dial code width (separated) / Ancho código (separado) |
882
+ | `phoneWidth` | string | `null` | Phone field width (separated) / Ancho campo teléfono (separado) |
865
883
  | `messages` | object | `{}` | Custom messages / Mensajes personalizables |
866
884
  | `ariaLabels` | object | `{}` | ARIA labels / Labels ARIA personalizables |
867
885
  | `onCountryChange` | function | `null` | Callback when country changes / Callback cuando cambia el país |
@@ -895,6 +913,7 @@ This will open `http://localhost:3004` with all available demos / Esto abrirá `
895
913
  - `demo-react.html` - React example / Ejemplo con React
896
914
  - `demo-cdn-importmap.html` - CDN with Import Maps / CDN con Import Maps
897
915
  - `demo-cdn-script.html` - CDN with Script Tag / CDN con Script Tag
916
+ - `demo-widths.html` - Width control examples / Ejemplos de control de anchos
898
917
 
899
918
  ---
900
919
 
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.4",
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.4/phone-lib.css">
8
+ * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/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.4';
21
21
  const PACKAGE_NAME = '@jacksonavila/phone-lib';
22
22
 
23
23
  // URLs de CDN
package/phone-lib.js CHANGED
@@ -27,6 +27,16 @@ 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
+ // Control de anchos
31
+ width: options.width || null, // Ancho del wrapper (ej: '500px', '100%', '50rem')
32
+ maxWidth: options.maxWidth || null, // Ancho máximo del wrapper
33
+ dropdownWidth: options.dropdownWidth || null, // Ancho del selector de país (layout integrado)
34
+ inputWidth: options.inputWidth || null, // Ancho del campo de teléfono (layout integrado)
35
+ // Para layout separado
36
+ gridColumns: options.gridColumns || null, // Columnas del grid (ej: '1fr 1fr 2fr', '2fr 1fr 3fr')
37
+ countryWidth: options.countryWidth || null, // Ancho del campo país (layout separado)
38
+ dialCodeWidth: options.dialCodeWidth || null, // Ancho del campo código (layout separado)
39
+ phoneWidth: options.phoneWidth || null, // Ancho del campo teléfono (layout separado)
30
40
  // Callbacks y eventos
31
41
  onCountryChange: options.onCountryChange || null,
32
42
  onPhoneChange: options.onPhoneChange || null,
@@ -398,19 +408,33 @@ class PhoneLib {
398
408
  'phone-lib-wrapper phone-lib-layout-integrated',
399
409
  this.options.customClasses?.wrapper
400
410
  );
401
- const wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
411
+
412
+ // Aplicar estilos personalizados y anchos
413
+ let wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
414
+ if (this.options.width) {
415
+ wrapperStyle += ` width: ${this.options.width};`;
416
+ }
417
+ if (this.options.maxWidth) {
418
+ wrapperStyle += ` max-width: ${this.options.maxWidth};`;
419
+ }
402
420
 
403
421
  const dropdownButtonClass = this.applyCustomClasses(
404
422
  'phone-lib-dropdown-button',
405
423
  this.options.customClasses?.dropdownButton
406
424
  );
407
- const dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
425
+ let dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
426
+ if (this.options.dropdownWidth) {
427
+ dropdownButtonStyle += ` min-width: ${this.options.dropdownWidth}; width: ${this.options.dropdownWidth};`;
428
+ }
408
429
 
409
430
  const inputClass = this.applyCustomClasses(
410
431
  'phone-lib-input',
411
432
  this.options.customClasses?.input
412
433
  );
413
- const inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
434
+ let inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
435
+ if (this.options.inputWidth) {
436
+ inputStyle += ` width: ${this.options.inputWidth};`;
437
+ }
414
438
 
415
439
  this.container.innerHTML = `
416
440
  <div class="${wrapperClass}" ${wrapperStyle ? `style="${wrapperStyle}"` : ''}>
@@ -466,13 +490,21 @@ class PhoneLib {
466
490
  const defaultFlag = this.getFlagImage('UN');
467
491
 
468
492
  // Determinar las columnas del grid según si se muestra el código
469
- const gridColumns = this.options.showDialCode ? '2fr 1fr 2fr' : '1fr 2fr';
493
+ let gridColumns = this.options.gridColumns || (this.options.showDialCode ? '2fr 1fr 2fr' : '1fr 2fr');
470
494
 
471
495
  const wrapperClass = this.applyCustomClasses(
472
496
  'phone-lib-wrapper phone-lib-layout-separated',
473
497
  this.options.customClasses?.wrapper
474
498
  );
475
- const wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
499
+
500
+ // Aplicar estilos personalizados y anchos
501
+ let wrapperStyle = this.applyCustomStyles(this.options.customStyles?.wrapper);
502
+ if (this.options.width) {
503
+ wrapperStyle += ` width: ${this.options.width};`;
504
+ }
505
+ if (this.options.maxWidth) {
506
+ wrapperStyle += ` max-width: ${this.options.maxWidth};`;
507
+ }
476
508
 
477
509
  const rowStyle = this.applyCustomStyles(this.options.customStyles?.row);
478
510
  const finalRowStyle = `grid-template-columns: ${gridColumns};${rowStyle ? ` ${rowStyle}` : ''}`;
@@ -481,19 +513,28 @@ class PhoneLib {
481
513
  'phone-lib-dropdown-button-separated',
482
514
  this.options.customClasses?.dropdownButton
483
515
  );
484
- const dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
516
+ let dropdownButtonStyle = this.applyCustomStyles(this.options.customStyles?.dropdownButton);
517
+ if (this.options.countryWidth) {
518
+ dropdownButtonStyle += ` width: ${this.options.countryWidth};`;
519
+ }
485
520
 
486
521
  const dialCodeInputClass = this.applyCustomClasses(
487
522
  'phone-lib-dial-code-input',
488
523
  this.options.customClasses?.dialCodeInput
489
524
  );
490
- const dialCodeInputStyle = this.applyCustomStyles(this.options.customStyles?.dialCodeInput);
525
+ let dialCodeInputStyle = this.applyCustomStyles(this.options.customStyles?.dialCodeInput);
526
+ if (this.options.dialCodeWidth) {
527
+ dialCodeInputStyle += ` width: ${this.options.dialCodeWidth};`;
528
+ }
491
529
 
492
530
  const inputClass = this.applyCustomClasses(
493
531
  'phone-lib-input-separated',
494
532
  this.options.customClasses?.input
495
533
  );
496
- const inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
534
+ let inputStyle = this.applyCustomStyles(this.options.customStyles?.input);
535
+ if (this.options.phoneWidth) {
536
+ inputStyle += ` width: ${this.options.phoneWidth};`;
537
+ }
497
538
 
498
539
  this.container.innerHTML = `
499
540
  <div class="${wrapperClass}" ${wrapperStyle ? `style="${wrapperStyle}"` : ''}>