ngx-mask 14.3.2 → 14.3.3

package/fesm2020/ngx-mask.mjs

@@ -116,6 +116,7 @@ class NgxMaskApplierService {
         this.outputTransformFn = this._config.outputTransformFn;
         this.keepCharacterPositions = this._config.keepCharacterPositions;
         this._shift = new Set();
+        this.plusOnePosition = false;
         this.maskExpression = '';
         this.actualValue = '';
         this.showKeepCharacterExp = '';
@@ -222,7 +223,7 @@ class NgxMaskApplierService {
         let backspaceShift = false;
         let shift = 1;
         let stepBack = false;
-        if (inputValue.slice(0, this.prefix.length) === this.prefix && !this.showMaskTyped) {
+        if (inputValue.slice(0, this.prefix.length) === this.prefix) {
             // eslint-disable-next-line no-param-reassign
             inputValue = inputValue.slice(this.prefix.length, inputValue.length);
         }
@@ -306,24 +307,91 @@ class NgxMaskApplierService {
                 // eslint-disable-next-line no-param-reassign
                 inputValue = this._stripToDecimal(inputValue);
             }
-            // eslint-disable-next-line no-param-reassign
-            inputValue =
-                inputValue[0] === '-' && this.allowNegativeNumbers
+            const precision = this.getPrecision(maskExpression);
+            const decimalMarker = Array.isArray(this.decimalMarker)
+                ? "." /* MaskExpression.DOT */
+                : this.decimalMarker;
+            if (precision === 0) {
+                // eslint-disable-next-line no-param-reassign
+                inputValue = this.allowNegativeNumbers
                     ? inputValue.length > 2 &&
-                        inputValue[1] === '0' &&
+                        inputValue[0] === "-" /* MaskExpression.MINUS */ &&
+                        inputValue[1] === "0" /* MaskExpression.NUMBER_ZERO */ &&
                         inputValue[2] !== this.thousandSeparator &&
-                        !this._compareOrIncludes(inputValue[2], this.decimalMarker, this.thousandSeparator) &&
-                        !backspaced
-                        ? inputValue.slice(0, inputValue.length - 1)
-                        : inputValue
+                        inputValue[2] !== "," /* MaskExpression.COMMA */ &&
+                        inputValue[2] !== "." /* MaskExpression.DOT */
+                        ? '-' + inputValue.slice(2, inputValue.length)
+                        : inputValue[0] === "0" /* MaskExpression.NUMBER_ZERO */ &&
+                            inputValue.length > 1 &&
+                            inputValue[1] !== this.thousandSeparator &&
+                            inputValue[1] !== "," /* MaskExpression.COMMA */ &&
+                            inputValue[1] !== "." /* MaskExpression.DOT */
+                            ? inputValue.slice(1, inputValue.length)
+                            : inputValue
                     : inputValue.length > 1 &&
-                        inputValue[0] === '0' &&
+                        inputValue[0] === "0" /* MaskExpression.NUMBER_ZERO */ &&
                         inputValue[1] !== this.thousandSeparator &&
-                        !this._compareOrIncludes(inputValue[1], this.decimalMarker, this.thousandSeparator) &&
-                        !backspaced
-                        ? inputValue.slice(0, inputValue.length - 1)
+                        inputValue[1] !== "," /* MaskExpression.COMMA */ &&
+                        inputValue[1] !== "." /* MaskExpression.DOT */
+                        ? inputValue.slice(1, inputValue.length)
                         : inputValue;
+            }
+            else {
+                // eslint-disable-next-line no-param-reassign
+                if (inputValue[0] === decimalMarker && inputValue.length > 1) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue =
+                        "0" /* MaskExpression.NUMBER_ZERO */ + inputValue.slice(0, inputValue.length + 1);
+                    this.plusOnePosition = true;
+                }
+                if (inputValue[0] === "0" /* MaskExpression.NUMBER_ZERO */ &&
+                    inputValue[1] !== decimalMarker &&
+                    inputValue[1] !== this.thousandSeparator) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue =
+                        inputValue.length > 1
+                            ? inputValue.slice(0, 1) +
+                                decimalMarker +
+                                inputValue.slice(1, inputValue.length + 1)
+                            : inputValue;
+                    this.plusOnePosition = true;
+                }
+                if (this.allowNegativeNumbers &&
+                    inputValue[0] === "-" /* MaskExpression.MINUS */ &&
+                    (inputValue[1] === decimalMarker ||
+                        inputValue[1] === "0" /* MaskExpression.NUMBER_ZERO */)) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue =
+                        inputValue[1] === decimalMarker && inputValue.length > 2
+                            ? inputValue.slice(0, 1) +
+                                "0" /* MaskExpression.NUMBER_ZERO */ +
+                                inputValue.slice(1, inputValue.length)
+                            : inputValue[1] === "0" /* MaskExpression.NUMBER_ZERO */ &&
+                                inputValue.length > 2 &&
+                                inputValue[2] !== decimalMarker
+                                ? inputValue.slice(0, 2) +
+                                    decimalMarker +
+                                    inputValue.slice(2, inputValue.length)
+                                : inputValue;
+                    this.plusOnePosition = true;
+                }
+            }
             if (backspaced) {
+                if (inputValue[0] === "0" /* MaskExpression.NUMBER_ZERO */ &&
+                    inputValue[1] === this.decimalMarker &&
+                    (inputValue[position] === "0" /* MaskExpression.NUMBER_ZERO */ ||
+                        inputValue[position] === this.decimalMarker)) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue = inputValue.slice(2, inputValue.length);
+                }
+                if (inputValue[0] === "-" /* MaskExpression.MINUS */ &&
+                    inputValue[1] === "0" /* MaskExpression.NUMBER_ZERO */ &&
+                    inputValue[2] === this.decimalMarker &&
+                    (inputValue[position] === "0" /* MaskExpression.NUMBER_ZERO */ ||
+                        inputValue[position] === this.decimalMarker)) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue = "-" /* MaskExpression.MINUS */ + inputValue.slice(3, inputValue.length);
+                }
                 // eslint-disable-next-line no-param-reassign
                 inputValue = this._compareOrIncludes(inputValue[inputValue.length - 1], this.decimalMarker, this.thousandSeparator)
                     ? inputValue.slice(0, inputValue.length - 1)
@@ -343,13 +411,10 @@ class NgxMaskApplierService {
                 invalidChars = invalidChars.replace(this._charToRegExpExpression(this.decimalMarker), '');
             }
             const invalidCharRegexp = new RegExp('[' + invalidChars + ']');
-            if (inputValue.match(invalidCharRegexp) ||
-                (inputValue.length === 1 &&
-                    this._compareOrIncludes(inputValue, this.decimalMarker, this.thousandSeparator))) {
+            if (inputValue.match(invalidCharRegexp)) {
                 // eslint-disable-next-line no-param-reassign
                 inputValue = inputValue.substring(0, inputValue.length - 1);
             }
-            const precision = this.getPrecision(maskExpression);
             // eslint-disable-next-line no-param-reassign
             inputValue = this.checkInputPrecision(inputValue, precision, this.decimalMarker);
             const strForSep = inputValue.replace(new RegExp(thousandSeparatorCharEscaped, 'g'), '');
@@ -422,7 +487,7 @@ class NgxMaskApplierService {
                     if (maskExpression[cursor] === "H" /* MaskExpression.HOURS */) {
                         if (this.apm ? Number(inputSymbol) > 9 : Number(inputSymbol) > 2) {
                             // eslint-disable-next-line no-param-reassign
-                            position = position + 1;
+                            position = !this.leadZeroDateTime ? position + 1 : position;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -458,7 +523,7 @@ class NgxMaskApplierService {
                         maskExpression[cursor] === "s" /* MaskExpression.SECOND */) {
                         if (Number(inputSymbol) > 5) {
                             // eslint-disable-next-line no-param-reassign
-                            position = position + 1;
+                            position = !this.leadZeroDateTime ? position + 1 : position;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -496,7 +561,7 @@ class NgxMaskApplierService {
                                 : Number(inputValueSliceCursorPlusTwo) > daysCount ||
                                     this.specialCharacters.includes(inputValueCursorPlusOne))) {
                             // eslint-disable-next-line no-param-reassign
-                            position = position + 1;
+                            position = !this.leadZeroDateTime ? position + 1 : position;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -552,7 +617,7 @@ class NgxMaskApplierService {
                             day2monthInput ||
                             (day2monthInputDot && !this.leadZeroDateTime)) {
                             // eslint-disable-next-line no-param-reassign
-                            position = position + 1;
+                            position = !this.leadZeroDateTime ? position + 1 : position;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -647,7 +712,7 @@ class NgxMaskApplierService {
         if (backspaced) {
             onlySpecial = inputArray.every((char) => this.specialCharacters.includes(char));
         }
-        let res = `${this.prefix}${onlySpecial ? "" /* MaskExpression.EMPTY_STRING */ : result}${this.suffix}`;
+        let res = `${this.prefix}${onlySpecial ? "" /* MaskExpression.EMPTY_STRING */ : result}${this.showMaskTyped ? '' : this.suffix}`;
         if (result.length === 0) {
             res = !this.dropSpecialCharacters ? `${this.prefix}${result}` : `${result}`;
         }
@@ -761,14 +826,14 @@ class NgxMaskService extends NgxMaskApplierService {
         this.maskChanged = false;
         this._maskExpressionArray = [];
         this.triggerOnMaskChange = false;
-        this._emitValue = false;
         this._previousValue = '';
         this._currentValue = '';
+        this._emitValue = false;
         // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any
         this.onChange = (_) => { };
+        this._elementRef = inject(ElementRef, { optional: true });
         this.document = inject(DOCUMENT);
         this._config = inject(NGX_MASK_CONFIG);
-        this._elementRef = inject(ElementRef, { optional: true });
         this._renderer = inject(Renderer2, { optional: true });
     }
     // eslint-disable-next-line complexity
@@ -789,7 +854,7 @@ class NgxMaskService extends NgxMaskApplierService {
         }
         if (!inputValue && this.showMaskTyped) {
             this.formControlResult(this.prefix);
-            return this.prefix + this.maskIsShown;
+            return this.prefix + this.maskIsShown + this.suffix;
         }
         const getSymbol = !!inputValue && typeof this.selStart === 'number'
             ? inputValue[this.selStart] ?? "" /* MaskExpression.EMPTY_STRING */
@@ -835,6 +900,11 @@ class NgxMaskService extends NgxMaskApplierService {
         if (justPasted && (this.hiddenInput || !this.hiddenInput)) {
             newInputValue = inputValue;
         }
+        if (backspaced &&
+            this.specialCharacters.indexOf(this.maskExpression[position] ?? "" /* MaskExpression.EMPTY_STRING */) !== -1 &&
+            this.showMaskTyped) {
+            newInputValue = this._currentValue;
+        }
         if (this.deletedSpecialCharacter && position) {
             if (this.specialCharacters.includes(this.actualValue.slice(position, position + 1))) {
                 // eslint-disable-next-line no-param-reassign
@@ -903,7 +973,7 @@ class NgxMaskService extends NgxMaskApplierService {
             return result;
         }
         const resLen = result.length;
-        const prefNmask = this.prefix + this.maskIsShown;
+        const prefNmask = this.prefix + this.maskIsShown + this.suffix;
         if (this.maskExpression.includes("H" /* MaskExpression.HOURS */)) {
             const countSkipedSymbol = this._numberSkipedSymbols(result);
             return result + prefNmask.slice(resLen + countSkipedSymbol);
@@ -1216,11 +1286,17 @@ class NgxMaskService extends NgxMaskApplierService {
         return value ? value.replace(this.suffix, "" /* MaskExpression.EMPTY_STRING */) : value;
     }
     _retrieveSeparatorValue(result) {
-        const specialCharacters = Array.isArray(this.dropSpecialCharacters)
+        let specialCharacters = Array.isArray(this.dropSpecialCharacters)
             ? this.specialCharacters.filter((v) => {
                 return this.dropSpecialCharacters.includes(v);
             })
             : this.specialCharacters;
+        if (!this.deletedSpecialCharacter &&
+            this._checkPatternForSpace() &&
+            result.includes(" " /* MaskExpression.WHITE_SPACE */) &&
+            this.maskExpression.includes("*" /* MaskExpression.SYMBOL_STAR */)) {
+            specialCharacters = specialCharacters.filter((char) => char !== " " /* MaskExpression.WHITE_SPACE */);
+        }
         return this._removeMask(result, specialCharacters);
     }
     _regExpForRemove(specialCharactersForRemove) {
@@ -1259,6 +1335,20 @@ class NgxMaskService extends NgxMaskApplierService {
             return separatorValue;
         }
     }
+    _checkPatternForSpace() {
+        for (const key in this.patterns) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (this.patterns[key] && this.patterns[key]?.hasOwnProperty('pattern')) {
+                const patternString = this.patterns[key]?.pattern.toString();
+                const pattern = this.patterns[key]?.pattern;
+                if (patternString?.includes(" " /* MaskExpression.WHITE_SPACE */) &&
+                    pattern?.test(this.maskExpression)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
     // TODO should think about helpers or separting decimal precision to own property
     _retrieveSeparatorPrecision(maskExpretion) {
         const matcher = maskExpretion.match(new RegExp(`^separator\\.([^d]*)`));
@@ -1348,6 +1438,7 @@ class NgxMaskDirective {
         this._position = null;
         this._maskExpressionArray = [];
         this._justPasted = false;
+        this._isFocused = false;
         /**For IME composition event */
         this._isComposing = false;
         this.document = inject(DOCUMENT);
@@ -1365,13 +1456,6 @@ class NgxMaskDirective {
                 !maskExpression.firstChange) {
                 this._maskService.maskChanged = true;
             }
-            if (allowNegativeNumbers) {
-                this._maskService.allowNegativeNumbers = allowNegativeNumbers.currentValue;
-                if (this._maskService.allowNegativeNumbers) {
-                    this._maskService.specialCharacters =
-                        this._maskService.specialCharacters.filter((c) => c !== "-" /* MaskExpression.MINUS */);
-                }
-            }
             if (maskExpression.currentValue &&
                 maskExpression.currentValue.split("||" /* MaskExpression.OR */).length > 1) {
                 this._maskExpressionArray = maskExpression.currentValue
@@ -1395,6 +1479,12 @@ class NgxMaskDirective {
                 this._maskService.specialCharacters = specialCharacters.currentValue || [];
             }
         }
+        if (allowNegativeNumbers) {
+            this._maskService.allowNegativeNumbers = allowNegativeNumbers.currentValue;
+            if (this._maskService.allowNegativeNumbers) {
+                this._maskService.specialCharacters = this._maskService.specialCharacters.filter((c) => c !== "-" /* MaskExpression.MINUS */);
+            }
+        }
         // Only overwrite the mask available patterns if a pattern has actually been passed in
         if (patterns && patterns.currentValue) {
             this._maskService.patterns = patterns.currentValue;
@@ -1422,6 +1512,13 @@ class NgxMaskDirective {
         }
         if (showMaskTyped) {
             this._maskService.showMaskTyped = showMaskTyped.currentValue;
+            if (showMaskTyped.previousValue === false &&
+                showMaskTyped.currentValue === true &&
+                this._isFocused) {
+                requestAnimationFrame(() => {
+                    this._maskService._elementRef?.nativeElement.click();
+                });
+            }
         }
         if (placeHolderCharacter) {
             this._maskService.placeHolderCharacter = placeHolderCharacter.currentValue;
@@ -1581,6 +1678,9 @@ class NgxMaskDirective {
     onPaste() {
         this._justPasted = true;
     }
+    onFocus() {
+        this._isFocused = true;
+    }
     onModelChange(value) {
         // on form reset we need to update the actualValue
         if ((value === "" /* MaskExpression.EMPTY_STRING */ || value === null || value === undefined) &&
@@ -1681,13 +1781,33 @@ class NgxMaskDirective {
                             position = position + 1;
                         }
                         else if (checkSymbols) {
+                            if (el.value.length === 1 && position === 1) {
+                                this._maskService.actualValue =
+                                    this.prefix +
+                                        inputSymbol +
+                                        this._maskService.maskIsShown.slice(1, this._maskService.maskIsShown.length) +
+                                        this.suffix;
+                            }
+                            else {
+                                this._maskService.actualValue =
+                                    el.value.slice(0, position - 1) +
+                                        inputSymbol +
+                                        el.value
+                                            .slice(position + 1)
+                                            .split(this.suffix)
+                                            .join('') +
+                                        this.suffix;
+                            }
+                        }
+                        else if (this.prefix &&
+                            el.value.length === 1 &&
+                            position - prefixLength === 1 &&
+                            this._maskService._checkSymbolMask(el.value, this._maskService.maskExpression[position - 1 - prefixLength] ??
+                                "" /* MaskExpression.EMPTY_STRING */)) {
                             this._maskService.actualValue =
-                                el.value.slice(0, position - 1) +
-                                    inputSymbol +
-                                    el.value
-                                        .slice(position + 1)
-                                        .split(this.suffix)
-                                        .join('') +
+                                this.prefix +
+                                    el.value +
+                                    this._maskService.maskIsShown.slice(1, this._maskService.maskIsShown.length) +
                                     this.suffix;
                         }
                     }
@@ -1707,6 +1827,13 @@ class NgxMaskDirective {
                             inputSymbol +
                             this._inputValue.slice(position + 1);
                 }
+                if (this._maskService.maskExpression === "d0/M0/0000" /* MaskExpression.DAYS_MONTHS_YEARS */ &&
+                    this.leadZeroDateTime) {
+                    if ((position < 3 && Number(el.value) > 31 && Number(el.value) < 40) ||
+                        (position === 5 && Number(el.value.slice(3, 5)) > 12)) {
+                        position = position + 2;
+                    }
+                }
                 if (this._maskService.maskExpression === "Hh:m0:s0" /* MaskExpression.HOURS_MINUTES_SECONDS */ &&
                     this.apm) {
                     if (this._justPasted && el.value.slice(0, 2) === "00" /* MaskExpression.DOUBLE_ZERO */) {
@@ -1726,6 +1853,10 @@ class NgxMaskDirective {
                 if (this._getActiveElement() !== el) {
                     return;
                 }
+                if (this._maskService.plusOnePosition) {
+                    position = position + 1;
+                    this._maskService.plusOnePosition = false;
+                }
                 // update position after applyValueChanges to prevent cursor on wrong position when it has an array of maskExpression
                 if (this._maskExpressionArray.length) {
                     if (this._code === "Backspace" /* MaskExpression.BACKSPACE */) {
@@ -1747,7 +1878,10 @@ class NgxMaskDirective {
                     : position +
                         (this._code === "Backspace" /* MaskExpression.BACKSPACE */ && !backspaceShift ? 0 : caretShift);
                 if (positionToApply > this._getActualInputLength()) {
-                    positionToApply = this._getActualInputLength();
+                    positionToApply =
+                        el.value === this._maskService.decimalMarker && el.value.length === 1
+                            ? this._getActualInputLength() + 1
+                            : this._getActualInputLength();
                 }
                 if (positionToApply < 0) {
                     positionToApply = 0;
@@ -1760,6 +1894,10 @@ class NgxMaskDirective {
             }
         }
         else {
+            if (!this._maskValue) {
+                this.onChange(el.value);
+                return;
+            }
             this._maskService.applyValueChanges(el.value.length, this._justPasted, this._code === "Backspace" /* MaskExpression.BACKSPACE */ || this._code === "Delete" /* MaskExpression.DELETE */);
         }
     }
@@ -1795,6 +1933,7 @@ class NgxMaskDirective {
             }
             this._maskService.clearIfNotMatchFn();
         }
+        this._isFocused = false;
         this.onTouch();
     }
     onClick(e) {
@@ -1928,13 +2067,12 @@ class NgxMaskDirective {
         }
     }
     /** It writes the value in the input */
-    // public async writeValue(controlValue: unknown): Promise<void> {
     async writeValue(controlValue) {
         if (typeof controlValue === 'object' && controlValue !== null && 'value' in controlValue) {
             if ('disable' in controlValue) {
                 this.setDisabledState(Boolean(controlValue.disable));
             }
-            // // eslint-disable-next-line no-param-reassign
+            // eslint-disable-next-line no-param-reassign
             controlValue = controlValue.value;
         }
         if (controlValue !== null) {
@@ -1945,7 +2083,12 @@ class NgxMaskDirective {
         }
         if (typeof controlValue === 'string' ||
             typeof controlValue === 'number' ||
-            controlValue === null) {
+            controlValue === null ||
+            controlValue === undefined) {
+            if (controlValue === null || controlValue === undefined || controlValue === '') {
+                this._maskService._currentValue = '';
+                this._maskService._previousValue = '';
+            }
             // eslint-disable-next-line no-param-reassign
             let inputValue = controlValue;
             if (typeof inputValue === 'number' ||
@@ -2097,7 +2240,8 @@ class NgxMaskDirective {
                 }
             }
             else {
-                const check = this._inputValue
+                const check = this._maskService
+                    .removeMask(this._inputValue)
                     ?.split("" /* MaskExpression.EMPTY_STRING */)
                     .every((character, index) => {
                     const indexMask = mask.charAt(index);
@@ -2112,7 +2256,7 @@ class NgxMaskDirective {
     }
 }
 NgxMaskDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgxMaskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: { maskExpression: ["mask", "maskExpression"], specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", showTemplate: "showTemplate", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
+NgxMaskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: { maskExpression: ["mask", "maskExpression"], specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", showTemplate: "showTemplate", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions" }, 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: forwardRef(() => NgxMaskDirective),
@@ -2124,7 +2268,7 @@ NgxMaskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", versi
             multi: true,
         },
         NgxMaskService,
-    ], usesOnChanges: true, ngImport: i0 });
+    ], exportAs: ["mask", "ngxMask"], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxMaskDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2142,6 +2286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         },
                         NgxMaskService,
                     ],
+                    exportAs: 'mask,ngxMask',
                 }]
         }], propDecorators: { maskExpression: [{
                 type: Input,
@@ -2197,6 +2342,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
             }], onPaste: [{
                 type: HostListener,
                 args: ['paste']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
             }], onModelChange: [{
                 type: HostListener,
                 args: ['ngModelChange', ['$event']]
@@ -2290,6 +2438,9 @@ class NgxMaskPipe {
             }
             this._maskService.isNumberValue = true;
         }
+        if (value === null || value === undefined) {
+            return this._maskService.applyMask('', mask);
+        }
         return this._maskService.applyMask(`${value}`, mask);
     }
     _setMask(value) {