Fix(#601)

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 16.1.3(2023-06-08)
+
+### Fix
+
+-   Fix ([#601](https://github.com/JsDaddy/ngx-mask/issues/722))
+-   Fix ([#1042](https://github.com/JsDaddy/ngx-mask/issues/722))
+-   Fix ([#680](https://github.com/JsDaddy/ngx-mask/issues/722))
+
 # 16.1.2(2023-06-05)
 
 ### Fix

README.md

@@ -452,6 +452,18 @@ Masked value: 1.234
 Input value: 1234.56
 Masked value: 1,234
 ```
+```html
+<input type="text" mask="separator.2" [leadZero]="true" />
+```
+To add zeros to the model at the end 
+
+```text
+Input value: 12
+Masked value: 12.00
+
+Input value: 12.1
+Masked value: 12.10
+```
 
 ```html
 <input type="text" mask="separator.2" separatorLimit="1000" />

projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts

@@ -1,5 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { NGX_MASK_CONFIG, IConfig } from './ngx-mask.config';
+import { MaskExpression } from './ngx-mask-expression.enum';
 
 @Injectable()
 export class NgxMaskApplierService {
@@ -42,6 +43,8 @@ export class NgxMaskApplierService {
 
     public leadZeroDateTime: IConfig['leadZeroDateTime'] = this._config.leadZeroDateTime;
 
+    public leadZero: IConfig['leadZero'] = this._config.leadZero;
+
     private _shift: Set<number> = new Set();
 
     public maskExpression = '';
@@ -53,6 +56,7 @@ export class NgxMaskApplierService {
     public ipError?: boolean;
 
     public cpfCnpjError?: boolean;
+
     public applyMaskWithPattern(
         inputValue: string,
         maskAndPattern: [string, IConfig['patterns']]
@@ -98,7 +102,7 @@ export class NgxMaskApplierService {
             // eslint-disable-next-line no-param-reassign
             result += inputValue.slice(cursor, cursor + 1);
         }
-        if (maskExpression === 'IP') {
+        if (maskExpression === MaskExpression.IP) {
             const valuesIP = inputValue.split('.');
             this.ipError = this._validIP(valuesIP);
             // eslint-disable-next-line no-param-reassign
@@ -110,7 +114,7 @@ export class NgxMaskApplierService {
                 arr.push(inputValue[i] ?? '');
             }
         }
-        if (maskExpression === 'CPF_CNPJ') {
+        if (maskExpression === MaskExpression.CPF_CNPJ) {
             this.cpfCnpjError = arr.length !== 11 && arr.length !== 14;
             if (arr.length > 11) {
                 // eslint-disable-next-line no-param-reassign
@@ -120,7 +124,8 @@ export class NgxMaskApplierService {
                 maskExpression = '000.000.000-00';
             }
         }
-        if (maskExpression.startsWith('percent')) {
+
+        if (maskExpression.startsWith(MaskExpression.PERCENT)) {
             if (
                 inputValue.match('[a-z]|[A-Z]') ||
                 // eslint-disable-next-line no-useless-escape
@@ -155,7 +160,7 @@ export class NgxMaskApplierService {
             } else {
                 result = inputValue.substring(0, inputValue.length - 1);
             }
-        } else if (maskExpression.startsWith('separator')) {
+        } else if (maskExpression.startsWith(MaskExpression.SEPARATOR)) {
             if (
                 inputValue.match('[wа-яА-Я]') ||
                 inputValue.match('[ЁёА-я]') ||
@@ -179,6 +184,7 @@ export class NgxMaskApplierService {
                 !backspaced
                     ? inputValue.slice(0, inputValue.length - 1)
                     : inputValue;
+
             if (backspaced) {
                 // eslint-disable-next-line no-param-reassign
                 inputValue = this._compareOrIncludes(
@@ -229,12 +235,14 @@ export class NgxMaskApplierService {
                 new RegExp(thousandSeparatorCharEscaped, 'g'),
                 ''
             );
+
             result = this._formatWithSeparators(
                 strForSep,
                 this.thousandSeparator,
                 this.decimalMarker,
                 precision
             );
+
             const commaShift: number = result.indexOf(',') - inputValue.indexOf(',');
             const shiftStep: number = result.length - inputValue.length;
 
@@ -297,7 +305,7 @@ export class NgxMaskApplierService {
                     result += inputSymbol;
                     cursor += 3;
                 } else if (this._checkSymbolMask(inputSymbol, maskExpression[cursor] ?? '')) {
-                    if (maskExpression[cursor] === 'H') {
+                    if (maskExpression[cursor] === MaskExpression.HOURS) {
                         if (Number(inputSymbol) > 2) {
                             // eslint-disable-next-line no-param-reassign
                             position = position + 1;
@@ -310,7 +318,7 @@ export class NgxMaskApplierService {
                             continue;
                         }
                     }
-                    if (maskExpression[cursor] === 'h') {
+                    if (maskExpression[cursor] === MaskExpression.HOUR) {
                         if (
                             (result === '2' && Number(inputSymbol) > 3) ||
                             ((result.slice(cursor - 2, cursor) === '2' ||
@@ -327,7 +335,10 @@ export class NgxMaskApplierService {
                             continue;
                         }
                     }
-                    if (maskExpression[cursor] === 'm' || maskExpression[cursor] === 's') {
+                    if (
+                        maskExpression[cursor] === MaskExpression.MINUTE ||
+                        maskExpression[cursor] === MaskExpression.SECOND
+                    ) {
                         if (Number(inputSymbol) > 5) {
                             // eslint-disable-next-line no-param-reassign
                             position = position + 1;
@@ -354,7 +365,7 @@ export class NgxMaskApplierService {
                     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') {
+                    if (maskExpression[cursor] === MaskExpression.DAY) {
                         const maskStartWithMonth = maskExpression.slice(0, 2) === 'M0';
                         const startWithMonthInput: boolean =
                             maskExpression.slice(0, 2) === 'M0' &&
@@ -384,7 +395,7 @@ export class NgxMaskApplierService {
                             continue;
                         }
                     }
-                    if (maskExpression[cursor] === 'M') {
+                    if (maskExpression[cursor] === MaskExpression.MONTH) {
                         const monthsCount = 12;
                         // mask without day
                         const withoutDays: boolean =
@@ -525,7 +536,7 @@ export class NgxMaskApplierService {
         }
 
         let actualShift: number =
-            justPasted && !maskExpression.startsWith('separator')
+            justPasted && !maskExpression.startsWith(MaskExpression.SEPARATOR)
                 ? cursor
                 : this._shift.has(position)
                 ? shift

projects/ngx-mask-lib/src/lib/ngx-mask-expression.enum.ts

@@ -0,0 +1,12 @@
+export const enum MaskExpression {
+    SEPARATOR = 'separator',
+    PERCENT = 'percent',
+    IP = 'IP',
+    CPF_CNPJ = 'CPF_CNPJ',
+    MONTH = 'M',
+    MINUTE = 'm',
+    HOUR = 'h',
+    HOURS = 'H',
+    DAY = 'd',
+    SECOND = 's',
+}

projects/ngx-mask-lib/src/lib/ngx-mask.config.ts

@@ -17,6 +17,7 @@ export interface IConfig {
     separatorLimit: string;
     allowNegativeNumbers: boolean;
     leadZeroDateTime: boolean;
+    leadZero: boolean;
     triggerOnMaskChange: boolean;
     maskFilled: EventEmitter<void>;
     patterns: {
@@ -53,6 +54,7 @@ export const initialConfig: IConfig = {
     // eslint-disable-next-line @typescript-eslint/quotes
     specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
     leadZeroDateTime: false,
+    leadZero: false,
     triggerOnMaskChange: false,
     maskFilled: new EventEmitter<void>(),
     patterns: {

projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts

@@ -21,6 +21,7 @@ import {
 import { CustomKeyboardEvent } from './custom-keyboard-event';
 import { IConfig, NGX_MASK_CONFIG, timeMasks, withoutValidation } from './ngx-mask.config';
 import { NgxMaskService } from './ngx-mask.service';
+import { MaskExpression } from './ngx-mask-expression.enum';
 
 @Directive({
     selector: 'input[mask], textarea[mask]',
@@ -78,6 +79,8 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
 
     @Input() public leadZeroDateTime: IConfig['leadZeroDateTime'] | null = null;
 
+    @Input() public leadZero: IConfig['leadZero'] | null = null;
+
     @Input() public triggerOnMaskChange: IConfig['triggerOnMaskChange'] | null = null;
 
     @Output() public maskFilled: IConfig['maskFilled'] = new EventEmitter<void>();
@@ -129,6 +132,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
             separatorLimit,
             allowNegativeNumbers,
             leadZeroDateTime,
+            leadZero,
             triggerOnMaskChange,
         } = changes;
         if (maskExpression) {
@@ -211,6 +215,9 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
         if (leadZeroDateTime) {
             this._maskService.leadZeroDateTime = leadZeroDateTime.currentValue;
         }
+        if (leadZero) {
+            this._maskService.leadZero = leadZero.currentValue;
+        }
         if (triggerOnMaskChange) {
             this._maskService.triggerOnMaskChange = triggerOnMaskChange.currentValue;
         }
@@ -228,7 +235,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
         if (this._maskService.cpfCnpjError) {
             return this._createValidationError(value);
         }
-        if (this._maskValue.startsWith('separator')) {
+        if (this._maskValue.startsWith(MaskExpression.SEPARATOR)) {
             return null;
         }
         if (withoutValidation.includes(this._maskValue)) {
@@ -577,25 +584,43 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
             inputValue = inputValue.value;
         }
 
-        if (typeof inputValue === 'number' || this._maskValue.startsWith('separator')) {
+        if (
+            typeof inputValue === 'number' ||
+            this._maskValue.startsWith(MaskExpression.SEPARATOR)
+        ) {
             // eslint-disable-next-line no-param-reassign
             inputValue = this._maskService.numberToString(inputValue);
+            const localeDecimalMarker = this._currentLocaleDecimalMarker();
             if (!Array.isArray(this._maskService.decimalMarker)) {
-                const localeDecimalMarker = this._currentLocaleDecimalMarker();
                 // 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 as string
+                );
+                if (this._maskService.decimalMarker === ',') {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue = inputValue.toString().replace('.', ',');
+                }
+            }
             this._maskService.isNumberValue = true;
         }
 
         if (typeof inputValue !== 'string') {
             // eslint-disable-next-line no-param-reassign
             inputValue = '';
         }
-
         this._inputValue = inputValue;
         this._setMask();