Fix(#1182) (#1190)

* fix(#1186): fix 1186

* fix(#1186): fix 1186

CHANGELOG.md

@@ -1,9 +1,18 @@
+# 16.2.3(2023-07-05)
+
+### Fix
+
+-   Fix ([#842](https://github.com/JsDaddy/ngx-mask/issues/842))
+-   Fix ([#623](https://github.com/JsDaddy/ngx-mask/issues/623))
+-   Fix ([#836](https://github.com/JsDaddy/ngx-mask/issues/836))
+-   Fix ([#1182](https://github.com/JsDaddy/ngx-mask/issues/1182))
+-   Fix ([#752](https://github.com/JsDaddy/ngx-mask/issues/752))
+
 # 16.2.2(2023-07-03)
 
 ### Fix
 
 -   Fix ([#1186](https://github.com/JsDaddy/ngx-mask/issues/1186))
--   Fix ([#1182](https://github.com/JsDaddy/ngx-mask/issues/1182))
 
 # 16.2.1(2023-06-30)
 

README.md

@@ -19,7 +19,7 @@
 You can also try our NGX LOADER INDICATOR [check](https://www.npmjs.com/package/ngx-loader-indicator).
 You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste).
 
-### You can try live [demo](https://jsdaddy.github.io/ngx-mask/) with examples
+### You can try live [documentation](https://jsdaddy.github.io/ngx-mask/) with examples
 
 
 ## Installing

projects/ngx-mask-lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "16.2.2",
+    "version": "16.2.3",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",

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

@@ -576,7 +576,8 @@ export class NgxMaskApplierService {
                 } else if (
                     this.showMaskTyped &&
                     this.specialCharacters.indexOf(inputSymbol) < 0 &&
-                    inputSymbol !== this.placeHolderCharacter
+                    inputSymbol !== this.placeHolderCharacter &&
+                    this.placeHolderCharacter.length === 1
                 ) {
                     stepBack = true;
                 }

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

@@ -671,10 +671,12 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
                     .replace(MaskExpression.DOT, MaskExpression.COMMA);
             }
             if (this.maskExpression?.startsWith(MaskExpression.SEPARATOR) && this.leadZero) {
-                this._maskService.applyMask(
-                    inputValue.toString(),
-                    this._maskService.maskExpression
-                );
+                requestAnimationFrame(() => {
+                    this._maskService.applyMask(
+                        inputValue.toString(),
+                        this._maskService.maskExpression
+                    );
+                });
             }
             this._maskService.isNumberValue = true;
         }

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

@@ -66,6 +66,7 @@ export class NgxMaskService extends NgxMaskApplierService {
             this.formControlResult(this.prefix);
             return this.prefix + this.maskIsShown;
         }
+
         const getSymbol: string =
             !!inputValue && typeof this.selStart === 'number'
                 ? inputValue[this.selStart] ?? MaskExpression.EMPTY_STRING
@@ -117,7 +118,7 @@ export class NgxMaskService extends NgxMaskApplierService {
             // eslint-disable-next-line no-param-reassign
             this.deletedSpecialCharacter = false;
         }
-        if (this.showMaskTyped) {
+        if (this.showMaskTyped && this.placeHolderCharacter.length === 1) {
             // eslint-disable-next-line no-param-reassign
             inputValue = this.removeMask(inputValue);
         }
@@ -321,6 +322,9 @@ export class NgxMaskService extends NgxMaskApplierService {
                     return this._checkForCpfCnpj(inputVal);
                 }
             }
+            if (this.placeHolderCharacter.length === this.maskExpression.length) {
+                return this.placeHolderCharacter;
+            }
             return this.maskExpression.replace(/\w/g, this.placeHolderCharacter);
         }
         return '';

projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts

@@ -26,4 +26,14 @@ describe('Directive: Mask', () => {
         equal('22222.333333', '22222.33', fixture);
         equal('22212323232', '22212323232', fixture);
     });
+
+    it('custom with symbols Á, á', () => {
+        const testPattern = {
+            S: { pattern: new RegExp('[A-Za-z-Áá]') },
+        };
+        component.mask = 'S*';
+        component.patterns = testPattern;
+        equal('Fernándos', 'Fernándos', fixture);
+        equal('Ánton', 'Ánton', fixture);
+    });
 });

projects/ngx-mask-lib/src/test/separator.spec.ts

@@ -976,7 +976,9 @@ describe('Separator: Mask', () => {
         component.form.setValue('10.2');
         tick();
         expect(inputTarget.value).toBe('10.20');
-        expect(component.form.value).toBe('10.20');
+        requestAnimationFrame(() => {
+            expect(component.form.value).toBe('10.20');
+        });
     }));
 
     it('should change formValue separator.3', fakeAsync(() => {
@@ -990,6 +992,8 @@ describe('Separator: Mask', () => {
         component.form.setValue('10.2');
         tick();
         expect(inputTarget.value).toBe('10.200');
-        expect(component.form.value).toBe('10.200');
+        requestAnimationFrame(() => {
+            expect(component.form.value).toBe('10.200');
+        });
     }));
 });

projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts

@@ -102,4 +102,33 @@ describe('Directive: Mask', () => {
         equal('12345679', '123-4*-****', fixture);
         equal('123456791', '123-4*-****', fixture);
     });
+
+    it('showMaskTyped && placeholder XXXXX-YYYY', () => {
+        component.showMaskTyped = true;
+        component.placeHolderCharacter = 'XXXXX-YYYY';
+        component.mask = '00000-0000';
+        equal('1', '1XXXX-YYYY', fixture);
+        equal('12', '12XXX-YYYY', fixture);
+        equal('123', '123XX-YYYY', fixture);
+        equal('1234', '1234X-YYYY', fixture);
+        equal('12345', '12345-YYYY', fixture);
+        equal('123456', '12345-6YYY', fixture);
+        equal('1234567', '12345-67YY', fixture);
+        equal('12345678', '12345-678Y', fixture);
+        equal('123456789', '12345-6789', fixture);
+    });
+
+    it('showMaskTyped && placeholder 00/00/0000', () => {
+        component.showMaskTyped = true;
+        component.placeHolderCharacter = 'dd/mm/yyyy';
+        component.mask = '00/00/0000';
+        equal('1', '1d/mm/yyyy', fixture);
+        equal('12', '12/mm/yyyy', fixture);
+        equal('123', '12/3m/yyyy', fixture);
+        equal('1234', '12/34/yyyy', fixture);
+        equal('12345', '12/34/5yyy', fixture);
+        equal('123456', '12/34/56yy', fixture);
+        equal('1234567', '12/34/567y', fixture);
+        equal('12345678', '12/34/5678', fixture);
+    });
 });