Merge pull request #3504 from IgniteUI/ganastasov/fix-3493-vnext

fix(mask): ensure single % appended on blur and removed on focus

Author: kacheshmarova

src/app/data-display/mask/mask-sample-4/mask-sample-4.component.html

@@ -1,10 +1,12 @@
 <igx-input-group>
-    <label igxLabel for="email">Increase</label>
-    <input igxInput
-    type="text"
-    [(ngModel)]="value"
-    [igxMask]="'000'"
-    [igxTextSelection]="true"
-    [focusedValuePipe]="inputFormat"
-    [displayValuePipe]="displayFormat"/>
+    <label igxLabel>Increase</label>
+    <input
+        igxInput
+        type="text"
+        [(ngModel)]="value"
+        [igxMask]="'000'"
+        [igxTextSelection]="true"
+        [focusedValuePipe]="inputFormat"
+        [displayValuePipe]="displayFormat"
+    />
 </igx-input-group>

src/app/data-display/mask/mask-sample-4/mask-sample-4.component.ts

@@ -4,7 +4,6 @@ import { Component, Pipe, PipeTransform } from '@angular/core';
     selector: 'app-mask-sample-4',
     templateUrl: './mask-sample-4.component.html'
 })
-
 export class MaskSample4Component {
     public value = 100;
     public displayFormat = new DisplayFormatPipe();
@@ -14,13 +13,22 @@ export class MaskSample4Component {
 @Pipe({ name: 'displayFormat' })
 export class DisplayFormatPipe implements PipeTransform {
     public transform(value: any): string {
-        return value + ' %';
+        if (value !== null && value !== undefined) {
+            value = value.toString().trim();
+            if (!value.endsWith('%')) {
+                value += ' %';
+            }
+        }
+        return value;
     }
 }
 
 @Pipe({ name: 'inputFormat' })
 export class InputFormatPipe implements PipeTransform {
     public transform(value: any): string {
+        if (value !== null && value !== undefined) {
+            value = value.toString().replace(/%/g, '').trim();
+        }
         return value;
     }
 }