@telcomdev/ui 0.1.19 → 0.1.21

package/fesm2022/telcomdev-ui.mjs

@@ -3562,6 +3562,7 @@ class TdInput {
     legacyMaxLength = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "legacyMaxLength" }] : /* istanbul ignore next */ []));
     receivedNullValue = false;
+    decimalMaskDigits = '';
     nativeInput;
     id = '';
     label = 'Campo';
@@ -3692,21 +3693,31 @@ class TdInput {
         return this.hasSupportingContent() ? `${this.inputId}-description` : null;
     }
     get resolvedType() {
+        if (this.isDecimalMask())
+            return 'text';
         return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
     }
     onChange = () => undefined;
     writeValue(value) {
         if (value === null || value === undefined) {
             this.receivedNullValue = true;
+            this.decimalMaskDigits = '';
             this.value.set(null);
         }
         else if (this.type === 'number' &&
             this.formBridge.usesSignalForms &&
             typeof value === 'number') {
+            this.decimalMaskDigits = this.isDecimalMask()
+                ? this.decimalDigitsFromProgrammaticValue(String(value))
+                : '';
             this.value.set(value);
         }
         else {
-            this.value.set(this.transformTextValue(String(value)));
+            const textValue = String(value);
+            if (this.isDecimalMask()) {
+                this.decimalMaskDigits = this.decimalDigitsFromProgrammaticValue(textValue);
+            }
+            this.value.set(this.transformTextValue(textValue));
         }
         this.cdr.markForCheck();
     }
@@ -3724,6 +3735,10 @@ class TdInput {
     }
     handleInput(event) {
         const inputElement = event.target;
+        if (this.isDecimalMask()) {
+            this.handleDecimalMaskInput(inputElement, event);
+            return;
+        }
         const transformedValue = this.transformTextValue(inputElement.value);
         if (inputElement.value !== transformedValue) {
             inputElement.value = transformedValue;
@@ -3739,13 +3754,14 @@ class TdInput {
         this.formBridge.markTouched(this.touched, this.touch);
     }
     clear() {
+        this.decimalMaskDigits = '';
         this.setValue(this.resolveEmptyValue());
     }
     parseInputValue(value, inputElement) {
         if (!value) {
             return this.resolveEmptyValue();
         }
-        if (this.type !== 'number' || !this.formBridge.usesSignalForms) {
+        if (this.isDecimalMask() || this.type !== 'number' || !this.formBridge.usesSignalForms) {
             return value;
         }
         const numericValue = inputElement.valueAsNumber;
@@ -3820,13 +3836,32 @@ class TdInput {
         return value;
     }
     maskDecimal(value) {
+        return this.formatDecimalMaskDigits(value.replace(/\D/g, ''));
+    }
+    handleDecimalMaskInput(inputElement, event) {
+        const inputEvent = event;
+        const inputType = inputEvent.inputType || '';
+        const dataDigits = (inputEvent.data ?? '').replace(/\D/g, '');
+        const maxDigits = this.maxDecimalMaskDigits();
+        if (inputType.startsWith('delete')) {
+            this.decimalMaskDigits = this.decimalMaskDigits.slice(0, -1);
+        }
+        else if (dataDigits) {
+            this.decimalMaskDigits = this.limitDigits(this.decimalMaskDigits + dataDigits, maxDigits);
+        }
+        else {
+            this.decimalMaskDigits = this.limitDigits(this.decimalDigitsFromEditedValue(inputElement.value), maxDigits);
+        }
+        const transformedValue = this.formatDecimalMaskDigits(this.decimalMaskDigits);
+        inputElement.value = transformedValue;
+        this.moveCaretToEnd(inputElement);
+        this.setValue(this.parseInputValue(transformedValue, inputElement));
+    }
+    formatDecimalMaskDigits(digitsValue) {
         const config = this.resolveDecimalMaskConfig();
         const scale = config.decimalDigits;
         const integerLimit = config.integerDigits;
-        const maxDigits = integerLimit && integerLimit > 0
-            ? integerLimit + scale
-            : null;
-        const digits = this.limitDigits(value.replace(/\D/g, ''), maxDigits);
+        const digits = this.limitDigits(digitsValue.replace(/\D/g, ''), this.maxDecimalMaskDigits());
         if (!digits)
             return '';
         if (scale === 0)
@@ -3837,6 +3872,29 @@ class TdInput {
         const decimalPart = padded.slice(splitIndex);
         return `${integerPart || '0'}.${decimalPart}`;
     }
+    maxDecimalMaskDigits() {
+        const config = this.resolveDecimalMaskConfig();
+        const scale = config.decimalDigits;
+        const integerLimit = config.integerDigits;
+        return integerLimit && integerLimit > 0 ? integerLimit + scale : null;
+    }
+    decimalDigitsFromEditedValue(value) {
+        return value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
+    }
+    decimalDigitsFromProgrammaticValue(value) {
+        return this.decimalDigitsFromEditedValue(value);
+    }
+    moveCaretToEnd(inputElement) {
+        queueMicrotask(() => {
+            const end = inputElement.value.length;
+            try {
+                inputElement.setSelectionRange(end, end);
+            }
+            catch {
+                // type="number" no soporta setSelectionRange en algunos navegadores.
+            }
+        });
+    }
     isDecimalMask() {
         return this.mask === 'decimal' || this.mask.startsWith('decimal(');
     }