ngx-mask 16.2.4 → 16.2.6

package/fesm2022/ngx-mask.mjs

@@ -24,6 +24,7 @@ const initialConfig = {
     // eslint-disable-next-line @typescript-eslint/quotes
     specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
     leadZeroDateTime: false,
+    apm: false,
     leadZero: false,
     triggerOnMaskChange: false,
     maskFilled: new EventEmitter(),
@@ -107,6 +108,7 @@ class NgxMaskApplierService {
         this.allowNegativeNumbers = this._config.allowNegativeNumbers;
         this.leadZeroDateTime = this._config.leadZeroDateTime;
         this.leadZero = this._config.leadZero;
+        this.apm = this._config.apm;
         this._shift = new Set();
         this.maskExpression = '';
         this.actualValue = '';
@@ -148,7 +150,9 @@ class NgxMaskApplierService {
             return res + decimals.substring(0, precision + 1);
         };
         this.percentage = (str) => {
-            return Number(str) >= 0 && Number(str) <= 100;
+            const sanitizedStr = str.replace(',', '.');
+            const value = Number(sanitizedStr);
+            return !isNaN(value) && value >= 0 && value <= 100;
         };
         this.getPrecision = (maskExpression) => {
             const x = maskExpression.split("." /* MaskExpression.DOT */);
@@ -255,22 +259,24 @@ class NgxMaskApplierService {
         if (maskExpression.startsWith("percent" /* MaskExpression.PERCENT */)) {
             if (inputValue.match('[a-z]|[A-Z]') ||
                 // eslint-disable-next-line no-useless-escape
-                inputValue.match(/[-!$%^&*()_+|~=`{}\[\]:";'<>?,\/.]/)) {
+                (inputValue.match(/[-!$%^&*()_+|~=`{}\[\]:";'<>?,\/.]/) && !backspaced)) {
                 // eslint-disable-next-line no-param-reassign
                 inputValue = this._stripToDecimal(inputValue);
                 const precision = this.getPrecision(maskExpression);
                 // eslint-disable-next-line no-param-reassign
                 inputValue = this.checkInputPrecision(inputValue, precision, this.decimalMarker);
             }
-            if (inputValue.indexOf("." /* MaskExpression.DOT */) > 0 &&
-                !this.percentage(inputValue.substring(0, inputValue.indexOf("." /* MaskExpression.DOT */)))) {
-                let base = inputValue.substring(0, inputValue.indexOf("." /* MaskExpression.DOT */) - 1);
+            const decimalMarker = typeof this.decimalMarker === 'string' ? this.decimalMarker : "." /* MaskExpression.DOT */;
+            if (inputValue.indexOf(decimalMarker) > 0 &&
+                !this.percentage(inputValue.substring(0, inputValue.indexOf(decimalMarker)))) {
+                let base = inputValue.substring(0, inputValue.indexOf(decimalMarker) - 1);
                 if (this.allowNegativeNumbers &&
-                    inputValue.slice(cursor, cursor + 1) === "-" /* MaskExpression.MINUS */) {
-                    base = inputValue.substring(0, inputValue.indexOf("." /* MaskExpression.DOT */));
+                    inputValue.slice(cursor, cursor + 1) === "-" /* MaskExpression.MINUS */ &&
+                    !backspaced) {
+                    base = inputValue.substring(0, inputValue.indexOf(decimalMarker));
                 }
                 // eslint-disable-next-line no-param-reassign
-                inputValue = `${base}${inputValue.substring(inputValue.indexOf("." /* MaskExpression.DOT */), inputValue.length)}`;
+                inputValue = `${base}${inputValue.substring(inputValue.indexOf(decimalMarker), inputValue.length)}`;
             }
             let value = '';
             this.allowNegativeNumbers &&
@@ -343,6 +349,12 @@ class NgxMaskApplierService {
                     _shift++;
                 } while (_shift < shiftStep);
             }
+            else if (result[position - 1] === this.decimalMarker ||
+                shiftStep === -4 ||
+                shiftStep === -3) {
+                this._shift.clear();
+                this._shift.add(position - 1);
+            }
             else if ((commaShift !== 0 &&
                 position > 0 &&
                 !(result.indexOf("," /* MaskExpression.COMMA */) >= position && position > 3)) ||
@@ -392,7 +404,7 @@ class NgxMaskApplierService {
                 }
                 else if (this._checkSymbolMask(inputSymbol, maskExpression[cursor] ?? "" /* MaskExpression.EMPTY_STRING */)) {
                     if (maskExpression[cursor] === "H" /* MaskExpression.HOURS */) {
-                        if (Number(inputSymbol) > 2) {
+                        if (this.apm ? Number(inputSymbol) > 9 : Number(inputSymbol) > 2) {
                             // eslint-disable-next-line no-param-reassign
                             position = position + 1;
                             cursor += 1;
@@ -405,13 +417,20 @@ class NgxMaskApplierService {
                         }
                     }
                     if (maskExpression[cursor] === "h" /* MaskExpression.HOUR */) {
-                        if ((result === '2' && Number(inputSymbol) > 3) ||
-                            ((result.slice(cursor - 2, cursor) === '2' ||
-                                result.slice(cursor - 3, cursor) === '2' ||
-                                result.slice(cursor - 4, cursor) === '2' ||
-                                result.slice(cursor - 1, cursor) === '2') &&
-                                Number(inputSymbol) > 3 &&
-                                cursor > 10)) {
+                        if (this.apm
+                            ? (result.length === 1 && Number(result) > 1) ||
+                                (result === '1' && Number(inputSymbol) > 1) ||
+                                (inputValue.slice(cursor - 1, cursor).length === 1 &&
+                                    Number(inputValue.slice(cursor - 1, cursor)) > 1) ||
+                                (inputValue.slice(cursor - 1, cursor) === '1' &&
+                                    Number(inputSymbol) > 1)
+                            : (result === '2' && Number(inputSymbol) > 3) ||
+                                ((result.slice(cursor - 2, cursor) === '2' ||
+                                    result.slice(cursor - 3, cursor) === '2' ||
+                                    result.slice(cursor - 4, cursor) === '2' ||
+                                    result.slice(cursor - 1, cursor) === '2') &&
+                                    Number(inputSymbol) > 3 &&
+                                    cursor > 10)) {
                             // eslint-disable-next-line no-param-reassign
                             position = position + 1;
                             cursor += 1;
@@ -515,7 +534,7 @@ class NgxMaskApplierService {
                             day2monthPaste ||
                             day1monthPaste ||
                             day2monthInput ||
-                            day2monthInputDot) {
+                            (day2monthInputDot && !this.leadZeroDateTime)) {
                             // eslint-disable-next-line no-param-reassign
                             position = position + 1;
                             cursor += 1;
@@ -673,7 +692,9 @@ class NgxMaskApplierService {
             }));
     }
     _splitPercentZero(value) {
-        const decimalIndex = value.indexOf("." /* MaskExpression.DOT */);
+        const decimalIndex = typeof this.decimalMarker === 'string'
+            ? value.indexOf(this.decimalMarker)
+            : value.indexOf("." /* MaskExpression.DOT */);
         if (decimalIndex === -1) {
             const parsedValue = parseInt(value, 10);
             return isNaN(parsedValue) ? "" /* MaskExpression.EMPTY_STRING */ : parsedValue.toString();
@@ -682,9 +703,10 @@ class NgxMaskApplierService {
             const integerPart = parseInt(value.substring(0, decimalIndex), 10);
             const decimalPart = value.substring(decimalIndex + 1);
             const integerString = isNaN(integerPart) ? '' : integerPart.toString();
+            const decimal = typeof this.decimalMarker === 'string' ? this.decimalMarker : "." /* MaskExpression.DOT */;
             return integerString === "" /* MaskExpression.EMPTY_STRING */
                 ? "" /* MaskExpression.EMPTY_STRING */
-                : integerString + "." /* MaskExpression.DOT */ + decimalPart;
+                : integerString + decimal + decimalPart;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -709,6 +731,9 @@ class NgxMaskService extends NgxMaskApplierService {
         this.maskChanged = false;
         this._maskExpressionArray = [];
         this.triggerOnMaskChange = false;
+        this._emitValue = false;
+        this._previousValue = '';
+        this._currentValue = '';
         // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any
         this.onChange = (_) => { };
         this.document = inject(DOCUMENT);
@@ -741,7 +766,9 @@ class NgxMaskService extends NgxMaskApplierService {
             : "" /* MaskExpression.EMPTY_STRING */;
         let newInputValue = '';
         if (this.hiddenInput !== undefined && !this.writingValue) {
-            let actualResult = this.actualValue.split("" /* MaskExpression.EMPTY_STRING */);
+            let actualResult = inputValue && inputValue.length === 1
+                ? inputValue.split("" /* MaskExpression.EMPTY_STRING */)
+                : this.actualValue.split("" /* MaskExpression.EMPTY_STRING */);
             // eslint-disable  @typescript-eslint/no-unused-expressions
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             if (typeof this.selStart === 'object' && typeof this.selEnd === 'object') {
@@ -775,7 +802,7 @@ class NgxMaskService extends NgxMaskApplierService {
                     ? this.shiftTypedSymbols(actualResult.join("" /* MaskExpression.EMPTY_STRING */))
                     : inputValue;
         }
-        if (justPasted && this.hiddenInput) {
+        if (justPasted && (this.hiddenInput || !this.hiddenInput)) {
             newInputValue = inputValue;
         }
         if (this.deletedSpecialCharacter && position) {
@@ -790,7 +817,9 @@ class NgxMaskService extends NgxMaskApplierService {
             // eslint-disable-next-line no-param-reassign
             this.deletedSpecialCharacter = false;
         }
-        if (this.showMaskTyped && this.placeHolderCharacter.length === 1) {
+        if (this.showMaskTyped &&
+            this.placeHolderCharacter.length === 1 &&
+            !this.leadZeroDateTime) {
             // eslint-disable-next-line no-param-reassign
             inputValue = this.removeMask(inputValue);
         }
@@ -815,7 +844,12 @@ class NgxMaskService extends NgxMaskApplierService {
             this.specialCharacters = this.specialCharacters.filter((item) => !this._compareOrIncludes(item, this.decimalMarker, this.thousandSeparator) //item !== this.decimalMarker, // !
             );
         }
-        this.formControlResult(result);
+        if (result || result === '') {
+            this._previousValue = this._currentValue;
+            this._currentValue = result;
+            this._emitValue = this._previousValue !== this._currentValue || this.maskChanged;
+        }
+        this._emitValue ? this.formControlResult(result) : '';
         if (!this.showMaskTyped || (this.showMaskTyped && this.hiddenInput)) {
             if (this.hiddenInput) {
                 if (backspaced) {
@@ -1156,6 +1190,11 @@ class NgxMaskService extends NgxMaskApplierService {
         if (result === "" /* MaskExpression.EMPTY_STRING */) {
             return result;
         }
+        if (this.maskExpression.startsWith("percent" /* MaskExpression.PERCENT */) &&
+            this.decimalMarker === "," /* MaskExpression.COMMA */) {
+            // eslint-disable-next-line no-param-reassign
+            result = result.replace("," /* MaskExpression.COMMA */, "." /* MaskExpression.DOT */);
+        }
         const separatorPrecision = this._retrieveSeparatorPrecision(this.maskExpression);
         const separatorValue = this._replaceDecimalMarkerToDot(this._retrieveSeparatorValue(result));
         if (!this.isNumberValue) {
@@ -1279,6 +1318,7 @@ class NgxMaskDirective {
         this.leadZeroDateTime = null;
         this.leadZero = null;
         this.triggerOnMaskChange = null;
+        this.apm = null;
         this.maskFilled = new EventEmitter();
         this._maskValue = '';
         this._position = null;
@@ -1295,7 +1335,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, } = changes;
+        const { maskExpression, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, showTemplate, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, } = changes;
         if (maskExpression) {
             if (maskExpression.currentValue !== maskExpression.previousValue &&
                 !maskExpression.firstChange) {
@@ -1335,6 +1375,9 @@ class NgxMaskDirective {
         if (patterns && patterns.currentValue) {
             this._maskService.patterns = patterns.currentValue;
         }
+        if (apm && apm.currentValue) {
+            this._maskService.apm = apm.currentValue;
+        }
         if (prefix) {
             this._maskService.prefix = prefix.currentValue;
         }
@@ -1529,6 +1572,16 @@ class NgxMaskDirective {
         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;
@@ -1584,10 +1637,16 @@ class NgxMaskDirective {
                 const maskExpression = this._maskService.maskExpression;
                 const precision = Number(this._maskService.maskExpression.slice(maskExpression.length - 1, maskExpression.length));
                 if (precision > 1) {
+                    el.value = this.suffix ? el.value.split(this.suffix).join('') : el.value;
                     const decimalPart = el.value.split(this.decimalMarker)[1];
                     el.value = el.value.includes(this.decimalMarker)
-                        ? el.value + '0'.repeat(precision - decimalPart.length)
-                        : el.value + this.decimalMarker + '0'.repeat(precision);
+                        ? el.value +
+                            "0" /* MaskExpression.NUMBER_ZERO */.repeat(precision - decimalPart.length) +
+                            this.suffix
+                        : el.value +
+                            this.decimalMarker +
+                            "0" /* MaskExpression.NUMBER_ZERO */.repeat(precision) +
+                            this.suffix;
                     this._maskService.actualValue = el.value;
                 }
             }
@@ -1885,7 +1944,7 @@ class NgxMaskDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", 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" }, 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.0.1", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NgxMaskDirective,
@@ -1960,6 +2019,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }], triggerOnMaskChange: [{
                 type: Input
+            }], apm: [{
+                type: Input
             }], maskFilled: [{
                 type: Output
             }], onPaste: [{