@dile/ui 3.7.3 → 3.8.0

package/components/input/index.js

@@ -1,6 +1,7 @@
 export { DileInput } from './src/DileInput.js';
 export { DileInputIcon } from './src/DileInputIcon.js';
 export { DileInputInteger } from './src/DileInputInteger.js';
+export { DileInputMask } from './src/DileInputMask.js';
 export { DileInputMessage } from './src/DileInputMessage.js';
 export { DileInputMoney } from './src/DileInputMoney.js';
 export { DileInputNumber } from './src/DileInputNumber.js';
@@ -9,4 +10,5 @@ export { DileInputPercentage } from './src/DileInputPercentage.js';
 export { DileInputSearch } from './src/DileInputSearch.js';
 export { labelStyles } from './src/label-styles.js';
 export { messageStyles } from './src/message-styles.js';
-export { Mask } from './src/Mask.js';
+export { Mask } from './src/Mask.js';
+export { MaskPattern } from './src/MaskPattern.js';

package/components/input/input-mask.js

@@ -0,0 +1,5 @@
+import { DileInputMask } from './src/DileInputMask.js';
+
+if (!customElements.get('dile-input-mask')) {
+  window.customElements.define('dile-input-mask', DileInputMask);
+}

package/components/input/input-mask.spec.js

@@ -0,0 +1,186 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-mask.js';
+
+describe('dile-input-mask', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputMask(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-mask');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input', async () => {
+    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
+    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
+  });
+
+  it('masks input with letters and digits', async () => {
+    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    const chars = ['E', 'S', '9', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'];
+    chars.forEach((char) => {
+      const keydownEvent = new KeyboardEvent('keydown', {
+        key: char,
+        bubbles: true,
+        cancelable: true,
+      });
+      input.dispatchEvent(keydownEvent);
+      input.value += char;
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    });
+
+    await el.updateComplete;
+
+    expect(el.maskedValue).toBe('ES91 0000 0000 0000 0000');
+  });
+
+  it('validates invalid format on blur', async () => {
+    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // Try to start with a digit instead of a letter
+    input.value = '91ES0000000000000000';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    input.dispatchEvent(new Event('blur', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.errored).toBe(true);
+    expect(el.message).toContain('expected a letter');
+  });
+
+  it('supports multiple languages for error messages', async () => {
+    // English (default)
+    const elEn = await renderInputMask('<dile-input-mask name="iban" mask="AA00" language="en"></dile-input-mask>');
+    const inputEn = elEn.shadowRoot.querySelector('input');
+    inputEn.value = '9100';
+    inputEn.dispatchEvent(new Event('input', { bubbles: true }));
+    await elEn.updateComplete;
+    inputEn.dispatchEvent(new Event('blur', { bubbles: true }));
+    await elEn.updateComplete;
+
+    expect(elEn.message).toContain('expected a letter');
+
+    // Spanish
+    const elEs = await renderInputMask('<dile-input-mask name="iban" mask="AA00" language="es"></dile-input-mask>');
+    const inputEs = elEs.shadowRoot.querySelector('input');
+    inputEs.value = '9100';
+    inputEs.dispatchEvent(new Event('input', { bubbles: true }));
+    await elEs.updateComplete;
+    inputEs.dispatchEvent(new Event('blur', { bubbles: true }));
+    await elEs.updateComplete;
+
+    expect(elEs.message).toContain('se esperaba una letra');
+
+    // French
+    const elFr = await renderInputMask('<dile-input-mask name="iban" mask="AA00" language="fr"></dile-input-mask>');
+    const inputFr = elFr.shadowRoot.querySelector('input');
+    inputFr.value = '9100';
+    inputFr.dispatchEvent(new Event('input', { bubbles: true }));
+    await elFr.updateComplete;
+    inputFr.dispatchEvent(new Event('blur', { bubbles: true }));
+    await elFr.updateComplete;
+
+    expect(elFr.message).toContain('lettre attendue');
+  });
+
+  it('allows selecting and replacing characters', async () => {
+    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // First, enter some initial value
+    const initialChars = ['E', 'S', '9', '1', '0', '0', '0', '0'];
+    initialChars.forEach((char) => {
+      input.value += char;
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    });
+    await el.updateComplete;
+
+    expect(el.maskedValue).toBe('ES91 0000');
+
+    // Now simulate selecting characters at positions 3-5 (the "91") and replacing with "AB"
+    // In the masked value "ES91 0000", positions 3-5 contain "91"
+    input.value = 'ESAB 0000';
+    input.setSelectionRange(5, 5); // Cursor after the replacement
+    const inputEvent = new Event('input', { bubbles: true });
+    input.dispatchEvent(inputEvent);
+    await el.updateComplete;
+
+    // Should have replaced with AB and maintained format
+    expect(el.value).toContain('ESAB');
+    expect(el.maskedValue).toBe('ESAB 0000');
+  });
+
+  it('does not show error while typing incomplete input', async () => {
+    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // User starts typing correctly
+    input.value = 'ES91';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.errored).toBeFalsy();
+  });
+
+  it('transforms to uppercase when pattern uses A', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="AA00 AA"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // User types lowercase, should transform to uppercase
+    const chars = ['e', 's', '9', '1', 'a', 'b'];
+    chars.forEach((char) => {
+      input.value += char;
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    });
+
+    await el.updateComplete;
+
+    expect(el.maskedValue).toBe('ES91 AB');
+    expect(el.value).toBe('ES91AB');
+  });
+
+  it('transforms to lowercase when pattern uses a', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="aa00 aa"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // User types uppercase, should transform to lowercase
+    const chars = ['E', 'S', '9', '1', 'A', 'B'];
+    chars.forEach((char) => {
+      input.value += char;
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    });
+
+    await el.updateComplete;
+
+    expect(el.maskedValue).toBe('es91 ab');
+    expect(el.value).toBe('es91ab');
+  });
+
+  it('handles mixed case transformation', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-aa-00"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // User types: first two should be uppercase, next two lowercase, then digits
+    const chars = ['a', 'b', 'c', 'd', '1', '2'];
+    chars.forEach((char) => {
+      input.value += char;
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    });
+
+    await el.updateComplete;
+
+    expect(el.maskedValue).toBe('AB-cd-12');
+    expect(el.value).toBe('ABcd12');
+  });
+});

package/components/input/input-number-mask.spec.js

@@ -22,9 +22,25 @@ describe('dile-input-number-mask', () => {
     const el = await renderInputNumberMask('<dile-input-number-mask name="code" mask="00-00"></dile-input-number-mask>');
     const input = el.shadowRoot.querySelector('input');
 
+    // Simular el usuario escribiendo números: keydown + input event
     ['1', '2', '3'].forEach((key) => {
-      input.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+      // El navegador primero dispara keydown
+      const keydownEvent = new KeyboardEvent('keydown', { 
+        key, 
+        bubbles: true, 
+        cancelable: true 
+      });
+      input.dispatchEvent(keydownEvent);
+      
+      // Simular que el navegador actualiza el value del input
+      input.value += key;
+      
+      // Luego dispara input event
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
     });
+    
+    // Esperar a que Lit procese los cambios
     await el.updateComplete;
 
     expect(el.maskedValue).toBe('12-3');

package/components/input/src/DileInputMask.js

@@ -0,0 +1,173 @@
+import { DileInput } from '../../input/index.js';
+import { MaskPattern } from './MaskPattern.js';
+
+export class DileInputMask extends DileInput {
+
+  static get properties() {
+    return {
+      ...super.properties,
+      mask: { type: String },
+      maskedValue: { type: String },
+      language: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.mask = '';
+    this.maskedValue = '';
+    this.content = '';
+    this.language = 'en';
+    this._keyDownHandler = this.handleKeyDown.bind(this);
+    this._blurHandler = this.handleBlur.bind(this);
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.createMaskController(this.mask);
+    if (this.el) {
+      this.el.addEventListener('keydown', this._keyDownHandler);
+      this.el.addEventListener('blur', this._blurHandler);
+    }
+  }
+
+  createMaskController(mask) {
+    this.maskController = new MaskPattern(mask, this.language);
+    this.maxChars = this.maskController.getTotalCharactersExpected();
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('mask')) {
+      this.maskController.setPattern(this.mask);
+      this.maxChars = this.maskController.getTotalCharactersExpected();
+      this.updateMaskedValue();
+    }
+    if (changedProperties.has('language')) {
+      this.maskController.setLanguage(this.language);
+    }
+    if (changedProperties.has('value')) {
+      const transformedValue = this.maskController.transformValue(this.value.slice(0, this.maxChars));
+      this.content = transformedValue;
+      this.updateMaskedValue();
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.el) {
+      this.el.removeEventListener('keydown', this._keyDownHandler);
+      this.el.removeEventListener('blur', this._blurHandler);
+    }
+    super.disconnectedCallback();
+  }
+
+  updateMaskedValue() {
+    this.maskedValue = this.maskController.maskIt(this.content);
+  }
+
+  computeValue(value) {
+    return this.maskedValue;
+  }
+
+  _input(e) {
+    const inputElement = e.target;
+    
+    const inputValue = inputElement.value;
+    const oldCursorPos = inputElement.selectionStart;
+    
+    const cleanValue = this.maskController.getCleanValue(inputValue).slice(0, this.maxChars);
+    const transformedValue = this.maskController.transformValue(cleanValue);
+
+    this.content = transformedValue;
+    this.updateMaskedValue();
+    this.value = transformedValue;
+
+    inputElement.value = this.maskedValue;
+
+    this.restoreCursorPosition(inputElement, inputValue, oldCursorPos);
+
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
+  }
+
+  /**
+   * Restores cursor position after formatting the value.
+   * Positions it based on the count of alphanumeric characters entered.
+   */
+  restoreCursorPosition(inputElement, oldValue, oldCursorPos) {
+    const beforeCursor = oldValue.substring(0, oldCursorPos);
+    const cleanCharsBeforeCursor = beforeCursor.replace(/[^a-zA-Z0-9]/g, '').length;
+
+    let charsFound = 0;
+    let newCursorPos = 0;
+
+    for (let i = 0; i < this.maskedValue.length; i++) {
+      if (/[a-zA-Z0-9]/.test(this.maskedValue[i])) {
+        if (charsFound === cleanCharsBeforeCursor) {
+          newCursorPos = i;
+          break;
+        }
+        charsFound++;
+      }
+      newCursorPos = i + 1;
+    }
+
+    inputElement.setSelectionRange(newCursorPos, newCursorPos);
+  }
+
+  handleKeyDown(e) {
+    const inputElement = this.el;
+    if (e.target !== inputElement) return;
+
+    const key = e.key;
+
+    if (this.isAllowedCharacter(key, inputElement)) return;
+
+    const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Tab', 'Enter'];
+    if (allowedKeys.includes(key)) return;
+
+    if (e.ctrlKey || e.metaKey) return;
+
+    e.preventDefault();
+  }
+
+  handleBlur(e) {
+    if (!this.maskController) return;
+
+    const validation = this.maskController.validate(this.content);
+
+    if (!validation.valid) {
+      this.errored = true;
+      this.message = validation.error || this.getInvalidFormatMessage();
+    } else if (this.maskController.isComplete(this.content)) {
+      this.clearError();
+    }
+  }
+
+  getInvalidFormatMessage() {
+    const messages = {
+      en: `Invalid format. Expected: ${this.maskController.getFormatDescription()}`,
+      es: `Formato inválido. Se espera: ${this.maskController.getFormatDescription()}`,
+      fr: `Format invalide. Attendu: ${this.maskController.getFormatDescription()}`,
+      de: `Ungültiges Format. Erwartet: ${this.maskController.getFormatDescription()}`,
+      cat: `Format invàlid. S'espera: ${this.maskController.getFormatDescription()}`,
+    };
+    
+    return messages[this.language] || messages['en'];
+  }
+
+  isAllowedCharacter(char, inputElement) {
+    if (/[a-zA-Z0-9]/.test(char)) {
+      // If there's a selection, user is replacing text, so allow it
+      if (inputElement.selectionStart !== inputElement.selectionEnd) {
+        return true;
+      }
+      // Otherwise only allow if we haven't reached max chars
+      if (this.content.length < this.maxChars) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

package/components/input/src/DileInputNumberMask.js

@@ -1,4 +1,3 @@
-import { LitElement, html } from 'lit';
 import { DileInput } from '../../input/index.js';
 import { Mask } from './Mask.js';
 
@@ -6,6 +5,7 @@ export class DileInputNumberMask extends DileInput {
 
   static get properties() {
     return {
+      ...super.properties,
       mask: { type: String },
       maskedValue: { type: String },
     };
@@ -14,12 +14,17 @@ export class DileInputNumberMask extends DileInput {
   constructor() {
     super();
     this.mask = ''; 
+    this.maskedValue = '';
+    this.content = '';
+    this._keyDownHandler = this.handleKeyDown.bind(this);
   }
 
   firstUpdated() {
-    this.content = '';
-    this.maskedValue = '';
+    super.firstUpdated();
     this.createMaskController(this.mask);
+    if (this.el) {
+      this.el.addEventListener('keydown', this._keyDownHandler);
+    }
   }
 
   createMaskController(mask) {
@@ -31,50 +36,88 @@ export class DileInputNumberMask extends DileInput {
     super.updated(changedProperties);
     if (changedProperties.has('mask')) {
       this.maskController.setPattern(this.mask);
-      this.updateValue();
+      this.updateMaskedValue();
     }
     if (changedProperties.has('value')) {
       this.content = this.value.slice(0, this.maxChars);
-      this.updateValue();
+      this.updateMaskedValue();
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.el) {
+      this.el.removeEventListener('keydown', this._keyDownHandler);
     }
+    super.disconnectedCallback();
   }
 
-  updateValue() {
+  updateMaskedValue() {
     this.maskedValue = this.maskController.maskIt(this.content);
   }
 
-  render() {
-    return html`
-    <div>
-      ${this.label
-        ? html`<label for="textField">${this.label}</label>`
-        : ''
-      }
-      <input
-        type="text"
-        id="textField"
-        name="${this.name}"
-        placeholder="${this.placeholder}"
-        ?disabled="${this.disabled}"
-        @keypress="${this._lookForEnter}"
-        @keydown="${this.doKeyDown}"
-        .value="${this.maskedValue}"
-        class="${ this.errored ? 'errored' : '' }">
-    </div>
-    `;
+  computeValue(value) {
+    return this.maskedValue;
   }
 
-  doKeyDown(e) {
-    e.preventDefault();
-    if (this.isNumeric(e.key) && this.content.length < this.maxChars) {
-      this.content += e.key;
+  _input(e) {
+    const inputElement = e.target;
+    const cursorPos = inputElement.selectionStart;
+    
+    const inputValue = inputElement.value;
+    const numericOnly = inputValue.replace(/\D/g, '').slice(0, this.maxChars);
+    
+    this.content = numericOnly;
+    this.updateMaskedValue();
+    this.value = numericOnly;
+    
+    inputElement.value = this.maskedValue;
+    
+    this.restoreCursorPosition(inputElement, inputValue, cursorPos);
+    
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
     }
-    if (e.keyCode == 8) {
-      if (this.content.length > 0) {
-        this.content = this.content.substr(0, this.content.length - 1);
+  }
+
+  /**
+   * Restores cursor position after formatting the value.
+   * Counts how many numeric digits were before the cursor and positions it at the same count in the masked value.
+   */
+  restoreCursorPosition(inputElement, oldValue, oldCursorPos) {
+    const beforeCursor = oldValue.substring(0, oldCursorPos);
+    const numericBeforeCursor = beforeCursor.replace(/\D/g, '').length;
+    
+    let numbersFound = 0;
+    let newCursorPos = 0;
+    
+    for (let i = 0; i < this.maskedValue.length; i++) {
+      if (this.isNumeric(this.maskedValue[i])) {
+        if (numbersFound === numericBeforeCursor) {
+          newCursorPos = i;
+          break;
+        }
+        numbersFound++;
       }
+      newCursorPos = i + 1;
     }
-    this.updateValue();
+    
+    inputElement.setSelectionRange(newCursorPos, newCursorPos);
+  }
+
+  handleKeyDown(e) {
+    const inputElement = this.el;
+    if (e.target !== inputElement) return;
+    
+    const key = e.key;
+    
+    if (this.isNumeric(key)) return;
+    
+    const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Tab', 'Enter'];
+    if (allowedKeys.includes(key)) return;
+    
+    if (e.ctrlKey || e.metaKey) return;
+    
+    e.preventDefault();
   }
 
   isNumeric(char) {

package/components/input/src/MaskPattern.js

@@ -0,0 +1,194 @@
+/**
+ * Generic mask pattern that supports letters (A/a), numbers (0), and literal characters.
+ * Pattern definition:
+ *   'A' = any letter (a-z, A-Z) - will be transformed to UPPERCASE
+ *   'a' = any letter (a-z, A-Z) - will be transformed to lowercase
+ *   '0' = any digit (0-9)
+ *   other chars = fixed literal characters in the mask
+ *
+ * Examples:
+ *   'aa00 0000 0000 0000 0000' = IBAN format (2 lowercase letters, check digit, then numbers with spaces)
+ *   '(000) 000-0000' = US phone format
+ *   'AA-00-AA' = Format with uppercase letters and digits
+ */
+export class MaskPattern {
+  constructor(pattern, language = 'en') {
+    this.pattern = pattern;
+    this.language = language;
+    this.parsePattern();
+  }
+
+  parsePattern() {
+    this.patternMap = [];
+    
+    for (let i = 0; i < this.pattern.length; i++) {
+      const char = this.pattern[i];
+      if (char === 'A') {
+        this.patternMap.push({ type: 'letterUpper', index: i });
+      } else if (char === 'a') {
+        this.patternMap.push({ type: 'letterLower', index: i });
+      } else if (char === '0') {
+        this.patternMap.push({ type: 'digit', index: i });
+      } else {
+        this.patternMap.push({ type: 'literal', char, index: i });
+      }
+    }
+  }
+
+  setPattern(newPattern) {
+    this.pattern = newPattern;
+    this.parsePattern();
+  }
+
+  setLanguage(language) {
+    this.language = language;
+  }
+
+  getTotalCharactersExpected() {
+    return this.patternMap.filter(p => p.type !== 'literal').length;
+  }
+
+  maskIt(value) {
+    let valueIndex = 0;
+    let masked = '';
+
+    for (let i = 0; i < this.patternMap.length; i++) {
+      const patternInfo = this.patternMap[i];
+
+      if (patternInfo.type === 'literal') {
+        masked += patternInfo.char;
+      } else {
+        if (valueIndex < value.length) {
+          masked += value[valueIndex];
+          valueIndex++;
+        } else {
+          break;
+        }
+      }
+    }
+
+    return masked;
+  }
+
+  /**
+   * Validates if the given value matches the pattern requirements
+   * Only validates positions that have been filled
+   * Note: Validation only checks if a character is a letter or digit, 
+   * actual case transformation is done by transformValue()
+   */
+  validate(value) {
+    let valueIndex = 0;
+
+    for (let i = 0; i < this.patternMap.length && valueIndex < value.length; i++) {
+      const patternInfo = this.patternMap[i];
+
+      if (patternInfo.type === 'letterUpper' || patternInfo.type === 'letterLower') {
+        const char = value[valueIndex];
+        if (!/[a-zA-Z]/.test(char)) {
+          return {
+            valid: false,
+            error: this.getErrorMessage('invalidLetter', valueIndex + 1, char),
+          };
+        }
+        valueIndex++;
+      } else if (patternInfo.type === 'digit') {
+        const char = value[valueIndex];
+        if (!/[0-9]/.test(char)) {
+          return {
+            valid: false,
+            error: this.getErrorMessage('invalidDigit', valueIndex + 1, char),
+          };
+        }
+        valueIndex++;
+      }
+    }
+
+    return { valid: true, error: null };
+  }
+
+  isComplete(value) {
+    return value.length === this.getTotalCharactersExpected();
+  }
+
+  getFormatDescription() {
+    const lettersUpper = this.patternMap.filter(p => p.type === 'letterUpper').length;
+    const lettersLower = this.patternMap.filter(p => p.type === 'letterLower').length;
+    const digits = this.patternMap.filter(p => p.type === 'digit').length;
+    
+    const parts = [];
+    if (lettersUpper > 0) parts.push(`${lettersUpper} uppercase letter${lettersUpper !== 1 ? 's' : ''}`);
+    if (lettersLower > 0) parts.push(`${lettersLower} lowercase letter${lettersLower !== 1 ? 's' : ''}`);
+    if (digits > 0) parts.push(`${digits} digit${digits !== 1 ? 's' : ''}`);
+    
+    return parts.join(' + ');
+  }
+
+  getCleanValue(maskedValue) {
+    return maskedValue.replace(/[^a-zA-Z0-9]/g, '');
+  }
+
+  /**
+   * Transforms a clean value according to the pattern's case requirements
+   * 'A' positions will be uppercase, 'a' positions will be lowercase
+   * Returns only the transformed value (letters and digits), without literals
+   * @param {string} cleanValue - The clean value (letters and digits only)
+   * @returns {string} The transformed value with case applied (no literals)
+   */
+  transformValue(cleanValue) {
+    let result = '';
+    let valueIndex = 0;
+
+    for (let i = 0; i < this.patternMap.length; i++) {
+      const patternInfo = this.patternMap[i];
+
+      if (patternInfo.type === 'letterUpper') {
+        if (valueIndex < cleanValue.length) {
+          result += cleanValue[valueIndex].toUpperCase();
+          valueIndex++;
+        }
+      } else if (patternInfo.type === 'letterLower') {
+        if (valueIndex < cleanValue.length) {
+          result += cleanValue[valueIndex].toLowerCase();
+          valueIndex++;
+        }
+      } else if (patternInfo.type === 'digit') {
+        if (valueIndex < cleanValue.length) {
+          result += cleanValue[valueIndex];
+          valueIndex++;
+        }
+      }
+      // Note: We skip literals here, they will be added by maskIt()
+    }
+
+    return result;
+  }
+
+  getErrorMessage(type, position, char) {
+    const messages = {
+      en: {
+        invalidLetter: `Position ${position}: expected a letter but got "${char}"`,
+        invalidDigit: `Position ${position}: expected a digit but got "${char}"`,
+      },
+      es: {
+        invalidLetter: `Posición ${position}: se esperaba una letra pero recibió "${char}"`,
+        invalidDigit: `Posición ${position}: se esperaba un dígito pero recibió "${char}"`,
+      },
+      fr: {
+        invalidLetter: `Position ${position} : lettre attendue mais reçu "${char}"`,
+        invalidDigit: `Position ${position} : chiffre attendu mais reçu "${char}"`,
+      },
+      de: {
+        invalidLetter: `Position ${position}: Buchstabe erwartet, aber "${char}" erhalten`,
+        invalidDigit: `Position ${position}: Ziffer erwartet, aber "${char}" erhalten`,
+      },
+      cat: {
+        invalidLetter: `Posició ${position}: s'esperava una lletra però va rebre "${char}"`,
+        invalidDigit: `Posició ${position}: s'esperava un dígit però va rebre "${char}"`,
+      },
+    };
+
+    const lang = messages[this.language] || messages['en'];
+    return lang[type] || '';
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.7.3",
+  "version": "3.8.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "281d2b7e180aab43f03511f4bd34798684081ba0"
+  "gitHead": "dd0e035ddb5e6e051ce36dbd2a365fec53371cef"
 }