AAE-46057 Stabilize form field status layout (#12165)

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

@@ -20,6 +20,12 @@
     .mat-mdc-form-field-infix {
         width: auto;
     }
+
+    .adf-form-field-input:not(.adf-inplace-input-mat-form-field, .adf-people-cloud, .adf-cloud-group) {
+        #{ms.$mat-form-field-subscript-wrapper} {
+            height: 40px;
+        }
+    }
 }
 
 .alfresco-tabs-widget {
@@ -40,7 +46,7 @@
 
 .adf-container-widget {
     .adf-form-field-input:not(.adf-inplace-input-mat-form-field, .adf-people-cloud, .adf-cloud-group) {
-        margin-bottom: 35px;
+        margin-bottom: 0;
     }
 
     .adf-grid-list {
@@ -265,7 +271,7 @@
     }
 
     &-error-messages-container {
-        min-height: 35px;
+        height: 40px;
     }
 
     &-error-messages-container-visible {

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

@@ -5,7 +5,7 @@
         &-single-column {
             display: flex;
             flex-wrap: inherit;
-            align-items: center;
+            align-items: flex-start;
             gap: 1%;
 
             @include flex.layout-bp(lt-md) {

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

@@ -16,10 +16,9 @@
         <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
     </mat-checkbox>
     <div class="adf-error-messages-container">
-        <error-widget [error]="field.validationSummary" />
         <error-widget
-            *ngIf="isInvalidFieldRequired() && isTouched()"
-            required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            [error]="field.validationSummary"
+            [required]="isInvalidFieldRequired() && isTouched() ? ('FORM.FIELD.REQUIRED' | translate) : ''"
         />
     </div>
 </div>

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

@@ -17,7 +17,7 @@
 
 /* eslint-disable @angular-eslint/component-selector */
 
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -47,7 +47,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [NgClass, MatCheckboxModule, FormsModule, TranslatePipe, ErrorWidgetComponent, NgIf],
+    imports: [NgClass, MatCheckboxModule, FormsModule, TranslatePipe, ErrorWidgetComponent],
     encapsulation: ViewEncapsulation.None
 })
 export class CheckboxWidgetComponent extends WidgetComponent {}

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

@@ -10,12 +10,16 @@
     }
 }
 
+error-widget {
+    display: block;
+}
+
 .adf-error {
     display: flex;
     align-items: center;
 
     &-widget-container {
-        height: auto;
+        height: 40px;
     }
 
     &-animate {

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

@@ -1,6 +1,7 @@
 .adf-hyperlink-widget {
     padding: 0.4375em 0;
     border-top: 0.8438em solid transparent;
+    margin-bottom: 20px;
 
     a {
         color: var(--mat-sys-primary);

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

@@ -43,6 +43,6 @@
     @include mixins.adf-error-icon;
 }
 
-.adf-container-widget .adf-multiline-text-widget .adf-form-field-input.adf-has-counter {
-    margin-bottom: 44px;
+.adf-container-widget .adf-multiline-text-widget mat-form-field.adf-form-field-input.adf-has-counter {
+    margin-bottom: 20px;
 }

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

@@ -9,7 +9,8 @@
     }
 
     &-row-action {
-        margin-left: 10px;
+        margin-inline-start: 10px;
+        margin-block-end: 35px;
     }
 
     &-row-limit {

lib/core/src/lib/styles/_mat-selectors.scss

@@ -17,6 +17,7 @@ $mat-button: '.mat-mdc-button';
 $mat-button-label: '.mdc-button__label';
 $mat-form-field: '.mat-mdc-form-field';
 $mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
+$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
 $mat-line-ripple: '.mdc-line-ripple';
 $mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
 $mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';