feat(ref: #1295, #1292, #1314, #1310, #1304, #1308, #1299): fix issues (

#1328) * feat(ref: #1295, #1292, #1314, #1310, #1304, #1308, #1299): fix issues * feat(ref: #1295, #1292, #1314, #1310, #1304, #1308, #1299): remove unusable code * feat(ref: #1295, #1292, #1314, #1310, #1304, #1308, #1299): remove unusable code * feat(ref: #1295, #1292, #1314, #1310, #1304, #1308, #1299): remove unusable code * feat(ref: #1295, #1292, #1314, #1310, #1304, #1308, #1299): remove unusable code
JsDaddy · Mar 25, 2024 · 058bd20 · 058bd20
1 parent f689acd
commit 058bd20
Show file tree

Hide file tree

Showing 15 changed files with 540 additions and 112 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 17.0.5(2024-03-25)
+
+### Fix
+
+https://github.com/JsDaddy/ngx-mask/issues/1295 
+https://github.com/JsDaddy/ngx-mask/issues/1292 
+https://github.com/JsDaddy/ngx-mask/issues/1314
+https://github.com/JsDaddy/ngx-mask/issues/1310 
+https://github.com/JsDaddy/ngx-mask/issues/1304 
+https://github.com/JsDaddy/ngx-mask/issues/1308 
+https://github.com/JsDaddy/ngx-mask/issues/1299 
+
 # 17.0.4(2023-12-01)
 
 ### Feat

diff --git a/USAGE.md b/USAGE.md
@@ -17,7 +17,7 @@ Also, you can use mask pipe.
 You could path any valid config options, for example thousandSeparator and suffix
 
 ```html
-<span>{{value | mask: 'separator': {thousandSeparator: ',', suffix: ' sm'}}</span>
+<span>{{value | mask: 'separator': { thousandSeparator: ',', suffix: ' sm' } }}</span>
 ```
 
 ### Examples

diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "17.0.4",
+    "version": "17.0.5",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -173,11 +173,12 @@ export class NgxMaskApplierService {
                     inputValue.length
                 )}`;
             }
-
             let value = '';
             this.allowNegativeNumbers &&
             inputValue.slice(cursor, cursor + 1) === MaskExpression.MINUS
-                ? (value = inputValue.slice(cursor + 1, cursor + inputValue.length))
+                ? (value =
+                      MaskExpression.MINUS +
+                      inputValue.slice(cursor + 1, cursor + inputValue.length))
                 : (value = inputValue);
             if (this.percentage(value)) {
                 result = this._splitPercentZero(inputValue);
@@ -718,6 +719,7 @@ export class NgxMaskApplierService {
         if (backspaced) {
             onlySpecial = inputArray.every((char) => this.specialCharacters.includes(char));
         }
+
         let res = `${this.prefix}${onlySpecial ? MaskExpression.EMPTY_STRING : result}${
             this.showMaskTyped ? '' : this.suffix
         }`;
@@ -804,7 +806,11 @@ export class NgxMaskApplierService {
 
     private percentage = (str: string): boolean => {
         const sanitizedStr = str.replace(',', '.');
-        const value = Number(sanitizedStr);
+        const value = Number(
+            this.allowNegativeNumbers && str.includes(MaskExpression.MINUS)
+                ? sanitizedStr.slice(1, str.length)
+                : sanitizedStr
+        );
 
         return !isNaN(value) && value >= 0 && value <= 100;
     };
@@ -848,7 +854,6 @@ export class NgxMaskApplierService {
             const precisionRegEx = new RegExp(
                 this._charToRegExpExpression(decimalMarker) + `\\d{${precision}}.*$`
             );
-
             const precisionMatch: RegExpMatchArray | null = inputValue.match(precisionRegEx);
             const precisionMatchLength: number = (precisionMatch && precisionMatch[0]?.length) ?? 0;
             if (precisionMatchLength - 1 > precision) {
@@ -929,6 +934,9 @@ export class NgxMaskApplierService {
     }
 
     private _splitPercentZero(value: string): string {
+        if (value === MaskExpression.MINUS && this.allowNegativeNumbers) {
+            return value;
+        }
         const decimalIndex =
             typeof this.decimalMarker === 'string'
                 ? value.indexOf(this.decimalMarker)

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts
@@ -1,6 +1,6 @@
 import { inject, Pipe, PipeTransform } from '@angular/core';
 
-import { IConfig } from './ngx-mask.config';
+import { IConfig, NGX_MASK_CONFIG } from './ngx-mask.config';
 import { NgxMaskService } from './ngx-mask.service';
 import { MaskExpression } from './ngx-mask-expression.enum';
 
@@ -10,7 +10,7 @@ import { MaskExpression } from './ngx-mask-expression.enum';
     standalone: true,
 })
 export class NgxMaskPipe implements PipeTransform {
-    private readonly defaultOptions: Partial<IConfig> = {};
+    private readonly defaultOptions = inject<IConfig>(NGX_MASK_CONFIG);
 
     private readonly _maskService = inject(NgxMaskService);
 

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
@@ -124,7 +124,8 @@ export class NgxMaskService extends NgxMaskApplierService {
             this.specialCharacters.indexOf(
                 this.maskExpression[position] ?? MaskExpression.EMPTY_STRING
             ) !== -1 &&
-            this.showMaskTyped
+            this.showMaskTyped &&
+            !this.prefix
         ) {
             newInputValue = this._currentValue;
         }

diff --git a/projects/ngx-mask-lib/src/test/add-prefix.spec.ts b/projects/ngx-mask-lib/src/test/add-prefix.spec.ts
@@ -121,4 +121,13 @@ describe('Directive: Mask (Add prefix)', () => {
         equal('-12345', '-€1234.5', fixture);
         equal('-123456', '-€1234.56', fixture);
     });
+
+    it('should remove prefix when setValue', () => {
+        component.mask = '000 000';
+        component.prefix = 'KZ';
+        component.dropSpecialCharacters = true;
+        component.form.setValue('KZ123123');
+        equal('KZ123123', 'KZ123 123', fixture);
+        expect(component.form.value).toBe('123123');
+    });
 });
diff --git a/projects/ngx-mask-lib/src/test/delete.cy-spec.ts b/projects/ngx-mask-lib/src/test/delete.cy-spec.ts
@@ -201,4 +201,91 @@ describe('Directive: Mask (Delete)', () => {
             .type('{backspace}')
             .should('have.value', '12D : 34H : 56M : 78S');
     });
+
+    it('should backspace with showMaskTyped and prefix', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: '(000) 000-0000',
+                prefix: '+7 ',
+                showMaskTyped: true,
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('1234567890')
+            .should('have.value', '+7 (123) 456-7890')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 16)
+            .should('have.value', '+7 (123) 456-789_')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 15)
+            .should('have.value', '+7 (123) 456-78__')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 14)
+            .should('have.value', '+7 (123) 456-7___')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 12)
+            .should('have.value', '+7 (123) 456-____')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 11)
+            .should('have.value', '+7 (123) 45_-____')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 10)
+            .should('have.value', '+7 (123) 4__-____')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 7)
+            .should('have.value', '+7 (123) ___-____')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 6)
+            .should('have.value', '+7 (12_) ___-____')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 5)
+            .should('have.value', '+7 (1__) ___-____')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 3)
+            .should('have.value', '+7 (___) ___-____');
+    });
+
+    it('should backspace with showMaskTyped and prefix', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: '00 000 00 00',
+                prefix: '+32 ',
+                showMaskTyped: true,
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked')
+            .type('1234567890')
+            .should('have.value', '+32 12 345 67 89')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 15)
+            .should('have.value', '+32 12 345 67 8_')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 13)
+            .should('have.value', '+32 12 345 67 __')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 12)
+            .should('have.value', '+32 12 345 6_ __')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 10)
+            .should('have.value', '+32 12 345 __ __')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 9)
+            .should('have.value', '+32 12 34_ __ __')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 8)
+            .should('have.value', '+32 12 3__ __ __')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 6)
+            .should('have.value', '+32 12 ___ __ __')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 5)
+            .should('have.value', '+32 1_ ___ __ __')
+            .type('{backspace}')
+            .should('have.prop', 'selectionStart', 4)
+            .should('have.value', '+32 __ ___ __ __');
+    });
 });
diff --git a/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts b/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts
@@ -65,4 +65,65 @@ describe('Directive: Mask (Drop special characters)', () => {
         equal('1234567.89', '1 234 567.89', fixture);
         expect(component.form.value).toBe(1234567.89);
     });
+
+    it('dropSpecialCharacter test for valid', () => {
+        component.mask = '(000) 000-0000';
+        component.dropSpecialCharacters = true;
+        component.validation = true;
+        equal('1', '(1', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('12', '(12', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('123', '(123', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('1234', '(123) 4', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('12345', '(123) 45', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('123456', '(123) 456', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('1234567', '(123) 456-7', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('12345678', '(123) 456-78', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('123456789', '(123) 456-789', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('1234567890', '(123) 456-7890', fixture);
+        expect(component.form.valid).toBe(true);
+    });
+
+    it('dropSpecialCharacter = false test for valid', () => {
+        component.mask = '(000) 000-0000';
+        component.dropSpecialCharacters = true;
+        component.validation = true;
+        equal('1', '(1', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('12', '(12', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('123', '(123', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('1234', '(123) 4', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('12345', '(123) 45', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('123456', '(123) 456', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('1234567', '(123) 456-7', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('12345678', '(123) 456-78', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('123456789', '(123) 456-789', fixture);
+        expect(component.form.valid).toBe(false);
+        equal('1234567890', '(123) 456-7890', fixture);
+        expect(component.form.valid).toBe(true);
+    });
+
+    it('dropSpecialCharacter = true test for valid with setValue', () => {
+        component.mask = '(000) 000-0000';
+        component.dropSpecialCharacters = true;
+        component.validation = true;
+        component.form.setValue('1234567890');
+        equal('1234567890', '(123) 456-7890', fixture);
+        expect(component.form.valid).toBe(true);
+    });
 });
diff --git a/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts b/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts
@@ -351,5 +351,15 @@ describe('Pipe: Mask', () => {
         });
         expect(value).toEqual('3.000');
     });
-    //TODO(inepipepnko): need cover all config options
+
+    it('should show second pipe without suffix', () => {
+        const valueWithSuffix: string | number = maskPipe.transform('55555', '00 (000)', {
+            suffix: ' DDD',
+        });
+        const valueWithPrefix: string | number = maskPipe.transform('55555', '00 (000)', {
+            prefix: 'DDD ',
+        });
+        expect(valueWithSuffix).toEqual('55 (555) DDD');
+        expect(valueWithPrefix).toEqual('DDD 55 (555)');
+    });
 });
diff --git a/projects/ngx-mask-lib/src/test/percent.spec.ts b/projects/ngx-mask-lib/src/test/percent.spec.ts
@@ -227,4 +227,77 @@ describe('Directive: Mask (Percent)', () => {
         equal('12,221', '12,221%', fixture);
         expect(component.form.value).toBe('12.221');
     });
+
+    it('percent with allowNegative = true', () => {
+        component.mask = 'percent';
+        component.allowNegativeNumbers = true;
+
+        equal('-', '-', fixture);
+        equal('-1', '-1', fixture);
+        equal('-12', '-12', fixture);
+        expect(component.form.value).toBe('-12');
+    });
+
+    it('percent 2 with allowNegative = true', () => {
+        component.mask = 'percent.2';
+        component.allowNegativeNumbers = true;
+
+        equal('-', '-', fixture);
+        equal('-1', '-1', fixture);
+        equal('-12', '-12', fixture);
+        equal('-12.3', '-12.3', fixture);
+        equal('-12.34', '-12.34', fixture);
+        expect(component.form.value).toBe('-12.34');
+    });
+
+    it('percent 3 with allowNegative = true', () => {
+        component.mask = 'percent.3';
+        component.allowNegativeNumbers = true;
+
+        equal('-', '-', fixture);
+        equal('-1', '-1', fixture);
+        equal('-12', '-12', fixture);
+        equal('-12.3', '-12.3', fixture);
+        equal('-12.34', '-12.34', fixture);
+        equal('-12.345', '-12.345', fixture);
+        expect(component.form.value).toBe('-12.345');
+    });
+
+    it('percent with allowNegative = true, decimalMarker = ,', () => {
+        component.mask = 'percent';
+        component.decimalMarker = ',';
+        component.allowNegativeNumbers = true;
+
+        equal('-', '-', fixture);
+        equal('-1', '-1', fixture);
+        equal('-12', '-12', fixture);
+        expect(component.form.value).toBe('-12');
+    });
+
+    it('percent 2 with allowNegative = true, decimalMarker = ,', () => {
+        component.mask = 'percent.2';
+        component.decimalMarker = ',';
+        component.allowNegativeNumbers = true;
+
+        equal('-', '-', fixture);
+        equal('-1', '-1', fixture);
+        equal('-12', '-12', fixture);
+        equal('-12,3', '-12,3', fixture);
+        equal('-12,34', '-12,34', fixture);
+        expect(component.form.value).toBe('-12.34');
+    });
+
+    it('percent 3 with allowNegative = true, decimalMarker = ,', () => {
+        component.mask = 'percent.3';
+        component.allowNegativeNumbers = true;
+        component.decimalMarker = ',';
+
+        equal('-', '-', fixture);
+        equal('-1', '-1', fixture);
+        equal('-12', '-12', fixture);
+        equal('-12,3', '-12,3', fixture);
+        equal('-12,34', '-12,34', fixture);
+        equal('-12,345', '-12,345', fixture);
+        expect(component.form.value).toBe('-12.345');
+    });
 });