From 79163cbae0794e0b3728625771c8de993b2b3dfe Mon Sep 17 00:00:00 2001
From: Soumyajit Chakraborty <51930458+Isoumyajit@users.noreply.github.com>
Date: Wed, 28 May 2025 23:20:17 +0530
Subject: [PATCH] AAE-34482 Fixing label and alignment issues in forms (#10898)

* AAE-34482 fixing label and alignment issues in forms

* AAE-34482 fixing margin issues

* AAE-34482 adding span inside mat-label

* AAE-34482 fixing units

* AAE-34482 removing unwanted unit

* AAE-34482 fixing unit

* AAE-34482 fixing native element class in unit tests
---
 .../src/lib/form/components/form-renderer.component.scss  | 4 ++++
 .../lib/form/components/widgets/amount/amount.widget.html | 6 +++---
 .../lib/form/components/widgets/amount/amount.widget.scss | 4 ++++
 .../form/components/widgets/amount/amount.widget.spec.ts  | 4 ++--
 .../components/widgets/date-time/date-time.widget.html    | 4 ++--
 .../components/widgets/decimal/decimal.component.html     | 4 ++--
 .../widgets/multiline-text/multiline-text.widget.html     | 4 ++--
 .../lib/form/components/widgets/number/number.widget.html | 4 ++--
 .../src/lib/form/components/widgets/text/text.widget.html | 4 ++--
 .../form/components/widgets/date/date-cloud.widget.html   | 5 ++---
 .../widgets/dropdown/dropdown-cloud.widget.html           | 4 ++--
 .../form/components/widgets/group/group-cloud.widget.html | 7 ++-----
 .../components/widgets/people/people-cloud.widget.html    | 8 ++------
 .../form/components/widgets/people/people-cloud.widget.ts | 3 ++-
 .../src/lib/group/components/group-cloud.component.html   | 5 ++++-
 .../src/lib/group/components/group-cloud.component.ts     | 4 ++++
 .../src/lib/people/components/people-cloud.component.html | 6 +++++-
 .../lib/people/components/people-cloud.component.spec.ts  | 8 --------
 .../src/lib/people/components/people-cloud.component.ts   | 4 ++++
 19 files changed, 50 insertions(+), 42 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 49da89f04d..88b18fc8f2 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -16,6 +16,10 @@
 .alfresco-tabs-widget {
     width: 100%;
 
+    .adf-form-tab-content {
+        margin-top: 1em;
+    }
+
     .adf-form-tab-group {
         width: 100%;
     }
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 5e37cecb66..5fa889815c 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
@@ -10,9 +10,9 @@
         >
     </div>
     <div>
-        <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
-                >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+        <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : 'auto'">
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
+                >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></mat-label
             >
             <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
             <input
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
index f9d7d37dca..3a0e775ee7 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
@@ -24,6 +24,10 @@
             align-self: flex-end;
         }
 
+        .adf-input {
+            margin-top: 3px;
+        }
+
         &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
             .adf-amount-widget__prefix-spacing {
                 color: var(--adf-theme-foreground-secondary-text-color);
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts b/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
index 5f06b9170e..457ff2b3c3 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
@@ -192,7 +192,7 @@ describe('AmountWidgetComponent - rendering', () => {
         expect(inputField).toBeTruthy();
         expect(await field.getPrefixText()).toBe('$');
 
-        const widgetLabel = testingUtils.getByCSS('label.adf-label').nativeElement;
+        const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
         expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
         expect(widget.field.isValid).toBe(false);
 
@@ -228,7 +228,7 @@ describe('AmountWidgetComponent - rendering', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const widgetLabel = testingUtils.getByCSS('label.adf-label').nativeElement;
+        const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
         expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
 
         const field = await testingUtils.getMatFormField();
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 93cd1ac66e..edb1b8c906 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
@@ -11,9 +11,9 @@
         <mat-form-field class="adf-date-time-widget"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
                         [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <input matInput
                    [matDatetimepicker]="datetimePicker"
                    [id]="field.id"
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 2e6b69a0ec..895fa38998 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
@@ -10,9 +10,9 @@
 
     <div>
         <mat-form-field [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
 
             <input matInput
                    class="adf-input"
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 22716cc899..be5812aa07 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
@@ -2,9 +2,9 @@
      [class.adf-invalid]="!field.isValid && isTouched()"
      [class.adf-readonly]="field.readOnly">
     <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true">
-        <label class="adf-label" [attr.for]="field.id">
+        <mat-label class="adf-label" [attr.for]="field.id">
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-        </label>
+        </mat-label>
         <textarea matInput
                   class="adf-input"
                   [cdkTextareaAutosize]="true"
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 896095f8e1..5753f5649a 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
@@ -10,9 +10,9 @@
     </div>
     <div>
         <mat-form-field [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <input matInput
                    class="adf-input"
                    type="text"
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 d1583a3f09..a8f27b1b55 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
@@ -9,9 +9,9 @@
     </div>
     <div>
         <mat-form-field [hideRequiredMarker]="true">
-            <label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
+            <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <input matInput
                    class="adf-input"
                    type="text"
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 778a6a11fd..7327e709b5 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
@@ -15,13 +15,12 @@
     </div>
     <div>
         <mat-form-field class="adf-date-widget" [class.adf-left-label-input-datepicker]="field.leftLabels" [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
                 >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
                     class="adf-asterisk"
                     [style.visibility]="isRequired() ? 'visible' : 'hidden'"
                     >*</span
-                ></label
-            >
+                ></mat-label>
             <input
                 matInput
                 [matDatepicker]="datePicker"
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
index 2e848f0e73..a3209be565 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
@@ -11,9 +11,9 @@
     </div>
     <div>
         <mat-form-field>
-            <label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
+            <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <mat-select
                 class="adf-select"
                 [formControl]="dropdownControl"
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
index 452326b31c..e4add7ffa5 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
@@ -22,11 +22,8 @@
             [preSelectGroups]="preSelectGroup"
             (blur)="markAsTouched()"
             [attr.title]="field.tooltip"
-        >
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label
-                >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-            >
-        </adf-cloud-group>
+            [label] = "field.name | translate"
+        />
         <error-widget [error]="field.validationSummary" />
         <error-widget
             class="adf-dropdown-required-message"
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
index e23c54e9c3..2da7a98b12 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
@@ -19,12 +19,8 @@
             [groupsRestriction]="groupsRestriction"
             (blur)="markAsTouched()"
             [attr.title]="field.tooltip"
-        >
-            <label class="adf-label"
-                   *ngIf="!field.leftLabels"
-                   [attr.for]="field.id" label
-            >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
-        </adf-cloud-people>
+            [label]="field.name | translate"
+        />
         <error-widget [error]="field.validationSummary" />
         <error-widget
             class="adf-dropdown-required-message"
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts
index df6619ecbe..1a3171b44e 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts
@@ -26,13 +26,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { PeopleCloudComponent } from '../../../../people/components/people-cloud.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 /* eslint-disable @angular-eslint/component-selector */
 
 @Component({
     selector: 'people-cloud-widget',
     standalone: true,
-    imports: [CommonModule, TranslateModule, ErrorWidgetComponent, PeopleCloudComponent],
+    imports: [CommonModule, TranslateModule, ErrorWidgetComponent, PeopleCloudComponent, MatFormFieldModule],
     templateUrl: './people-cloud.widget.html',
     host: {
         '(click)': 'event($event)',
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 4a02dc30a4..eaa7343f58 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
@@ -1,6 +1,9 @@
 <form>
     <mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
-        <ng-content select="[label]" />
+        <mat-label>
+            <span>{{label}}</span>
+            <span class="adf-asterisk" [style.visibility]="required ? 'visible' : 'hidden'">*</span>
+        </mat-label>
         <mat-chip-grid #groupChipList data-automation-id="adf-cloud-group-chip-list">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts
index e5a758300d..fe382efc95 100644
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts
@@ -75,6 +75,10 @@ import { IdentityGroupService } from '../services/identity-group.service';
     encapsulation: ViewEncapsulation.None
 })
 export class GroupCloudComponent implements OnInit, OnChanges {
+    /** Label for the user selection component. */
+    @Input()
+    label: string;
+
     /** Name of the application. If specified this shows the groups who have access to the app. */
     @Input()
     appName: string;
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 04757b6e44..8a8df7266b 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
@@ -5,8 +5,12 @@
         class="adf-people-cloud"
         [class.adf-invalid]="hasError() && isDirty()"
     >
-        <ng-content *ngIf="!title" select="[label]" />
+        <mat-label *ngIf="!title">
+            <span>{{label}}</span>
+            <span class="adf-asterisk" [style.visibility]="required ? 'visible' : 'hidden'">*</span>
+        </mat-label>
         <mat-label *ngIf="title">{{ title | translate }}</mat-label>
+
         <mat-chip-grid #userMultipleChipList data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
index 9094eb323d..1e248805b3 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
@@ -100,14 +100,6 @@ describe('PeopleCloudComponent', () => {
         expect(await inputField.getLabel()).toEqual('TITLE_KEY');
     });
 
-    it('should not populate label when title is not present', async () => {
-        fixture.detectChanges();
-
-        const inputField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-people-cloud' }));
-
-        expect(await inputField.getLabel()).toBeNull();
-    });
-
     describe('Search user', () => {
         beforeEach(() => {
             fixture.detectChanges();
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts
index d7ba746a0b..23d2fcd80b 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts
@@ -80,6 +80,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     encapsulation: ViewEncapsulation.None
 })
 export class PeopleCloudComponent implements OnInit, OnChanges, AfterViewInit {
+    /** Label for the user selection component. */
+    @Input()
+    label: string;
+
     /** Name of the application. If specified, this shows the users who have access to the app. */
     @Input()
     appName: string;