ngx-mask 16.2.8 → 16.2.9

package/fesm2022/ngx-mask.mjs

@@ -27,6 +27,8 @@ const initialConfig = {
     apm: false,
     leadZero: false,
     triggerOnMaskChange: false,
+    inputTransformFn: (value) => value,
+    outputTransformFn: (value) => value,
     maskFilled: new EventEmitter(),
     patterns: {
         '0': {
@@ -109,6 +111,8 @@ class NgxMaskApplierService {
         this.leadZeroDateTime = this._config.leadZeroDateTime;
         this.leadZero = this._config.leadZero;
         this.apm = this._config.apm;
+        this.inputTransformFn = this._config.inputTransformFn;
+        this.outputTransformFn = this._config.outputTransformFn;
         this._shift = new Set();
         this.maskExpression = '';
         this.actualValue = '';
@@ -1118,20 +1122,20 @@ class NgxMaskService extends NgxMaskApplierService {
     formControlResult(inputValue) {
         if (this.writingValue || (!this.triggerOnMaskChange && this.maskChanged)) {
             this.maskChanged
-                ? this.onChange(this._toNumber(this._checkSymbols(this._removeSuffix(this._removePrefix(inputValue)))))
+                ? this.onChange(this.outputTransformFn(this._toNumber(this._checkSymbols(this._removeSuffix(this._removePrefix(inputValue))))))
                 : '';
             this.maskChanged = false;
             return;
         }
         if (Array.isArray(this.dropSpecialCharacters)) {
-            this.onChange(this._toNumber(this._checkSymbols(this._removeMask(this._removeSuffix(this._removePrefix(inputValue)), this.dropSpecialCharacters))));
+            this.onChange(this.outputTransformFn(this._toNumber(this._checkSymbols(this._removeMask(this._removeSuffix(this._removePrefix(inputValue)), this.dropSpecialCharacters)))));
         }
         else if (this.dropSpecialCharacters ||
             (!this.dropSpecialCharacters && this.prefix === inputValue)) {
-            this.onChange(this._toNumber(this._checkSymbols(this._removeSuffix(this._removePrefix(inputValue)))));
+            this.onChange(this.outputTransformFn(this._toNumber(this._checkSymbols(this._removeSuffix(this._removePrefix(inputValue))))));
         }
         else {
-            this.onChange(this._toNumber(inputValue));
+            this.onChange(this.outputTransformFn(this._toNumber(inputValue)));
         }
     }
     _toNumber(value) {
@@ -1319,6 +1323,8 @@ class NgxMaskDirective {
         this.leadZero = null;
         this.triggerOnMaskChange = null;
         this.apm = null;
+        this.inputTransformFn = null;
+        this.outputTransformFn = null;
         this.maskFilled = new EventEmitter();
         this._maskValue = '';
         this._position = null;
@@ -1335,7 +1341,7 @@ class NgxMaskDirective {
         this.onTouch = () => { };
     }
     ngOnChanges(changes) {
-        const { maskExpression, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, showTemplate, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, } = changes;
+        const { maskExpression, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, showTemplate, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, } = changes;
         if (maskExpression) {
             if (maskExpression.currentValue !== maskExpression.previousValue &&
                 !maskExpression.firstChange) {
@@ -1426,6 +1432,12 @@ class NgxMaskDirective {
         if (triggerOnMaskChange) {
             this._maskService.triggerOnMaskChange = triggerOnMaskChange.currentValue;
         }
+        if (inputTransformFn) {
+            this._maskService.inputTransformFn = inputTransformFn.currentValue;
+        }
+        if (outputTransformFn) {
+            this._maskService.outputTransformFn = outputTransformFn.currentValue;
+        }
         this._applyMask();
     }
     // eslint-disable-next-line complexity
@@ -1558,67 +1570,74 @@ class NgxMaskDirective {
         if (this._isComposing)
             return;
         const el = e.target;
-        this._inputValue = el.value;
-        this._setMask();
-        if (!this._maskValue) {
-            this.onChange(el.value);
-            return;
-        }
-        let position = el.selectionStart === 1
-            ? el.selectionStart + this._maskService.prefix.length
-            : el.selectionStart;
-        let caretShift = 0;
-        let backspaceShift = false;
-        if (this._code === "Delete" /* MaskExpression.DELETE */ && "separator" /* MaskExpression.SEPARATOR */) {
-            this._maskService.deletedSpecialCharacter = true;
-        }
-        if (this._inputValue.length >= this._maskService.maskExpression.length - 1 &&
-            this._code !== "Backspace" /* MaskExpression.BACKSPACE */ &&
-            this._maskService.maskExpression === "d0/M0/0000" /* MaskExpression.DAYS_MONTHS_YEARS */ &&
-            position < 10) {
-            const inputSymbol = this._inputValue.slice(position - 1, position);
-            el.value =
-                this._inputValue.slice(0, position - 1) +
-                    inputSymbol +
-                    this._inputValue.slice(position + 1);
-        }
-        this._maskService.applyValueChanges(position, this._justPasted, this._code === "Backspace" /* MaskExpression.BACKSPACE */ || this._code === "Delete" /* MaskExpression.DELETE */, (shift, _backspaceShift) => {
-            this._justPasted = false;
-            caretShift = shift;
-            backspaceShift = _backspaceShift;
-        });
-        // only set the selection if the element is active
-        if (this._getActiveElement() !== el) {
-            return;
-        }
-        // 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 */) {
-                position = this.specialCharacters.includes(this._inputValue.slice(position - 1, position))
-                    ? position - 1
-                    : position;
+        const transformedValue = this._maskService.inputTransformFn(el.value);
+        if (typeof transformedValue === 'string' || typeof transformedValue === 'number') {
+            el.value = transformedValue.toString();
+            this._inputValue = el.value;
+            this._setMask();
+            if (!this._maskValue) {
+                this.onChange(el.value);
+                return;
             }
-            else {
-                position =
-                    el.selectionStart === 1
-                        ? el.selectionStart + this._maskService.prefix.length
-                        : el.selectionStart;
+            let position = el.selectionStart === 1
+                ? el.selectionStart + this._maskService.prefix.length
+                : el.selectionStart;
+            let caretShift = 0;
+            let backspaceShift = false;
+            if (this._code === "Delete" /* MaskExpression.DELETE */ && "separator" /* MaskExpression.SEPARATOR */) {
+                this._maskService.deletedSpecialCharacter = true;
+            }
+            if (this._inputValue.length >= this._maskService.maskExpression.length - 1 &&
+                this._code !== "Backspace" /* MaskExpression.BACKSPACE */ &&
+                this._maskService.maskExpression === "d0/M0/0000" /* MaskExpression.DAYS_MONTHS_YEARS */ &&
+                position < 10) {
+                const inputSymbol = this._inputValue.slice(position - 1, position);
+                el.value =
+                    this._inputValue.slice(0, position - 1) +
+                        inputSymbol +
+                        this._inputValue.slice(position + 1);
+            }
+            this._maskService.applyValueChanges(position, this._justPasted, this._code === "Backspace" /* MaskExpression.BACKSPACE */ || this._code === "Delete" /* MaskExpression.DELETE */, (shift, _backspaceShift) => {
+                this._justPasted = false;
+                caretShift = shift;
+                backspaceShift = _backspaceShift;
+            });
+            // only set the selection if the element is active
+            if (this._getActiveElement() !== el) {
+                return;
             }
+            // 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 */) {
+                    position = this.specialCharacters.includes(this._inputValue.slice(position - 1, position))
+                        ? position - 1
+                        : position;
+                }
+                else {
+                    position =
+                        el.selectionStart === 1
+                            ? el.selectionStart + this._maskService.prefix.length
+                            : el.selectionStart;
+                }
+            }
+            this._position =
+                this._position === 1 && this._inputValue.length === 1 ? null : this._position;
+            let positionToApply = this._position
+                ? this._inputValue.length + position + caretShift
+                : position +
+                    (this._code === "Backspace" /* MaskExpression.BACKSPACE */ && !backspaceShift ? 0 : caretShift);
+            if (positionToApply > this._getActualInputLength()) {
+                positionToApply = this._getActualInputLength();
+            }
+            if (positionToApply < 0) {
+                positionToApply = 0;
+            }
+            el.setSelectionRange(positionToApply, positionToApply);
+            this._position = null;
         }
-        this._position =
-            this._position === 1 && this._inputValue.length === 1 ? null : this._position;
-        let positionToApply = this._position
-            ? this._inputValue.length + position + caretShift
-            : position +
-                (this._code === "Backspace" /* MaskExpression.BACKSPACE */ && !backspaceShift ? 0 : caretShift);
-        if (positionToApply > this._getActualInputLength()) {
-            positionToApply = this._getActualInputLength();
-        }
-        if (positionToApply < 0) {
-            positionToApply = 0;
+        else {
+            console.warn('Ngx-mask writeValue work with string | number, your current value:', typeof transformedValue);
         }
-        el.setSelectionRange(positionToApply, positionToApply);
-        this._position = null;
     }
     // IME starts
     onCompositionStart() {
@@ -1781,68 +1800,87 @@ class NgxMaskDirective {
         this._maskService.selEnd = el.selectionEnd;
     }
     /** It writes the value in the input */
-    async writeValue(inputValue) {
-        if (typeof inputValue === 'object' && inputValue !== null && 'value' in inputValue) {
-            if ('disable' in inputValue) {
-                this.setDisabledState(Boolean(inputValue.disable));
+    async writeValue(controlValue) {
+        if (typeof controlValue === 'object' && controlValue !== null && 'value' in controlValue) {
+            if ('disable' in controlValue) {
+                this.setDisabledState(Boolean(controlValue.disable));
             }
             // eslint-disable-next-line no-param-reassign
-            inputValue = inputValue.value;
+            controlValue = controlValue.value;
         }
-        if (typeof inputValue === 'number' ||
-            this._maskValue.startsWith("separator" /* MaskExpression.SEPARATOR */)) {
+        if (controlValue !== null) {
             // eslint-disable-next-line no-param-reassign
-            inputValue = String(inputValue);
-            const localeDecimalMarker = this._maskService.currentLocaleDecimalMarker();
-            if (!Array.isArray(this._maskService.decimalMarker)) {
-                // eslint-disable-next-line no-param-reassign
-                inputValue =
-                    this._maskService.decimalMarker !== localeDecimalMarker
-                        ? inputValue.replace(localeDecimalMarker, this._maskService.decimalMarker)
-                        : inputValue;
-            }
-            if (this._maskService.leadZero &&
-                inputValue &&
-                this.maskExpression &&
-                this.dropSpecialCharacters !== false) {
+            controlValue = this.inputTransformFn
+                ? this.inputTransformFn(controlValue)
+                : controlValue;
+        }
+        if (typeof controlValue === 'string' ||
+            typeof controlValue === 'number' ||
+            controlValue === null) {
+            // eslint-disable-next-line no-param-reassign
+            let inputValue = controlValue;
+            if (typeof inputValue === 'number' ||
+                this._maskValue.startsWith("separator" /* MaskExpression.SEPARATOR */)) {
                 // eslint-disable-next-line no-param-reassign
-                inputValue = this._maskService._checkPrecision(this.maskExpression.toString(), inputValue);
+                inputValue = String(inputValue);
+                const localeDecimalMarker = this._maskService.currentLocaleDecimalMarker();
+                if (!Array.isArray(this._maskService.decimalMarker)) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue =
+                        this._maskService.decimalMarker !== localeDecimalMarker
+                            ? inputValue.replace(localeDecimalMarker, this._maskService.decimalMarker)
+                            : inputValue;
+                }
+                if (this._maskService.leadZero &&
+                    inputValue &&
+                    this.maskExpression &&
+                    this.dropSpecialCharacters !== false) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue = this._maskService._checkPrecision(this.maskExpression.toString(), inputValue);
+                }
+                if (this._maskService.decimalMarker === "," /* MaskExpression.COMMA */) {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue = inputValue
+                        .toString()
+                        .replace("." /* MaskExpression.DOT */, "," /* MaskExpression.COMMA */);
+                }
+                if (this.maskExpression?.startsWith("separator" /* MaskExpression.SEPARATOR */) && this.leadZero) {
+                    requestAnimationFrame(() => {
+                        this._maskService.applyMask(inputValue?.toString() ?? '', this._maskService.maskExpression);
+                    });
+                }
+                this._maskService.isNumberValue = true;
             }
-            if (this._maskService.decimalMarker === "," /* MaskExpression.COMMA */) {
+            if (typeof inputValue !== 'string') {
                 // eslint-disable-next-line no-param-reassign
-                inputValue = inputValue
-                    .toString()
-                    .replace("." /* MaskExpression.DOT */, "," /* MaskExpression.COMMA */);
+                inputValue = '';
+            }
+            this._inputValue = inputValue;
+            this._setMask();
+            if ((inputValue && this._maskService.maskExpression) ||
+                (this._maskService.maskExpression &&
+                    (this._maskService.prefix || this._maskService.showMaskTyped))) {
+                // Let the service we know we are writing value so that triggering onChange function won't happen during applyMask
+                typeof this.inputTransformFn !== 'function'
+                    ? (this._maskService.writingValue = true)
+                    : '';
+                this._maskService.formElementProperty = [
+                    'value',
+                    this._maskService.applyMask(inputValue, this._maskService.maskExpression),
+                ];
+                // Let the service know we've finished writing value
+                typeof this.inputTransformFn !== 'function'
+                    ? (this._maskService.writingValue = false)
+                    : '';
             }
-            if (this.maskExpression?.startsWith("separator" /* MaskExpression.SEPARATOR */) && this.leadZero) {
-                requestAnimationFrame(() => {
-                    this._maskService.applyMask(inputValue.toString(), this._maskService.maskExpression);
-                });
+            else {
+                this._maskService.formElementProperty = ['value', inputValue];
             }
-            this._maskService.isNumberValue = true;
-        }
-        if (typeof inputValue !== 'string') {
-            // eslint-disable-next-line no-param-reassign
-            inputValue = '';
-        }
-        this._inputValue = inputValue;
-        this._setMask();
-        if ((inputValue && this._maskService.maskExpression) ||
-            (this._maskService.maskExpression &&
-                (this._maskService.prefix || this._maskService.showMaskTyped))) {
-            // Let the service we know we are writing value so that triggering onChange function won't happen during applyMask
-            this._maskService.writingValue = true;
-            this._maskService.formElementProperty = [
-                'value',
-                this._maskService.applyMask(inputValue, this._maskService.maskExpression),
-            ];
-            // Let the service know we've finished writing value
-            this._maskService.writingValue = false;
+            this._inputValue = inputValue;
         }
         else {
-            this._maskService.formElementProperty = ['value', inputValue];
+            console.warn('Ngx-mask writeValue work with string | number, your current value:', typeof controlValue);
         }
-        this._inputValue = inputValue;
     }
     registerOnChange(fn) {
         this._maskService.onChange = this.onChange = fn;
@@ -1944,7 +1982,7 @@ class NgxMaskDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.8", type: NgxMaskDirective, isStandalone: true, 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" }, 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: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.8", type: NgxMaskDirective, isStandalone: true, 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" }, 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NgxMaskDirective,
@@ -2021,6 +2059,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
                 type: Input
             }], apm: [{
                 type: Input
+            }], inputTransformFn: [{
+                type: Input
+            }], outputTransformFn: [{
+                type: Input
             }], maskFilled: [{
                 type: Output
             }], onPaste: [{