[ADF-5163] Fix placeholder on Form widgets (#5812)

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>

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;
+        }
     }
 }
 

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>

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;
+        }
     }
 }

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">

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 {

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>

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;
+        }
     }
 }

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;
+        }
     }
 }

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>

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;
+        }
     }
 }