@dile/ui 3.8.2 → 3.8.3

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

@@ -223,7 +223,7 @@ describe('dile-input-mask', () => {
   });
 
   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 el = await renderInputMask('<dile-input-mask name="iban" mask="AA-XXXX-0000" lazySeparators></dile-input-mask>');
     const input = el.shadowRoot.querySelector('input');
 
     // Type 'ES' - should show 'ES' without trailing separator
@@ -256,5 +256,59 @@ describe('dile-input-mask', () => {
     await el.updateComplete;
     expect(el.maskedValue).toBe('ES-WSWQ-0000');
   });
+
+  it('uses normal separators by default (lazySeparators=false)', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-XXXX-0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // Type 'ES' - should show 'ES-' (separator added immediately)
+    input.value = 'ES';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES-');
+
+    // Type 'ESWSWQ0000' - separators already included
+    input.value = 'ESWSWQ0000';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES-WSWQ-0000');
+  });
+
+  it('supports lazySeparators property', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-XXXX-0000" lazySeparators></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // Type 'ES' - should show 'ES' without separator (lazy behavior)
+    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');
+  });
+
+  it('can toggle lazySeparators property dynamically', async () => {
+    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-XXXX-0000"></dile-input-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    // Initially with normal separators
+    input.value = 'ES';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES-');
+
+    // Toggle to lazy separators
+    el.lazySeparators = true;
+    await el.updateComplete;
+    input.value = 'ES';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.maskedValue).toBe('ES');
+  });
 });
 
+

package/components/input/src/DileInputMask.js

@@ -9,6 +9,7 @@ export class DileInputMask extends DileInput {
       mask: { type: String },
       maskedValue: { type: String },
       language: { type: String },
+      lazySeparators: { type: Boolean },
     };
   }
 
@@ -18,6 +19,7 @@ export class DileInputMask extends DileInput {
     this.maskedValue = '';
     this.content = '';
     this.language = 'en';
+    this.lazySeparators = false;
     this._keyDownHandler = this.handleKeyDown.bind(this);
     this._blurHandler = this.handleBlur.bind(this);
   }
@@ -32,7 +34,7 @@ export class DileInputMask extends DileInput {
   }
 
   createMaskController(mask) {
-    this.maskController = new MaskPattern(mask, this.language);
+    this.maskController = new MaskPattern(mask, this.language, this.lazySeparators);
     this.maxChars = this.maskController.getTotalCharactersExpected();
   }
 
@@ -46,6 +48,10 @@ export class DileInputMask extends DileInput {
     if (changedProperties.has('language')) {
       this.maskController.setLanguage(this.language);
     }
+    if (changedProperties.has('lazySeparators')) {
+      this.maskController.setLazySeparators(this.lazySeparators);
+      this.updateMaskedValue();
+    }
     if (changedProperties.has('value')) {
       const transformedValue = this.maskController.transformValue(this.value.slice(0, this.maxChars));
       this.content = transformedValue;

package/components/input/src/MaskPattern.js

@@ -14,9 +14,10 @@
  *   '(000) 000-0000' = US phone format
  */
 export class MaskPattern {
-  constructor(pattern, language = 'en') {
+  constructor(pattern, language = 'en', lazySeparators = false) {
     this.pattern = pattern;
     this.language = language;
+    this.lazySeparators = lazySeparators;
     this.parsePattern();
   }
 
@@ -50,6 +51,10 @@ export class MaskPattern {
     this.language = language;
   }
 
+  setLazySeparators(lazy) {
+    this.lazySeparators = lazy;
+  }
+
   getTotalCharactersExpected() {
     return this.patternMap.filter(p => p.type !== 'literal').length;
   }
@@ -62,8 +67,13 @@ export class MaskPattern {
       const patternInfo = this.patternMap[i];
       
       if (patternInfo.type === 'literal') {
-        // Lazy literals: only add if there are more input characters to fill slots after this literal
-        if (slotIndex < value.length) {
+        if (this.lazySeparators) {
+          // Lazy literals: only add if there are more input characters to fill slots after this literal
+          if (slotIndex < value.length) {
+            masked += patternInfo.char;
+          }
+        } else {
+          // Normal behavior: always add the literal
           masked += patternInfo.char;
         }
       } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.8.2",
+  "version": "3.8.3",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ceeab58670ba4c09593d0760a357ecac36214a44"
+  "gitHead": "807eac93fd36691a8fb656b5e0f2549ed9c887cb"
 }