[ADF-2486] input mask placeholder should be shown whenever it is present (#3090)

* [ADF-2486] input mask placeholder should be shown whenever it is present

* [ADF-2486] fixed test for checking placehoolder

lib/core/form/components/widgets/text/text.widget.html

@@ -12,7 +12,7 @@
                (ngModelChange)="onFieldChanged(field)"
                [disabled]="field.readOnly || readOnly"
                [textMask]="{mask: mask, isReversed: isMaskReversed}"
-               placeholder="{{field.placeholder}}">
+               [placeholder]="placeholder">
     </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

lib/core/form/components/widgets/text/text.widget.spec.ts

@@ -131,7 +131,8 @@ describe('TextWidgetComponent', () => {
                     value: '',
                     params: {inputMask: '##-##0,00%'},
                     type: FormFieldTypes.TEXT,
-                    readOnly: false
+                    readOnly: false,
+                    placeholder: 'simple palceholder'
                 });
 
                 fixture.detectChanges();
@@ -143,6 +144,12 @@ describe('TextWidgetComponent', () => {
                 expect(element.querySelector('#text-id')).not.toBeNull();
             });
 
+            it('should show the field placeholder', () => {
+                expect(inputElement).toBeDefined();
+                expect(inputElement).not.toBeNull();
+                expect(inputElement.placeholder).toBe('simple palceholder');
+            });
+
             it('should prevent text to be written if is not allowed by the mask on keyUp event', async(() => {
                 expect(element.querySelector('#text-id')).not.toBeNull();
 
@@ -247,5 +254,29 @@ describe('TextWidgetComponent', () => {
                 });
             }));
         });
+
+        describe('and a mask placeholder is configured', () => {
+
+            beforeEach(() => {
+                widget.field = new FormFieldModel(new FormModel({taskId: 'fake-task-id'}), {
+                    id: 'text-id',
+                    name: 'text-name',
+                    value: '',
+                    params: {inputMask: '##-##0,00%', inputMaskPlaceholder: 'Phone : (__) ___-___'},
+                    type: FormFieldTypes.TEXT,
+                    readOnly: false,
+                    placeholder: 'simple palceholder'
+                });
+
+                fixture.detectChanges();
+            });
+
+            it('should show the input mask placeholder', () => {
+                const inputElement: HTMLInputElement = <HTMLInputElement> element.querySelector('#text-id');
+                expect(inputElement).toBeDefined();
+                expect(inputElement).not.toBeNull();
+                expect(inputElement.placeholder).toBe('Phone : (__) ___-___');
+            });
+        });
     });
 });

lib/core/form/components/widgets/text/text.widget.ts

@@ -31,6 +31,7 @@ import { baseHost , WidgetComponent } from './../widget.component';
 export class TextWidgetComponent extends WidgetComponent implements OnInit {
 
     mask: string;
+    placeholder: string;
     isMaskReversed: boolean;
 
     constructor(public formService: FormService) {
@@ -40,6 +41,7 @@ export class TextWidgetComponent extends WidgetComponent implements OnInit {
     ngOnInit() {
         if (this.field.params && this.field.params['inputMask']) {
             this.mask = this.field.params['inputMask'];
+            this.placeholder = this.field.params['inputMaskPlaceholder'] ? this.field.params['inputMaskPlaceholder'] : this.field.placeholder;
             this.isMaskReversed = this.field.params['inputMaskReversed'] ? this.field.params['inputMaskReversed'] : false;
         }
     }