@jacksonavila/phone-lib 2.0.2 → 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 +108 -0
  2. package/package.json +6 -3
  3. package/phone-lib.cdn.js +101 -0
  4. package/phone-lib.js +49 -8
package/README.md CHANGED
@@ -29,10 +29,16 @@ Librería JavaScript moderna para integrar fácilmente un input de teléfono con
29
29
 
30
30
  ## 📦 Installation / Instalación
31
31
 
32
+ ### Option 1: npm / Opción 1: npm
33
+
32
34
  ```bash
33
35
  npm install @jacksonavila/phone-lib
34
36
  ```
35
37
 
38
+ ### Option 2: CDN (No npm required) / Opción 2: CDN (Sin npm)
39
+
40
+ Use directly from CDN / Usar directamente desde CDN - see [Using from CDN / Usar desde CDN](#-using-from-cdn--usar-desde-cdn) section below / ver sección abajo.
41
+
36
42
  ### Dependencies / Dependencias
37
43
 
38
44
  ```bash
@@ -45,6 +51,87 @@ npm install react react-dom
45
51
 
46
52
  ---
47
53
 
54
+ ## 🌐 Using from CDN / Usar desde CDN
55
+
56
+ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib directamente desde CDN sin npm.
57
+
58
+ ### Method 1: Import Maps (Modern Browsers) / Método 1: Import Maps (Navegadores Modernos)
59
+
60
+ ```html
61
+ <!DOCTYPE html>
62
+ <html>
63
+ <head>
64
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.css">
65
+ </head>
66
+ <body>
67
+ <div id="phone-container"></div>
68
+
69
+ <script type="importmap">
70
+ {
71
+ "imports": {
72
+ "@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.js",
73
+ "libphonenumber-js": "https://esm.sh/libphonenumber-js@1.11.0"
74
+ }
75
+ }
76
+ </script>
77
+
78
+ <script type="module">
79
+ import PhoneLib from '@jacksonavila/phone-lib';
80
+
81
+ const phoneLib = new PhoneLib('#phone-container', {
82
+ initialCountry: 'CO',
83
+ layout: 'integrated',
84
+ showDialCode: true
85
+ });
86
+ </script>
87
+ </body>
88
+ </html>
89
+ ```
90
+
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/`
94
+
95
+ ### Method 2: Script Tag (All Browsers) / Método 2: Script Tag (Todos los Navegadores)
96
+
97
+ ```html
98
+ <!DOCTYPE html>
99
+ <html>
100
+ <head>
101
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.css">
102
+ </head>
103
+ <body>
104
+ <div id="phone-container"></div>
105
+
106
+ <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.4/phone-lib.cdn.js"></script>
107
+
108
+ <script>
109
+ let phoneLib = null;
110
+
111
+ // Wait for PhoneLib to be ready / Esperar a que PhoneLib esté listo
112
+ document.addEventListener('phoneLibReady', () => {
113
+ phoneLib = new PhoneLib('#phone-container', {
114
+ initialCountry: 'CO',
115
+ layout: 'integrated',
116
+ showDialCode: true
117
+ });
118
+ });
119
+
120
+ // Handle errors / Manejar errores
121
+ document.addEventListener('phoneLibError', (e) => {
122
+ console.error('Error loading PhoneLib:', e.detail.error);
123
+ });
124
+ </script>
125
+ </body>
126
+ </html>
127
+ ```
128
+
129
+ **⚠️ Important / Importante:** You need an HTTP server / Necesitas un servidor HTTP (doesn't work with `file://` / no funciona con `file://`)
130
+
131
+ 📖 **Complete CDN guide / Guía completa de CDN:** See [USO-SIN-NPM.md](./USO-SIN-NPM.md) / Ver [USO-SIN-NPM.md](./USO-SIN-NPM.md)
132
+
133
+ ---
134
+
48
135
  ## 🚀 Quick Start / Inicio Rápido
49
136
 
50
137
  ### Vanilla JavaScript
@@ -461,6 +548,16 @@ const phoneLib = new PhoneLib('#container', {
461
548
  valid: '✓ Valid number'
462
549
  },
463
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
+
464
561
  // Styles / Estilos
465
562
  customClasses: {
466
563
  wrapper: 'my-class',
@@ -775,6 +872,14 @@ const phoneLib = new PhoneLib('#container', {
775
872
  | `phoneLabel` | string | `'Phone number'` / `'Número de teléfono'` | Label for number / Label para número |
776
873
  | `customClasses` | object | `{}` | Custom CSS classes / Clases CSS personalizadas |
777
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) |
778
883
  | `messages` | object | `{}` | Custom messages / Mensajes personalizables |
779
884
  | `ariaLabels` | object | `{}` | ARIA labels / Labels ARIA personalizables |
780
885
  | `onCountryChange` | function | `null` | Callback when country changes / Callback cuando cambia el país |
@@ -806,6 +911,9 @@ This will open `http://localhost:3004` with all available demos / Esto abrirá `
806
911
  - `demo-all-layouts.html` - All layouts comparison / Comparación de todos los layouts
807
912
  - `demo-features.html` - All features / Todas las características
808
913
  - `demo-react.html` - React example / Ejemplo con React
914
+ - `demo-cdn-importmap.html` - CDN with Import Maps / CDN con Import Maps
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
809
917
 
810
918
  ---
811
919
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jacksonavila/phone-lib",
3
- "version": "2.0.2",
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",
@@ -14,11 +14,13 @@
14
14
  "import": "./phone-lib-react.jsx",
15
15
  "require": "./phone-lib-react.js"
16
16
  },
17
- "./css": "./phone-lib.css"
17
+ "./css": "./phone-lib.css",
18
+ "./cdn": "./phone-lib.cdn.js"
18
19
  },
19
20
  "scripts": {
20
21
  "serve": "npx http-server . -p 3004 -o",
21
- "prepublishOnly": "echo 'Verificando archivos antes de publicar...' && node --check phone-lib.js"
22
+ "prepublishOnly": "echo 'Verificando archivos antes de publicar...' && node --check phone-lib.js",
23
+ "update-version": "node update-version.js"
22
24
  },
23
25
  "keywords": [
24
26
  "phone",
@@ -64,6 +66,7 @@
64
66
  "files": [
65
67
  "phone-lib.js",
66
68
  "phone-lib.css",
69
+ "phone-lib.cdn.js",
67
70
  "phone-lib-react.jsx",
68
71
  "phone-lib-react.js",
69
72
  "README.md"
package/phone-lib.cdn.js ADDED
@@ -0,0 +1,101 @@
1
+ /**
2
+ * PhoneLib CDN Version
3
+ * Versión para uso directo desde CDN con script tag
4
+ * Carga libphonenumber-js dinámicamente y expone PhoneLib globalmente
5
+ *
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>
9
+ * <script>
10
+ * document.addEventListener('phoneLibReady', () => {
11
+ * const phoneLib = new PhoneLib('#container', {...});
12
+ * });
13
+ * </script>
14
+ */
15
+
16
+ (function () {
17
+ 'use strict';
18
+
19
+ // Versión del paquete (actualizar cuando se publique nueva versión)
20
+ const PACKAGE_VERSION = '2.0.4';
21
+ const PACKAGE_NAME = '@jacksonavila/phone-lib';
22
+
23
+ // URLs de CDN
24
+ const CDN_BASE = `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}`;
25
+ const LIBPHONENUMBER_CDN = 'https://esm.sh/libphonenumber-js@1.11.0';
26
+
27
+ // Cargar CSS automáticamente
28
+ function loadCSS() {
29
+ const linkId = 'phone-lib-css';
30
+ if (!document.getElementById(linkId)) {
31
+ const link = document.createElement('link');
32
+ link.id = linkId;
33
+ link.rel = 'stylesheet';
34
+ link.href = `${CDN_BASE}/phone-lib.css`;
35
+ document.head.appendChild(link);
36
+ }
37
+ }
38
+
39
+ // Cargar libphonenumber-js y phone-lib.js dinámicamente
40
+ async function loadPhoneLib() {
41
+ try {
42
+ // Cargar libphonenumber-js primero
43
+ const libphonenumber = await import(LIBPHONENUMBER_CDN);
44
+
45
+ // Crear un módulo temporal que exponga libphonenumber-js
46
+ // Esto es necesario porque phone-lib.js importa desde 'libphonenumber-js'
47
+ window.__libphonenumberjs = libphonenumber;
48
+
49
+ // Crear un import map dinámico para que phone-lib.js pueda importar libphonenumber-js
50
+ if (!document.querySelector('script[type="importmap"]')) {
51
+ const importMap = document.createElement('script');
52
+ importMap.type = 'importmap';
53
+ importMap.textContent = JSON.stringify({
54
+ imports: {
55
+ 'libphonenumber-js': LIBPHONENUMBER_CDN
56
+ }
57
+ });
58
+ document.head.appendChild(importMap);
59
+ }
60
+
61
+ // Cargar phone-lib.js desde CDN
62
+ const phoneLibModule = await import(`${CDN_BASE}/phone-lib.js`);
63
+
64
+ // Exponer PhoneLib globalmente
65
+ window.PhoneLib = phoneLibModule.default || phoneLibModule.PhoneLib;
66
+
67
+ // Disparar evento cuando esté listo
68
+ const event = new CustomEvent('phoneLibReady', {
69
+ detail: { PhoneLib: window.PhoneLib }
70
+ });
71
+ document.dispatchEvent(event);
72
+
73
+ return window.PhoneLib;
74
+ } catch (error) {
75
+ console.error('Error loading PhoneLib:', error);
76
+ const event = new CustomEvent('phoneLibError', {
77
+ detail: { error }
78
+ });
79
+ document.dispatchEvent(event);
80
+ throw error;
81
+ }
82
+ }
83
+
84
+ // Inicializar
85
+ function init() {
86
+ // Cargar CSS primero
87
+ loadCSS();
88
+
89
+ // Cargar PhoneLib
90
+ loadPhoneLib().catch(err => {
91
+ console.error('Failed to load PhoneLib:', err);
92
+ });
93
+ }
94
+
95
+ // Inicializar cuando el DOM esté listo
96
+ if (document.readyState === 'loading') {
97
+ document.addEventListener('DOMContentLoaded', init);
98
+ } else {
99
+ init();
100
+ }
101
+ })();
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}"` : ''}>