ngx-mask 19.0.2 → 19.0.4

package/README.md

@@ -189,6 +189,14 @@ const maskConfigFunction: () => Partial<NgxMaskConfig> = () => {
 
 Then, just define masks in inputs.
 
+## Actively supported versions
+
+ngx-mask follows the official Angular support policy, supporting the Active and LTS (Long-Term Support) versions of Angular. As of the latest release, Angular v17 and newer are supported.
+
+Projects using Angular versions outside the supported range (e.g., older than v17) should use the last compatible version of ngx-mask. However, these versions will no longer receive updates, bug fixes, or new features.
+
+For detailed information about Angular's versioning and support schedule, visit the official [Angular releases page](https://angular.dev/reference/releases#actively-supported-versions).
+
 ## Usage
 
 Text [documentation](https://github.com/JsDaddy/ngx-mask/blob/develop/USAGE.md)

package/fesm2022/ngx-mask.mjs

@@ -58,9 +58,10 @@ const initialConfig = {
     decimalMarker: ['.', ','],
     clearIfNotMatch: false,
     showMaskTyped: false,
+    instantPrefix: false,
     placeHolderCharacter: '_',
     dropSpecialCharacters: true,
-    hiddenInput: null,
+    hiddenInput: false,
     shownMaskExpression: '',
     separatorLimit: '',
     allowNegativeNumbers: false,
@@ -158,6 +159,7 @@ class NgxMaskApplierService {
     inputTransformFn = this._config.inputTransformFn;
     outputTransformFn = this._config.outputTransformFn;
     keepCharacterPositions = this._config.keepCharacterPositions;
+    instantPrefix = this._config.instantPrefix;
     _shift = new Set();
     plusOnePosition = false;
     maskExpression = '';
@@ -455,7 +457,7 @@ class NgxMaskApplierService {
                                 ? processedPosition + 1
                                 : processedPosition;
                             cursor += 1;
-                            this._shiftStep(maskExpression, cursor, inputArray.length);
+                            this._shiftStep(cursor);
                             i--;
                             if (this.leadZeroDateTime) {
                                 result += '0';
@@ -491,7 +493,7 @@ class NgxMaskApplierService {
                                 ? processedPosition + 1
                                 : processedPosition;
                             cursor += 1;
-                            this._shiftStep(maskExpression, cursor, inputArray.length);
+                            this._shiftStep(cursor);
                             i--;
                             if (this.leadZeroDateTime) {
                                 result += '0';
@@ -530,7 +532,7 @@ class NgxMaskApplierService {
                                 ? processedPosition + 1
                                 : processedPosition;
                             cursor += 1;
-                            this._shiftStep(maskExpression, cursor, inputArray.length);
+                            this._shiftStep(cursor);
                             i--;
                             if (this.leadZeroDateTime) {
                                 result += '0';
@@ -580,7 +582,7 @@ class NgxMaskApplierService {
                                 ? processedPosition + 1
                                 : processedPosition;
                             cursor += 1;
-                            this._shiftStep(maskExpression, cursor, inputArray.length);
+                            this._shiftStep(cursor);
                             i--;
                             if (this.leadZeroDateTime) {
                                 result += '0';
@@ -599,12 +601,12 @@ class NgxMaskApplierService {
                 else if (this.specialCharacters.indexOf(maskExpression[cursor] ?? MaskExpression.EMPTY_STRING) !== -1) {
                     result += maskExpression[cursor];
                     cursor++;
-                    this._shiftStep(maskExpression, cursor, inputArray.length);
+                    this._shiftStep(cursor);
                     i--;
                 }
                 else if (maskExpression[cursor] === MaskExpression.NUMBER_NINE &&
                     this.showMaskTyped) {
-                    this._shiftStep(maskExpression, cursor, inputArray.length);
+                    this._shiftStep(cursor);
                 }
                 else if (this.patterns[maskExpression[cursor] ?? MaskExpression.EMPTY_STRING] &&
                     this.patterns[maskExpression[cursor] ?? MaskExpression.EMPTY_STRING]?.optional) {
@@ -646,7 +648,8 @@ class NgxMaskApplierService {
                 }
             }
         }
-        if (result.length + 1 === maskExpression.length &&
+        if (result[processedPosition - 1] &&
+            result.length + 1 === maskExpression.length &&
             this.specialCharacters.indexOf(maskExpression[maskExpression.length - 1] ?? MaskExpression.EMPTY_STRING) !== -1) {
             result += maskExpression[maskExpression.length - 1];
         }
@@ -673,7 +676,7 @@ class NgxMaskApplierService {
         }
         let res = `${this.prefix}${onlySpecial ? MaskExpression.EMPTY_STRING : result}${this.showMaskTyped ? '' : this.suffix}`;
         if (result.length === 0) {
-            res = !this.dropSpecialCharacters ? `${this.prefix}${result}` : `${result}`;
+            res = this.instantPrefix ? `${this.prefix}${result}` : `${result}`;
         }
         const isSpecialCharacterMaskFirstSymbol = processedValue.length === 1 &&
             this.specialCharacters.includes(maskExpression[0]) &&
@@ -812,11 +815,8 @@ class NgxMaskApplierService {
         }
         return char;
     }
-    _shiftStep(maskExpression, cursor, inputLength) {
-        const shiftStep = /[*?]/g.test(maskExpression.slice(0, cursor))
-            ? inputLength
-            : cursor;
-        this._shift.add(shiftStep + this.prefix.length || 0);
+    _shiftStep(cursor) {
+        this._shift.add(cursor + this.prefix.length || 0);
     }
     _compareOrIncludes(value, comparedValue, excludedValue) {
         return Array.isArray(comparedValue)
@@ -913,36 +913,67 @@ class NgxMaskService extends NgxMaskApplierService {
             : MaskExpression.EMPTY_STRING;
         let newInputValue = '';
         let newPosition = position;
-        if (this.hiddenInput !== null && !this.writingValue) {
+        if ((this.hiddenInput ||
+            (inputValue && inputValue.indexOf(MaskExpression.SYMBOL_STAR) >= 0)) &&
+            !this.writingValue) {
             let actualResult = inputValue && inputValue.length === 1
                 ? inputValue.split(MaskExpression.EMPTY_STRING)
                 : this.actualValue.split(MaskExpression.EMPTY_STRING);
+            if (backspaced) {
+                actualResult = actualResult
+                    .slice(0, position)
+                    .concat(actualResult.slice(position + 1));
+            }
+            if (this.showMaskTyped) {
+                inputValue = this.removeMask(inputValue);
+                actualResult = this.removeMask(actualResult.join('')).split(MaskExpression.EMPTY_STRING);
+            }
             if (typeof this.selStart === 'object' && typeof this.selEnd === 'object') {
                 this.selStart = Number(this.selStart);
                 this.selEnd = Number(this.selEnd);
             }
             else {
-                inputValue !== MaskExpression.EMPTY_STRING && actualResult.length
-                    ? typeof this.selStart === 'number' && typeof this.selEnd === 'number'
-                        ? inputValue.length > actualResult.length
-                            ? actualResult.splice(this.selStart, 0, getSymbol)
-                            : inputValue.length < actualResult.length
-                                ? actualResult.length - inputValue.length === 1
-                                    ? backspaced
-                                        ? actualResult.splice(this.selStart - 1, 1)
-                                        : actualResult.splice(inputValue.length - 1, 1)
-                                    : actualResult.splice(this.selStart, this.selEnd - this.selStart)
-                                : null
-                        : null
-                    : (actualResult = []);
+                if (inputValue !== MaskExpression.EMPTY_STRING && actualResult.length) {
+                    if (typeof this.selStart === 'number' && typeof this.selEnd === 'number') {
+                        if (inputValue.length > actualResult.length) {
+                            actualResult.splice(this.selStart, 0, getSymbol);
+                        }
+                        else if (inputValue.length < actualResult.length) {
+                            if (actualResult.length - inputValue.length === 1) {
+                                if (backspaced) {
+                                    actualResult.splice(this.selStart - 1, 1);
+                                }
+                                else {
+                                    actualResult.splice(inputValue.length - 1, 1);
+                                }
+                            }
+                            else {
+                                actualResult.splice(this.selStart, this.selEnd - this.selStart);
+                            }
+                        }
+                    }
+                }
+                else {
+                    actualResult = [];
+                }
             }
             if (this.showMaskTyped && !this.hiddenInput) {
                 newInputValue = this.removeMask(inputValue);
             }
-            newInputValue =
-                this.actualValue.length && actualResult.length <= inputValue.length
-                    ? this.shiftTypedSymbols(actualResult.join(MaskExpression.EMPTY_STRING))
-                    : inputValue;
+            if (this.actualValue.length) {
+                if (actualResult.length < inputValue.length) {
+                    newInputValue = this.shiftTypedSymbols(actualResult.join(MaskExpression.EMPTY_STRING));
+                }
+                else if (actualResult.length === inputValue.length) {
+                    newInputValue = actualResult.join(MaskExpression.EMPTY_STRING);
+                }
+                else {
+                    newInputValue = inputValue;
+                }
+            }
+            else {
+                newInputValue = inputValue;
+            }
         }
         if (justPasted && (this.hiddenInput || !this.hiddenInput)) {
             newInputValue = inputValue;
@@ -965,7 +996,7 @@ class NgxMaskService extends NgxMaskApplierService {
         if (this.showMaskTyped &&
             this.placeHolderCharacter.length === 1 &&
             !this.leadZeroDateTime) {
-            newInputValue = this.removeMask(inputValue);
+            newInputValue = this.removeMask(newInputValue);
         }
         if (this.maskChanged) {
             newInputValue = inputValue;
@@ -1013,9 +1044,6 @@ class NgxMaskService extends NgxMaskApplierService {
             : '';
         if (!this.showMaskTyped || (this.showMaskTyped && this.hiddenInput)) {
             if (this.hiddenInput) {
-                if (backspaced) {
-                    return this.hideInput(result, this.maskExpression);
-                }
                 return `${this.hideInput(result, this.maskExpression)}${this.maskIsShown.slice(result.length)}`;
             }
             return result;
@@ -1258,7 +1286,7 @@ class NgxMaskService extends NgxMaskApplierService {
     }
     formControlResult(inputValue) {
         if (this.writingValue && !inputValue) {
-            this.onChange(this.outputTransformFn(''));
+            this.onChange(this.outputTransformFn(null));
             return;
         }
         if (this.writingValue || (!this.triggerOnMaskChange && this.maskChanged)) {
@@ -1489,6 +1517,7 @@ class NgxMaskDirective {
     inputTransformFn = input(null);
     outputTransformFn = input(null);
     keepCharacterPositions = input(null);
+    instantPrefix = input(null);
     maskFilled = output();
     _maskValue = signal('');
     _inputValue = signal('');
@@ -1504,7 +1533,7 @@ class NgxMaskDirective {
     onChange = (_) => { };
     onTouch = () => { };
     ngOnChanges(changes) {
-        const { mask, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, } = changes;
+        const { mask, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, instantPrefix, } = changes;
         if (mask) {
             if (mask.currentValue !== mask.previousValue && !mask.firstChange) {
                 this._maskService.maskChanged = true;
@@ -1541,6 +1570,9 @@ class NgxMaskDirective {
         if (apm && apm.currentValue) {
             this._maskService.apm = apm.currentValue;
         }
+        if (instantPrefix) {
+            this._maskService.instantPrefix = instantPrefix.currentValue;
+        }
         if (prefix) {
             this._maskService.prefix = prefix.currentValue;
         }
@@ -1558,6 +1590,9 @@ class NgxMaskDirective {
         }
         if (hiddenInput) {
             this._maskService.hiddenInput = hiddenInput.currentValue;
+            if (hiddenInput.previousValue === true && hiddenInput.currentValue === false) {
+                this._inputValue.set(this._maskService.actualValue);
+            }
         }
         if (showMaskTyped) {
             this._maskService.showMaskTyped = showMaskTyped.currentValue;
@@ -2143,7 +2178,7 @@ class NgxMaskDirective {
                 }
                 this._maskService.isNumberValue = true;
             }
-            if (typeof inputValue !== 'string') {
+            if (typeof inputValue !== 'string' || value === null || typeof value === 'undefined') {
                 inputValue = '';
             }
             this._inputValue.set(inputValue);
@@ -2258,11 +2293,12 @@ class NgxMaskDirective {
                 }
             }
             else {
+                const cleanMask = this._maskService.removeMask(mask);
                 const check = this._maskService
                     .removeMask(this._inputValue())
                     ?.split(MaskExpression.EMPTY_STRING)
                     .every((character, index) => {
-                    const indexMask = mask.charAt(index);
+                    const indexMask = cleanMask.charAt(index);
                     return this._maskService._checkSymbolMask(character, indexMask);
                 });
                 if (check || this._justPasted()) {
@@ -2286,7 +2322,7 @@ class NgxMaskDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: NgxMaskDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, specialCharacters: { classPropertyName: "specialCharacters", publicName: "specialCharacters", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, thousandSeparator: { classPropertyName: "thousandSeparator", publicName: "thousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, decimalMarker: { classPropertyName: "decimalMarker", publicName: "decimalMarker", isSignal: true, isRequired: false, transformFunction: null }, dropSpecialCharacters: { classPropertyName: "dropSpecialCharacters", publicName: "dropSpecialCharacters", isSignal: true, isRequired: false, transformFunction: null }, hiddenInput: { classPropertyName: "hiddenInput", publicName: "hiddenInput", isSignal: true, isRequired: false, transformFunction: null }, showMaskTyped: { classPropertyName: "showMaskTyped", publicName: "showMaskTyped", isSignal: true, isRequired: false, transformFunction: null }, placeHolderCharacter: { classPropertyName: "placeHolderCharacter", publicName: "placeHolderCharacter", isSignal: true, isRequired: false, transformFunction: null }, shownMaskExpression: { classPropertyName: "shownMaskExpression", publicName: "shownMaskExpression", isSignal: true, isRequired: false, transformFunction: null }, clearIfNotMatch: { classPropertyName: "clearIfNotMatch", publicName: "clearIfNotMatch", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, separatorLimit: { classPropertyName: "separatorLimit", publicName: "separatorLimit", isSignal: true, isRequired: false, transformFunction: null }, allowNegativeNumbers: { classPropertyName: "allowNegativeNumbers", publicName: "allowNegativeNumbers", isSignal: true, isRequired: false, transformFunction: null }, leadZeroDateTime: { classPropertyName: "leadZeroDateTime", publicName: "leadZeroDateTime", isSignal: true, isRequired: false, transformFunction: null }, leadZero: { classPropertyName: "leadZero", publicName: "leadZero", isSignal: true, isRequired: false, transformFunction: null }, triggerOnMaskChange: { classPropertyName: "triggerOnMaskChange", publicName: "triggerOnMaskChange", isSignal: true, isRequired: false, transformFunction: null }, apm: { classPropertyName: "apm", publicName: "apm", isSignal: true, isRequired: false, transformFunction: null }, inputTransformFn: { classPropertyName: "inputTransformFn", publicName: "inputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, outputTransformFn: { classPropertyName: "outputTransformFn", publicName: "outputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, keepCharacterPositions: { classPropertyName: "keepCharacterPositions", publicName: "keepCharacterPositions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: NgxMaskDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, specialCharacters: { classPropertyName: "specialCharacters", publicName: "specialCharacters", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, thousandSeparator: { classPropertyName: "thousandSeparator", publicName: "thousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, decimalMarker: { classPropertyName: "decimalMarker", publicName: "decimalMarker", isSignal: true, isRequired: false, transformFunction: null }, dropSpecialCharacters: { classPropertyName: "dropSpecialCharacters", publicName: "dropSpecialCharacters", isSignal: true, isRequired: false, transformFunction: null }, hiddenInput: { classPropertyName: "hiddenInput", publicName: "hiddenInput", isSignal: true, isRequired: false, transformFunction: null }, showMaskTyped: { classPropertyName: "showMaskTyped", publicName: "showMaskTyped", isSignal: true, isRequired: false, transformFunction: null }, placeHolderCharacter: { classPropertyName: "placeHolderCharacter", publicName: "placeHolderCharacter", isSignal: true, isRequired: false, transformFunction: null }, shownMaskExpression: { classPropertyName: "shownMaskExpression", publicName: "shownMaskExpression", isSignal: true, isRequired: false, transformFunction: null }, clearIfNotMatch: { classPropertyName: "clearIfNotMatch", publicName: "clearIfNotMatch", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, separatorLimit: { classPropertyName: "separatorLimit", publicName: "separatorLimit", isSignal: true, isRequired: false, transformFunction: null }, allowNegativeNumbers: { classPropertyName: "allowNegativeNumbers", publicName: "allowNegativeNumbers", isSignal: true, isRequired: false, transformFunction: null }, leadZeroDateTime: { classPropertyName: "leadZeroDateTime", publicName: "leadZeroDateTime", isSignal: true, isRequired: false, transformFunction: null }, leadZero: { classPropertyName: "leadZero", publicName: "leadZero", isSignal: true, isRequired: false, transformFunction: null }, triggerOnMaskChange: { classPropertyName: "triggerOnMaskChange", publicName: "triggerOnMaskChange", isSignal: true, isRequired: false, transformFunction: null }, apm: { classPropertyName: "apm", publicName: "apm", isSignal: true, isRequired: false, transformFunction: null }, inputTransformFn: { classPropertyName: "inputTransformFn", publicName: "inputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, outputTransformFn: { classPropertyName: "outputTransformFn", publicName: "outputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, keepCharacterPositions: { classPropertyName: "keepCharacterPositions", publicName: "keepCharacterPositions", isSignal: true, isRequired: false, transformFunction: null }, instantPrefix: { classPropertyName: "instantPrefix", publicName: "instantPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NgxMaskDirective,