From ed68ebb751e585778609f0214edf4e26339da4d9 Mon Sep 17 00:00:00 2001
From: davidcanonieto <david.cano.nieto@gmail.com>
Date: Wed, 24 Jun 2020 15:18:33 +0100
Subject: [PATCH] [ADF-5163] Fix placeholder on Form widgets (#5812)

---
 .../form/components/widgets/date-time/date-time.widget.html   | 2 +-
 .../form/components/widgets/date-time/date-time.widget.scss   | 4 +++-
 lib/core/form/components/widgets/date/date.widget.html        | 2 +-
 lib/core/form/components/widgets/date/date.widget.scss        | 3 +++
 .../widgets/multiline-text/multiline-text.widget.html         | 2 +-
 .../widgets/multiline-text/multiline-text.widget.scss         | 3 +++
 lib/core/form/components/widgets/number/number.widget.html    | 2 +-
 lib/core/form/components/widgets/number/number.widget.scss    | 3 +++
 lib/core/form/components/widgets/text/text.widget.scss        | 3 +++
 .../lib/form/components/widgets/date/date-cloud.widget.html   | 2 +-
 .../lib/form/components/widgets/date/date-cloud.widget.scss   | 3 +++
 11 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.html b/lib/core/form/components/widgets/date-time/date-time.widget.html
index 5ff226c3a7..7422e56934 100644
--- a/lib/core/form/components/widgets/date-time/date-time.widget.html
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.html
@@ -12,7 +12,7 @@
                [max]="maxDate"
                (focusout)="onDateChanged($event.srcElement.value)"
                (dateChange)="onDateChanged($event)"
-               placeholder="{{field.placeholder}}">
+               [placeholder]="field.placeholder">
         <mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
     </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.scss b/lib/core/form/components/widgets/date-time/date-time.widget.scss
index 88b158a6a9..0a9fbee0cd 100644
--- a/lib/core/form/components/widgets/date-time/date-time.widget.scss
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.scss
@@ -5,7 +5,9 @@
         .mat-form-field-suffix {
             top: 26px;
         }
-
+        .mat-form-field-label-wrapper {
+            top: 20px;
+        }
     }
 }
 
diff --git a/lib/core/form/components/widgets/date/date.widget.html b/lib/core/form/components/widgets/date/date.widget.html
index ec1647266b..098c2f223a 100644
--- a/lib/core/form/components/widgets/date/date.widget.html
+++ b/lib/core/form/components/widgets/date/date.widget.html
@@ -11,7 +11,7 @@
                [max]="maxDate"
                (focusout)="onDateChanged($event.srcElement.value)"
                (dateChange)="onDateChanged($event)"
-               placeholder="{{field.placeholder}}">
+               [placeholder]="field.placeholder">
         <mat-datepicker-toggle  matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
     </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
diff --git a/lib/core/form/components/widgets/date/date.widget.scss b/lib/core/form/components/widgets/date/date.widget.scss
index 56e81981b3..de58adb7ee 100644
--- a/lib/core/form/components/widgets/date/date.widget.scss
+++ b/lib/core/form/components/widgets/date/date.widget.scss
@@ -5,5 +5,8 @@
         .mat-form-field-suffix {
             top: 26px;
         }
+        .mat-form-field-label-wrapper {
+            top: 20px;
+        }
     }
 }
diff --git a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
index 0cf014c37f..f5afc98be6 100644
--- a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
@@ -11,7 +11,7 @@
                   [(ngModel)]="field.value"
                   (ngModelChange)="onFieldChanged(field)"
                   [disabled]="field.readOnly || readOnly"
-                  placeholder="{{field.placeholder}}">
+                  [placeholder]="field.placeholder">
         </textarea>
     </mat-form-field>
     <div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">
diff --git a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss
index 7295f22dae..5e0a9f1197 100644
--- a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss
@@ -2,6 +2,9 @@
 
     &-multiline-text-widget {
         width: 100%;
+        .mat-form-field-label-wrapper {
+            top: 20px;
+        }
     }
 
     &-multiline-word-counter {
diff --git a/lib/core/form/components/widgets/number/number.widget.html b/lib/core/form/components/widgets/number/number.widget.html
index 27e5075f08..3057b156ec 100644
--- a/lib/core/form/components/widgets/number/number.widget.html
+++ b/lib/core/form/components/widgets/number/number.widget.html
@@ -12,7 +12,7 @@
                [(ngModel)]="field.value"
                (ngModelChange)="onFieldChanged(field)"
                [disabled]="field.readOnly"
-               placeholder="{{field.placeholder}}">
+               [placeholder]="field.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/number/number.widget.scss b/lib/core/form/components/widgets/number/number.widget.scss
index 140df24f9b..76b37b5218 100644
--- a/lib/core/form/components/widgets/number/number.widget.scss
+++ b/lib/core/form/components/widgets/number/number.widget.scss
@@ -3,5 +3,8 @@
 .adf {
     &-number-widget {
         width: 100%;
+        .mat-form-field-label-wrapper {
+            top: 20px;
+        }
     }
 }
diff --git a/lib/core/form/components/widgets/text/text.widget.scss b/lib/core/form/components/widgets/text/text.widget.scss
index ae5de15f95..30b5421d63 100644
--- a/lib/core/form/components/widgets/text/text.widget.scss
+++ b/lib/core/form/components/widgets/text/text.widget.scss
@@ -3,5 +3,8 @@
 .adf {
     &-text-widget {
         width: 100%;
+        .mat-form-field-label-wrapper {
+            top: 20px;
+        }
     }
 }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
index 0fc95fccde..439a626915 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
@@ -11,7 +11,7 @@
                [max]="maxDate"
                (focusout)="onDateChanged($event.srcElement.value)"
                (dateChange)="onDateChanged($event)"
-               placeholder="{{field.placeholder}}">
+               [placeholder]="field.placeholder">
         <mat-datepicker-toggle  matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
     </mat-form-field>
     <error-widget [error]="field.validationSummary"></error-widget>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
index 0467df58e3..77ab19bb8e 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
@@ -4,5 +4,8 @@
         .mat-form-field-suffix {
             top: 26px;
         }
+        .mat-form-field-label-wrapper {
+            top: 20px;
+        }
     }
 }