From cb220968cfa2a7ce30294921d5467d73cefc1679 Mon Sep 17 00:00:00 2001
From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com>
Date: Fri, 25 Apr 2025 10:45:24 +0200
Subject: [PATCH] [AAE-34481] Field error message has preserved space (#10820)

* [AAE-34481] field error message has preserved space

* [AAE-34481] updated class name among components

* [AAE-34481] removed redundant code
---
 .../lib/form/components/form-renderer.component.scss |  4 ++++
 .../components/widgets/amount/amount.widget.html     |  9 +++++++--
 .../widgets/base-viewer/base-viewer.widget.html      |  4 +++-
 .../components/widgets/checkbox/checkbox.widget.html | 10 +++++++---
 .../widgets/date-time/date-time.widget.html          |  4 +++-
 .../form/components/widgets/date/date.widget.html    |  7 ++++++-
 .../widgets/decimal/decimal.component.html           | 10 +++++++---
 .../multiline-text/multiline-text.widget.html        | 12 ++++++++----
 .../components/widgets/number/number.widget.html     | 10 +++++++---
 .../form/components/widgets/text/text.widget.html    |  8 +++++---
 .../components/widgets/date/date-cloud.widget.html   |  4 +++-
 .../lib/group/components/group-cloud.component.html  |  2 +-
 .../people/components/people-cloud.component.html    |  2 +-
 13 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss
index 0234f31560..4ebe8b1cf8 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -243,3 +243,7 @@ form-field {
         line-height: normal;
     }
 }
+
+.adf-error-messages-container {
+    min-height: 35px;
+}
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
index 1f5738756a..5e37cecb66 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
@@ -30,7 +30,12 @@
                 (blur)="markAsTouched()"
             />
         </mat-form-field>
-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget
+                *ngIf="isInvalidFieldRequired() && isTouched()"
+                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            />
+        </div>
     </div>
 </div>
diff --git a/lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html b/lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html
index ff49c40fda..f57936f713 100644
--- a/lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html
+++ b/lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html
@@ -9,5 +9,7 @@
                 [fileName]="field.value.fileName"
                 [showViewer]="field.value?.blobFile || field.value?.urlFile"
                 [allowGoBack]="false" />
-    <error-widget [error]="field.validationSummary" />
+    <div class="adf-error-messages-container">
+        <error-widget [error]="field.validationSummary" />
+    </div>
 </div>
diff --git a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
index 4ae48fa9f3..6f9c17fd4f 100644
--- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
+++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
@@ -12,7 +12,11 @@
         {{ field.name | translate }}
         <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
     </mat-checkbox>
-    <error-widget [error]="field.validationSummary" />
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+    <div class="adf-error-messages-container">
+        <error-widget [error]="field.validationSummary" />
+        <error-widget
+            *ngIf="isInvalidFieldRequired() && isTouched()"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+        />
+    </div>
 </div>
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
index 171e76455b..93cd1ac66e 100644
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
@@ -32,6 +32,8 @@
                 [timeInterval]="5"
                 [disabled]="field.readOnly" />
         </mat-form-field>
-        <error-widget *ngIf="datetimeInputControl.invalid && datetimeInputControl.touched" [error]="field.validationSummary" />
+        <div class="adf-error-messages-container">
+            <error-widget *ngIf="datetimeInputControl.invalid && datetimeInputControl.touched" [error]="field.validationSummary" />
+        </div>
     </div>
 </div>
diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html
index cb5041cba2..05c4365481 100644
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html
@@ -18,5 +18,10 @@
                         [startAt]="startAt"
                         [disabled]="field.readOnly" />
     </mat-form-field>
-    <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
+    <div class="adf-error-messages-container">
+        <error-widget
+            *ngIf="dateInputControl.invalid && dateInputControl.touched"
+            [error]="field.validationSummary"
+        />
+    </div>
 </div>
diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
index 980b157214..2e6b69a0ec 100644
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
@@ -28,8 +28,12 @@
                    (blur)="markAsTouched()" />
         </mat-form-field>
 
-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                      required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget
+                *ngIf="isInvalidFieldRequired() && isTouched()"
+                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            />
+        </div>
     </div>
 </div>
diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
index 1773bc56a7..22716cc899 100644
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
@@ -23,9 +23,13 @@
     <div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">
         <span class="adf-multiline-word-counter-value">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</span>
     </div>
-    <error-widget [error]="field.validationSummary" />
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                  class="adf-multiline-required-message"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+    <div class="adf-error-messages-container">
+        <error-widget [error]="field.validationSummary" />
+        <error-widget
+            *ngIf="isInvalidFieldRequired() && isTouched()"
+            class="adf-multiline-required-message"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+        />
+    </div>
 </div>
 
diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.html b/lib/core/src/lib/form/components/widgets/number/number.widget.html
index 1dd46b0d9c..896095f8e1 100644
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.html
+++ b/lib/core/src/lib/form/components/widgets/number/number.widget.html
@@ -27,8 +27,12 @@
                    [title]="field.tooltip"
                    (blur)="markAsTouched()">
         </mat-form-field>
-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                      required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget
+                *ngIf="isInvalidFieldRequired() && isTouched()"
+                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            />
+        </div>
     </div>
 </div>
diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.html b/lib/core/src/lib/form/components/widgets/text/text.widget.html
index 0785082783..d1583a3f09 100644
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.html
+++ b/lib/core/src/lib/form/components/widgets/text/text.widget.html
@@ -26,8 +26,10 @@
                    [title]="field.tooltip"
                    (blur)="markAsTouched()">
         </mat-form-field>
-        <error-widget [error]="field.validationSummary" />
-        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                      required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        <div class="adf-error-messages-container">
+            <error-widget [error]="field.validationSummary" />
+            <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+        </div>
     </div>
 </div>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
index a3c2dc720f..778a6a11fd 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
@@ -35,6 +35,8 @@
             <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
             <mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
         </mat-form-field>
-        <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
+        <div class="adf-error-messages-container">
+            <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
+        </div>
     </div>
 </div>
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
index 56dbf1ac19..4a02dc30a4 100644
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
@@ -59,7 +59,7 @@
     </mat-form-field>
     <mat-progress-bar *ngIf="validationLoading" mode="indeterminate" />
 
-    <div class="adf-error-container">
+    <div class="adf-error-container adf-error-messages-container">
         <mat-error *ngIf="hasPreselectError() &&  !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
             <mat-icon class="adf-error-icon">error_outline</mat-icon>
             <div class="adf-error-text">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
index e358e45e5c..30deacaec3 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
@@ -73,7 +73,7 @@
 
     <mat-progress-bar *ngIf="validationLoading" mode="indeterminate" />
 
-    <div class="adf-error-container" *ngIf="showErrors">
+    <div class="adf-error-container adf-error-messages-container" *ngIf="showErrors">
         <mat-error *ngIf="hasPreselectError() && !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
             <mat-icon class="adf-error-icon">error_outline</mat-icon>
             <div class="adf-error-text">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>