Merge branch 'master' into mvenkov/tree-grid-batch-update

CHANGELOG.md

@@ -11,6 +11,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxIconModule`:
     - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated.
     - **Breaking change** `glyphName` property of the `igxIconComponent` is deprecated.
+- `IgxMask`:
+    - `placeholder` input property is added to allow developers to specify the placeholder attribute of the host input element that the `igxMask` is applied on;
+    - `displayValuePipe` input property is provided that allows developers to additionally transform the value on blur;
+    - `focusedValuePipe` input property is provided that allows developers to additionally transform the value on focus;
 - `IgxTreeGrid`:
     - Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.
     - You can now export the tree grid both to CSV and Excel.

projects/igniteui-angular/src/lib/directives/mask/README.md

@@ -50,6 +50,29 @@ handleValueChange(event) {
 <input type="text" igxInput [(ngModel)]="1234567890" [igxMask]="'(000) 0000-000'" (onValueChange)="handleValueChange($event)"/>
 ```
 
+Use the `placeholder` input property to specify the placeholder attribute of the host input element that the `igxMask` is applied on.
+```typescript
+placeholder = 'hello';
+```
+```html
+<input type="text" igxInput [igxMask]="'CCCCCC'" [placeholder]="placeholder"/>
+```
+
+Use the `focusedValuePipe` and `displayValuePipe` input properties to additionally transform the value on focus and blur.
+```typescript
+@Pipe({ name: "displayFormat" })
+export class DisplayFormatPipe implements PipeTransform {
+     transform(value: any): string {
+        return value.toLowerCase();
+    }
+}
+
+displayFormat = new DisplayFormatPipe();
+```
+```html
+<input type="text" igxInput [igxMask]="'CCCCCC'" [displayValuePipe]="displayFormat"/>
+```
+
 ### API
 
 ### Inputs
@@ -58,6 +81,9 @@ handleValueChange(event) {
 | `mask`| `String` | Represents the current mask. |
 | `promptChar`| `String` | Character representing a fillable spot in the mask. |
 | `includeLiterals`| `Boolean` | Include or exclude literals in the raw value. |
+| `placeholder`| `string` | Specifies a short hint that describes the expected value. |
+| `displayValuePipe`| `PipeTransform` | A pipe to transform the input value on blur. |
+| `focusedValuePipe`| `PipeTransform` | A pipe to transform the input value on focus. |
 
 ### Outputs
 | Name | Return Type | Description |

projects/igniteui-angular/src/lib/directives/mask/mask-helper.ts

@@ -87,6 +87,22 @@ export class MaskHelper {
         return inputValue;
     }
 
+    public parseMask(maskOptions): string {
+        let outputVal = '';
+        const mask: string = maskOptions.format;
+        const literals: Map<number, string> = this.getMaskLiterals(mask);
+
+        for (const maskSym of mask) {
+            outputVal += maskOptions.promptChar;
+        }
+
+        literals.forEach((val: string, key: number) => {
+            outputVal = this.replaceCharAt(outputVal, key, val);
+        });
+
+        return outputVal;
+    }
+
     public parseValueByMaskOnInit(inputVal, maskOptions): string {
         let outputVal = '';
         let value = '';