AAE-35310 Displaying different text fields on an eform doesn't align vertically or horizontally (#10979)

* AAE-35310 fixing vertical or horizontal alignment issues

* AAE-35310 refactoring code and removed manual scss with flexboxes

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -67,8 +67,6 @@
                 width: 100%;
                 flex-grow: 1;
                 box-sizing: border-box;
-                padding-left: 1%;
-                padding-right: 1%;
             }
         }
 
@@ -76,6 +74,8 @@
             display: flex;
             flex-direction: column;
             flex: 1 1 auto;
+            padding-right: 1%;
+            padding-left: 1%;
         }
 
         &-item {

lib/core/src/lib/form/components/form-section/form-section.component.scss

@@ -2,8 +2,9 @@
     &-section {
         &-single-column {
             display: flex;
-            flex-wrap: wrap;
+            flex-wrap: inherit;
-            align-items: flex-start;
+            align-items: baseline;
+            gap: 1%;
         }
 
         &-column-view-item {
@@ -11,8 +12,6 @@
             display: flex;
             flex-grow: 1;
             box-sizing: border-box;
-            padding-left: 1%;
-            padding-right: 1%;
         }
     }
 }

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -9,7 +9,7 @@
             >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
         >
     </div>
-    <div>
+    <div class="adf-amount-widget-container">
         <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
             @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
             <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>

lib/core/src/lib/form/components/widgets/amount/amount.widget.scss

@@ -4,11 +4,16 @@
 .adf {
     &-amount-widget {
         width: 100%;
-        margin-top: 15px;
 
         .adf-left-label {
             line-height: 36px;
         }
+
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
     }
 
     &-amount-widget__input {

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html

@@ -1,5 +1,6 @@
 <div [ngClass]="field.className"
-     [class.adf-invalid]="!field.isValid && isTouched()">
+     [class.adf-invalid]="!field.isValid && isTouched()" class="adf-checkbox-widget-container"
+>
     <mat-checkbox [id]="field.id"
                   color="primary"
                   class="adf-checkbox"
@@ -8,7 +9,8 @@
                   [(ngModel)]="field.value"
                   (ngModelChange)="onFieldChanged(field)"
                   [title]="field.tooltip"
-                  (click)="markAsTouched()">
+                  (click)="markAsTouched()"
+                  >
         {{ field.name | translate }}
         <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
     </mat-checkbox>

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss

@@ -0,0 +1,11 @@
+.adf {
+    &-checkbox {
+        &-widget {
+            &-container {
+                display: flex;
+                align-items: flex-start;
+                flex-direction: column;
+            }
+        }
+    }
+}

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts

@@ -30,6 +30,7 @@ import { WidgetComponent } from '../widget.component';
     selector: 'checkbox-widget',
     standalone: true,
     templateUrl: './checkbox.widget.html',
+    styleUrl: './checkbox.widget.scss',
     styles: [
         `
             .adf-checkbox {

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -7,7 +7,7 @@
             {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
-    <div>
+    <div class="adf-date-time-widget-container">
         <mat-form-field class="adf-date-time-widget adf-form-field-input"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
                         [floatLabel]="field.placeholder ? 'always' : null">

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss

@@ -3,6 +3,12 @@
 
 .adf {
     &-date-time-widget {
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
         #{ms.$mat-form-field-suffix} {
             top: 26px;
         }

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -1,4 +1,4 @@
-<div class="{{ field.className }}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
+<div class="{{ field.className }} date-widget-container" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
     <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
         <mat-label class="adf-label"
                    [id]="field.id + '-label'"

lib/core/src/lib/form/components/widgets/date/date.widget.scss

@@ -0,0 +1,9 @@
+.adf {
+    &-widget {
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+    }
+}

lib/core/src/lib/form/components/widgets/date/date.widget.ts

@@ -42,6 +42,7 @@ import { ReactiveFormWidget } from '../reactive-widget.interface';
         { provide: DateAdapter, useClass: AdfDateFnsAdapter }
     ],
     templateUrl: './date.widget.html',
+    styleUrl: './date.widget.scss',
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -8,7 +8,7 @@
         </label>
     </div>
 
-    <div>
+    <div class="adf-decimal-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
            @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
             <input matInput

lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss

@@ -2,6 +2,12 @@
     &-decimal-widget {
         width: 100%;
 
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
         .adf-label {
             top: 20px;
         }

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss

@@ -1,6 +1,9 @@
 .adf {
     &-multiline-text-widget {
         width: 100%;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
 
         .adf-label {
             top: 20px;

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -8,7 +8,7 @@
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
-    <div>
+    <div class="adf-number-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
             @if( (field.name || this.field?.required) && !field.leftLabels) {
             <mat-label class="adf-label" [attr.for]="field.id">

lib/core/src/lib/form/components/widgets/number/number.widget.scss

@@ -2,6 +2,12 @@
     &-number-widget {
         width: 100%;
 
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
         .adf-label {
             top: 20px;
         }

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

@@ -7,7 +7,7 @@
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
-    <div>
+    <div class="adf-text-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
             @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}

lib/core/src/lib/form/components/widgets/text/text.widget.scss

@@ -8,5 +8,11 @@
         #{ms.$mat-form-field-label} {
             top: 20px;
         }
+
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
     }
 }

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

@@ -13,7 +13,7 @@
             ></label
         >
     </div>
-    <div>
+    <div class="adf-date-widget-container">
         <mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
             @if ( (field.name || field?.required) && !field.leftLabels) {
                 <mat-label class="adf-label" [attr.for]="field.id">

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss

@@ -11,6 +11,12 @@
         .adf-label {
             top: 20px;
         }
+
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
     }
 
     &-left-label-input-datepicker {

lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss

@@ -1,6 +1,4 @@
 .adf-display-rich-text-widget {
-    padding: 10px;
-
     pre {
         min-height: 100px;
         font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss

@@ -9,7 +9,6 @@
     }
 
     &-radio-button-container {
-        margin-bottom: 15px;
         display: flex;
         flex-direction: column;
 
@@ -23,7 +22,7 @@
     &-radio-button-container-horizontal {
         margin-bottom: 15px;
         display: flex;
-        flex-flow: row wrap;
+        flex-flow: column wrap;
         align-items: flex-start;
         justify-content: flex-start;