npm - @jacksonavila/phone-lib - Versions diffs - 2.0.5 → 2.0.7 - Mend

@jacksonavila/phone-lib 2.0.5 → 2.0.7

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

package/README.md CHANGED Viewed

@@ -61,7 +61,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.5/phone-lib.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.css">
 </head>
 <body>
   <div id="phone-container"></div>
@@ -69,7 +69,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.5/phone-lib.js",
+        "@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.js",
         "libphonenumber-js": "https://esm.sh/libphonenumber-js@1.11.0"
       }
     }
@@ -89,8 +89,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.5/`
-- **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.5/`
+- **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/`
+- **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.7/`
 ### Method 2: Script Tag (All Browsers) / Método 2: Script Tag (Todos los Navegadores)
@@ -98,12 +98,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.5/phone-lib.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.css">
 </head>
 <body>
   <div id="phone-container"></div>
-  <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.cdn.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.cdn.js"></script>
   <script>
     let phoneLib = null;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jacksonavila/phone-lib",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "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.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.5/phone-lib.css">
- * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.5/phone-lib.cdn.js"></script>
+ * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/phone-lib.css">
+ * <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.7/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.5';
+  const PACKAGE_VERSION = '2.0.7';
   const PACKAGE_NAME = '@jacksonavila/phone-lib';
   // URLs de CDN

package/phone-lib.js CHANGED Viewed

@@ -406,14 +406,17 @@ class PhoneLib {
    * Obtiene el HTML del icono de flecha
    */
   getArrowIcon() {
-    // Si hay un icono personalizado, usarlo
-    if (this.options.arrowIcon) {
-      return this.options.arrowIcon;
+    // Si hay un icono personalizado, usarlo (validar que sea string)
+    if (this.options.arrowIcon && typeof this.options.arrowIcon === 'string') {
+      // Sanitización básica: remover scripts potencialmente peligrosos
+      // Nota: En producción, considerar usar una librería de sanitización
+      const sanitized = this.options.arrowIcon.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+      return sanitized;
     }
     // Chevron SVG por defecto (simple, apuntando hacia abajo - solo líneas, sin relleno)
     // Forma de chevron: dos líneas que forman una V apuntando hacia abajo
-    // Usa dos paths separados para asegurar que se vea como chevron, no triángulo
+    // Usa dos líneas separadas para asegurar que se vea como chevron, no triángulo
     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">
       <line x1="3" y1="5" x2="6" y2="8"/>
       <line x1="6" y1="8" x2="9" y2="5"/>
@@ -657,94 +660,183 @@ class PhoneLib {
    * Adjunta los event listeners
    */
   attachEventListeners() {
+    // Remover listeners anteriores si existen (para evitar duplicados)
+    if (this._boundHandlers) {
+      this.removeEventListeners();
+    }
+    // Guardar referencias a handlers para poder removerlos después
+    this._boundHandlers = {
+      dropdownClick: (e) => {
+        if (this.isDisabled) return;
+        e.stopPropagation();
+        this.toggleDropdown();
+      },
+      documentClick: (e) => {
+        if (!this.container.contains(e.target)) {
+          this.closeDropdown();
+        }
+      }
+    };
     // Toggle dropdown
-    this.dropdownButton.addEventListener('click', (e) => {
-      if (this.isDisabled) return;
-      e.stopPropagation();
-      this.toggleDropdown();
-    });
+    if (this.dropdownButton) {
+      this.dropdownButton.addEventListener('click', this._boundHandlers.dropdownClick);
+    }
     // Cerrar dropdown al hacer click fuera
-    document.addEventListener('click', (e) => {
-      if (!this.container.contains(e.target)) {
-        this.closeDropdown();
-      }
-    });
+    document.addEventListener('click', this._boundHandlers.documentClick);
     // Seleccionar país
     const countryItems = this.container.querySelectorAll('.phone-lib-country-item');
+    this._countryItemHandlers = [];
     countryItems.forEach(item => {
-      item.addEventListener('click', () => {
+      const handler = () => {
         if (item.classList.contains('disabled')) {
           return; // No permitir seleccionar países deshabilitados
         }
         const iso2 = item.dataset.iso2;
         const dialCode = item.dataset.dialCode;
-        this.selectCountry(iso2, dialCode);
-      });
+        if (iso2 && dialCode) {
+          this.selectCountry(iso2, dialCode);
+        }
+      };
+      item.addEventListener('click', handler);
+      this._countryItemHandlers.push({ item, handler });
     });
     // Input de teléfono
-    this.phoneInput.addEventListener('input', (e) => {
-      if (this.isDisabled || this.isReadonly) return;
-      this.handlePhoneInput(e.target.value);
+    if (this.phoneInput) {
+      this._boundHandlers.phoneInput = (e) => {
+        if (this.isDisabled || this.isReadonly) return;
-      // Validación en tiempo real si está habilitada
-      if (this.options.validateOnInput) {
-        this.validatePhone();
-      }
-    });
+        // Obtener el valor actual del input
+        const inputValue = e.target.value;
-    this.phoneInput.addEventListener('focus', () => {
-      this.executeCallback('onFocus');
-      this.emitEvent('focus');
-    });
+        // Procesar el input
+        this.handlePhoneInput(inputValue);
-    this.phoneInput.addEventListener('blur', () => {
-      const isValid = this.validatePhone();
-      this.executeCallback('onBlur', this.phoneNumber, isValid);
-      this.emitEvent('blur', { phoneNumber: this.phoneNumber, isValid });
-    });
+        // Validación en tiempo real si está habilitada
+        if (this.options.validateOnInput) {
+          this.validatePhone();
+        }
+      };
+      this._boundHandlers.phoneFocus = () => {
+        this.executeCallback('onFocus');
+        this.emitEvent('focus');
+      };
+      this._boundHandlers.phoneBlur = () => {
+        const isValid = this.validatePhone();
+        this.executeCallback('onBlur', this.phoneNumber, isValid);
+        this.emitEvent('blur', { phoneNumber: this.phoneNumber, isValid });
+      };
+      this.phoneInput.addEventListener('input', this._boundHandlers.phoneInput);
+      this.phoneInput.addEventListener('focus', this._boundHandlers.phoneFocus);
+      this.phoneInput.addEventListener('blur', this._boundHandlers.phoneBlur);
+    }
     // Navegación por teclado en dropdown
     this.setupKeyboardNavigation();
   }
+  /**
+   * Remueve los event listeners
+   */
+  removeEventListeners() {
+    // Remover listeners del botón
+    if (this.dropdownButton && this._boundHandlers?.dropdownClick) {
+      this.dropdownButton.removeEventListener('click', this._boundHandlers.dropdownClick);
+    }
+    // Remover listener del document
+    if (this._boundHandlers?.documentClick) {
+      document.removeEventListener('click', this._boundHandlers.documentClick);
+    }
+    // Remover listeners de items de países
+    if (this._countryItemHandlers) {
+      this._countryItemHandlers.forEach(({ item, handler }) => {
+        item.removeEventListener('click', handler);
+      });
+      this._countryItemHandlers = [];
+    }
+    // Remover listeners del input
+    if (this.phoneInput && this._boundHandlers) {
+      if (this._boundHandlers.phoneInput) {
+        this.phoneInput.removeEventListener('input', this._boundHandlers.phoneInput);
+      }
+      if (this._boundHandlers.phoneFocus) {
+        this.phoneInput.removeEventListener('focus', this._boundHandlers.phoneFocus);
+      }
+      if (this._boundHandlers.phoneBlur) {
+        this.phoneInput.removeEventListener('blur', this._boundHandlers.phoneBlur);
+      }
+    }
+    // Remover listeners de teclado
+    if (this._keyboardHandlers) {
+      if (this.dropdownButton && this._keyboardHandlers.buttonKeydown) {
+        this.dropdownButton.removeEventListener('keydown', this._keyboardHandlers.buttonKeydown);
+      }
+      if (this.dropdownMenu && this._keyboardHandlers.menuKeydown) {
+        this.dropdownMenu.removeEventListener('keydown', this._keyboardHandlers.menuKeydown);
+      }
+    }
+  }
   /**
    * Configura navegación por teclado
    */
   setupKeyboardNavigation() {
     if (!this.dropdownButton) return;
-    this.dropdownButton.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        this.toggleDropdown();
-      } else if (e.key === 'Escape') {
-        this.closeDropdown();
-      }
-    });
-    // Navegación con flechas en el dropdown
-    if (this.dropdownMenu) {
-      this.dropdownMenu.addEventListener('keydown', (e) => {
+    // Guardar handlers para poder removerlos después
+    this._keyboardHandlers = {
+      buttonKeydown: (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.toggleDropdown();
+        } else if (e.key === 'Escape') {
+          this.closeDropdown();
+        }
+      },
+      menuKeydown: (e) => {
         const items = Array.from(this.container.querySelectorAll('.phone-lib-country-item:not([style*="display: none"])'));
+        if (items.length === 0) return;
         const currentIndex = items.findIndex(item => item.classList.contains('selected'));
         if (e.key === 'ArrowDown') {
           e.preventDefault();
           const nextIndex = (currentIndex + 1) % items.length;
-          items[nextIndex]?.click();
-          items[nextIndex]?.scrollIntoView({ block: 'nearest' });
+          const nextItem = items[nextIndex];
+          if (nextItem && !nextItem.classList.contains('disabled')) {
+            nextItem.click();
+            nextItem.scrollIntoView({ block: 'nearest' });
+          }
         } else if (e.key === 'ArrowUp') {
           e.preventDefault();
           const prevIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
-          items[prevIndex]?.click();
-          items[prevIndex]?.scrollIntoView({ block: 'nearest' });
+          const prevItem = items[prevIndex];
+          if (prevItem && !prevItem.classList.contains('disabled')) {
+            prevItem.click();
+            prevItem.scrollIntoView({ block: 'nearest' });
+          }
         } else if (e.key === 'Escape') {
           this.closeDropdown();
         }
-      });
+      }
+    };
+    this.dropdownButton.addEventListener('keydown', this._keyboardHandlers.buttonKeydown);
+    // Navegación con flechas en el dropdown
+    if (this.dropdownMenu) {
+      this.dropdownMenu.addEventListener('keydown', this._keyboardHandlers.menuKeydown);
     }
   }
@@ -753,17 +845,34 @@ class PhoneLib {
    */
   handlePhoneInput(value) {
     const previousNumber = this.phoneNumber;
+    const previousCountry = this.selectedCountry;
     this.phoneNumber = value;
     // Detección automática de país si está habilitada
+    // IMPORTANTE: Hacer esto ANTES de formatear para que el formateo use el país correcto
     if (this.options.autoDetectCountry && value) {
       this.autoDetectCountry(value);
     }
+    // Actualizar el número formateado (usará el país correcto si se detectó)
     this.updatePhoneNumber();
     // Ejecutar callbacks y eventos (validar sin actualizar visuals para obtener estado actual)
     const isValid = this.phoneNumber ? this.validatePhone(false) : false;
+    // Emitir evento de cambio de país si cambió
+    if (previousCountry !== this.selectedCountry) {
+      const dialCode = this.getDialCode();
+      const countryData = this.countries.find(c => c.iso2 === this.selectedCountry);
+      this.executeCallback('onCountryChange', this.selectedCountry, dialCode, countryData?.name);
+      this.emitEvent('countryChange', {
+        country: this.selectedCountry,
+        dialCode,
+        countryName: countryData?.name,
+        previousCountry
+      });
+    }
     this.executeCallback('onPhoneChange', this.phoneNumber, isValid, this.selectedCountry);
     this.emitEvent('phoneChange', {
       phoneNumber: this.phoneNumber,
@@ -801,7 +910,12 @@ class PhoneLib {
    * Actualiza el número de teléfono y formatea
    */
   updatePhoneNumber() {
+    if (!this.phoneInput) return;
     if (!this.phoneNumber) {
+      if (this.phoneInput.value !== '') {
+        this.phoneInput.value = '';
+      }
       if (this.hintElement) {
         this.hintElement.textContent = '';
       }
@@ -809,13 +923,48 @@ class PhoneLib {
     }
     try {
-      const formatter = new AsYouType(this.selectedCountry);
+      // Si el número empieza con +, intentar detectar el país para formatear correctamente
+      let countryForFormatting = this.selectedCountry;
+      if (this.phoneNumber && this.phoneNumber.startsWith('+')) {
+        try {
+          const parsed = parsePhoneNumber(this.phoneNumber);
+          if (parsed && parsed.country) {
+            // Usar el país detectado para formatear, si está disponible
+            const detectedCountry = parsed.country;
+            const countryAvailable = this.countries.find(c => c.iso2 === detectedCountry && !c.disabled);
+            if (countryAvailable) {
+              countryForFormatting = detectedCountry;
+            }
+          }
+        } catch (e) {
+          // Si no se puede detectar, usar el país seleccionado actual
+        }
+      }
+      const formatter = new AsYouType(countryForFormatting);
       const formatted = formatter.input(this.phoneNumber);
+      // Solo actualizar si el valor formateado es diferente
       if (formatted && formatted !== this.phoneInput.value) {
+        // Guardar la posición del cursor antes de actualizar
+        const cursorPosition = this.phoneInput.selectionStart;
+        const inputLength = this.phoneInput.value.length;
+        const wasAtEnd = cursorPosition === inputLength;
+        // Actualizar el valor
         this.phoneInput.value = formatted;
-        // Actualizar phoneNumber con el valor formateado para mantener sincronización
-        this.phoneNumber = formatted;
+        // Restaurar la posición del cursor de manera inteligente
+        if (wasAtEnd) {
+          // Si estaba al final, mantenerlo al final
+          this.phoneInput.setSelectionRange(formatted.length, formatted.length);
+        } else {
+          // Intentar mantener la posición relativa
+          // Calcular la nueva posición basada en la diferencia de longitud
+          const lengthDiff = formatted.length - inputLength;
+          const newPosition = Math.max(0, Math.min(cursorPosition + lengthDiff, formatted.length));
+          this.phoneInput.setSelectionRange(newPosition, newPosition);
+        }
       }
       // Actualizar hint
@@ -913,12 +1062,24 @@ class PhoneLib {
    * Selecciona un país
    */
   selectCountry(iso2, dialCode, silent = false) {
+    // Validar que el país existe
+    if (!iso2 || !dialCode) {
+      console.warn('PhoneLib: selectCountry requiere iso2 y dialCode válidos');
+      return;
+    }
     const previousCountry = this.selectedCountry;
     this.selectedCountry = iso2;
     // Actualizar botón según el layout
     const countryData = this.countries.find(c => c.iso2 === iso2);
+    // Si el país no se encuentra, usar valores por defecto
+    if (!countryData) {
+      console.warn(`PhoneLib: País ${iso2} no encontrado en la lista`);
+      return;
+    }
     if (this.options.layout === 'separated') {
       // Layout separado: actualizar flag, nombre del país y código de marcación (si está visible)
       const flagElement = this.dropdownButton.querySelector('.phone-lib-flag');
@@ -955,9 +1116,11 @@ class PhoneLib {
     // Cerrar dropdown
     this.closeDropdown();
-    // Actualizar placeholder y formato
-    this.phoneInput.placeholder = this.getPlaceholder();
-    this.updatePhoneNumber();
+    // Actualizar placeholder y formato (solo si el input existe)
+    if (this.phoneInput) {
+      this.phoneInput.placeholder = this.getPlaceholder();
+      this.updatePhoneNumber();
+    }
     // Ejecutar callbacks y eventos solo si no es silencioso
     if (!silent) {
@@ -1249,11 +1412,8 @@ class PhoneLib {
    * Destruye la instancia y limpia recursos
    */
   destroy() {
-    // Remover event listeners
-    if (this.phoneInput) {
-      const newInput = this.phoneInput.cloneNode(true);
-      this.phoneInput.parentNode.replaceChild(newInput, this.phoneInput);
-    }
+    // Remover todos los event listeners
+    this.removeEventListeners();
     // Limpiar contenedor
     if (this.container) {
@@ -1267,6 +1427,9 @@ class PhoneLib {
     this.hintElement = null;
     this.dialCodeInput = null;
     this.countriesList = null;
+    this._boundHandlers = null;
+    this._countryItemHandlers = null;
+    this._keyboardHandlers = null;
   }
   /**