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

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"

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"

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"

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"

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)',

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"

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;

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"

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();

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;