AAE-36582 Fix forms misalignment in form renderer [ng18 backup] (#11063)

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

@@ -1,4 +1,4 @@
-<div id="adf-form-renderer" class="{{ formDefinition.className }}"
+<div id="adf-form-renderer" class="{{ formDefinition.className }} adf-form-renderer"
      [ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
     <div *ngIf="formDefinition.hasTabs()">
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">

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

@@ -13,6 +13,14 @@
     height: 100%;
 }
 
+.adf-form-renderer {
+    // override Material styles, otherwise fields collapse on some screen widths
+    // related issue: https://hyland.atlassian.net/browse/AAE-36582
+    .mat-mdc-form-field-infix {
+        width: auto;
+    }
+}
+
 .alfresco-tabs-widget {
     width: 100%;
 
@@ -256,6 +264,18 @@
         line-height: 64px;
         margin-right: 15px;
     }
+
+    &-error-messages-container {
+        min-height: 35px;
+    }
+
+    &-error-messages-container-visible {
+        visibility: visible;
+    }
+
+    &-error-messages-container-hidden {
+        visibility: hidden;
+    }
 }
 
 form-field {
@@ -267,7 +287,3 @@ form-field {
         line-height: normal;
     }
 }
-
-.adf-error-messages-container {
-    min-height: 35px;
-}

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

@@ -2,30 +2,31 @@
 
 .adf-grid-list {
     &-section {
-
         &-single-column {
             display: flex;
             flex-wrap: inherit;
-            align-items: baseline;
+            align-items: center;
             gap: 1%;
 
             @include flex.layout-bp(lt-md) {
+                /* stylelint-disable-next-line declaration-no-important */
                 flex: 1 1 100% !important;
                 flex-direction: column;
             }
 
             .adf-section-widget {
                 @include flex.layout-bp(lt-md) {
+                    /* stylelint-disable-next-line declaration-no-important */
                     width: 100% !important;
                 }
             }
 
             > div {
                 @include flex.layout-bp(lt-md) {
+                    /* stylelint-disable-next-line declaration-no-important */
                     width: 100% !important;
                 }
             }
-
         }
 
         &-column-view-item {

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html

@@ -13,29 +13,30 @@
     <div>
         <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">
+            <mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
-                {{ field.name | translate }}
+            }
-            </mat-label>
+            <input
-                 }
+                matInput
-            <input matInput
+                class="adf-input"
-                   class="adf-input"
+                type="text"
-                   type="text"
+                data-automation-id="adf-display-external-property-widget"
-                   data-automation-id="adf-display-external-property-widget"
+                [id]="field.id"
-                   [id]="field.id"
+                [formControl]="propertyControl"
-                   [formControl]="propertyControl"
+                [required]="field.required"
-                   [required]="field.required"
+            />
-            >
 
             <ng-container *ngIf="previewState">
-                <span class="adf-display-external-property-widget-preview"
+                <span class="adf-display-external-property-widget-preview" data-automation-id="adf-display-external-property-widget-preview">
-                       data-automation-id="adf-display-external-property-widget-preview"
-                >
                     {{ field.params.externalPropertyLabel }}
                 </span>
             </ng-container>
         </mat-form-field>
 
-        <ng-container *ngIf="!previewState">
+        <div
+            class="adf-error-messages-container"
+            [ngClass]="!previewState ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'"
+        >
             <error-widget *ngIf="propertyLoadFailed" [required]="'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate" />
-        </ng-container>
+        </div>
+    </div>
 </div>

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

@@ -11,7 +11,8 @@
     </div>
     <div>
         <mat-form-field class="adf-form-field-input">
-            @if ( (field.name || this.field?.required) && !field.leftLabels) {  <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
+            @if ( (field.name || this.field?.required) && !field.leftLabels) {
+            <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
             <mat-select
                 class="adf-select"
                 [formControl]="dropdownControl"
@@ -29,12 +30,11 @@
                 <mat-option id="readonlyOption" *ngIf="isReadOnlyType" [value]="field.value">{{field.value}}</mat-option>
             </mat-select>
         </mat-form-field>
-        <div class="adf-error-messages-container" *ngIf="!previewState && !field.readOnly">
+        <div
-            <error-widget
+            class="adf-error-messages-container"
-                class="adf-dropdown-required-message"
+            [ngClass]="!previewState && !field.readOnly ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'"
-                *ngIf="showRequiredMessage"
+        >
-                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            <error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
-            />
             <error-widget
                 class="adf-dropdown-failed-message"
                 *ngIf="isRestApiFailed"

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts

@@ -29,7 +29,7 @@ import {
     SelectFilterInputComponent,
     WidgetComponent
 } from '@alfresco/adf-core';
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
 import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -60,6 +60,7 @@ export const HIDE_FILTER_LIMIT = 5;
     imports: [
         NgIf,
         NgFor,
+        NgClass,
         AsyncPipe,
         ReactiveFormsModule,
         MatFormFieldModule,