From 1c2a959a231edf248e25f72aae1f7542f6fbc725 Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Mon, 19 Mar 2018 14:37:54 +0000
Subject: [PATCH] [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
---
 .../components/widgets/text/text.widget.html  |  2 +-
 .../widgets/text/text.widget.spec.ts          | 33 ++++++++++++++++++-
 .../components/widgets/text/text.widget.ts    |  2 ++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/lib/core/form/components/widgets/text/text.widget.html b/lib/core/form/components/widgets/text/text.widget.html
index 7088711058..90cfcdb165 100644
--- a/lib/core/form/components/widgets/text/text.widget.html
+++ b/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>
diff --git a/lib/core/form/components/widgets/text/text.widget.spec.ts b/lib/core/form/components/widgets/text/text.widget.spec.ts
index f335318fca..da4585114f 100644
--- a/lib/core/form/components/widgets/text/text.widget.spec.ts
+++ b/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 : (__) ___-___');
+            });
+        });
     });
 });
diff --git a/lib/core/form/components/widgets/text/text.widget.ts b/lib/core/form/components/widgets/text/text.widget.ts
index f8b04cdd45..b73a2f88a6 100644
--- a/lib/core/form/components/widgets/text/text.widget.ts
+++ b/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;
         }
     }