ngx-mask 14.3.2-test → 14.3.3

package/fesm2015/ngx-mask.mjs

@@ -117,6 +117,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 = '';
@@ -227,7 +228,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);
         }
@@ -311,24 +312,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)
@@ -348,13 +416,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'), '');
@@ -427,7 +492,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--;
@@ -463,7 +528,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--;
@@ -501,7 +566,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--;
@@ -557,7 +622,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--;
@@ -651,7 +716,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}`;
         }
@@ -765,21 +830,21 @@ 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
     applyMask(inputValue, maskExpression, position = 0, justPasted = false, backspaced = false, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any
     cb = () => { }) {
-        var _a;
+        var _a, _b;
         if (!maskExpression) {
             return inputValue !== this.actualValue ? this.actualValue : inputValue;
         }
@@ -794,7 +859,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'
             ? (_a = inputValue[this.selStart]) !== null && _a !== void 0 ? _a : "" /* MaskExpression.EMPTY_STRING */
@@ -840,6 +905,11 @@ class NgxMaskService extends NgxMaskApplierService {
         if (justPasted && (this.hiddenInput || !this.hiddenInput)) {
             newInputValue = inputValue;
         }
+        if (backspaced &&
+            this.specialCharacters.indexOf((_b = this.maskExpression[position]) !== null && _b !== void 0 ? _b : "" /* 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
@@ -908,7 +978,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);
@@ -1228,11 +1298,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) {
@@ -1271,6 +1347,21 @@ class NgxMaskService extends NgxMaskApplierService {
             return separatorValue;
         }
     }
+    _checkPatternForSpace() {
+        var _a, _b, _c;
+        for (const key in this.patterns) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (this.patterns[key] && ((_a = this.patterns[key]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty('pattern'))) {
+                const patternString = (_b = this.patterns[key]) === null || _b === void 0 ? void 0 : _b.pattern.toString();
+                const pattern = (_c = this.patterns[key]) === null || _c === void 0 ? void 0 : _c.pattern;
+                if ((patternString === null || patternString === void 0 ? void 0 : patternString.includes(" " /* MaskExpression.WHITE_SPACE */)) &&
+                    (pattern === null || pattern === void 0 ? void 0 : 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]*)`));
@@ -1360,6 +1451,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);
@@ -1377,13 +1469,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
@@ -1407,6 +1492,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;
@@ -1434,6 +1525,14 @@ class NgxMaskDirective {
         }
         if (showMaskTyped) {
             this._maskService.showMaskTyped = showMaskTyped.currentValue;
+            if (showMaskTyped.previousValue === false &&
+                showMaskTyped.currentValue === true &&
+                this._isFocused) {
+                requestAnimationFrame(() => {
+                    var _a;
+                    (_a = this._maskService._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement.click();
+                });
+            }
         }
         if (placeHolderCharacter) {
             this._maskService.placeHolderCharacter = placeHolderCharacter.currentValue;
@@ -1593,6 +1692,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) &&
@@ -1601,7 +1703,7 @@ class NgxMaskDirective {
         }
     }
     onInput(e) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         // If IME is composing text, we wait for the composed text.
         if (this._isComposing)
             return;
@@ -1692,13 +1794,32 @@ 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, (_e = this._maskService.maskExpression[position - 1 - prefixLength]) !== null && _e !== void 0 ? _e : "" /* 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;
                         }
                     }
@@ -1718,6 +1839,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 */) {
@@ -1737,6 +1865,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 */) {
@@ -1758,7 +1890,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;
@@ -1771,6 +1906,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 */);
         }
     }
@@ -1806,6 +1945,7 @@ class NgxMaskDirective {
             }
             this._maskService.clearIfNotMatchFn();
         }
+        this._isFocused = false;
         this.onTouch();
     }
     onClick(e) {
@@ -1939,7 +2079,6 @@ class NgxMaskDirective {
         }
     }
     /** It writes the value in the input */
-    // public async writeValue(controlValue: unknown): Promise<void> {
     writeValue(controlValue) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
@@ -1947,7 +2086,7 @@ class NgxMaskDirective {
                 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) {
@@ -1958,7 +2097,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' ||
@@ -2114,7 +2258,8 @@ class NgxMaskDirective {
                 }
             }
             else {
-                const check = (_d = this._inputValue) === null || _d === void 0 ? void 0 : _d.split("" /* MaskExpression.EMPTY_STRING */).every((character, index) => {
+                const check = (_d = this._maskService
+                    .removeMask(this._inputValue)) === null || _d === void 0 ? void 0 : _d.split("" /* MaskExpression.EMPTY_STRING */).every((character, index) => {
                     const indexMask = mask.charAt(index);
                     return this._maskService._checkSymbolMask(character, indexMask);
                 });
@@ -2127,7 +2272,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),
@@ -2139,7 +2284,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: [{
@@ -2157,6 +2302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         },
                         NgxMaskService,
                     ],
+                    exportAs: 'mask,ngxMask',
                 }]
         }], propDecorators: { maskExpression: [{
                 type: Input,
@@ -2212,6 +2358,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']]
@@ -2298,6 +2447,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) {