ngx-mask 22.2.1 → 22.2.3

package/fesm2022/ngx-mask.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, inject, Injectable, signal, ElementRef, Renderer2, makeEnvironmentProviders, input, model, booleanAttribute, output, ChangeDetectorRef, Injector, effect, untracked, HostListener, Directive, Pipe } from '@angular/core';
+import { InjectionToken, EventEmitter, inject, Injectable, signal, ElementRef, Renderer2, makeEnvironmentProviders, input, model, booleanAttribute, output, ChangeDetectorRef, Injector, effect, untracked, HostListener, Directive, EnvironmentInjector, Pipe } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 
@@ -204,6 +204,22 @@ const cpfCnpjHandler = function (state, params) {
     return state;
 };
 
+/** Punctuation the built-in email mask accepts besides `[a-zA-Z0-9]` (#1668). */
+const EMAIL_AT = '@';
+const EMAIL_LOCAL_PUNCTUATION = '._+-';
+const EMAIL_DOMAIN_PUNCTUATION = '.-';
+/**
+ * Whether `inputSymbol` is allowed email punctuation after `result` (the text accepted so far).
+ * Punctuation cannot be the first character of the address, and '..' is blocked.
+ */
+function isEmailPunctuation(inputSymbol, result) {
+    const allowed = result.includes(EMAIL_AT) ? EMAIL_DOMAIN_PUNCTUATION : EMAIL_LOCAL_PUNCTUATION;
+    const last = result.slice(-1);
+    return (allowed.includes(inputSymbol) &&
+        last !== MaskExpression.EMPTY_STRING &&
+        last !== EMAIL_AT &&
+        !(inputSymbol === MaskExpression.DOT && last === MaskExpression.DOT));
+}
 /**
  * Generic character-by-character pattern loop (moved verbatim from applyMask,
  * original lines 581-968). This is the default/fallback handler — always runs when
@@ -506,6 +522,12 @@ const genericPatternHandler = function (state, params) {
             cursor += 3;
             result += inputSymbol;
         }
+        else if (maskExpression === MaskExpression.EMAIL_MASK &&
+            isEmailPunctuation(inputSymbol, result)) {
+            // #1668: 'A' only matches [a-zA-Z0-9], so the punctuation real addresses carry
+            // would be dropped. Keep it inside the current 'A*' run (cursor is unchanged).
+            result += inputSymbol;
+        }
         else if (this.showMaskTyped &&
             this.specialCharacters.indexOf(inputSymbol) < 0 &&
             inputSymbol !== this.placeHolderCharacter &&
@@ -1377,9 +1399,7 @@ class NgxMaskService extends NgxMaskApplierService {
                 if (this._emitValue && this.triggerOnMaskChange) {
                     this.formControlResult(rawValue);
                 }
-                if (!this.triggerOnMaskChange) {
-                    this.maskChanged = false;
-                }
+                this._clearMaskChangedUnlessTriggered();
                 return rawValue;
             }
             return inputValue !== this.actualValue ? this.actualValue : inputValue;
@@ -1607,9 +1627,7 @@ class NgxMaskService extends NgxMaskApplierService {
             this.formControlResult(result);
         }
         // Reset maskChanged flag even if we didn't emit
-        if (this.maskChanged && !this.triggerOnMaskChange) {
-            this.maskChanged = false;
-        }
+        this._clearMaskChangedUnlessTriggered();
         // Handle hidden input and showMaskTyped
         if (!this.showMaskTyped || (this.showMaskTyped && this.hiddenInput)) {
             if (this.hiddenInput) {
@@ -1820,6 +1838,16 @@ class NgxMaskService extends NgxMaskApplierService {
             .filter((item) => this._findDropSpecialChar(item));
         return chars.length;
     }
+    /**
+     * Consumes a pending `maskChanged` once a render has handled the reconfiguration, unless
+     * `triggerOnMaskChange` still needs it to emit the re-masked value (formControlResult clears
+     * it then).
+     */
+    _clearMaskChangedUnlessTriggered() {
+        if (!this.triggerOnMaskChange) {
+            this.maskChanged = false;
+        }
+    }
     removeMask(inputValue) {
         return this._removeMask(this._removeSuffix(this._removePrefix(inputValue)), this.specialCharacters.concat('_').concat(this.placeHolderCharacter));
     }
@@ -1973,11 +2001,15 @@ class NgxMaskService extends NgxMaskApplierService {
                 .split(this.placeHolderCharacter)
                 .join(MaskExpression.EMPTY_STRING);
         }
-        if (Array.isArray(this.dropSpecialCharacters)) {
+        // #1668: an email address is meaningless without its '@' and '.', so the built-in
+        // email mask always reports the full address, whatever dropSpecialCharacters says.
+        const keepSpecialCharacters = this.maskExpression === MaskExpression.EMAIL_MASK;
+        if (Array.isArray(this.dropSpecialCharacters) && !keepSpecialCharacters) {
             this.onChange(outputTransformFn(this._toNumber(this._checkSymbols(this._removeMask(this._removeSuffix(this._removePrefix(inputValue)), this.dropSpecialCharacters)))));
         }
-        else if (this.dropSpecialCharacters ||
-            (!this.dropSpecialCharacters && this.prefix === inputValue)) {
+        else if (!keepSpecialCharacters &&
+            (this.dropSpecialCharacters ||
+                (!this.dropSpecialCharacters && this.prefix === inputValue))) {
             this.onChange(outputTransformFn(this._toNumber(this._checkSymbols(this._removeSuffix(this._removePrefix(inputValue))))));
         }
         else {
@@ -2351,7 +2383,8 @@ class NgxMaskDirective {
      * originated from the view. Re-masking that unmasked echo is at best a redundant re-render
      * and at worst destructive for masks whose unmasked form is ambiguous (e.g. IP:
      * '192168178' cannot reconstruct the typed dots of '192.168.1.78'). `writeValue()` consumes
-     * this marker to skip exactly that echo. `null` = no pending propagation.
+     * this marker to skip exactly that echo; ngOnChanges reads it to recognise a `[value]`
+     * binding echo of it (#1671). `null` = no pending propagation.
      */
     _lastPropagatedValue = null;
     /**
@@ -2423,15 +2456,11 @@ class NgxMaskDirective {
         effect(() => {
             const signalValue = this.value();
             untracked(() => {
-                if (this._isCvaMode()) {
-                    return;
+                if (this._valueEffectWillWrite(signalValue)) {
+                    this.writeValue(signalValue);
                 }
-                if (this._skipNextValueEffect()) {
+                else {
                     this._skipNextValueEffect.set(false);
-                    return;
-                }
-                if (String(signalValue) !== String(this._inputValue())) {
-                    this.writeValue(signalValue);
                 }
             });
         });
@@ -2591,7 +2620,20 @@ class NgxMaskDirective {
         if (keepCharacterPositions) {
             this._maskService.keepCharacterPositions = keepCharacterPositions.currentValue;
         }
-        this._applyMask();
+        // #1671: a standalone `[(value)]` change reaches ngOnChanges BEFORE the value effect
+        // writes it, so `_inputValue` still holds the PREVIOUS value here. Re-rendering it would
+        // run applyMask on stale input, and whatever that emits (the showMaskTyped skeleton's
+        // '', a hiddenInput / keepCharacterPositions reconstruction) flows back through onChange,
+        // overwrites the freshly bound model and makes the effect skip the real write. When the
+        // effect is about to render the new value via writeValue() anyway, only apply the mask
+        // configuration here. The effect only runs when the `value` SIGNAL changes: a parent
+        // re-binding the value we last propagated (an echo, possibly applied in a later task)
+        // changes the binding but not the signal, which already holds it — that pass renders.
+        const valueChange = changes['value'];
+        const valueEffectWillRender = !!valueChange &&
+            String(valueChange.currentValue) !== this._lastPropagatedValue &&
+            this._valueEffectWillWrite(valueChange.currentValue);
+        this._applyMask(!valueEffectWillRender);
         if (!this._configApplied) {
             this._configApplied = true;
             if (this._hasPendingInitialValue) {
@@ -3713,6 +3755,18 @@ class NgxMaskDirective {
             }
         });
     }
+    /**
+     * Whether the `value`-model effect will render `value` itself via writeValue(): only in
+     * standalone `[(value)]` / Signal Forms mode (Angular's writeValue owns rendering in CVA mode), not for
+     * the model echo of our own onChange propagation (`_skipNextValueEffect`), and only when it
+     * differs from what is already rendered. Shared with ngOnChanges (#1671), which must leave
+     * exactly that render to the effect.
+     */
+    _valueEffectWillWrite(value) {
+        return (!this._isCvaMode() &&
+            !this._skipNextValueEffect() &&
+            String(value) !== String(this._inputValue()));
+    }
     /**
      * Focus the input element.
      * Required by FormValueControl interface for Signal Forms.
@@ -3755,8 +3809,16 @@ class NgxMaskDirective {
         this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
         this._maskService.formElementProperty = ['disabled', isDisabled];
     }
-    _applyMask() {
+    _applyMask(renderInputValue) {
         this._maskService.maskExpression = this._maskService._repeatPatternSymbols(this._maskValue() || '');
+        if (!renderInputValue) {
+            // Consume the one-shot flags ngOnChanges set for THIS render, as applyMask would:
+            // writingValue (thousandSeparator change) and maskChanged (mask change). Nothing
+            // else clears them when the following writeValue() takes its no-applyMask branch.
+            this._maskService.writingValue = false;
+            this._maskService._clearMaskChangedUnlessTriggered();
+            return;
+        }
         this._maskService.formElementProperty = [
             'value',
             this._maskedOrVerbatim(this._inputValue()),
@@ -4033,11 +4095,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
 class NgxMaskPipe {
     defaultOptions = inject(NGX_MASK_CONFIG);
-    _maskService = inject(NgxMaskService);
+    _environmentInjector = inject(EnvironmentInjector);
+    _maskService;
     _maskExpressionArray = [];
     mask = '';
     transform(value, mask, { patterns, maskAliases, ...config } = {}) {
         let processedValue = value;
+        // NgxMaskService is stateful (built for the directive, which keeps value history across
+        // keystrokes), so each transform gets a fresh instance: nothing from a previous call can
+        // leak into this one (#1669).
+        this._maskService = Injector.create({
+            providers: [
+                NgxMaskService,
+                { provide: NGX_MASK_CONFIG, useValue: this.defaultOptions },
+            ],
+            parent: this._environmentInjector,
+        }).get(NgxMaskService);
         // User-defined aliases expand BEFORE any other mask processing (incl. `||` handling).
         const resolvedMask = resolveMaskAlias(mask, {
             ...this.defaultOptions.maskAliases,
@@ -4048,7 +4121,7 @@ class NgxMaskPipe {
             ...this.defaultOptions,
             ...config,
             patterns: {
-                ...this._maskService.patterns,
+                ...this.defaultOptions.patterns,
                 ...patterns,
             },
         };
@@ -4096,7 +4169,6 @@ class NgxMaskPipe {
             if (this._maskService.decimalMarker === MaskExpression.COMMA) {
                 processedValue = processedValue.replace(MaskExpression.DOT, MaskExpression.COMMA);
             }
-            this._maskService.isNumberValue = true;
         }
         if (processedValue === null || typeof processedValue === 'undefined') {
             return this._maskService.applyMask('', resolvedMask);