Merge pull request #12658 from IgniteUI/rkaraivanov/issue-7089

ChronosSF · web-flow · commit fba256970279 · 2023-03-10T11:30:49.000+02:00
feat(mask): Escape mask pattern literals
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,11 +23,14 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** The `onSlideChanged`, `onSlideAdded`, `onSlideRemoved`, `onCarouselPaused` and `onCarouselPlaying` outputs have been renamed to `slideChanged`, `slideAdded`, `slideRemoved`, `carouselPaused` and `carouselPlaying` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
 - `IgxRadio`, `IgxRadioGroup`
     - Added component validation along with styles for invalid state
+- `igxMask` directive
+    - Added the capability to escape mask pattern literals.
 - `IgxBadge`
     - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded. 
 - `IgxAvatar`
     - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`. 
 
+
 ## 15.0.1
 
 - `IgxGrid`
diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask-parsing.service.ts b/projects/igniteui-angular/src/lib/directives/mask/mask-parsing.service.ts
@@ -1,7 +1,18 @@
 import { Injectable } from '@angular/core';
 
-/** @hidden */
-export const MASK_FLAGS = ['C', '&', 'a', 'A', '?', 'L', '9', '0', '#'];
+
+const FLAGS = new Set('aACL09#&?');
+const REGEX = new Map([
+    ['C', /(?!^$)/u], // Non-empty
+    ['&', /[^\p{Separator}]/u], // Non-whitespace
+    ['a', /[\p{Letter}\d\p{Separator}]/u], // Alphanumeric & whitespace
+    ['A', /[\p{Letter}\d]/u], // Alphanumeric
+    ['?', /[\p{Letter}\p{Separator}]/u], // Alpha & whitespace
+    ['L', /\p{Letter}/u], // Alpha
+    ['0', /\d/], // Numeric
+    ['9', /[\d\p{Separator}]/u], // Numeric & whitespace
+    ['#', /[\d\-+]/], // Numeric and sign
+]);
 
 /** @hidden */
 export interface MaskOptions {
@@ -15,16 +26,46 @@ export interface Replaced {
     end: number;
 }
 
+interface ParsedMask {
+    literals: Map<number, string>,
+    mask: string
+};
+
+const replaceCharAt = (string: string, idx: number, char: string) =>
+    `${string.substring(0, idx)}${char}${string.substring(idx + 1)}`;
+
+
+export function parseMask(format: string): ParsedMask {
+    const literals = new Map<number, string>();
+    let mask = format;
+
+    for (let i = 0, j = 0; i < format.length; i++, j++) {
+        const [current, next] = [format.charAt(i), format.charAt(i + 1)];
+
+        if (current === '\\' && FLAGS.has(next)) {
+            mask = replaceCharAt(mask, j, '');
+            literals.set(j, next);
+            i++;
+        } else {
+            if (!FLAGS.has(current)) {
+                literals.set(j, current);
+            }
+        }
+    }
+
+    return { literals, mask };
+}
+
 /** @hidden */
 @Injectable({
     providedIn: 'root'
 })
 export class MaskParsingService {
+
     public applyMask(inputVal: string, maskOptions: MaskOptions, pos: number = 0): string {
         let outputVal = '';
         let value = '';
-        const mask: string = maskOptions.format;
-        const literals: Map<number, string> = this.getMaskLiterals(mask);
+        const { literals, mask } = parseMask(maskOptions.format);
         const literalKeys: number[] = Array.from(literals.keys());
         const nonLiteralIndices: number[] = this.getNonLiteralIndices(mask, literalKeys);
         const literalValues: string[] = Array.from(literals.values());
@@ -38,7 +79,7 @@ export class MaskParsingService {
         }
 
         literals.forEach((val: string, key: number) => {
-            outputVal = this.replaceCharAt(outputVal, key, val);
+            outputVal = replaceCharAt(outputVal, key, val);
         });
 
         if (!value) {
@@ -62,17 +103,15 @@ export class MaskParsingService {
 
         for (const nonLiteralValue of nonLiteralValues) {
             const char = nonLiteralValue;
-            outputVal = this.replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
+            outputVal = replaceCharAt(outputVal, nonLiteralIndices[pos++], char);
         }
 
         return outputVal;
     }
 
     public parseValueFromMask(maskedValue: string, maskOptions: MaskOptions): string {
         let outputVal = '';
-        const mask: string = maskOptions.format;
-        const literals: Map<number, string> = this.getMaskLiterals(mask);
-        const literalValues: string[] = Array.from(literals.values());
+        const literalValues: string[] = Array.from(parseMask(maskOptions.format).literals.values());
 
         for (const val of maskedValue) {
             if (literalValues.indexOf(val) === -1) {
@@ -86,7 +125,8 @@ export class MaskParsingService {
     }
 
     public replaceInMask(maskedValue: string, value: string, maskOptions: MaskOptions, start: number, end: number): Replaced {
-        const literalsPositions: number[] = Array.from(this.getMaskLiterals(maskOptions.format).keys());
+        const { literals, mask } = parseMask(maskOptions.format);
+        const literalsPositions = Array.from(literals.keys());
         value = this.replaceIMENumbers(value);
         const chars = Array.from(value);
         let cursor = start;
@@ -102,7 +142,7 @@ export class MaskParsingService {
                 continue;
             }
             if (chars[0]
-                && !this.validateCharOnPosition(chars[0], i, maskOptions.format)
+                && !this.validateCharOnPosition(chars[0], i, mask)
                 && chars[0] !== maskOptions.promptChar) {
                 break;
             }
@@ -112,7 +152,7 @@ export class MaskParsingService {
                 cursor = i + 1;
                 char = chars.shift();
             }
-            maskedValue = this.replaceCharAt(maskedValue, i, char);
+            maskedValue = replaceCharAt(maskedValue, i, char);
         }
 
         if (value.length <= 1) {
@@ -132,83 +172,15 @@ export class MaskParsingService {
             }
         }
 
-        return { value: maskedValue, end: cursor};
-    }
-
-    public replaceCharAt(strValue: string, index: number, char: string): string {
-        if (strValue !== undefined) {
-            return strValue.substring(0, index) + char + strValue.substring(index + 1);
-        }
-    }
-
-    public getMaskLiterals(mask: string): Map<number, string> {
-        const literals = new Map<number, string>();
-
-        for (let i = 0; i < mask.length; i++) {
-            const char = mask.charAt(i);
-            if (MASK_FLAGS.indexOf(char) === -1) {
-                literals.set(i, char);
-            }
-        }
-
-        return literals;
+        return { value: maskedValue, end: cursor };
     }
 
     /** Validates only non literal positions. */
     private validateCharOnPosition(inputChar: string, position: number, mask: string): boolean {
-        let regex: RegExp;
-        let isValid: boolean;
-        const letterOrDigitRegEx = '[\\d\\u00C0-\\u1FFF\\u2C00-\\uD7FFa-zA-Z]';
-        const letterDigitOrSpaceRegEx = '[\\d\\u00C0-\\u1FFF\\u2C00-\\uD7FFa-zA-Z\\u0020]';
-        const letterRegEx = '[\\u00C0-\\u1FFF\\u2C00-\\uD7FFa-zA-Z]';
-        const letterSpaceRegEx = '[\\u00C0-\\u1FFF\\u2C00-\\uD7FFa-zA-Z\\u0020]';
-        const digitRegEx = '[\\d]';
-        const digitSpaceRegEx = '[\\d\\u0020]';
-        const digitSpecialRegEx = '[\\d-\\+]';
-
-        switch (mask.charAt(position)) {
-            case 'C':
-                isValid = inputChar !== '';
-                break;
-            case '&':
-                regex = new RegExp('[\\u0020]');
-                isValid = !regex.test(inputChar);
-                break;
-            case 'a':
-                regex = new RegExp(letterDigitOrSpaceRegEx);
-                isValid = regex.test(inputChar);
-                break;
-            case 'A':
-                regex = new RegExp(letterOrDigitRegEx);
-                isValid = regex.test(inputChar);
-                break;
-            case '?':
-                regex = new RegExp(letterSpaceRegEx);
-                isValid = regex.test(inputChar);
-                break;
-            case 'L':
-                regex = new RegExp(letterRegEx);
-                isValid = regex.test(inputChar);
-                break;
-            case '0':
-                regex = new RegExp(digitRegEx);
-                isValid = regex.test(inputChar);
-                break;
-            case '9':
-                regex = new RegExp(digitSpaceRegEx);
-                isValid = regex.test(inputChar);
-                break;
-            case '#':
-                regex = new RegExp(digitSpecialRegEx);
-                isValid = regex.test(inputChar);
-                break;
-            default: {
-                isValid = null;
-            }
-        }
-
-        return isValid;
+        const regex = REGEX.get(mask.charAt(position));
+        return regex ? regex.test(inputChar) : false;
     }
+
     private getNonLiteralIndices(mask: string, literalKeys: number[]): number[] {
         const nonLiteralsIndices: number[] = new Array();
 
diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts
@@ -58,6 +58,41 @@ describe('igxMask', () => {
         expect(input.nativeElement.value).toEqual('@#$YUA123_');
     });
 
+    it('Initialize an input with escaped mask', () => {
+        const fixture = TestBed.createComponent(DefMaskComponent);
+        fixture.detectChanges();
+
+        const { input, maskDirective } = fixture.componentInstance;
+
+        maskDirective.mask = '+\\9 000 000';
+        fixture.detectChanges();
+
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        fixture.detectChanges();
+
+        expect(input.nativeElement.value).toEqual('+9 ___ ___');
+    });
+
+    it('Escaped mask - advanced escaped patterns with input', () => {
+        const fixture = TestBed.createComponent(DefMaskComponent);
+        fixture.detectChanges();
+
+        const { input, maskDirective } = fixture.componentInstance;
+        maskDirective.mask = '\\C\\C CCCC - \\0\\00 - X\\9\\9';
+        fixture.detectChanges();
+
+        input.nativeElement.dispatchEvent(new Event('focus'));
+        fixture.detectChanges();
+
+        expect(input.nativeElement.value).toEqual('CC ____ - 00_ - X99');
+
+        input.nativeElement.value = 'abcdefgh';
+        input.nativeElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+
+        expect(input.nativeElement.value).toEqual('CC abcd - 00_ - X99');
+    });
+
     it('Mask rules - digit (0-9) or a space', fakeAsync(() => {
         const fixture = TestBed.createComponent(DigitSpaceMaskComponent);
         fixture.detectChanges();
diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts
@@ -5,7 +5,7 @@ import {
     Input, NgModule, OnInit, AfterViewChecked,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MaskParsingService, MaskOptions } from './mask-parsing.service';
+import { MaskParsingService, MaskOptions, parseMask } from './mask-parsing.service';
 import { IBaseEventArgs, PlatformUtil } from '../../core/utils';
 import { noop } from 'rxjs';
 
@@ -212,27 +212,27 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
         // After the compositionend event Chromium triggers input events of type 'deleteContentBackward' and
         // we need to adjust the start and end indexes to include mask literals
         if (event.inputType === 'deleteContentBackward' && this._key !== this.platform.KEYMAP.BACKSPACE) {
-                const isInputComplete = this._compositionStartIndex === 0 && this._end === this.mask.length;
-                let numberOfMaskLiterals = 0;
-                const literalPos = this.maskParser.getMaskLiterals(this.maskOptions.format).keys();
-                for (const index of literalPos) {
-                    if (index >= this._compositionStartIndex && index <= this._end) {
-                        numberOfMaskLiterals++;
-                    }
+            const isInputComplete = this._compositionStartIndex === 0 && this._end === this.mask.length;
+            let numberOfMaskLiterals = 0;
+            const literalPos = parseMask(this.maskOptions.format).literals.keys();
+            for (const index of literalPos) {
+                if (index >= this._compositionStartIndex && index <= this._end) {
+                    numberOfMaskLiterals++;
                 }
-                this.inputValue = isInputComplete ?
+            }
+            this.inputValue = isInputComplete ?
                 this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd)
                 : this._compositionValue?.substring(0, this._compositionStartIndex) || this.inputValue;
 
-                if (this._compositionValue) {
-                    this._start = this.selectionStart;
-                    this._end = this.selectionEnd;
-                    this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
-                    this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
-                    this.nativeElement.selectionEnd = this._end;
-                    this._start = this.selectionStart;
-                    this._end = this.selectionEnd;
-                }
+            if (this._compositionValue) {
+                this._start = this.selectionStart;
+                this._end = this.selectionEnd;
+                this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;
+                this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;
+                this.nativeElement.selectionEnd = this._end;
+                this._start = this.selectionStart;
+                this._end = this.selectionEnd;
+            }
         }
 
         if (this._hasDropAction) {
@@ -377,7 +377,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     protected setPlaceholder(value: string): void {
         const placeholder = this.nativeElement.placeholder;
         if (!placeholder || placeholder === this.mask) {
-            this.renderer.setAttribute(this.nativeElement, 'placeholder', value || this.defaultMask);
+            this.renderer.setAttribute(this.nativeElement, 'placeholder', parseMask(value ?? '').mask || this.defaultMask);
         }
     }
 
diff --git a/src/app/mask/mask.sample.html b/src/app/mask/mask.sample.html
@@ -20,7 +20,7 @@ <h4>Personal Data</h4>
                 <label igxLabel for="socialSecurityNumber">Social Security Number</label>
             </igx-input-group>
             <igx-input-group>
-                <input igxInput #phone name="phone" type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'"
+                <input igxInput #phone name="phone" type="text" [igxMask]="'(+35\\9) 00-00-00 Ext. 9999'"
                        [igxTextSelection]="true"
                        [(ngModel)]="person.phone"/>
                 <label igxLabel for="phone">Phone</label>
