ngx-mask 22.0.1 → 22.1.0

package/fesm2022/ngx-mask.mjs

@@ -105,12 +105,14 @@ const initialConfig = {
         },
         d: {
             pattern: new RegExp('\\d'),
+            symbol: '*',
         },
         m: {
             pattern: new RegExp('\\d'),
         },
         M: {
             pattern: new RegExp('\\d'),
+            symbol: '*',
         },
         H: {
             pattern: new RegExp('\\d'),
@@ -550,7 +552,7 @@ const percentHandler = function (state, params) {
         }
         processedValue = `${base}${processedValue.substring(processedValue.indexOf(decimalMarker), processedValue.length)}`;
     }
-    let value = '';
+    let value;
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     this.allowNegativeNumbers && processedValue.slice(cursor, cursor + 1) === MaskExpression.MINUS
         ? (value = `${MaskExpression.MINUS}${processedValue.slice(cursor + 1, cursor + processedValue.length)}`)
@@ -580,7 +582,8 @@ const percentHandler = function (state, params) {
  */
 const separatorHandler = function (state, params) {
     const { backspaced, justPasted, startsWithPrefix, prefixAlreadyRemovedByCaller, cb, inputValue, } = params;
-    let { processedValue, processedPosition, result, backspaceShift, shift, stepBack } = state;
+    let { processedValue, processedPosition, backspaceShift, shift, stepBack } = state;
+    let result;
     if (processedValue.match('[wа-яА-Я]') ||
         processedValue.match('[ЁёА-я]') ||
         processedValue.match('[a-z]|[A-Z]') ||
@@ -942,7 +945,7 @@ class NgxMaskApplierService {
         }
         let cursor = 0;
         let result = '';
-        let multi = false;
+        const multi = false;
         let backspaceShift = false;
         let shift = 1;
         let stepBack = false;
@@ -1011,7 +1014,6 @@ class NgxMaskApplierService {
         processedPosition = resolved.processedPosition;
         cursor = resolved.cursor;
         result = resolved.result;
-        multi = resolved.multi;
         backspaceShift = resolved.backspaceShift;
         shift = resolved.shift;
         stepBack = resolved.stepBack;
@@ -1091,8 +1093,8 @@ class NgxMaskApplierService {
             false);
     }
     _formatWithSeparators = (str, thousandSeparatorChar, decimalChars, precision) => {
-        let x = [];
-        let decimalChar = '';
+        let x;
+        let decimalChar;
         if (Array.isArray(decimalChars)) {
             const regExp = new RegExp(decimalChars.map((v) => ('[\\^$.|?*+()'.indexOf(v) >= 0 ? `\\${v}` : v)).join('|'));
             x = str.split(regExp);
@@ -1302,10 +1304,10 @@ class NgxMaskApplierService {
             nonZeroIndex,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskApplierService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskApplierService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskApplierService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskApplierService, decorators: [{
             type: Injectable
         }] });
 
@@ -1488,10 +1490,6 @@ class NgxMaskService extends NgxMaskApplierService {
                     actualResult = [];
                 }
             }
-            // Remove mask if showMaskTyped is true and hiddenInput is false
-            if (this.showMaskTyped && !this.hiddenInput) {
-                newInputValue = this.removeMask(inputValue);
-            }
             // Handle actual value length
             if (this.actualValue.length) {
                 if (actualResult.length < inputValue.length) {
@@ -1668,11 +1666,24 @@ class NgxMaskService extends NgxMaskApplierService {
         return inputValue
             .split(MaskExpression.EMPTY_STRING)
             .map((curr, index) => {
-            if (this.patterns &&
-                this.patterns[maskExpression[index] ?? MaskExpression.EMPTY_STRING] &&
-                this.patterns[maskExpression[index] ?? MaskExpression.EMPTY_STRING]?.symbol) {
-                return this.patterns[maskExpression[index] ?? MaskExpression.EMPTY_STRING]
-                    ?.symbol;
+            const maskChar = maskExpression[index] ?? MaskExpression.EMPTY_STRING;
+            const pattern = this.patterns?.[maskChar];
+            if (pattern?.symbol) {
+                return pattern.symbol;
+            }
+            // #1574: a '0' immediately following a concealed DAY/MONTH token
+            // is that field's second digit (d0/M0) — conceal it too so the
+            // whole 2-digit field is hidden, not just its first character.
+            // Display-only: does not touch maskExpression/processedValue, so
+            // date validation/leadZero clamping in generic-pattern.handler.ts
+            // is unaffected.
+            const prevMaskChar = maskExpression[index - 1];
+            const prevPattern = prevMaskChar ? this.patterns?.[prevMaskChar] : null;
+            if (maskChar === MaskExpression.NUMBER_ZERO &&
+                (prevMaskChar === MaskExpression.DAY ||
+                    prevMaskChar === MaskExpression.MONTH) &&
+                prevPattern?.symbol) {
+                return prevPattern.symbol;
             }
             return curr;
         })
@@ -2190,10 +2201,10 @@ class NgxMaskService extends NgxMaskApplierService {
     currentLocaleDecimalMarker() {
         return MaskExpression.DOT;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskService, decorators: [{
             type: Injectable
         }] });
 
@@ -2574,7 +2585,7 @@ class NgxMaskDirective {
                 this._hasPendingInitialValue = false;
                 const pendingValue = this._pendingInitialValue;
                 this._pendingInitialValue = null;
-                void this.writeValue(pendingValue);
+                this.writeValue(pendingValue);
             }
         }
     }
@@ -2977,10 +2988,17 @@ class NgxMaskDirective {
                             inputSymbol +
                             this._inputValue().slice(position + 1);
                 }
-                if (this._maskService.maskExpression === 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)) {
+                // #1488: generalizes the single-mask (d0/M0/0000) caret-shift-past-separator
+                // fix to any date/time field. Locates the date/time field containing
+                // `position` by scanning maskExpression for a DAY/MONTH/HOURS/HOUR/MINUTE/
+                // SECOND token followed by its digit run, then checks overflow against the
+                // same per-field thresholds generic-pattern.handler.ts already establishes
+                // (day 31, month 12, hour 23/12 w/ apm, minute/second 59). Read-only against
+                // generic-pattern.handler.ts — mirrors its thresholds, does not import from it.
+                if (this.leadZeroDateTime()) {
+                    const field = this._findDateTimeFieldAt(this._maskService.maskExpression, position);
+                    if (field &&
+                        this._isFieldOverflowing(field, position, el.value, this._inputValue(), !!this.apm())) {
                         position = position + 2;
                     }
                 }
@@ -3082,6 +3100,86 @@ class NgxMaskDirective {
             this._maskService.applyValueChanges(el.value.length, this._justPasted(), this._code() === MaskExpression.BACKSPACE || this._code() === MaskExpression.DELETE);
         }
     }
+    /**
+     * #1488: locates the date/time field (DAY/MONTH/HOURS/HOUR/MINUTE/SECOND) that
+     * `position` falls within, scanning `maskExpression` left-to-right. A field spans
+     * its token plus its digit-pair companion — `0` for DAY/MONTH/MINUTE/SECOND (e.g.
+     * `d0`, `M0`, `m0`, `s0`), or `HOUR` for the combined `Hh` hour field. Matches any
+     * position from the field's first char up to and including its end (separator index),
+     * so both a still-mid-typing caret and the just-completed field are covered — the
+     * precise overflow decision (single first digit vs. completed 2-digit value) happens
+     * in `_isFieldOverflowing`. Returns null for non-date/time masks, a no-op for the caller.
+     */
+    _findDateTimeFieldAt(maskExpression, position) {
+        const dateTimeTokens = [
+            MaskExpression.DAY,
+            MaskExpression.MONTH,
+            MaskExpression.HOURS,
+            MaskExpression.HOUR,
+            MaskExpression.MINUTE,
+            MaskExpression.SECOND,
+        ];
+        let index = 0;
+        while (index < maskExpression.length) {
+            const token = maskExpression[index] ?? MaskExpression.EMPTY_STRING;
+            if (dateTimeTokens.includes(token)) {
+                const next = maskExpression[index + 1];
+                const isCombinedHour = token === MaskExpression.HOURS && next === MaskExpression.HOUR;
+                const end = next === MaskExpression.NUMBER_ZERO || isCombinedHour ? index + 2 : index + 1;
+                if (position >= index && position <= end) {
+                    return {
+                        token: token,
+                        start: index,
+                        end,
+                    };
+                }
+                index = end;
+                continue;
+            }
+            index++;
+        }
+        return null;
+    }
+    /**
+     * Per-token overflow thresholds, mirroring the ones `generic-pattern.handler.ts`
+     * already establishes (day 31, month 12, hour 23/12 w/ apm, minute/second 59) — kept
+     * as a small local table rather than importing from the handler (see design's
+     * Rejected Alternatives: the directive and the handler stay on separate sides of the
+     * display/parse boundary).
+     *
+     * Two overflow shapes are checked, mirroring how the handler itself decides mid-type:
+     * - `firstDigitValue`: when `position` is exactly one char past the field's start (the
+     *   just-typed char is the field's first digit), an out-of-range first digit alone
+     *   (e.g. month digit `3`, day digit `4`) already triggers the handler's own leadZero
+     *   pad within this same keystroke — `el.value` hasn't caught up yet at this point in
+     *   the pipeline, so the raw typed digit (`inputValue`) must be read instead.
+     * - `fieldValue`: once both digits of the field are present in `el.value`, an
+     *   out-of-range 2-digit value (e.g. day `33`, month `13`) triggers the shift directly.
+     */
+    _isFieldOverflowing(field, position, elValue, inputValue, apm) {
+        const fieldValue = Number(elValue.slice(field.start, field.end));
+        const isFirstDigitOfField = position === field.start + 1;
+        const firstDigitValue = isFirstDigitOfField
+            ? Number(inputValue.slice(position - 1, position))
+            : NaN;
+        switch (field.token) {
+            case MaskExpression.DAY:
+                return (fieldValue > 31 && fieldValue < 40) || firstDigitValue > 3;
+            case MaskExpression.MONTH:
+                return fieldValue > 12 || firstDigitValue > 1;
+            case MaskExpression.HOURS:
+                return apm
+                    ? fieldValue > 9 || firstDigitValue > 9
+                    : fieldValue > 23 || firstDigitValue > 2;
+            case MaskExpression.HOUR:
+                return apm ? fieldValue > 12 : fieldValue > 23;
+            case MaskExpression.MINUTE:
+            case MaskExpression.SECOND:
+                return fieldValue > 59 || firstDigitValue > 5;
+            default:
+                return false;
+        }
+    }
     /**
      * Whether any pattern slot of the current mask expression can accept a letter.
      * IME composition is only meaningful for such masks; for purely numeric masks
@@ -3144,7 +3242,11 @@ class NgxMaskDirective {
                             MaskExpression.NUMBER_ZERO.repeat(precision) +
                             suffix;
                     this._maskService.actualValue = el.value;
-                    this.onChange(this._maskService.actualValue);
+                    // #1634: propagate through the regular formControlResult pipeline (not a
+                    // raw onChange) so outputTransformFn runs on this blur-time reformat, same
+                    // as every typing-time emission. A raw onChange here sent the masked display
+                    // string straight to the model, bypassing outputTransformFn entirely.
+                    this._maskService.formControlResult(this._maskService.actualValue);
                 }
             }
             this._maskService.clearIfNotMatchFn();
@@ -3356,7 +3458,7 @@ class NgxMaskDirective {
         }
     }
     /** It writes the value in the input */
-    async writeValue(controlValue) {
+    writeValue(controlValue) {
         if (!this._configApplied && this.mask()) {
             // Called before the first ngOnChanges pass configured the mask service (happens with
             // Signal Forms' [formField], whose control-sync instruction runs before sibling
@@ -3570,8 +3672,23 @@ class NgxMaskDirective {
         el.selectionStart = Math.min(Math.max(prefixLength, el.selectionStart), inputValueLength - suffixLength);
         el.selectionEnd = Math.min(Math.max(prefixLength, el.selectionEnd), inputValueLength - suffixLength);
     }
-    /** It disables the input element */
+    /**
+     * It disables the input element.
+     *
+     * Mirrors `_writeElementValueSync` (#1305): the service's `formElementProperty` setter
+     * defers ALL DOM writes via `queueMicrotask` to dodge ExpressionChangedAfterItHasBeenChecked
+     * and keep FIFO ordering with config-driven re-renders. For `disabled` specifically, that
+     * deferral leaves `nativeElement.disabled` stale for at least one microtask after Angular
+     * Forms' `setUpControl` calls this method synchronously during init — long enough for a
+     * consumer reading the DOM property in the same synchronous phase (or another deferred write
+     * racing in FIFO order) to observe the wrong value, e.g. an initially-disabled FormControl
+     * whose native input briefly (or, depending on interleaving, persistently) reports
+     * `disabled === false` (#1633). Writing synchronously here closes that gap; the deferred
+     * write below still runs afterwards and re-applies the same final value, preserving the
+     * existing ordering guarantees other call sites rely on.
+     */
     setDisabledState(isDisabled) {
+        this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
         this._maskService.formElementProperty = ['disabled', isDisabled];
     }
     _applyMask() {
@@ -3784,8 +3901,8 @@ class NgxMaskDirective {
             return uniqueCharacters.size === 1;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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 }, typeFromDecimals: { classPropertyName: "typeFromDecimals", publicName: "typeFromDecimals", 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 }, defaultValueOnBlur: { classPropertyName: "defaultValueOnBlur", publicName: "defaultValueOnBlur", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 } }, 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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 }, typeFromDecimals: { classPropertyName: "typeFromDecimals", publicName: "typeFromDecimals", 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 }, defaultValueOnBlur: { classPropertyName: "defaultValueOnBlur", publicName: "defaultValueOnBlur", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 } }, 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,
@@ -3799,7 +3916,7 @@ class NgxMaskDirective {
             NgxMaskService,
         ], exportAs: ["mask", "ngxMask"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mask], textarea[mask]',
@@ -3937,10 +4054,10 @@ class NgxMaskPipe {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskPipe, isStandalone: true, name: "mask" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskPipe, isStandalone: true, name: "mask" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgxMaskPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxMaskPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mask',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mask",
-  "version": "22.0.1",
+  "version": "22.1.0",
   "description": "Input masking for modern Angular — Reactive, template-driven and Signal Forms, zoneless and SSR ready. Dates, numbers, separators, custom patterns.",
   "keywords": [
     "ng2-mask",

package/types/ngx-mask.d.ts

@@ -120,7 +120,7 @@ declare class NgxMaskApplierService {
     writingValue: boolean;
     ipError?: boolean;
     cpfCnpjError?: boolean;
-    applyMask(inputValue: string | object | boolean | null | undefined, maskExpression: string, position?: number, justPasted?: boolean, backspaced?: boolean, cb?: (...args: any[]) => any): string;
+    applyMask(inputValue: string | object | boolean | null | undefined, maskExpression: string, position?: number, justPasted?: boolean, backspaced?: boolean, cb?: (actualShift: number, backspaceShift: boolean) => void): string;
     _findDropSpecialChar(inputSymbol: string): undefined | string;
     _findSpecialChar(inputSymbol: string): undefined | string;
     _checkSymbolMask(inputSymbol: string, maskSymbol: string): boolean;
@@ -177,7 +177,7 @@ declare class NgxMaskService extends NgxMaskApplierService {
     private _emitValue;
     private _start;
     private _end;
-    onChange: (_: any) => void;
+    onChange: (_: unknown) => void;
     readonly _elementRef: ElementRef<any> | null;
     private readonly document;
     protected _config: NgxMaskConfig;
@@ -192,9 +192,9 @@ declare class NgxMaskService extends NgxMaskApplierService {
      * @param cb Callback function.
      * @returns The masked value.
      */
-    applyMask(inputValue: string, maskExpression: string, position?: number, justPasted?: boolean, backspaced?: boolean, cb?: (...args: any[]) => any): string;
+    applyMask(inputValue: string, maskExpression: string, position?: number, justPasted?: boolean, backspaced?: boolean, cb?: (actualShift: number, backspaceShift: boolean) => void): string;
     private _numberSkipedSymbols;
-    applyValueChanges(position: number, justPasted: boolean, backspaced: boolean, cb?: (...args: any[]) => any): void;
+    applyValueChanges(position: number, justPasted: boolean, backspaced: boolean, cb?: (actualShift: number, backspaceShift: boolean) => void): void;
     hideInput(inputValue: string, maskExpression: string): string;
     getActualValue(res: string): string;
     shiftTypedSymbols(inputValue: string): string;
@@ -231,7 +231,7 @@ declare class NgxMaskService extends NgxMaskApplierService {
      * model value too. Therefore, we don't trigger onChange in this scenario.
      * @param inputValue the current form input value
      */
-    private formControlResult;
+    formControlResult(inputValue: string): void;
     private _toNumber;
     private _removeMask;
     private _removePrefix;
@@ -380,7 +380,7 @@ declare class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valid
     private readonly _injector;
     private _ngControl;
     private _resolveNgControl;
-    onChange: (_: any) => void;
+    onChange: (_: unknown) => void;
     onTouch: () => void;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
@@ -389,6 +389,34 @@ declare class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valid
     onFocus(): void;
     onModelChange(value: unknown): void;
     onInput(e: Event): void;
+    /**
+     * #1488: locates the date/time field (DAY/MONTH/HOURS/HOUR/MINUTE/SECOND) that
+     * `position` falls within, scanning `maskExpression` left-to-right. A field spans
+     * its token plus its digit-pair companion — `0` for DAY/MONTH/MINUTE/SECOND (e.g.
+     * `d0`, `M0`, `m0`, `s0`), or `HOUR` for the combined `Hh` hour field. Matches any
+     * position from the field's first char up to and including its end (separator index),
+     * so both a still-mid-typing caret and the just-completed field are covered — the
+     * precise overflow decision (single first digit vs. completed 2-digit value) happens
+     * in `_isFieldOverflowing`. Returns null for non-date/time masks, a no-op for the caller.
+     */
+    private _findDateTimeFieldAt;
+    /**
+     * Per-token overflow thresholds, mirroring the ones `generic-pattern.handler.ts`
+     * already establishes (day 31, month 12, hour 23/12 w/ apm, minute/second 59) — kept
+     * as a small local table rather than importing from the handler (see design's
+     * Rejected Alternatives: the directive and the handler stay on separate sides of the
+     * display/parse boundary).
+     *
+     * Two overflow shapes are checked, mirroring how the handler itself decides mid-type:
+     * - `firstDigitValue`: when `position` is exactly one char past the field's start (the
+     *   just-typed char is the field's first digit), an out-of-range first digit alone
+     *   (e.g. month digit `3`, day digit `4`) already triggers the handler's own leadZero
+     *   pad within this same keystroke — `el.value` hasn't caught up yet at this point in
+     *   the pipeline, so the raw typed digit (`inputValue`) must be read instead.
+     * - `fieldValue`: once both digits of the field are present in `el.value`, an
+     *   out-of-range 2-digit value (e.g. day `33`, month `13`) triggers the shift directly.
+     */
+    private _isFieldOverflowing;
     /**
      * Whether any pattern slot of the current mask expression can accept a letter.
      * IME composition is only meaningful for such masks; for purely numeric masks
@@ -424,7 +452,7 @@ declare class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valid
      */
     private _restoreControlStateAfterWrite;
     /** It writes the value in the input */
-    writeValue(controlValue: unknown): Promise<void>;
+    writeValue(controlValue: unknown): void;
     /**
      * Mirrors a writeValue-driven render into the DOM synchronously, in the same
      * change-detection pass (#1305). The service's `formElementProperty` setter defers all
@@ -460,7 +488,21 @@ declare class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valid
     focus(): void;
     private _getActiveElement;
     checkSelectionOnDeletion(el: HTMLInputElement): void;
-    /** It disables the input element */
+    /**
+     * It disables the input element.
+     *
+     * Mirrors `_writeElementValueSync` (#1305): the service's `formElementProperty` setter
+     * defers ALL DOM writes via `queueMicrotask` to dodge ExpressionChangedAfterItHasBeenChecked
+     * and keep FIFO ordering with config-driven re-renders. For `disabled` specifically, that
+     * deferral leaves `nativeElement.disabled` stale for at least one microtask after Angular
+     * Forms' `setUpControl` calls this method synchronously during init — long enough for a
+     * consumer reading the DOM property in the same synchronous phase (or another deferred write
+     * racing in FIFO order) to observe the wrong value, e.g. an initially-disabled FormControl
+     * whose native input briefly (or, depending on interleaving, persistently) reports
+     * `disabled === false` (#1633). Writing synchronously here closes that gap; the deferred
+     * write below still runs afterwards and re-applies the same final value, preserving the
+     * existing ordering guarantees other call sites rely on.
+     */
     setDisabledState(isDisabled: boolean): void;
     private _applyMask;
     /**