AAE-36582 Update errors containers in widgets

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

@@ -264,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 {
@@ -275,7 +287,3 @@ form-field {
         line-height: normal;
     }
 }
-
-.adf-error-messages-container {
-    min-height: 35px;
-}

lib/core/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}

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">
-                {{ field.name | translate }}
-            </mat-label>
-                 }
-            <input matInput
-                   class="adf-input"
-                   type="text"
-                   data-automation-id="adf-display-external-property-widget"
-                   [id]="field.id"
-                   [formControl]="propertyControl"
-                   [required]="field.required"
-            >
+            <mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
+            }
+            <input
+                matInput
+                class="adf-input"
+                type="text"
+                data-automation-id="adf-display-external-property-widget"
+                [id]="field.id"
+                [formControl]="propertyControl"
+                [required]="field.required"
+            />
 
             <ng-container *ngIf="previewState">
-                <span class="adf-display-external-property-widget-preview"
-                       data-automation-id="adf-display-external-property-widget-preview"
-                >
+                <span class="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">
-            <error-widget
-                class="adf-dropdown-required-message"
-                *ngIf="showRequiredMessage"
-                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
-            />
+        <div
+            class="adf-error-messages-container"
+            [ngClass]="!previewState && !field.readOnly ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'"
+        >
+            <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';
@@ -59,6 +59,7 @@ export const HIDE_FILTER_LIMIT = 5;
     imports: [
         NgIf,
         NgFor,
+        NgClass,
         AsyncPipe,
         ReactiveFormsModule,
         MatFormFieldModule,