@dile/ui 3.8.0 → 3.8.2

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

@@ -183,4 +183,78 @@ describe('dile-input-mask', () => {
     expect(el.maskedValue).toBe('AB-cd-12');
     expect(el.value).toBe('ABcd12');
   });
+
+  it('supports X pattern for alphanumeric uppercase', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="XX-0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // X accepts both letters and digits
+    const chars = ['a', 'B', '1', '2', '3', '4'];
+    chars.forEach((char) => {
+      input.value += char;
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    });
+
+    await el.updateComplete;
+
+    // Letters should be uppercase, digits unchanged
+    expect(el.maskedValue).toBe('AB-1234');
+    expect(el.value).toBe('AB1234');
+  });
+
+  it('supports x pattern for alphanumeric lowercase', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="xx-0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // x accepts both letters and digits
+    const chars = ['A', 'b', '1', '2', '3', '4'];
+    chars.forEach((char) => {
+      input.value += char;
+      const inputEvent = new Event('input', { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    });
+
+    await el.updateComplete;
+
+    // Letters should be lowercase, digits unchanged
+    expect(el.maskedValue).toBe('ab-1234');
+    expect(el.value).toBe('ab1234');
+  });
+
+  it('applies lazy separators only when next block is filled', async () => {
+    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA-XXXX-0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // Type 'ES' - should show 'ES' without trailing separator
+    input.value = 'ES';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES');
+
+    // Type 'ESW' - should show 'ES-W' (separator added when next block starts)
+    input.value = 'ESW';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES-W');
+
+    // Type 'ESWSWQ' - should show 'ES-WSWQ'
+    input.value = 'ESWSWQ';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES-WSWQ');
+
+    // Type 'ESWSWQ0' - should show 'ES-WSWQ-0' (separator added when digits block starts)
+    input.value = 'ESWSWQ0';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES-WSWQ-0');
+
+    // Type complete 'ESWSWQ0000' - should show 'ES-WSWQ-0000'
+    input.value = 'ESWSWQ0000';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES-WSWQ-0000');
+  });
 });
+

package/components/input/src/MaskPattern.js

@@ -1,15 +1,17 @@
 /**
- * Generic mask pattern that supports letters (A/a), numbers (0), and literal characters.
+ * Generic mask pattern that supports letters (A/a/X/x), 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
+ *   'A' = uppercase letter only - will be transformed to UPPERCASE
+ *   'a' = lowercase letter only - will be transformed to lowercase
+ *   'X' = letter or digit - will be transformed to UPPERCASE if letter
+ *   'x' = letter or digit - will be transformed to lowercase if letter
+ *   '0' = digit only (0-9)
+ *   other chars = fixed literal characters in the mask (added only when next block is filled)
  *
  * Examples:
- *   'aa00 0000 0000 0000 0000' = IBAN format (2 lowercase letters, check digit, then numbers with spaces)
+ *   'aa00 0000 0000 0000 0000' = IBAN format (lowercase letters + digits with lazy spaces)
+ *   'AA-XXXX-0000-0000' = Mixed format with lazy separators
  *   '(000) 000-0000' = US phone format
- *   'AA-00-AA' = Format with uppercase letters and digits
  */
 export class MaskPattern {
   constructor(pattern, language = 'en') {
@@ -27,6 +29,10 @@ export class MaskPattern {
         this.patternMap.push({ type: 'letterUpper', index: i });
       } else if (char === 'a') {
         this.patternMap.push({ type: 'letterLower', index: i });
+      } else if (char === 'X') {
+        this.patternMap.push({ type: 'alphanumUpper', index: i });
+      } else if (char === 'x') {
+        this.patternMap.push({ type: 'alphanumLower', index: i });
       } else if (char === '0') {
         this.patternMap.push({ type: 'digit', index: i });
       } else {
@@ -49,24 +55,29 @@ export class MaskPattern {
   }
 
   maskIt(value) {
-    let valueIndex = 0;
     let masked = '';
-
+    let slotIndex = 0; // Position in input slots (non-literals only)
+    
     for (let i = 0; i < this.patternMap.length; i++) {
       const patternInfo = this.patternMap[i];
-
+      
       if (patternInfo.type === 'literal') {
-        masked += patternInfo.char;
+        // Lazy literals: only add if there are more input characters to fill slots after this literal
+        if (slotIndex < value.length) {
+          masked += patternInfo.char;
+        }
       } else {
-        if (valueIndex < value.length) {
-          masked += value[valueIndex];
-          valueIndex++;
+        // This is an input slot position
+        if (slotIndex < value.length) {
+          masked += value[slotIndex];
+          slotIndex++;
         } else {
+          // No more input characters, stop
           break;
         }
       }
     }
-
+    
     return masked;
   }
 
@@ -91,6 +102,15 @@ export class MaskPattern {
           };
         }
         valueIndex++;
+      } else if (patternInfo.type === 'alphanumUpper' || patternInfo.type === 'alphanumLower') {
+        const char = value[valueIndex];
+        if (!/[a-zA-Z0-9]/.test(char)) {
+          return {
+            valid: false,
+            error: this.getErrorMessage('invalidAlphanumeric', valueIndex + 1, char),
+          };
+        }
+        valueIndex++;
       } else if (patternInfo.type === 'digit') {
         const char = value[valueIndex];
         if (!/[0-9]/.test(char)) {
@@ -113,11 +133,15 @@ export class MaskPattern {
   getFormatDescription() {
     const lettersUpper = this.patternMap.filter(p => p.type === 'letterUpper').length;
     const lettersLower = this.patternMap.filter(p => p.type === 'letterLower').length;
+    const alphanumUpper = this.patternMap.filter(p => p.type === 'alphanumUpper').length;
+    const alphanumLower = this.patternMap.filter(p => p.type === 'alphanumLower').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 (alphanumUpper > 0) parts.push(`${alphanumUpper} alphanumeric (uppercase if letter)${alphanumUpper !== 1 ? 's' : ''}`);
+    if (alphanumLower > 0) parts.push(`${alphanumLower} alphanumeric (lowercase if letter)${alphanumLower !== 1 ? 's' : ''}`);
     if (digits > 0) parts.push(`${digits} digit${digits !== 1 ? 's' : ''}`);
     
     return parts.join(' + ');
@@ -130,6 +154,8 @@ export class MaskPattern {
   /**
    * Transforms a clean value according to the pattern's case requirements
    * 'A' positions will be uppercase, 'a' positions will be lowercase
+   * 'X' positions: if letter, uppercase; if digit, unchanged
+   * 'x' positions: if letter, lowercase; if digit, unchanged
    * 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)
@@ -151,6 +177,18 @@ export class MaskPattern {
           result += cleanValue[valueIndex].toLowerCase();
           valueIndex++;
         }
+      } else if (patternInfo.type === 'alphanumUpper') {
+        if (valueIndex < cleanValue.length) {
+          const char = cleanValue[valueIndex];
+          result += /[a-zA-Z]/.test(char) ? char.toUpperCase() : char;
+          valueIndex++;
+        }
+      } else if (patternInfo.type === 'alphanumLower') {
+        if (valueIndex < cleanValue.length) {
+          const char = cleanValue[valueIndex];
+          result += /[a-zA-Z]/.test(char) ? char.toLowerCase() : char;
+          valueIndex++;
+        }
       } else if (patternInfo.type === 'digit') {
         if (valueIndex < cleanValue.length) {
           result += cleanValue[valueIndex];
@@ -168,22 +206,27 @@ export class MaskPattern {
       en: {
         invalidLetter: `Position ${position}: expected a letter but got "${char}"`,
         invalidDigit: `Position ${position}: expected a digit but got "${char}"`,
+        invalidAlphanumeric: `Position ${position}: expected a letter or 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}"`,
+        invalidAlphanumeric: `Posición ${position}: se esperaba una letra o dígito pero recibió "${char}"`,
       },
       fr: {
         invalidLetter: `Position ${position} : lettre attendue mais reçu "${char}"`,
         invalidDigit: `Position ${position} : chiffre attendu mais reçu "${char}"`,
+        invalidAlphanumeric: `Position ${position} : lettre ou chiffre attendu mais reçu "${char}"`,
       },
       de: {
         invalidLetter: `Position ${position}: Buchstabe erwartet, aber "${char}" erhalten`,
         invalidDigit: `Position ${position}: Ziffer erwartet, aber "${char}" erhalten`,
+        invalidAlphanumeric: `Position ${position}: Buchstabe oder 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}"`,
+        invalidAlphanumeric: `Posició ${position}: s'esperava una lletra o dígit però va rebre "${char}"`,
       },
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -21,12 +21,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/iconlib": "^1.8.1",
+    "@dile/iconlib": "^2.0.0",
     "@dile/icons": "^2.5.1",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dd0e035ddb5e6e051ce36dbd2a365fec53371cef"
+  "gitHead": "ceeab58670ba4c09593d0760a357ecac36214a44"
 }