ngx-mask 22.0.2 → 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'),
@@ -1664,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;
         })
@@ -2973,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;
                     }
                 }
@@ -3078,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mask",
-  "version": "22.0.2",
+  "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

@@ -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