npm - @jacksonavila/phone-lib - Versions diffs - 2.0.8 → 2.0.10 - Mend

@jacksonavila/phone-lib 2.0.8 → 2.0.10

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

package/README.md CHANGED Viewed

@@ -13,6 +13,7 @@ Librería JavaScript moderna para integrar fácilmente un input de teléfono con
 - ✅ **Country dropdown** / **Dropdown de países** showing name, ISO2 code, dial code, and flag
 - ✅ **Tel input** / **Input tipo tel** with automatic formatting based on selected country
+- ✅ **Numbers only input** / **Input solo números** - automatically filters non-numeric characters
 - ✅ **Phone number validation** / **Validación de números** using `libphonenumber-js`
 - ✅ **Complete public API** / **API pública completa** with methods to get number information
 - ✅ **Vanilla JavaScript and React support** / **Soporte para Vanilla JavaScript y React**
@@ -61,7 +62,7 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.10/phone-lib.css">
 </head>
 <body>
   <div id="phone-container"></div>
@@ -69,7 +70,7 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
   <script type="importmap">
     {
       "imports": {
-        "@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.js",
+        "@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.10/phone-lib.js",
         "libphonenumber-js": "https://esm.sh/libphonenumber-js@1.11.0"
       }
     }
@@ -89,8 +90,8 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
 ```
 **CDN URLs / URLs de CDN:**
-- **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/`
-- **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.7/`
+- **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.10/`
+- **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.10/`
 ### Method 2: Script Tag (All Browsers) / Método 2: Script Tag (Todos los Navegadores)
@@ -98,12 +99,12 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.10/phone-lib.css">
 </head>
 <body>
   <div id="phone-container"></div>
-  <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.cdn.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.10/phone-lib.cdn.js"></script>
   <script>
     let phoneLib = null;
@@ -196,6 +197,7 @@ import '@jacksonavila/phone-lib/css';
 const phoneLib = new PhoneLib('#phone-container', {
   initialCountry: 'CO',
+  initialPhoneNumber: '+573001234567', // Optional: set initial phone number / Opcional: establecer número inicial
   preferredCountries: ['CO', 'US', 'ES'],
   showHint: true,
   layout: 'integrated',
@@ -453,6 +455,54 @@ function ContactForm() {
 }
 ```
+#### With Initial Phone Number (React Forms) / Con Número Inicial (Formularios React)
+**Important / Importante:** Use `initialPhoneNumber` to set an initial value and ensure the phone number persists when the parent component re-renders / Usa `initialPhoneNumber` para establecer un valor inicial y asegurar que el número persista cuando el componente padre se re-renderiza:
+```jsx
+import React, { useState } from 'react';
+import PhoneLibReact from '@jacksonavila/phone-lib/react';
+import '@jacksonavila/phone-lib/css';
+function EditContactForm({ contact }) {
+  const [name, setName] = useState(contact?.name || '');
+  const [email, setEmail] = useState(contact?.email || '');
+  return (
+    <form>
+      <input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Name / Nombre"
+      />
+      <input
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+      />
+      {/* The phone number value persists even when name/email change /
+          El valor del teléfono persiste incluso cuando cambian name/email */}
+      <PhoneLibReact
+        initialCountry={contact?.country || 'US'}
+        initialPhoneNumber={contact?.phone || null}
+        onPhoneChange={(phone, isValid) => {
+          console.log('Phone / Teléfono:', phone);
+        }}
+      />
+      <button type="submit">Save / Guardar</button>
+    </form>
+  );
+}
+```
+**💡 Why `initialPhoneNumber` is important / Por qué `initialPhoneNumber` es importante:**
+- **Prevents data loss / Previene pérdida de datos:** Without `initialPhoneNumber`, the phone value can be lost when the parent component re-renders (e.g., when other form fields change) / Sin `initialPhoneNumber`, el valor del teléfono puede perderse cuando el componente padre se re-renderiza (ej: cuando otros campos del formulario cambian)
+- **Form editing / Edición de formularios:** Essential when editing existing data - the phone number is preserved during re-renders / Esencial al editar datos existentes - el número de teléfono se preserva durante re-renders
+- **Controlled components / Componentes controlados:** Works seamlessly with React's controlled component pattern / Funciona perfectamente con el patrón de componentes controlados de React
 ---
 ## 🎨 Available Layouts / Layouts Disponibles
@@ -512,6 +562,7 @@ const phoneLib = new PhoneLib('#container', {
 ```javascript
 {
   initialCountry: 'CO',              // Initial country / País inicial (ISO2)
+  initialPhoneNumber: '+573001234567', // Initial phone number (optional) / Número inicial (opcional)
   preferredCountries: ['CO', 'US'],  // Countries that appear first / Países que aparecen primero
   showHint: true,                    // Show validation hint / Mostrar hint de validación
   layout: 'integrated',              // 'integrated' or 'separated' / 'integrated' o 'separated'
@@ -519,10 +570,22 @@ const phoneLib = new PhoneLib('#container', {
 }
 ```
+**📝 Note about `initialPhoneNumber` / Nota sobre `initialPhoneNumber`:**
+- **Vanilla JS:** Use `initialPhoneNumber` in the constructor options to set an initial phone number value / Usa `initialPhoneNumber` en las opciones del constructor para establecer un valor inicial del teléfono
+- **React:** Use the `initialPhoneNumber` prop to set an initial value. This prop also ensures the phone number value persists when the parent component re-renders / Usa la prop `initialPhoneNumber` para establecer un valor inicial. Esta prop también asegura que el valor del teléfono persista cuando el componente padre se re-renderiza
+- The value is preserved during re-renders, preventing data loss in React forms / El valor se preserva durante re-renders, previniendo pérdida de datos en formularios React
 ### Advanced Options / Opciones Avanzadas
 ```javascript
 {
+  // Initial values / Valores iniciales
+  initialCountry: 'CO',                // Initial country (ISO2) / País inicial (ISO2)
+  initialPhoneNumber: '+573001234567', // Initial phone number (optional) / Número inicial (opcional)
+                                      // In React: ensures value persists during re-renders /
+                                      // En React: asegura que el valor persista durante re-renders
   // Detection and validation / Detección y validación
   autoDetectCountry: true,            // Auto-detect country / Detectar país automáticamente
   validateOnInput: false,             // Validate while typing / Validar mientras se escribe
@@ -878,6 +941,7 @@ const phoneLib = new PhoneLib('#container', {
 | Prop | Type | Default | Description / Descripción |
 |------|------|---------|--------------------------|
 | `initialCountry` | string | `'US'` | Initial country (ISO2) / País inicial (ISO2) |
+| `initialPhoneNumber` | string \| null | `null` | Initial phone number value. **Important:** This prop ensures the phone value persists during parent component re-renders in React / Valor inicial del teléfono. **Importante:** Esta prop asegura que el valor del teléfono persista durante re-renders del componente padre en React |
 | `preferredCountries` | array | `[]` | Preferred countries / Países preferidos |
 | `showHint` | boolean | `true` | Show validation hint / Mostrar hint de validación |
 | `layout` | string | `'integrated'` | `'integrated'` or `'separated'` / `'integrated'` o `'separated'` |

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jacksonavila/phone-lib",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "Librería JavaScript para input de teléfono con selector de país y banderas - Compatible con Vanilla JS y React",
   "main": "phone-lib.js",
   "module": "phone-lib.js",

package/phone-lib-react.jsx CHANGED Viewed

@@ -28,6 +28,7 @@ const PhoneLibReact = forwardRef((props, ref) => {
     containerId,
     containerClassName,
     initialCountry = 'US',
+    initialPhoneNumber = null,
     preferredCountries = [],
     showHint = true,
     layout = 'integrated',
@@ -67,6 +68,7 @@ const PhoneLibReact = forwardRef((props, ref) => {
     // Inicializar PhoneLib
     phoneLibRef.current = new PhoneLib(containerRef.current, {
       initialCountry,
+      initialPhoneNumber,
       preferredCountries,
       showHint,
       layout,
@@ -93,6 +95,11 @@ const PhoneLibReact = forwardRef((props, ref) => {
       onBlur
     });
+    // Si hay un número inicial, establecerlo después de la inicialización
+    if (initialPhoneNumber) {
+      phoneLibRef.current.setPhoneNumber(initialPhoneNumber);
+    }
     // Cleanup al desmontar
     return () => {
       if (phoneLibRef.current) {
@@ -108,6 +115,7 @@ const PhoneLibReact = forwardRef((props, ref) => {
     phoneLibRef.current.updateOptions({
       initialCountry,
+      initialPhoneNumber,
       preferredCountries,
       showHint,
       layout,
@@ -130,6 +138,7 @@ const PhoneLibReact = forwardRef((props, ref) => {
     });
   }, [
     initialCountry,
+    initialPhoneNumber,
     preferredCountries,
     showHint,
     layout,

package/phone-lib.cdn.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * Carga libphonenumber-js dinámicamente y expone PhoneLib globalmente
  *
  * Uso:
- * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.8/phone-lib.css">
- * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.8/phone-lib.cdn.js"></script>
+ * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.10/phone-lib.css">
+ * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.10/phone-lib.cdn.js"></script>
  * <script>
  *   document.addEventListener('phoneLibReady', () => {
  *     const phoneLib = new PhoneLib('#container', {...});
@@ -17,7 +17,7 @@
   'use strict';
   // Versión del paquete (actualizar cuando se publique nueva versión)
-  const PACKAGE_VERSION = '2.0.8';
+  const PACKAGE_VERSION = '2.0.10';
   const PACKAGE_NAME = '@jacksonavila/phone-lib';
   // URLs de CDN

package/phone-lib.js CHANGED Viewed

@@ -76,7 +76,7 @@ class PhoneLib {
     // Estado interno
     this.selectedCountry = this.options.initialCountry;
-    this.phoneNumber = '';
+    this.phoneNumber = options.initialPhoneNumber || '';
     this.isValid = false;
     this.isDisabled = this.options.disabled;
     this.isReadonly = this.options.readonly;
@@ -543,7 +543,13 @@ class PhoneLib {
   init() {
     this.render();
     this.attachEventListeners();
-    this.updatePhoneNumber();
+    // Si hay un número inicial, establecerlo después de renderizar
+    if (this.phoneNumber) {
+      this.setPhoneNumber(this.phoneNumber);
+    } else {
+      this.updatePhoneNumber();
+    }
     // Aplicar estados iniciales
     if (this.isDisabled) {
@@ -895,11 +901,65 @@ class PhoneLib {
     // Input de teléfono
     if (this.phoneInput) {
+      // Handler para prevenir entrada de caracteres no numéricos
+      this._boundHandlers.phoneKeyDown = (e) => {
+        if (this.isDisabled || this.isReadonly) return;
+        // Permitir teclas especiales (Backspace, Delete, Arrow keys, Tab, etc.)
+        const allowedKeys = [
+          'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+          'Home', 'End', 'Tab', 'Escape', 'Enter'
+        ];
+        // Permitir Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
+        if (e.ctrlKey || e.metaKey) {
+          if (['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) {
+            return; // Permitir
+          }
+        }
+        // Si es una tecla permitida, dejar pasar
+        if (allowedKeys.includes(e.key)) {
+          return;
+        }
+        // Permitir números (0-9)
+        if (e.key >= '0' && e.key <= '9') {
+          return;
+        }
+        // Permitir + solo al inicio del input
+        if (e.key === '+') {
+          const currentValue = e.target.value;
+          const selectionStart = e.target.selectionStart;
+          // Solo permitir + si está al inicio o si no hay ningún carácter antes de la posición del cursor
+          if (selectionStart === 0 || currentValue.substring(0, selectionStart).trim() === '') {
+            return;
+          }
+        }
+        // Si llegamos aquí, prevenir la entrada
+        e.preventDefault();
+      };
       this._boundHandlers.phoneInput = (e) => {
         if (this.isDisabled || this.isReadonly) return;
         // Obtener el valor actual del input
-        const inputValue = e.target.value;
+        let inputValue = e.target.value;
+        // Filtrar caracteres no numéricos (permitir números y +)
+        // Remover cualquier carácter que no sea número o +
+        inputValue = inputValue.replace(/[^0-9+]/g, '');
+        // Si el valor cambió después de filtrar, actualizar el input
+        if (inputValue !== e.target.value) {
+          const cursorPosition = e.target.selectionStart;
+          e.target.value = inputValue;
+          // Restaurar posición del cursor (ajustada por caracteres removidos)
+          const newPosition = Math.min(cursorPosition, inputValue.length);
+          e.target.setSelectionRange(newPosition, newPosition);
+        }
         // Procesar el input
         this.handlePhoneInput(inputValue);
@@ -921,6 +981,7 @@ class PhoneLib {
         this.emitEvent('blur', { phoneNumber: this.phoneNumber, isValid });
       };
+      this.phoneInput.addEventListener('keydown', this._boundHandlers.phoneKeyDown);
       this.phoneInput.addEventListener('input', this._boundHandlers.phoneInput);
       this.phoneInput.addEventListener('focus', this._boundHandlers.phoneFocus);
       this.phoneInput.addEventListener('blur', this._boundHandlers.phoneBlur);
@@ -954,6 +1015,9 @@ class PhoneLib {
     // Remover listeners del input
     if (this.phoneInput && this._boundHandlers) {
+      if (this._boundHandlers.phoneKeyDown) {
+        this.phoneInput.removeEventListener('keydown', this._boundHandlers.phoneKeyDown);
+      }
       if (this._boundHandlers.phoneInput) {
         this.phoneInput.removeEventListener('input', this._boundHandlers.phoneInput);
       }
@@ -1501,9 +1565,12 @@ class PhoneLib {
       return;
     }
-    this.phoneNumber = number;
+    // Filtrar caracteres no numéricos (permitir números y +)
+    const filteredNumber = typeof number === 'string' ? number.replace(/[^0-9+]/g, '') : (number || '').toString().replace(/[^0-9+]/g, '');
+    this.phoneNumber = filteredNumber;
     if (this.phoneInput) {
-      this.phoneInput.value = number;
+      this.phoneInput.value = filteredNumber;
     }
     this.updatePhoneNumber();
@@ -1624,6 +1691,10 @@ class PhoneLib {
    * Actualiza opciones dinámicamente
    */
   updateOptions(newOptions) {
+    // Preservar el valor actual del teléfono y país antes de cualquier cambio
+    const savedPhoneNumber = this.phoneNumber || '';
+    const savedCountry = this.selectedCountry || this.options.initialCountry || 'US';
     // Actualizar opciones
     this.options = { ...this.options, ...newOptions };
@@ -1646,10 +1717,28 @@ class PhoneLib {
       this.setCountry(newOptions.initialCountry);
     }
+    // Si se proporciona un número inicial, usarlo
+    if (newOptions.initialPhoneNumber !== undefined) {
+      this.phoneNumber = newOptions.initialPhoneNumber;
+    }
     // Re-renderizar si cambió layout u opciones visuales importantes
     if (newOptions.layout || newOptions.showDialCode !== undefined || newOptions.customClasses || newOptions.customStyles || newOptions.arrowIcon !== undefined) {
       this.render();
       this.attachEventListeners();
+      // Restaurar el valor del teléfono después de re-renderizar
+      // Si no se proporcionó un nuevo initialPhoneNumber, restaurar el valor guardado
+      if (newOptions.initialPhoneNumber === undefined && savedPhoneNumber) {
+        this.setPhoneNumber(savedPhoneNumber);
+      } else if (newOptions.initialPhoneNumber !== undefined) {
+        this.setPhoneNumber(newOptions.initialPhoneNumber);
+      }
+      // Asegurar que el país también esté correcto
+      if (this.selectedCountry !== savedCountry && newOptions.initialCountry === undefined) {
+        this.setCountry(savedCountry);
+      }
     }
   }
 }