ngx-mask 20.0.3 → 21.0.1

package/fesm2022/ngx-mask.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, inject, Injectable, ElementRef, Renderer2, makeEnvironmentProviders, input, output, signal, HostListener, Directive, Pipe } from '@angular/core';
+import { InjectionToken, EventEmitter, inject, Injectable, ElementRef, Renderer2, makeEnvironmentProviders, input, model, output, signal, effect, untracked, HostListener, Directive, Pipe } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 
@@ -636,6 +636,12 @@ class NgxMaskApplierService {
                 }
                 else if (this.patterns[maskExpression[cursor] ?? MaskExpression.EMPTY_STRING] &&
                     this.patterns[maskExpression[cursor] ?? MaskExpression.EMPTY_STRING]?.optional) {
+                    // If the input symbol is whitespace or doesn't match the pattern,
+                    // skip it without consuming the mask position
+                    if (inputSymbol.trim() === MaskExpression.EMPTY_STRING) {
+                        // Skip whitespace input, don't advance mask cursor
+                        continue;
+                    }
                     if (!!inputArray[cursor] &&
                         maskExpression !== '099.099.099.099' &&
                         maskExpression !== '000.000.000-00' &&
@@ -906,10 +912,10 @@ class NgxMaskApplierService {
             nonZeroIndex,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskApplierService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskApplierService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskApplierService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskApplierService, decorators: [{
             type: Injectable
         }] });
 
@@ -1117,8 +1123,17 @@ class NgxMaskService extends NgxMaskApplierService {
                     (this.previousValue === this.currentValue && justPasted);
         }
         // Propagate the input value back to the Angular model
-        // eslint-disable-next-line no-unused-expressions,@typescript-eslint/no-unused-expressions
-        this._emitValue ? this.formControlResult(result) : '';
+        // Only emit if:
+        // 1. _emitValue is true (value changed), AND
+        // 2. Either mask didn't change, OR triggerOnMaskChange is true
+        const shouldEmit = this._emitValue && (!this.maskChanged || this.triggerOnMaskChange);
+        if (shouldEmit) {
+            this.formControlResult(result);
+        }
+        // Reset maskChanged flag even if we didn't emit
+        if (this.maskChanged && !this.triggerOnMaskChange) {
+            this.maskChanged = false;
+        }
         // Handle hidden input and showMaskTyped
         if (!this.showMaskTyped || (this.showMaskTyped && this.hiddenInput)) {
             if (this.hiddenInput) {
@@ -1275,8 +1290,12 @@ class NgxMaskService extends NgxMaskApplierService {
         if (!this._renderer || !this._elementRef) {
             return;
         }
-        //[TODO]: andriikamaldinov1 find better solution
-        Promise.resolve().then(() => this._renderer?.setProperty(this._elementRef?.nativeElement, name, value));
+        // Use queueMicrotask to defer DOM updates to next microtask.
+        // This prevents ExpressionChangedAfterItHasBeenCheckedError
+        // and ensures proper timing with Angular's change detection.
+        queueMicrotask(() => {
+            this._renderer?.setProperty(this._elementRef?.nativeElement, name, value);
+        });
     }
     checkDropSpecialCharAmount(mask) {
         const chars = mask
@@ -1459,7 +1478,15 @@ class NgxMaskService extends NgxMaskApplierService {
         return this._removeMask(result, specialCharacters);
     }
     _regExpForRemove(specialCharactersForRemove) {
-        return new RegExp(specialCharactersForRemove.map((item) => `\\${item}`).join('|'), 'gi');
+        return new RegExp(specialCharactersForRemove
+            .map((item) => {
+            // Only escape characters that have special meaning in regex
+            if (/[.*+?^${}()|[\]\\/-]/.test(item)) {
+                return `\\${item}`;
+            }
+            return item;
+        })
+            .join('|'), 'gi');
     }
     _replaceDecimalMarkerToDot(value) {
         const markers = Array.isArray(this.decimalMarker)
@@ -1558,10 +1585,10 @@ class NgxMaskService extends NgxMaskApplierService {
     currentLocaleDecimalMarker() {
         return (1.1).toLocaleString().substring(1, 2);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskService, decorators: [{
             type: Injectable
         }] });
 
@@ -1597,6 +1624,7 @@ function provideEnvironmentNgxMask(configValue) {
 }
 
 class NgxMaskDirective {
+    // ===== Mask Configuration Inputs =====
     mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
     specialCharacters = input([], ...(ngDevMode ? [{ debugName: "specialCharacters" }] : []));
     patterns = input({}, ...(ngDevMode ? [{ debugName: "patterns" }] : []));
@@ -1621,6 +1649,16 @@ class NgxMaskDirective {
     outputTransformFn = input(null, ...(ngDevMode ? [{ debugName: "outputTransformFn" }] : []));
     keepCharacterPositions = input(null, ...(ngDevMode ? [{ debugName: "keepCharacterPositions" }] : []));
     instantPrefix = input(null, ...(ngDevMode ? [{ debugName: "instantPrefix" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
     maskFilled = output();
     _maskValue = signal('', ...(ngDevMode ? [{ debugName: "_maskValue" }] : []));
     _inputValue = signal('', ...(ngDevMode ? [{ debugName: "_inputValue" }] : []));
@@ -1629,8 +1667,10 @@ class NgxMaskDirective {
     _maskExpressionArray = signal([], ...(ngDevMode ? [{ debugName: "_maskExpressionArray" }] : []));
     _justPasted = signal(false, ...(ngDevMode ? [{ debugName: "_justPasted" }] : []));
     _isFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isFocused" }] : []));
-    /**For IME composition event */
+    /** For IME composition event */
     _isComposing = signal(false, ...(ngDevMode ? [{ debugName: "_isComposing" }] : []));
+    /** Track if we're using Signal Forms mode */
+    _isSignalFormsMode = signal(false, ...(ngDevMode ? [{ debugName: "_isSignalFormsMode" }] : []));
     _maskService = inject(NgxMaskService, { self: true });
     document = inject(DOCUMENT);
     _config = inject(NGX_MASK_CONFIG);
@@ -1638,6 +1678,29 @@ class NgxMaskDirective {
     onChange = (_) => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onTouch = () => { };
+    constructor() {
+        effect(() => {
+            const signalValue = this.value();
+            if (this._isSignalFormsMode() && signalValue !== untracked(() => this._inputValue())) {
+                untracked(() => {
+                    this.writeValue(signalValue);
+                });
+            }
+        });
+        effect(() => {
+            const isDisabled = this.disabled();
+            untracked(() => {
+                this.setDisabledState(isDisabled);
+            });
+        });
+    }
+    ngOnInit() {
+        // Detect if we're being used with Signal Forms
+        // Signal Forms will set the value model from outside
+        if (this.value() !== '') {
+            this._isSignalFormsMode.set(true);
+        }
+    }
     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, instantPrefix, } = changes;
         if (mask) {
@@ -2197,14 +2260,15 @@ class NgxMaskDirective {
             el.selectionEnd = this._getActualInputLength();
         }
     }
-    onKeyDown(e) {
+    onKeyDown(event) {
+        const e = event;
         if (!this._maskValue()) {
             return;
         }
         if (this._isComposing()) {
             // User finalize their choice from IME composition, so trigger onInput() for the composed text.
             if (e.key === 'Enter') {
-                this.onCompositionEnd(e);
+                this.onCompositionEnd(event);
             }
             return;
         }
@@ -2322,8 +2386,17 @@ class NgxMaskDirective {
                         .replace(MaskExpression.DOT, MaskExpression.COMMA);
                 }
                 if (this.mask()?.startsWith(MaskExpression.SEPARATOR) && this.leadZero()) {
+                    const isFirstWrite = !this._maskService.isInitialized;
                     requestAnimationFrame(() => {
+                        // On initial load, temporarily set isInitialized to false
+                        // so formControlResult returns early and doesn't mark form as dirty
+                        if (isFirstWrite) {
+                            this._maskService.isInitialized = false;
+                        }
                         this._maskService.applyMask(inputValue?.toString() ?? '', this._maskService.maskExpression);
+                        if (isFirstWrite) {
+                            this._maskService.isInitialized = true;
+                        }
                     });
                 }
                 this._maskService.isNumberValue = true;
@@ -2358,10 +2431,34 @@ class NgxMaskDirective {
         }
     }
     registerOnChange(fn) {
-        this._maskService.onChange = this.onChange = fn;
+        // Wrap the original onChange to also update Signal Forms value
+        const originalFn = fn;
+        this._maskService.onChange = this.onChange = (value) => {
+            originalFn(value);
+            // Update Signal Forms value model if in use
+            if (this._isSignalFormsMode()) {
+                const stringValue = value === null || typeof value === 'undefined' ? '' : String(value);
+                if (this.value() !== stringValue) {
+                    this.value.set(stringValue);
+                }
+            }
+        };
     }
     registerOnTouched(fn) {
-        this.onTouch = fn;
+        this.onTouch = () => {
+            fn();
+            // Update Signal Forms touched state
+            if (this._isSignalFormsMode() && !this.touched()) {
+                this.touched.set(true);
+            }
+        };
+    }
+    /**
+     * Focus the input element.
+     * Required by FormValueControl interface for Signal Forms.
+     */
+    focus() {
+        this._maskService._elementRef?.nativeElement?.focus();
     }
     _getActiveElement(document = this.document) {
         const shadowRootEl = document?.activeElement?.shadowRoot;
@@ -2473,8 +2570,8 @@ class NgxMaskDirective {
             return uniqueCharacters.size === 1;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "focus": "onFocus()", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NgxMaskDirective,
@@ -2488,7 +2585,7 @@ class NgxMaskDirective {
             NgxMaskService,
         ], exportAs: ["mask", "ngxMask"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mask], textarea[mask]',
@@ -2508,12 +2605,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                     ],
                     exportAs: 'mask,ngxMask',
                 }]
-        }], propDecorators: { onPaste: [{
+        }], ctorParameters: () => [], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], specialCharacters: [{ type: i0.Input, args: [{ isSignal: true, alias: "specialCharacters", required: false }] }], patterns: [{ type: i0.Input, args: [{ isSignal: true, alias: "patterns", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], thousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "thousandSeparator", required: false }] }], decimalMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalMarker", required: false }] }], dropSpecialCharacters: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropSpecialCharacters", required: false }] }], hiddenInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenInput", required: false }] }], showMaskTyped: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMaskTyped", required: false }] }], placeHolderCharacter: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolderCharacter", required: false }] }], shownMaskExpression: [{ type: i0.Input, args: [{ isSignal: true, alias: "shownMaskExpression", required: false }] }], clearIfNotMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIfNotMatch", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], separatorLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLimit", required: false }] }], allowNegativeNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNegativeNumbers", required: false }] }], leadZeroDateTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadZeroDateTime", required: false }] }], leadZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadZero", required: false }] }], triggerOnMaskChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerOnMaskChange", required: false }] }], apm: [{ type: i0.Input, args: [{ isSignal: true, alias: "apm", required: false }] }], inputTransformFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTransformFn", required: false }] }], outputTransformFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputTransformFn", required: false }] }], keepCharacterPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepCharacterPositions", required: false }] }], instantPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "instantPrefix", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], maskFilled: [{ type: i0.Output, args: ["maskFilled"] }], onPaste: [{
                 type: HostListener,
                 args: ['paste']
             }], onFocus: [{
                 type: HostListener,
-                args: ['focus', ['$event']]
+                args: ['focus']
             }], onModelChange: [{
                 type: HostListener,
                 args: ['ngModelChange', ['$event']]
@@ -2522,7 +2619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 args: ['input', ['$event']]
             }], onCompositionStart: [{
                 type: HostListener,
-                args: ['compositionstart', ['$event']]
+                args: ['compositionstart']
             }], onCompositionEnd: [{
                 type: HostListener,
                 args: ['compositionend', ['$event']]
@@ -2621,10 +2718,10 @@ class NgxMaskPipe {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskPipe, isStandalone: true, name: "mask" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskPipe, isStandalone: true, name: "mask" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxMaskPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NgxMaskPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mask',