@alexochihua/exos-library-components 2.25.18 → 2.25.19

package/dist/exos-library-components.common.js

@@ -672,6 +672,57 @@ function calculateColorVariant(primaryColor, variant = null) {
 function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
+/**
+ * Valida un número de tarjeta usando el Algoritmo de Luhn.
+ *
+ * @memberof Mixins
+ * @param {string|number} cardNumber - El número a validar.
+ * @returns {boolean} Verdadero si es válido, falso en caso contrario.
+ * @example
+ * // Tarjeta de 16 dígitos válida
+ * console.log(
+ *  "validateLuhn:",
+ *  this.validateLuhn("4532015112830366")
+ * );
+ * //Como salida: validateLuhn: true
+ * @example
+ * // Tarjeta de 16 dígitos inválida
+ * console.log(
+ *  "validateLuhn:",
+ *  this.validateLuhn("4532015112830367")
+ * );
+ * //Como salida: validateLuhn: false
+ * @example
+ * // Funciona con espacios en blanco
+ * console.log(
+ *  "validateLuhn:",
+ *  this.validateLuhn("4532 0151 1283 0366")
+ * );
+ * //Como salida: validateLuhn: true
+ */
+function validateLuhn(cardNumber) {
+  // 1. Convertir a string y eliminar espacios en blanco
+  let n = cardNumber.toString().replace(/\s+/g, "");
+  let suma = 0;
+  let debeDoblar = false;
+  // 2. Recorrer la cadena de derecha a izquierda
+  for (let i = n.length - 1; i >= 0; i--) {
+    let digito = parseInt(n.charAt(i), 10);
+    // Si la posición es "par" (empezando desde la derecha)
+    if (debeDoblar) {
+      digito *= 2;
+      // Si el resultado es mayor a 9, sumamos los dígitos (o restamos 9)
+      if (digito > 9) {
+        digito -= 9;
+      }
+    }
+    suma += digito;
+    // Alternamos el booleano para el siguiente dígito
+    debeDoblar = !debeDoblar;
+  }
+  // 3. El número es válido si la suma es múltiplo de 10
+  return suma % 10 === 0;
+}
 const methods = {
   readContentTxt,
   getTypeFileFromExtension,
@@ -687,7 +738,8 @@ const methods = {
   calculateVariant1,
   calculateVariant,
   calculateColorVariant,
-  sleep
+  sleep,
+  validateLuhn
 };
 exports["default"] = {
   methods: Object.assign({}, methods)
@@ -53107,10 +53159,496 @@ if (typeof (EInputvue_type_custom_index_0_blockType_docs_lang_md_default()) ===
 const EInput_exports_ = EInputvue_type_script_setup_true_lang_js;
 
 /* harmony default export */ var EInput = (EInput_exports_);
+;// CONCATENATED MODULE: ./src/ui/components/inputMask/mask-presets.js
+/**
+ * Presets de máscara para EInputMask
+ *
+ * Tipos de presets:
+ * - 'fixed': Patrón estático con posiciones fijas (ej: teléfonos, NSS)
+ * - 'dynamic': Patrón que se genera según la longitud del input (ej: tarjetas de crédito)
+ * - 'numeric': Formateo numérico con separadores de miles, decimales y símbolos (ej: montos, porcentajes)
+ */
+
+
+
+/**
+ * Preset para tarjetas de crédito
+ * - Muestra los primeros 6 dígitos (BIN)
+ * - Oculta los dígitos intermedios
+ * - Muestra los últimos 4 dígitos
+ * - Soporta tarjetas de 13 a 19 dígitos
+ */
+const creditCardPreset = {
+  name: 'credit-card',
+  type: 'dynamic',
+  visiblePrefix: 6,
+  visibleSuffix: 4,
+  hiddenChar: '*',
+  separator: ' ',
+  groupSize: 4,
+  minLength: 13,
+  maxLength: 19,
+  allowedChars: /[0-9]/,
+  /**
+   * Genera el patrón dinámico basado en la longitud actual
+   * @param {number} length - Longitud actual del valor
+   * @param {object} options - Opciones de configuración
+   * @returns {string} Patrón generado
+   */
+  generatePattern(length, options = {}) {
+    const visiblePrefix = options.visiblePrefix ?? this.visiblePrefix;
+    const visibleSuffix = options.visibleSuffix ?? this.visibleSuffix;
+    const hiddenChar = options.hiddenChar ?? this.hiddenChar;
+    if (length <= visiblePrefix + visibleSuffix) {
+      // Si la longitud es menor o igual a prefix + suffix, mostrar todo
+      return '#'.repeat(length);
+    }
+    const hiddenCount = length - visiblePrefix - visibleSuffix;
+    return '#'.repeat(visiblePrefix) + hiddenChar.repeat(hiddenCount) + '#'.repeat(visibleSuffix);
+  },
+  /**
+   * Formatea el valor para mostrar con separadores
+   * @param {string} value - Valor sin formato
+   * @param {string} pattern - Patrón a aplicar
+   * @param {object} options - Opciones de configuración
+   * @returns {object} { displayValue, realValue }
+   */
+  format(value, pattern, options = {}) {
+    const separator = options.separator ?? this.separator;
+    const groupSize = options.groupSize ?? this.groupSize;
+    const hiddenChar = options.hiddenChar ?? this.hiddenChar;
+    const cleanValue = value.replace(/[^0-9]/g, '');
+    let displayValue = '';
+    for (let i = 0; i < pattern.length && i < cleanValue.length; i++) {
+      const patternChar = pattern[i];
+      if (patternChar === '#') {
+        displayValue += cleanValue[i];
+      } else {
+        displayValue += hiddenChar;
+      }
+    }
+
+    // Agregar separadores cada groupSize caracteres
+    if (separator && groupSize) {
+      displayValue = displayValue.replace(new RegExp(`(.{${groupSize}})(?=.)`, 'g'), `$1${separator}`);
+    }
+    return {
+      displayValue,
+      realValue: cleanValue
+    };
+  },
+  /**
+   * Valida si el valor es una tarjeta de crédito válida (algoritmo de Luhn)
+   * Utiliza mixins.methods.validateLuhn de @alexochihua/exos-functionality
+   * @param {string} value - Valor a validar
+   * @returns {boolean}
+   */
+  validate(value) {
+    const cleanValue = value.replace(/[^0-9]/g, '');
+    if (cleanValue.length < this.minLength || cleanValue.length > this.maxLength) {
+      return false;
+    }
+
+    // Usar validateLuhn de la librería exos-functionality
+    return mixins_default().methods.validateLuhn(cleanValue);
+  }
+};
+
+/**
+ * Preset para teléfonos mexicanos
+ * Formato: (##) ## ## ## ##
+ */
+const phoneMxPreset = {
+  name: 'phone-mx',
+  type: 'fixed',
+  pattern: '(##) ## ## ## ##',
+  maxLength: 10,
+  allowedChars: /[0-9]/,
+  /**
+   * Formatea el valor según el patrón fijo
+   * @param {string} value - Valor sin formato
+   * @returns {object} { displayValue, realValue }
+   */
+  format(value) {
+    const cleanValue = value.replace(/[^0-9]/g, '').slice(0, this.maxLength);
+    let displayValue = '';
+    let digitIndex = 0;
+    for (let i = 0; i < this.pattern.length && digitIndex < cleanValue.length; i++) {
+      const patternChar = this.pattern[i];
+      if (patternChar === '#') {
+        displayValue += cleanValue[digitIndex];
+        digitIndex++;
+      } else {
+        displayValue += patternChar;
+      }
+    }
+    return {
+      displayValue,
+      realValue: cleanValue
+    };
+  },
+  /**
+   * Valida si el valor es un teléfono mexicano válido
+   * @param {string} value - Valor a validar
+   * @returns {boolean}
+   */
+  validate(value) {
+    const cleanValue = value.replace(/[^0-9]/g, '');
+    return cleanValue.length === this.maxLength;
+  }
+};
+
+/**
+ * Preset para NSS (Número de Seguro Social mexicano)
+ * Formato: ###-##-####
+ */
+const nssPreset = {
+  name: 'nss',
+  type: 'fixed',
+  pattern: '###-##-####',
+  maxLength: 9,
+  allowedChars: /[0-9]/,
+  /**
+   * Formatea el valor según el patrón fijo
+   * @param {string} value - Valor sin formato
+   * @returns {object} { displayValue, realValue }
+   */
+  format(value) {
+    const cleanValue = value.replace(/[^0-9]/g, '').slice(0, this.maxLength);
+    let displayValue = '';
+    let digitIndex = 0;
+    for (let i = 0; i < this.pattern.length && digitIndex < cleanValue.length; i++) {
+      const patternChar = this.pattern[i];
+      if (patternChar === '#') {
+        displayValue += cleanValue[digitIndex];
+        digitIndex++;
+      } else {
+        displayValue += patternChar;
+      }
+    }
+    return {
+      displayValue,
+      realValue: cleanValue
+    };
+  },
+  /**
+   * Valida si el valor es un NSS válido
+   * @param {string} value - Valor a validar
+   * @returns {boolean}
+   */
+  validate(value) {
+    const cleanValue = value.replace(/[^0-9]/g, '');
+    return cleanValue.length === this.maxLength;
+  }
+};
+
+/**
+ * Preset para montos/currency
+ * Formato: $1,234,567.89
+ */
+const currencyPreset = {
+  name: 'currency',
+  type: 'numeric',
+  prefix: '$',
+  suffix: '',
+  decimals: 2,
+  thousandsSeparator: ',',
+  decimalSeparator: '.',
+  allowNegative: false,
+  allowedChars: /[0-9.]/,
+  /**
+   * Formatea el valor como moneda
+   * @param {string} value - Valor sin formato
+   * @param {object} options - Opciones de configuración
+   * @returns {object} { displayValue, realValue }
+   */
+  format(value, options = {}) {
+    const prefix = options.prefix ?? options.currencySymbol ?? this.prefix;
+    const suffix = options.suffix ?? this.suffix;
+    const decimals = options.decimals ?? this.decimals;
+    const thousandsSeparator = options.thousandsSeparator ?? this.thousandsSeparator;
+    const decimalSeparator = options.decimalSeparator ?? this.decimalSeparator;
+
+    // Limpiar el valor, permitiendo solo números y punto decimal
+    let cleanValue = value.replace(/[^0-9.]/g, '');
+
+    // Si el valor está vacío, retornar vacío (no forzar $0)
+    if (!cleanValue || cleanValue === '') {
+      return {
+        displayValue: '',
+        realValue: ''
+      };
+    }
+
+    // Asegurar solo un punto decimal
+    const parts = cleanValue.split('.');
+    if (parts.length > 2) {
+      cleanValue = parts[0] + '.' + parts.slice(1).join('');
+    }
+
+    // Separar parte entera y decimal
+    let [integerPart, decimalPart] = cleanValue.split('.');
+
+    // Remover ceros al inicio solo si hay más dígitos después
+    // Esto preserva "0" cuando es el único dígito (ej: "0" o "0.25")
+    if (integerPart === '') {
+      // Si está vacío y no hay decimales, retornar vacío
+      if (decimalPart === undefined) {
+        return {
+          displayValue: '',
+          realValue: ''
+        };
+      }
+      // Hay decimales, usar '0'
+      integerPart = '0';
+    } else {
+      // Remover ceros extras solo si hay otros dígitos (ej: "00123" → "123", pero "0" → "0")
+      integerPart = integerPart.replace(/^0+(?=\d)/, '');
+    }
+
+    // Limitar decimales
+    if (decimalPart !== undefined) {
+      decimalPart = decimalPart.slice(0, decimals);
+    }
+
+    // Formatear parte entera con separadores de miles
+    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
+
+    // Construir valor de display
+    let displayValue = prefix + formattedInteger;
+    if (decimalPart !== undefined) {
+      displayValue += decimalSeparator + decimalPart;
+    }
+    displayValue += suffix;
+
+    // Construir valor real (número sin formato)
+    let realValue = integerPart;
+    if (decimalPart !== undefined) {
+      realValue += '.' + decimalPart;
+    }
+    return {
+      displayValue,
+      realValue
+    };
+  },
+  /**
+   * Parsea el valor de display a número
+   * @param {string} displayValue - Valor con formato
+   * @param {object} options - Opciones de configuración
+   * @returns {string} Valor numérico
+   */
+  parse(displayValue, options = {}) {
+    const prefix = options.prefix ?? options.currencySymbol ?? this.prefix;
+    const suffix = options.suffix ?? this.suffix;
+    const thousandsSeparator = options.thousandsSeparator ?? this.thousandsSeparator;
+    let value = displayValue;
+
+    // Remover prefijo y sufijo
+    if (prefix && value.startsWith(prefix)) {
+      value = value.slice(prefix.length);
+    }
+    if (suffix && value.endsWith(suffix)) {
+      value = value.slice(0, -suffix.length);
+    }
+
+    // Remover separadores de miles
+    value = value.replace(new RegExp(`\\${thousandsSeparator}`, 'g'), '');
+    return value;
+  },
+  /**
+   * Valida si el valor es un monto válido
+   * @param {string} value - Valor a validar
+   * @returns {boolean}
+   */
+  validate(value) {
+    const cleanValue = value.replace(/[^0-9.]/g, '');
+    return !isNaN(parseFloat(cleanValue)) && isFinite(cleanValue);
+  }
+};
+
+/**
+ * Preset para porcentajes
+ * Formato: 12.34%
+ */
+const percentagePreset = {
+  name: 'percentage',
+  type: 'numeric',
+  prefix: '',
+  suffix: '%',
+  decimals: 2,
+  thousandsSeparator: ',',
+  decimalSeparator: '.',
+  allowNegative: false,
+  maxValue: null,
+  // null = sin límite, o número para limitar (ej: 100)
+  allowedChars: /[0-9.]/,
+  /**
+   * Formatea el valor como porcentaje
+   * @param {string} value - Valor sin formato
+   * @param {object} options - Opciones de configuración
+   * @returns {object} { displayValue, realValue }
+   */
+  format(value, options = {}) {
+    const prefix = options.prefix ?? this.prefix;
+    const suffix = options.suffix ?? this.suffix;
+    const decimals = options.decimals ?? this.decimals;
+    const thousandsSeparator = options.thousandsSeparator ?? this.thousandsSeparator;
+    const decimalSeparator = options.decimalSeparator ?? this.decimalSeparator;
+
+    // Limpiar el valor, permitiendo solo números y punto decimal
+    let cleanValue = value.replace(/[^0-9.]/g, '');
+
+    // Si el valor está vacío, retornar vacío (no forzar 0%)
+    if (!cleanValue || cleanValue === '') {
+      return {
+        displayValue: '',
+        realValue: ''
+      };
+    }
+
+    // Asegurar solo un punto decimal
+    const parts = cleanValue.split('.');
+    if (parts.length > 2) {
+      cleanValue = parts[0] + '.' + parts.slice(1).join('');
+    }
+
+    // Separar parte entera y decimal
+    let [integerPart, decimalPart] = cleanValue.split('.');
+
+    // Remover ceros al inicio solo si hay más dígitos después
+    // Esto preserva "0" cuando es el único dígito (ej: "0" o "0.25")
+    if (integerPart === '') {
+      // Si está vacío y no hay decimales, retornar vacío
+      if (decimalPart === undefined) {
+        return {
+          displayValue: '',
+          realValue: ''
+        };
+      }
+      // Hay decimales, usar '0'
+      integerPart = '0';
+    } else {
+      // Remover ceros extras solo si hay otros dígitos (ej: "00123" → "123", pero "0" → "0")
+      integerPart = integerPart.replace(/^0+(?=\d)/, '');
+    }
+
+    // Limitar decimales
+    if (decimalPart !== undefined) {
+      decimalPart = decimalPart.slice(0, decimals);
+    }
+
+    // Formatear parte entera con separadores de miles (si es necesario)
+    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
+
+    // Construir valor de display
+    let displayValue = prefix + formattedInteger;
+    if (decimalPart !== undefined) {
+      displayValue += decimalSeparator + decimalPart;
+    }
+    displayValue += suffix;
+
+    // Construir valor real (número sin formato)
+    let realValue = integerPart;
+    if (decimalPart !== undefined) {
+      realValue += '.' + decimalPart;
+    }
+    return {
+      displayValue,
+      realValue
+    };
+  },
+  /**
+   * Parsea el valor de display a número
+   * @param {string} displayValue - Valor con formato
+   * @param {object} options - Opciones de configuración
+   * @returns {string} Valor numérico
+   */
+  parse(displayValue, options = {}) {
+    const prefix = options.prefix ?? this.prefix;
+    const suffix = options.suffix ?? this.suffix;
+    const thousandsSeparator = options.thousandsSeparator ?? this.thousandsSeparator;
+    let value = displayValue;
+
+    // Remover prefijo y sufijo
+    if (prefix && value.startsWith(prefix)) {
+      value = value.slice(prefix.length);
+    }
+    if (suffix && value.endsWith(suffix)) {
+      value = value.slice(0, -suffix.length);
+    }
+
+    // Remover separadores de miles
+    value = value.replace(new RegExp(`\\${thousandsSeparator}`, 'g'), '');
+    return value;
+  },
+  /**
+   * Valida si el valor es un porcentaje válido
+   * @param {string} value - Valor a validar
+   * @returns {boolean}
+   */
+  validate(value) {
+    const cleanValue = value.replace(/[^0-9.]/g, '');
+    const num = parseFloat(cleanValue);
+    return !isNaN(num) && isFinite(num);
+  }
+};
+
+/**
+ * Mapa de todos los presets disponibles
+ */
+const PRESETS = {
+  'credit-card': creditCardPreset,
+  'phone-mx': phoneMxPreset,
+  nss: nssPreset,
+  currency: currencyPreset,
+  percentage: percentagePreset
+};
+
+/**
+ * Obtiene un preset por nombre
+ * @param {string} name - Nombre del preset
+ * @returns {object|null} Preset o null si no existe
+ */
+function getPreset(name) {
+  return PRESETS[name] || null;
+}
+
+/**
+ * Registra un nuevo preset personalizado
+ * @param {string} name - Nombre del preset
+ * @param {object} preset - Configuración del preset
+ */
+function registerPreset(name, preset) {
+  PRESETS[name] = {
+    name,
+    ...preset
+  };
+}
+
+/**
+ * Lista todos los presets disponibles
+ * @returns {string[]} Array con los nombres de los presets
+ */
+function listPresets() {
+  return Object.keys(PRESETS);
+}
+/* harmony default export */ var mask_presets = ({
+  PRESETS,
+  getPreset,
+  registerPreset,
+  listPresets
+});
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/inputMask/EInputMask.vue?vue&type=script&setup=true&lang=js
 
 
-const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
+
+
+const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = {
+  class: "e-input-mask__container"
+};
+const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
+
+
 
 
 /* harmony default export */ var EInputMaskvue_type_script_setup_true_lang_js = ({
@@ -53140,6 +53678,149 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
     hiddenChar: {
       type: String,
       default: '*'
+    },
+    /**
+     * Preset predefinido para tipos comunes de datos
+     * @values 'credit-card' - Tarjeta de crédito (13-19 dígitos, primeros 6 y últimos 4 visibles)
+     * @values 'phone-mx' - Teléfono mexicano (##) ## ## ## ##
+     * @values 'nss' - Número de Seguro Social ###-##-####
+     * @values 'currency' - Monto con símbolo $ y separadores de miles $1,234,567.89
+     * @values 'percentage' - Porcentaje con símbolo % 12.34%
+     */
+    preset: {
+      type: String,
+      default: null
+    },
+    /**
+     * Si es true, el v-model contendrá el valor formateado, si es false, solo los caracteres ingresados
+     * @values true - v-model: "(55) 12 34 56 78" o "$1,234.56"
+     * @values false - v-model: "5512345678" o "1234.56"
+     */
+    saveFormatted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Override para la cantidad de dígitos visibles al inicio en presets dinámicos (credit-card)
+     * @values 6 - por defecto para tarjetas de crédito
+     */
+    visiblePrefix: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Override para la cantidad de dígitos visibles al final en presets dinámicos (credit-card)
+     * @values 4 - por defecto para tarjetas de crédito
+     */
+    visibleSuffix: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Override para la cantidad de decimales en presets numéricos (currency, percentage)
+     * @values 2 - por defecto
+     */
+    decimals: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Override para el símbolo de moneda en preset currency
+     * @values '$' - por defecto, '€', 'MXN', etc.
+     */
+    currencySymbol: {
+      type: String,
+      default: null
+    },
+    /**
+     * Longitudes válidas para tarjetas de crédito (preset credit-card)
+     * @values [15, 16, 19] - por defecto acepta tarjetas de 15 (Amex), 16 (Visa/MC) o 19 dígitos
+     * @values [16] - solo tarjetas de 16 dígitos
+     * @values [15, 16] - Amex y Visa/MC
+     */
+    cardLengths: {
+      type: Array,
+      default: () => [15, 16, 19]
+    },
+    /**
+     * Mensaje de error cuando la tarjeta de crédito no es válida (algoritmo de Luhn)
+     * @values 'El número de tarjeta no es válido' - mensaje por defecto
+     */
+    invalidCardMessage: {
+      type: String,
+      default: 'El número de tarjeta no es válido'
+    },
+    /**
+     * Mensaje de error cuando la longitud de la tarjeta no es válida. Usa %lengths% como placeholder
+     * @values 'El número debe tener %lengths% dígitos' - mensaje por defecto
+     */
+    invalidCardLengthMessage: {
+      type: String,
+      default: 'El número debe tener %lengths% dígitos'
+    },
+    /**
+     * Indica si el campo es requerido
+     * @values true - campo requerido, false - campo opcional
+     */
+    required: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Reglas de validación personalizadas
+     * @values [(val) => !!val || 'Campo requerido'] - validación requerido
+     */
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Etiqueta del input (usada en mensajes de error)
+     * @values 'Número de tarjeta' - etiqueta del campo
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * Mensaje de error para campo requerido. Usa %label% como placeholder
+     * @values 'El campo %label% es requerido' - mensaje por defecto
+     */
+    requiredMessage: {
+      type: String,
+      default: 'El campo %label% es requerido'
+    },
+    /**
+     * Mensaje de error cuando el teléfono no tiene 10 dígitos (preset phone-mx)
+     * @values 'El número de teléfono debe tener 10 dígitos' - mensaje por defecto
+     */
+    invalidPhoneMessage: {
+      type: String,
+      default: 'El número de teléfono debe tener 10 dígitos'
+    },
+    /**
+     * Mensaje de error cuando el NSS no tiene 9 dígitos (preset nss)
+     * @values 'El NSS debe tener 9 dígitos' - mensaje por defecto
+     */
+    invalidNssMessage: {
+      type: String,
+      default: 'El NSS debe tener 9 dígitos'
+    },
+    /**
+     * Mensaje de error cuando el monto no es válido (preset currency)
+     * @values 'El monto no es válido' - mensaje por defecto
+     */
+    invalidCurrencyMessage: {
+      type: String,
+      default: 'El monto no es válido'
+    },
+    /**
+     * Mensaje de error cuando el porcentaje no es válido (preset percentage)
+     * @values 'El porcentaje no es válido' - mensaje por defecto
+     */
+    invalidPercentageMessage: {
+      type: String,
+      default: 'El porcentaje no es válido'
     }
   },
   emits: ['update:modelValue', 'clean', 'onEnterValid', 'onEnter'],
@@ -53159,22 +53840,148 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
     const displayValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)('');
     const realValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(props.modelValue || '');
     const isCleaning = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(false);
+    const lastValidationResult = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(true);
+
+    // Obtener el preset activo si existe
+    const activePreset = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      if (!props.preset) return null;
+      return getPreset(props.preset);
+    });
 
-    // Computed para verificar si la máscara está activa
+    // Computed para verificar si la máscara está activa (por patrón o por preset)
     const isMaskActive = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
-      return !!props.maskPattern;
+      return !!props.maskPattern || !!activePreset.value;
+    });
+
+    // Computed para verificar si es un preset numérico
+    const isNumericPreset = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return activePreset.value?.type === 'numeric';
+    });
+
+    // Computed para verificar si es un preset dinámico
+    const isDynamicPreset = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return activePreset.value?.type === 'dynamic';
+    });
+
+    // Computed para verificar si es un preset fijo
+    const isFixedPreset = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return activePreset.value?.type === 'fixed';
+    });
+
+    // Función helper para extraer el valor limpio del displayValue
+    const extractCleanValue = displayVal => {
+      if (!displayVal) return '';
+      if (isNumericPreset.value) {
+        // Para currency/percentage, extraer números y punto decimal
+        return displayVal.replace(/[^0-9.]/g, '');
+      }
+      // Para otros casos, extraer solo dígitos
+      return displayVal.replace(/[^0-9]/g, '');
+    };
+
+    // Computed para las reglas que se pasan a EInput (reutiliza el sistema de validación de EInput)
+    const inputRules = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      let rules = [];
+
+      // 1. Validación de required
+      if (props.required) {
+        rules.push(val => {
+          const cleanVal = extractCleanValue(val);
+          return !!cleanVal || props.requiredMessage.replace('%label%', props.label || '');
+        });
+      }
+
+      // 2. Reglas personalizadas del usuario (transformadas para usar valor limpio)
+      props.rules.forEach(rule => {
+        rules.push(val => {
+          const cleanVal = extractCleanValue(val);
+          return rule(cleanVal);
+        });
+      });
+
+      // 3. Validaciones de presets
+      if (activePreset.value) {
+        const presetName = activePreset.value.name;
+        if (presetName === 'credit-card') {
+          rules.push(() => {
+            // Para credit-card, usar realValue directamente ya que displayValue tiene asteriscos
+            const cleanVal = realValue.value || '';
+            if (!cleanVal) return true; // Vacío es válido (required lo maneja)
+
+            // Validar longitud
+            const validLengths = props.cardLengths || [15, 16, 19];
+            if (!validLengths.includes(cleanVal.length)) {
+              const lengthsStr = validLengths.join(', ').replace(/,([^,]*)$/, ' o$1');
+              return props.invalidCardLengthMessage.replace('%lengths%', lengthsStr);
+            }
+
+            // Validar Luhn solo si la longitud es correcta
+            return mixins_default().methods.validateLuhn(cleanVal) || props.invalidCardMessage;
+          });
+        } else if (presetName === 'phone-mx') {
+          rules.push(val => {
+            const cleanVal = val ? val.replace(/[^0-9]/g, '') : '';
+            if (!cleanVal) return true;
+            return cleanVal.length === 10 || props.invalidPhoneMessage;
+          });
+        } else if (presetName === 'nss') {
+          rules.push(val => {
+            const cleanVal = val ? val.replace(/[^0-9]/g, '') : '';
+            if (!cleanVal) return true;
+            return cleanVal.length === 9 || props.invalidNssMessage;
+          });
+        } else if (presetName === 'currency') {
+          rules.push(val => {
+            const cleanVal = val ? val.replace(/[^0-9.]/g, '') : '';
+            if (!cleanVal) return true;
+            return !isNaN(parseFloat(cleanVal)) && isFinite(cleanVal) || props.invalidCurrencyMessage;
+          });
+        } else if (presetName === 'percentage') {
+          rules.push(val => {
+            const cleanVal = val ? val.replace(/[^0-9.]/g, '') : '';
+            if (!cleanVal) return true;
+            return !isNaN(parseFloat(cleanVal)) && isFinite(cleanVal) || props.invalidPercentageMessage;
+          });
+        }
+      }
+      return rules;
+    });
+
+    // Opciones de configuración para el preset activo
+    const presetOptions = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      if (!activePreset.value) return {};
+      return {
+        visiblePrefix: props.visiblePrefix,
+        visibleSuffix: props.visibleSuffix,
+        hiddenChar: props.hiddenChar,
+        decimals: props.decimals,
+        currencySymbol: props.currencySymbol
+      };
+    });
+
+    // Computed para calcular el maxlength dinámico según el preset
+    const inputLength = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      if (activePreset.value?.name === 'credit-card') {
+        // Usar el valor máximo de cardLengths + separadores
+        const maxLength = Math.max(...props.cardLengths);
+        // Calcular separadores: si groupSize=4, entonces cada 4 dígitos hay un separador
+        const separators = Math.floor((maxLength - 1) / 4); // ej: 19 dígitos = 4 separadores
+        return maxLength + separators;
+      }
+      return null; // Sin límite para otros presets
     });
 
     // Props que se pasan a EInput (excluyendo los propios de EInputMask)
-    // Excluimos maskPattern y hiddenChar para evitar pasarlos a EInput
+    // Excluimos todas las props de EInputMask para evitar pasarlas a EInput
+    const excludedProps = ['maskPattern', 'hiddenChar', 'preset', 'saveFormatted', 'visiblePrefix', 'visibleSuffix', 'decimals', 'currencySymbol', 'cardLengths', 'invalidCardMessage', 'invalidCardLengthMessage', 'required', 'rules', 'label', 'requiredMessage', 'invalidPhoneMessage', 'invalidNssMessage', 'invalidCurrencyMessage', 'invalidPercentageMessage'];
     const inputProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
-      // eslint-disable-next-line no-unused-vars -- Variables desestructuradas intencionalmente para excluirlas de attrs
-      const {
-        maskPattern,
-        hiddenChar,
-        ...rest
-      } = attrs;
-      return rest;
+      const result = {};
+      for (const key in attrs) {
+        if (!excludedProps.includes(key)) {
+          result[key] = attrs[key];
+        }
+      }
+      return result;
     });
 
     // Obtener el input nativo del componente EInput
@@ -53269,6 +54076,116 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
         realValue: cleanValue
       };
     };
+
+    // ===== FUNCIONES DE PRESET DINÁMICO (CREDIT CARD) =====
+    const applyDynamicPresetMask = value => {
+      const preset = activePreset.value;
+      if (!preset || preset.type !== 'dynamic') {
+        return {
+          displayValue: value,
+          realValue: value
+        };
+      }
+      const cleanValue = value.replace(/[^0-9]/g, '');
+      // Usar el máximo de cardLengths en lugar de un valor hardcodeado
+      const maxLength = Math.max(...props.cardLengths);
+      const truncatedValue = cleanValue.slice(0, maxLength);
+
+      // Generar patrón dinámico basado en la longitud
+      const pattern = preset.generatePattern(truncatedValue.length, presetOptions.value);
+
+      // Aplicar el patrón
+      const hiddenChar = props.hiddenChar || preset.hiddenChar || '*';
+      let displayValue = '';
+      for (let i = 0; i < truncatedValue.length; i++) {
+        if (pattern[i] === '#') {
+          displayValue += truncatedValue[i];
+        } else {
+          displayValue += hiddenChar;
+        }
+      }
+
+      // Agregar separadores cada groupSize caracteres
+      const separator = preset.separator || ' ';
+      const groupSize = preset.groupSize || 4;
+      if (separator && groupSize && displayValue.length > 0) {
+        displayValue = displayValue.replace(new RegExp(`(.{${groupSize}})(?=.)`, 'g'), `$1${separator}`);
+      }
+      return {
+        displayValue,
+        realValue: truncatedValue
+      };
+    };
+
+    // ===== FUNCIONES DE PRESET FIJO (PHONE, NSS) =====
+    const applyFixedPresetMask = value => {
+      const preset = activePreset.value;
+      if (!preset || preset.type !== 'fixed') {
+        return {
+          displayValue: value,
+          realValue: value
+        };
+      }
+      const result = preset.format(value);
+      return {
+        displayValue: result.displayValue,
+        realValue: result.realValue
+      };
+    };
+
+    // ===== FUNCIONES DE PRESET NUMÉRICO (CURRENCY, PERCENTAGE) =====
+    const applyNumericPresetMask = value => {
+      const preset = activePreset.value;
+      if (!preset || preset.type !== 'numeric') {
+        return {
+          displayValue: value,
+          realValue: value
+        };
+      }
+      const result = preset.format(value, presetOptions.value);
+      return {
+        displayValue: result.displayValue,
+        realValue: result.realValue
+      };
+    };
+
+    // ===== FUNCIÓN UNIFICADA PARA APLICAR MÁSCARA =====
+    const applyMask = value => {
+      if (!value && value !== '0') {
+        return {
+          displayValue: '',
+          realValue: ''
+        };
+      }
+
+      // Si hay un preset activo, usarlo
+      if (activePreset.value) {
+        if (isDynamicPreset.value) {
+          return applyDynamicPresetMask(value);
+        } else if (isFixedPreset.value) {
+          return applyFixedPresetMask(value);
+        } else if (isNumericPreset.value) {
+          return applyNumericPresetMask(value);
+        }
+      }
+
+      // Si no hay preset, usar el patrón personalizado
+      if (props.maskPattern) {
+        return applyPatternMask(value, props.maskPattern);
+      }
+      return {
+        displayValue: value,
+        realValue: value
+      };
+    };
+
+    // ===== FUNCIÓN PARA OBTENER EL VALOR A EMITIR =====
+    const getEmitValue = (realVal, displayVal) => {
+      if (props.saveFormatted) {
+        return displayVal;
+      }
+      return realVal;
+    };
     const handlePatternInput = (currentDisplay, realValue, cursorPosition, pattern) => {
       if (!pattern) {
         return {
@@ -53457,10 +54374,34 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
       }
       const nativeInput = getNativeInput();
       const cursorPosition = nativeInput?.selectionStart ?? value.length;
-      const result = handlePatternInput(value, realValue.value, cursorPosition, props.maskPattern);
+      let result;
+
+      // Determinar qué tipo de máscara aplicar
+      if (activePreset.value) {
+        if (isDynamicPreset.value) {
+          // Para presets dinámicos (credit-card), calcular posición del cursor
+          result = handleDynamicPresetInput(value, cursorPosition);
+        } else if (isFixedPreset.value) {
+          // Para presets fijos (phone, nss), calcular posición del cursor
+          result = handleFixedPresetInput(value, cursorPosition);
+        } else if (isNumericPreset.value) {
+          // Para presets numéricos (currency, percentage)
+          result = handleNumericPresetInput(value, cursorPosition);
+        }
+      } else if (props.maskPattern) {
+        // Usar el patrón personalizado existente
+        result = handlePatternInput(value, realValue.value, cursorPosition, props.maskPattern);
+      }
+      if (!result) {
+        result = {
+          displayValue: value,
+          realValue: value,
+          cursorPosition: cursorPosition
+        };
+      }
       realValue.value = result.realValue;
       displayValue.value = result.displayValue;
-      emit('update:modelValue', result.realValue);
+      emit('update:modelValue', getEmitValue(result.realValue, result.displayValue));
 
       // Usar doble nextTick para asegurar que el DOM se haya actualizado completamente
       // (similar a cómo EInput maneja el cursor después de actualizar el valor)
@@ -53479,8 +54420,205 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
         });
       });
     };
+
+    // ===== MANEJO DE INPUT PARA PRESET DINÁMICO =====
+    const handleDynamicPresetInput = (value, cursorPosition) => {
+      const preset = activePreset.value;
+      const hiddenChar = props.hiddenChar || preset.hiddenChar || '*';
+      const separator = preset.separator || ' ';
+      // Usar el máximo de cardLengths en lugar de un valor hardcodeado
+      const maxLength = Math.max(...props.cardLengths);
+
+      // Reconstruir los dígitos combinando los visibles del display con los ocultos del realValue
+      const reconstructedDigits = [];
+      let realValueIndex = 0;
+      for (let i = 0; i < value.length; i++) {
+        const char = value[i];
+        if (/[0-9]/.test(char)) {
+          // Es un dígito visible, usarlo directamente
+          reconstructedDigits.push(char);
+          realValueIndex++;
+        } else if (char === hiddenChar) {
+          // Es un carácter oculto, recuperar el dígito del realValue
+          if (realValueIndex < realValue.value.length) {
+            reconstructedDigits.push(realValue.value[realValueIndex]);
+          }
+          realValueIndex++;
+        }
+        // Ignorar separadores y otros caracteres
+      }
+      const cleanValue = reconstructedDigits.join('');
+      const truncatedValue = cleanValue.slice(0, maxLength);
+
+      // Contar dígitos y caracteres ocultos antes del cursor
+      let digitsBeforeCursor = 0;
+      for (let i = 0; i < Math.min(cursorPosition, value.length); i++) {
+        const char = value[i];
+        if (/[0-9]/.test(char) || char === hiddenChar) {
+          digitsBeforeCursor++;
+        }
+      }
+
+      // Aplicar la máscara
+      const masked = applyDynamicPresetMask(truncatedValue);
+
+      // Calcular nueva posición del cursor
+      let newCursorPosition = 0;
+      let digitsCounted = 0;
+      for (let i = 0; i < masked.displayValue.length; i++) {
+        const char = masked.displayValue[i];
+        if (char !== separator) {
+          digitsCounted++;
+          if (digitsCounted === digitsBeforeCursor) {
+            newCursorPosition = i + 1;
+            // Avanzar el cursor más allá del separador si está justo después
+            if (i + 1 < masked.displayValue.length && masked.displayValue[i + 1] === separator) {
+              newCursorPosition = i + 2;
+            }
+            break;
+          }
+        }
+      }
+
+      // Si no encontramos la posición, usar el final
+      if (digitsCounted < digitsBeforeCursor) {
+        newCursorPosition = masked.displayValue.length;
+      }
+      return {
+        displayValue: masked.displayValue,
+        realValue: masked.realValue,
+        cursorPosition: newCursorPosition
+      };
+    };
+
+    // ===== MANEJO DE INPUT PARA PRESET FIJO =====
+    const handleFixedPresetInput = (value, cursorPosition) => {
+      const preset = activePreset.value;
+      const cleanValue = value.replace(/[^0-9]/g, '');
+      const maxLength = preset.maxLength || 10;
+      const truncatedValue = cleanValue.slice(0, maxLength);
+
+      // Contar dígitos antes del cursor en el valor original
+      let digitsBeforeCursor = 0;
+      for (let i = 0; i < Math.min(cursorPosition, value.length); i++) {
+        if (/[0-9]/.test(value[i])) {
+          digitsBeforeCursor++;
+        }
+      }
+
+      // Aplicar la máscara
+      const masked = applyFixedPresetMask(truncatedValue);
+
+      // Calcular nueva posición del cursor
+      let newCursorPosition = 0;
+      let digitsCounted = 0;
+      for (let i = 0; i < masked.displayValue.length; i++) {
+        if (/[0-9]/.test(masked.displayValue[i])) {
+          digitsCounted++;
+          if (digitsCounted === digitsBeforeCursor) {
+            newCursorPosition = i + 1;
+            // Avanzar el cursor más allá de caracteres no numéricos
+            while (newCursorPosition < masked.displayValue.length && !/[0-9]/.test(masked.displayValue[newCursorPosition])) {
+              newCursorPosition++;
+            }
+            break;
+          }
+        }
+      }
+
+      // Si no encontramos la posición, usar el final
+      if (digitsCounted < digitsBeforeCursor) {
+        newCursorPosition = masked.displayValue.length;
+      }
+      return {
+        displayValue: masked.displayValue,
+        realValue: masked.realValue,
+        cursorPosition: newCursorPosition
+      };
+    };
+
+    // ===== MANEJO DE INPUT PARA PRESET NUMÉRICO =====
+    const handleNumericPresetInput = (value, cursorPosition) => {
+      const preset = activePreset.value;
+      const prefix = presetOptions.value.currencySymbol || preset.prefix || '';
+      const suffix = preset.suffix || '';
+      const decimalSeparator = preset.decimalSeparator || '.';
+
+      // Remover prefijo y sufijo si están presentes
+      let cleanInput = value;
+      if (prefix && cleanInput.startsWith(prefix)) {
+        cleanInput = cleanInput.slice(prefix.length);
+      }
+      if (suffix && cleanInput.endsWith(suffix)) {
+        cleanInput = cleanInput.slice(0, -suffix.length);
+      }
+
+      // Contar dígitos y puntos decimales antes del cursor
+      let relevantCharsBeforeCursor = 0;
+      let inputBeforeCursor = value.slice(0, cursorPosition);
+      if (prefix && inputBeforeCursor.startsWith(prefix)) {
+        inputBeforeCursor = inputBeforeCursor.slice(prefix.length);
+      }
+      for (let i = 0; i < inputBeforeCursor.length; i++) {
+        if (/[0-9.]/.test(inputBeforeCursor[i])) {
+          relevantCharsBeforeCursor++;
+        }
+      }
+
+      // Aplicar la máscara
+      const masked = applyNumericPresetMask(cleanInput);
+
+      // Calcular nueva posición del cursor
+      let newCursorPosition = prefix.length;
+      let charsCounted = 0;
+
+      // Obtener el display sin prefijo y sufijo para contar
+      let displayWithoutPrefixSuffix = masked.displayValue;
+      if (prefix && displayWithoutPrefixSuffix.startsWith(prefix)) {
+        displayWithoutPrefixSuffix = displayWithoutPrefixSuffix.slice(prefix.length);
+      }
+      if (suffix && displayWithoutPrefixSuffix.endsWith(suffix)) {
+        displayWithoutPrefixSuffix = displayWithoutPrefixSuffix.slice(0, -suffix.length);
+      }
+      for (let i = 0; i < displayWithoutPrefixSuffix.length; i++) {
+        const char = displayWithoutPrefixSuffix[i];
+        if (/[0-9]/.test(char) || char === decimalSeparator) {
+          charsCounted++;
+          if (charsCounted === relevantCharsBeforeCursor) {
+            newCursorPosition = prefix.length + i + 1;
+            break;
+          }
+        }
+      }
+
+      // Si no encontramos la posición exacta, posicionar antes del sufijo
+      if (charsCounted < relevantCharsBeforeCursor) {
+        newCursorPosition = masked.displayValue.length - suffix.length;
+      }
+      return {
+        displayValue: masked.displayValue,
+        realValue: masked.realValue,
+        cursorPosition: newCursorPosition
+      };
+    };
+
+    // ===== FUNCIONES DE VALIDACIÓN (delegan a EInput) =====
+
+    // Resetea todos los errores de validación (delega a EInput)
+    const reset = () => {
+      inputRef.value?.reset();
+      lastValidationResult.value = true;
+    };
+
+    // Valida el valor actual usando las reglas configuradas (delega a EInput)
+    const validate = () => {
+      const result = inputRef.value?.validate() ?? true;
+      lastValidationResult.value = result;
+      return result;
+    };
     const handleBlur = () => {
-      emit('update:modelValue', realValue.value);
+      // EInput maneja la validación internamente
+      emit('update:modelValue', getEmitValue(realValue.value, displayValue.value));
     };
     const handleKeydown = event => {
       // Manejar backspace para máscaras activas
@@ -53496,20 +54634,30 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
         return;
       }
 
+      // Determinar qué caracteres son válidos según el tipo de máscara
+      const hiddenChar = props.hiddenChar || '*';
+      let validCharRegex;
+      if (isNumericPreset.value) {
+        // Para presets numéricos, los dígitos y el punto decimal son válidos
+        const decimalSeparator = activePreset.value?.decimalSeparator || '.';
+        validCharRegex = new RegExp(`[0-9${decimalSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}]`);
+      } else {
+        // Para otros presets, dígitos y el carácter oculto son válidos
+        validCharRegex = new RegExp(`[0-9${hiddenChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}]`);
+      }
+
       // Verificar si el cursor está justo después de un separador
       if (cursorPosition > 0 && cursorPosition <= value.length) {
         const charBeforeCursor = value[cursorPosition - 1];
-        const hiddenChar = props.hiddenChar || '*';
-        const hiddenCharRegex = new RegExp(`[0-9${hiddenChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}]`);
 
-        // Si el carácter antes del cursor no es un dígito ni el carácter oculto, es un separador
-        if (!hiddenCharRegex.test(charBeforeCursor)) {
+        // Si el carácter antes del cursor no es un carácter válido, es un separador/símbolo
+        if (!validCharRegex.test(charBeforeCursor)) {
           // Prevenir el comportamiento por defecto
           event.preventDefault();
 
           // Buscar el dígito anterior (antes del separador)
           let digitPosition = cursorPosition - 1;
-          while (digitPosition > 0 && !hiddenCharRegex.test(value[digitPosition - 1])) {
+          while (digitPosition > 0 && !validCharRegex.test(value[digitPosition - 1])) {
             digitPosition--;
           }
           if (digitPosition > 0) {
@@ -53560,22 +54708,40 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
     const handlePaste = event => {
       if (!isMaskActive.value) return;
       event.preventDefault();
+
+      // Reset errores previos
+      inputRef.value?.reset?.();
       const clipboardData = event.clipboardData || window.clipboardData;
       const pastedValue = clipboardData.getData('text');
 
-      // Validar que solo contenga números
-      if (!/^[0-9\s-]*$/.test(pastedValue)) {
-        return;
+      // Validar según el tipo de máscara
+      if (isNumericPreset.value) {
+        // Para presets numéricos, permitir números, espacios, guiones y puntos
+        if (!/^[0-9\s\-.,]*$/.test(pastedValue)) {
+          return;
+        }
+      } else {
+        // Para otros presets, validar que solo contenga números
+        if (!/^[0-9\s-]*$/.test(pastedValue)) {
+          return;
+        }
       }
-      const result = applyPatternMask(pastedValue, props.maskPattern);
+
+      // Aplicar la máscara usando la función unificada
+      const result = applyMask(pastedValue);
       realValue.value = result.realValue;
       displayValue.value = result.displayValue;
-      emit('update:modelValue', result.realValue);
+      emit('update:modelValue', getEmitValue(result.realValue, result.displayValue));
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
         const input = getNativeInput();
         if (input) {
           const length = result.displayValue.length;
           input.setSelectionRange(length, length);
+
+          // Forzar revalidación con el nuevo valor
+          (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
+            inputRef.value?.validate?.();
+          });
         }
       });
     };
@@ -53587,7 +54753,7 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
       realValue.value = '';
       displayValue.value = '';
 
-      // Emitir eventos
+      // Emitir eventos (el valor limpio siempre es vacío independiente de saveFormatted)
       emit('update:modelValue', '');
       emit('clean');
 
@@ -53628,14 +54794,14 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
 
     // ===== FORMATO INICIAL =====
     const formatInitialValue = value => {
-      if (!value) {
+      if (!value && value !== '0') {
         return {
           displayValue: '',
           realValue: ''
         };
       }
       if (isMaskActive.value) {
-        return applyPatternMask(value, props.maskPattern);
+        return applyMask(value);
       }
       return {
         displayValue: value,
@@ -53649,7 +54815,10 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
       if (isCleaning.value) {
         return;
       }
-      if (newValue !== realValue.value) {
+
+      // Comparar con el valor correcto según saveFormatted
+      const currentEmitValue = getEmitValue(realValue.value, displayValue.value);
+      if (newValue !== currentEmitValue) {
         const formatted = formatInitialValue(newValue);
         displayValue.value = formatted.displayValue;
         realValue.value = formatted.realValue;
@@ -53658,9 +54827,18 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
       immediate: true
     });
 
+    // Watcher para cambios en el preset
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => props.preset, () => {
+      if (realValue.value) {
+        const formatted = formatInitialValue(realValue.value);
+        displayValue.value = formatted.displayValue;
+        realValue.value = formatted.realValue;
+      }
+    });
+
     // Lifecycle
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
-      if (props.modelValue) {
+      if (props.modelValue || props.modelValue === '0') {
         const formatted = formatInitialValue(props.modelValue);
         displayValue.value = formatted.displayValue;
         realValue.value = formatted.realValue;
@@ -53691,33 +54869,53 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "value"];
 
     // Exponer métodos útiles
     __expose({
+      /** Obtiene el valor real (sin formato) */
       getRealValue: () => realValue.value,
+      /** Obtiene el valor de display (con formato) */
       getDisplayValue: () => displayValue.value,
+      /** Obtiene el valor que se emite según saveFormatted */
+      getEmittedValue: () => getEmitValue(realValue.value, displayValue.value),
+      /** Limpia el input y resetea validaciones */
       clean: () => {
         displayValue.value = '';
         realValue.value = '';
+        reset();
         emit('update:modelValue', '');
         emit('clean');
-      }
+      },
+      /** Valida el valor actual según las reglas y el preset activo (delega a EInput) */
+      validate,
+      /** Resetea todos los errores de validación (delega a EInput) */
+      reset,
+      /** Alias de reset para compatibilidad (delega a EInput) */
+      resetValidation: reset,
+      /** Indica si hay un error de validación activo */
+      hasError: () => !lastValidationResult.value,
+      /** Obtiene información del preset activo */
+      getPresetInfo: () => activePreset.value
     });
     return (_ctx, _cache) => {
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("input", {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", EInputMaskvue_type_script_setup_true_lang_js_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("input", {
         type: "hidden",
         id: hiddenInputId.value,
         value: realValue.value
-      }, null, 8, EInputMaskvue_type_script_setup_true_lang_js_hoisted_1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(EInput, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }, null, 8, EInputMaskvue_type_script_setup_true_lang_js_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(EInput, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         id: inputId.value,
         ref: el => inputRef.value = el,
         modelValue: displayValue.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => displayValue.value = $event)
       }, inputProps.value, {
+        required: __props.required,
+        rules: inputRules.value,
+        label: __props.label,
+        length: inputLength.value,
         "onUpdate:modelValue": handleDisplayUpdate,
         onBlur: handleBlur,
         onFocus: handleFocus,
         onClean: handleClean,
         onOnEnter: handleEnter,
         onOnEnterValid: handleEnterValid
-      }), null, 16, ["id", "modelValue"])]);
+      }), null, 16, ["id", "modelValue", "required", "rules", "label", "length"])]);
     };
   }
 });
@@ -55235,10 +56433,10 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_11 = {
       }, null, 46, ESelectvue_type_script_setup_true_lang_js_hoisted_2), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vModelText, tempValueInput.value]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
         ref: `selectLabelSelectedSuggest-${(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(instance).uid}`,
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(inputLabelSelectedClass.value)
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(labelSelected.value), 3), showTooltip.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_tooltip, {
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOptionSelected(labelSelected.value)), 3), showTooltip.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_tooltip, {
         key: 0
       }, {
-        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(labelSelected.value), 1)]),
+        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOptionSelected(labelSelected.value)), 1)]),
         _: 1
       })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
         for: `input-${(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(instance).uid}`,