ngx-mask 16.0.2 → 16.0.4

package/fesm2022/ngx-mask.mjs

@@ -241,7 +241,6 @@ class NgxMaskApplierService {
             }
         }
         if (maskExpression.startsWith('percent')) {
-            //ogranich posle tochki
             if (inputValue.match('[a-z]|[A-Z]') ||
                 // eslint-disable-next-line no-useless-escape
                 inputValue.match(/[-!$%^&*()_+|~=`{}\[\]:";'<>?,\/.]/)) {
@@ -377,6 +376,8 @@ class NgxMaskApplierService {
                 else if (this._checkSymbolMask(inputSymbol, maskExpression[cursor] ?? '')) {
                     if (maskExpression[cursor] === 'H') {
                         if (Number(inputSymbol) > 2) {
+                            // eslint-disable-next-line no-param-reassign
+                            position = position + 1;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -387,25 +388,24 @@ class NgxMaskApplierService {
                         }
                     }
                     if (maskExpression[cursor] === 'h') {
-                        if (result === '2' && Number(inputSymbol) > 3) {
+                        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)) {
+                            // eslint-disable-next-line no-param-reassign
+                            position = position + 1;
                             cursor += 1;
                             i--;
                             continue;
                         }
                     }
-                    if (maskExpression[cursor] === 'm') {
-                        if (Number(inputSymbol) > 5) {
-                            cursor += 1;
-                            this._shiftStep(maskExpression, cursor, inputArray.length);
-                            i--;
-                            if (this.leadZeroDateTime) {
-                                result += '0';
-                            }
-                            continue;
-                        }
-                    }
-                    if (maskExpression[cursor] === 's') {
+                    if (maskExpression[cursor] === 'm' || maskExpression[cursor] === 's') {
                         if (Number(inputSymbol) > 5) {
+                            // eslint-disable-next-line no-param-reassign
+                            position = position + 1;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -416,31 +416,34 @@ class NgxMaskApplierService {
                         }
                     }
                     const daysCount = 31;
+                    const inputValueCursor = inputValue[cursor];
+                    const inputValueCursorPlusOne = inputValue[cursor + 1];
+                    const inputValueCursorPlusTwo = inputValue[cursor + 2];
+                    const inputValueCursorMinusOne = inputValue[cursor - 1];
+                    const inputValueCursorMinusTwo = inputValue[cursor - 2];
+                    const inputValueCursorMinusThree = inputValue[cursor - 3];
+                    const inputValueSliceMinusThreeMinusOne = inputValue.slice(cursor - 3, cursor - 1);
+                    const inputValueSliceMinusOnePlusOne = inputValue.slice(cursor - 1, cursor + 1);
+                    const inputValueSliceCursorPlusTwo = inputValue.slice(cursor, cursor + 2);
+                    const inputValueSliceMinusTwoCursor = inputValue.slice(cursor - 2, cursor);
                     if (maskExpression[cursor] === 'd') {
                         const maskStartWithMonth = maskExpression.slice(0, 2) === 'M0';
                         const startWithMonthInput = maskExpression.slice(0, 2) === 'M0' &&
-                            (inputValue[cursor - 2] === '/' ||
-                                inputValue[cursor - 2] === '.' ||
-                                inputValue[cursor - 2] === '-');
+                            this.specialCharacters.includes(inputValueCursorMinusTwo);
                         if ((Number(inputSymbol) > 3 && this.leadZeroDateTime) ||
                             (!maskStartWithMonth &&
-                                (Number(inputValue.slice(cursor, cursor + 2)) > daysCount ||
-                                    Number(inputValue.slice(cursor - 1, cursor + 1)) > daysCount ||
-                                    inputValue[cursor + 1] === '/' ||
-                                    inputValue[cursor + 1] === '-')) ||
+                                (Number(inputValueSliceCursorPlusTwo) > daysCount ||
+                                    Number(inputValueSliceMinusOnePlusOne) > daysCount ||
+                                    this.specialCharacters.includes(inputValueCursorPlusOne))) ||
                             (startWithMonthInput
-                                ? Number(inputValue.slice(cursor - 1, cursor + 1)) > daysCount ||
-                                    (inputValue[cursor] !== '/' &&
-                                        (inputValue[cursor + 2] === '.' ||
-                                            inputValue[cursor + 2] === '/' ||
-                                            inputValue[cursor + 2] === '-')) ||
-                                    inputValue[cursor] === '.' ||
-                                    inputValue[cursor] === '/' ||
-                                    inputValue[cursor] === '-'
-                                : Number(inputValue.slice(cursor, cursor + 2)) > daysCount ||
-                                    inputValue[cursor + 1] === '/' ||
-                                    inputValue[cursor + 1] === '-' ||
-                                    inputValue[cursor + 1] === '.')) {
+                                ? Number(inputValueSliceMinusOnePlusOne) > daysCount ||
+                                    (!this.specialCharacters.includes(inputValueCursor) &&
+                                        this.specialCharacters.includes(inputValueCursorPlusTwo)) ||
+                                    this.specialCharacters.includes(inputValueCursor)
+                                : Number(inputValueSliceCursorPlusTwo) > daysCount ||
+                                    this.specialCharacters.includes(inputValueCursorPlusOne))) {
+                            // eslint-disable-next-line no-param-reassign
+                            position = position + 1;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -455,43 +458,39 @@ class NgxMaskApplierService {
                         // mask without day
                         const withoutDays = cursor === 0 &&
                             (Number(inputSymbol) > 2 ||
-                                Number(inputValue.slice(cursor, cursor + 2)) > monthsCount ||
-                                inputValue[cursor + 1] === '/');
+                                Number(inputValueSliceCursorPlusTwo) > monthsCount ||
+                                this.specialCharacters.includes(inputValueCursorPlusOne));
                         // day<10 && month<12 for input
-                        const day1monthInput = inputValue.slice(cursor - 3, cursor - 1).includes('/') &&
-                            ((inputValue[cursor - 2] === '/' &&
-                                Number(inputValue.slice(cursor - 1, cursor + 1)) > monthsCount &&
-                                inputValue[cursor] !== '/') ||
-                                inputValue[cursor] === '/' ||
-                                inputValue[cursor] === '-' ||
-                                (inputValue[cursor - 3] === '/' &&
-                                    Number(inputValue.slice(cursor - 2, cursor)) > monthsCount &&
-                                    inputValue[cursor - 1] !== '/') ||
-                                inputValue[cursor - 1] === '/' ||
-                                inputValue[cursor - 1] === '-');
+                        const specialChart = maskExpression.slice(cursor + 2, cursor + 3);
+                        const day1monthInput = inputValueSliceMinusThreeMinusOne.includes(specialChart) &&
+                            ((this.specialCharacters.includes(inputValueCursorMinusTwo) &&
+                                Number(inputValueSliceMinusOnePlusOne) > monthsCount &&
+                                !this.specialCharacters.includes(inputValueCursor)) ||
+                                this.specialCharacters.includes(inputValueCursor) ||
+                                (this.specialCharacters.includes(inputValueCursorMinusThree) &&
+                                    Number(inputValueSliceMinusTwoCursor) > monthsCount &&
+                                    !this.specialCharacters.includes(inputValueCursorMinusOne)) ||
+                                this.specialCharacters.includes(inputValueCursorMinusOne));
                         //  month<12 && day<10 for input
-                        const day2monthInput = Number(inputValue.slice(cursor - 3, cursor - 1)) <= daysCount &&
-                            !inputValue.slice(cursor - 3, cursor - 1).includes('/') &&
-                            (inputValue[cursor - 1] === '/' || inputValue[cursor - 1] === '-') &&
-                            (Number(inputValue.slice(cursor, cursor + 2)) > monthsCount ||
-                                inputValue[cursor + 1] === '/' ||
-                                inputValue[cursor + 1] === '-');
+                        const day2monthInput = Number(inputValueSliceMinusThreeMinusOne) <= daysCount &&
+                            !this.specialCharacters.includes(inputValueSliceMinusThreeMinusOne) &&
+                            this.specialCharacters.includes(inputValueCursorMinusOne) &&
+                            (Number(inputValueSliceCursorPlusTwo) > monthsCount ||
+                                this.specialCharacters.includes(inputValueCursorPlusOne));
                         // cursor === 5 && without days
-                        const day2monthInputDot = (Number(inputValue.slice(cursor, cursor + 2)) > monthsCount &&
-                            cursor === 5) ||
-                            inputValue[cursor + 1] === '.' ||
-                            inputValue[cursor + 1] === '-' ||
-                            inputValue[cursor + 1] === '/';
-                        // day<10 && month<12 for paste whole data
-                        const day1monthPaste = Number(inputValue.slice(cursor - 3, cursor - 1)) > daysCount &&
-                            !inputValue.slice(cursor - 3, cursor - 1).includes('/') &&
-                            !inputValue.slice(cursor - 2, cursor).includes('/') &&
-                            Number(inputValue.slice(cursor - 2, cursor)) > monthsCount;
+                        const day2monthInputDot = (Number(inputValueSliceCursorPlusTwo) > monthsCount && cursor === 5) ||
+                            (this.specialCharacters.includes(inputValueCursorPlusOne) &&
+                                cursor === 5);
+                        // // day<10 && month<12 for paste whole data
+                        const day1monthPaste = Number(inputValueSliceMinusThreeMinusOne) > daysCount &&
+                            !this.specialCharacters.includes(inputValueSliceMinusThreeMinusOne) &&
+                            !this.specialCharacters.includes(inputValueSliceMinusTwoCursor) &&
+                            Number(inputValueSliceMinusTwoCursor) > monthsCount;
                         // 10<day<31 && month<12 for paste whole data
-                        const day2monthPaste = Number(inputValue.slice(cursor - 3, cursor - 1)) <= daysCount &&
-                            !inputValue.slice(cursor - 3, cursor - 1).includes('/') &&
-                            inputValue[cursor - 1] !== '/' &&
-                            Number(inputValue.slice(cursor - 1, cursor + 1)) > monthsCount;
+                        const day2monthPaste = Number(inputValueSliceMinusThreeMinusOne) <= daysCount &&
+                            !this.specialCharacters.includes(inputValueSliceMinusThreeMinusOne) &&
+                            !this.specialCharacters.includes(inputValueCursorMinusOne) &&
+                            Number(inputValueSliceMinusOnePlusOne) > monthsCount;
                         if ((Number(inputSymbol) > 1 && this.leadZeroDateTime) ||
                             withoutDays ||
                             day1monthInput ||
@@ -499,6 +498,8 @@ class NgxMaskApplierService {
                             day1monthPaste ||
                             day2monthInput ||
                             day2monthInputDot) {
+                            // eslint-disable-next-line no-param-reassign
+                            position = position + 1;
                             cursor += 1;
                             this._shiftStep(maskExpression, cursor, inputArray.length);
                             i--;
@@ -1134,6 +1135,8 @@ class NgxMaskDirective {
         this._position = null;
         this._maskExpressionArray = [];
         this._justPasted = false;
+        /**For IME composition event */
+        this._isComposing = false;
         this.document = inject(DOCUMENT);
         this._maskService = inject(NgxMaskService, { self: true });
         this._config = inject(NGX_MASK_CONFIG);
@@ -1320,6 +1323,9 @@ class NgxMaskDirective {
         }
     }
     onInput(e) {
+        // If IME is composing text, we wait for the composed text.
+        if (this._isComposing)
+            return;
         const el = e.target;
         this._inputValue = el.value;
         this._setMask();
@@ -1362,6 +1368,16 @@ class NgxMaskDirective {
         el.setSelectionRange(positionToApply, positionToApply);
         this._position = null;
     }
+    // IME starts
+    onCompositionStart() {
+        this._isComposing = true;
+    }
+    // IME completes
+    onCompositionEnd(e) {
+        this._isComposing = false;
+        this._justPasted = true;
+        this.onInput(e);
+    }
     onBlur() {
         if (this._maskValue) {
             this._maskService.clearIfNotMatchFn();
@@ -1424,18 +1440,24 @@ class NgxMaskDirective {
         if (!this._maskValue) {
             return;
         }
+        if (this._isComposing) {
+            // User finalize their choice from IME composition, so trigger onInput() for the composed text.
+            if (e.key === 'Enter')
+                this.onCompositionEnd(e);
+            return;
+        }
         this._code = e.code ? e.code : e.key;
         const el = e.target;
         this._inputValue = el.value;
         this._setMask();
-        if (e.keyCode === 38) {
+        if (e.key === 'ArrowUp') {
             e.preventDefault();
         }
-        if (e.keyCode === 37 || e.keyCode === 8 || e.keyCode === 46) {
-            if (e.keyCode === 8 && el.value.length === 0) {
+        if (e.key === 'ArrowLeft' || e.key === 'Backspace' || e.key === 'Delete') {
+            if (e.key === 'Backspace' && el.value.length === 0) {
                 el.selectionStart = el.selectionEnd;
             }
-            if (e.keyCode === 8 && el.selectionStart !== 0) {
+            if (e.key === 'Backspace' && el.selectionStart !== 0) {
                 // If specialChars is false, (shouldn't ever happen) then set to the defaults
                 this.specialCharacters = this.specialCharacters?.length
                     ? this.specialCharacters
@@ -1462,7 +1484,7 @@ class NgxMaskDirective {
                 e.preventDefault();
             }
             const cursorStart = el.selectionStart;
-            if (e.keyCode === 8 &&
+            if (e.key === 'Backspace' &&
                 !el.readOnly &&
                 cursorStart === 0 &&
                 el.selectionEnd === el.value.length &&
@@ -1476,8 +1498,8 @@ class NgxMaskDirective {
             this._inputValue.length - this.suffix.length < el.selectionStart) {
             el.setSelectionRange(this._inputValue.length - this.suffix.length, this._inputValue.length);
         }
-        else if ((e.keyCode === 65 && e.ctrlKey) ||
-            (e.keyCode === 65 && e.metaKey) // Cmd + A (Mac)
+        else if ((e.code === 'KeyA' && e.ctrlKey) ||
+            (e.code === 'KeyA' && e.metaKey) // Cmd + A (Mac)
         ) {
             el.setSelectionRange(0, this._getActualInputLength());
             e.preventDefault();
@@ -1497,12 +1519,12 @@ class NgxMaskDirective {
         if (typeof inputValue === 'number' || this._maskValue.startsWith('separator')) {
             // eslint-disable-next-line no-param-reassign
             inputValue = this._maskService.numberToString(inputValue);
-            if (!Array.isArray(this.decimalMarker)) {
+            if (!Array.isArray(this._maskService.decimalMarker)) {
                 const localeDecimalMarker = this._currentLocaleDecimalMarker();
                 // eslint-disable-next-line no-param-reassign
                 inputValue =
-                    this.decimalMarker !== localeDecimalMarker
-                        ? inputValue.replace(localeDecimalMarker, this.decimalMarker)
+                    this._maskService.decimalMarker !== localeDecimalMarker
+                        ? inputValue.replace(localeDecimalMarker, this._maskService.decimalMarker)
                         : inputValue;
             }
             this._maskService.isNumberValue = true;
@@ -1629,7 +1651,7 @@ class NgxMaskDirective {
         return (1.1).toLocaleString().substring(1, 2);
     }
     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", triggerOnMaskChange: "triggerOnMaskChange" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "blur": "onBlur()", "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", triggerOnMaskChange: "triggerOnMaskChange" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur()", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NgxMaskDirective,
@@ -1713,6 +1735,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
             }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
+            }], onCompositionStart: [{
+                type: HostListener,
+                args: ['compositionstart', ['$event']]
+            }], onCompositionEnd: [{
+                type: HostListener,
+                args: ['compositionend', ['$event']]
             }], onBlur: [{
                 type: HostListener,
                 args: ['blur']