AAE-35976 Adding auto required instead of manually handling styles manually (#10956)

* AAE-35976 adding auto-required instead of manually handling required using asterisks inside mat-form-field elements

* AAE-35976 removing hiderequiredmarker as it'll be handled by the form-fields itself

Resolving merge conflicts with develop

* AAE-35976 fixing units

* AAE-35976 adding isVisible condition with the required field

* AAE-35976 removing the method call from html and using the variable instead for conditions

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

@@ -14,19 +14,20 @@
         >
     </div>
     <div>
-        <mat-form-field class="adf-date-widget" [class.adf-left-label-input-datepicker]="field.leftLabels" [hideRequiredMarker]="true">
-            <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
-                ></mat-label>
+        <mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
+            @if ( (field.name || field?.required) && !field.leftLabels) {
+                <mat-label class="adf-label" [attr.for]="field.id">
+                    {{field.name | translate }} ({{field.dateDisplayFormat}})
+                </mat-label>
+            }
             <input
                 matInput
+                class="adf-input"
                 [matDatepicker]="datePicker"
                 [id]="field.id"
                 [formControl]="dateInputControl"
                 [placeholder]="field.placeholder"
+                [required]="field.required && field.isVisible"
                 [min]="minDate"
                 [max]="maxDate"
                 [title]="field.tooltip"

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

@@ -21,6 +21,9 @@ import { FormFieldModel, FormModel, FormFieldTypes, DEFAULT_DATE_FORMAT } from '
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { DateAdapter } from '@angular/material/core';
 import { isEqual, subDays, addDays } from 'date-fns';
+import { UnitTestingUtils } from '../../../../../../../core/src/lib/testing/unit-testing-utils';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 
 describe('DateCloudWidgetComponent', () => {
     let widget: DateCloudWidgetComponent;
@@ -28,6 +31,8 @@ describe('DateCloudWidgetComponent', () => {
     let element: HTMLElement;
     let adapter: DateAdapter<Date>;
     let form: FormModel;
+    let loader: HarnessLoader;
+    let testingUtils: UnitTestingUtils;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -39,8 +44,10 @@ describe('DateCloudWidgetComponent', () => {
         fixture = TestBed.createComponent(DateCloudWidgetComponent);
         adapter = fixture.debugElement.injector.get(DateAdapter);
 
+        loader = TestbedHarnessEnvironment.loader(fixture);
         widget = fixture.componentInstance;
         element = fixture.nativeElement;
+        testingUtils = new UnitTestingUtils(fixture.debugElement, loader);
     });
 
     it('should not call onFieldChanged on init', () => {
@@ -445,13 +452,15 @@ describe('DateCloudWidgetComponent', () => {
             });
         });
 
-        it('should be able to display label with asterisk', () => {
+        it('should be able to display label with asterisk', async () => {
             fixture.detectChanges();
+            const formField = await testingUtils.getMatFormField();
+            const formControl = await formField.getControl();
 
-            const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
+            expect(formControl.isRequired).toBeTruthy();
 
-            expect(asterisk).toBeTruthy();
-            expect(asterisk.textContent).toEqual('*');
+            const inputField = await testingUtils.getByCSS('.adf-input').nativeElement;
+            expect(inputField.hasAttribute('required')).toBeTruthy();
         });
 
         it('should be invalid after user interaction without typing', () => {

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

@@ -11,16 +11,19 @@
     </div>
 
     <div>
-        <mat-form-field [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-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"
             >
 
             <ng-container *ngIf="previewState">

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

@@ -25,6 +25,7 @@ import { DisplayExternalPropertyWidgetComponent } from './display-external-prope
 import { FormCloudService } from '../../../services/form-cloud.service';
 import { By } from '@angular/platform-browser';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
+import { UnitTestingUtils } from '../../../../../../../core/src/lib/testing/unit-testing-utils';
 
 describe('DisplayExternalPropertyWidgetComponent', () => {
     let loader: HarnessLoader;
@@ -32,6 +33,7 @@ describe('DisplayExternalPropertyWidgetComponent', () => {
     let fixture: ComponentFixture<DisplayExternalPropertyWidgetComponent>;
     let element: HTMLElement;
     let formCloudService: FormCloudService;
+    let testingUtils: UnitTestingUtils;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -42,8 +44,10 @@ describe('DisplayExternalPropertyWidgetComponent', () => {
         fixture = TestBed.createComponent(DisplayExternalPropertyWidgetComponent);
         widget = fixture.componentInstance;
         element = fixture.nativeElement;
+
         loader = TestbedHarnessEnvironment.loader(fixture);
         formCloudService = TestBed.inject(FormCloudService);
+        testingUtils = new UnitTestingUtils(fixture.debugElement, loader);
     });
 
     it('should display initial value', async () => {
@@ -126,11 +130,14 @@ describe('DisplayExternalPropertyWidgetComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should be able to display label with asterisk', () => {
-            const asterisk = element.querySelector('.adf-asterisk');
+        it('should be able to display label with asterisk', async () => {
+            const formField = await testingUtils.getMatFormField();
+            const formControl = await formField.getControl();
 
-            expect(asterisk).toBeTruthy();
-            expect(asterisk?.textContent).toEqual('*');
+            expect(formControl.isRequired).toBeTruthy();
+
+            const inputField = await testingUtils.getByCSS('.adf-input').nativeElement;
+            expect(inputField.hasAttribute('required')).toBeTruthy();
         });
     });
 

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

@@ -10,10 +10,8 @@
         </label>
     </div>
     <div>
-        <mat-form-field>
-            <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
-                {{ field.name | translate }}
-            </mat-label>
+        <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> }
             <mat-select
                 class="adf-select"
                 [formControl]="dropdownControl"
@@ -22,7 +20,8 @@
                 [title]="field.tooltip"
                 panelClass="adf-select-filter"
                 [multiple]="field.hasMultipleValues"
-                [required]="isRequired()"
+                [disabled]="field.readOnly"
+                [required]="field.required "
             >
                 <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)" />
 
@@ -30,7 +29,7 @@
                 <mat-option id="readonlyOption" *ngIf="isReadOnlyType" [value]="field.value">{{field.value}}</mat-option>
             </mat-select>
         </mat-form-field>
-        <div *ngIf="!previewState && !field.readOnly">
+        <div class="adf-error-messages-container" *ngIf="!previewState && !field.readOnly">
             <error-widget
                 class="adf-dropdown-required-message"
                 *ngIf="showRequiredMessage"

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

@@ -38,6 +38,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatSelectHarness } from '@angular/material/select/testing';
 import { DebugElement } from '@angular/core';
 import { FormUtilsService } from '../../../services/form-utils.service';
+import { UnitTestingUtils } from '../../../../../../../core/src/public-api';
 
 describe('DropdownCloudWidgetComponent', () => {
     let formService: FormService;
@@ -47,6 +48,7 @@ describe('DropdownCloudWidgetComponent', () => {
     let fixture: ComponentFixture<DropdownCloudWidgetComponent>;
     let element: HTMLElement;
     let loader: HarnessLoader;
+    let testingUtils: UnitTestingUtils;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -60,6 +62,7 @@ describe('DropdownCloudWidgetComponent', () => {
         formCloudService = TestBed.inject(FormCloudService);
         formUtilsService = TestBed.inject(FormUtilsService);
         loader = TestbedHarnessEnvironment.loader(fixture);
+        testingUtils = new UnitTestingUtils(fixture.debugElement, loader);
     });
 
     afterEach(() => fixture.destroy());
@@ -330,22 +333,15 @@ describe('DropdownCloudWidgetComponent', () => {
 
     describe('when is required', () => {
         beforeEach(() => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>', leftLabels: true }), {
                 type: FormFieldTypes.DROPDOWN,
                 required: true
             });
         });
 
-        it('should be able to display label with asterisk when left-label is present', () => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false, leftLabels: true }), {
-                id: 'dropdown-id',
-                name: 'option list',
-                type: FormFieldTypes.DROPDOWN,
-                options: filterOptionList
-            });
+        it('should be able to display label with asterisk when left-label is present', async () => {
             fixture.detectChanges();
-
-            const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
+            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
 
             expect(asterisk).toBeTruthy();
             expect(asterisk.textContent).toEqual('*');

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

@@ -17,7 +17,7 @@
             [validate]="validate"
             [roles]="roles"
             [searchGroupsControl]="search"
-            [required]="isRequired()"
+            [required]="field.required"
             (changedGroups)="onChangedGroup($event)"
             [preSelectGroups]="preSelectGroup"
             (blur)="markAsTouched()"

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

@@ -76,13 +76,13 @@ describe('GroupCloudWidgetComponent', () => {
 
     describe('when is required', () => {
         beforeEach(() => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>', leftLabels: true }), {
                 type: FormFieldTypes.GROUP,
                 required: true
             });
         });
 
-        it('should be able to display label with asterisk', async () => {
+        it('should be able to display label with asterisk when leftLabel is tru', async () => {
             fixture.detectChanges();
             await fixture.whenStable();
 

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

@@ -12,7 +12,7 @@
             [readOnly]="field.readOnly"
             [validate]="validate"
             [searchUserCtrl]="search"
-            [required]="isRequired()"
+            [required]="field.required"
             (changedUsers)="onChangedUser($event)"
             [roles]="roles"
             [mode]="mode"

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

@@ -104,7 +104,7 @@ describe('PeopleCloudWidgetComponent', () => {
 
     describe('when is required', () => {
         beforeEach(() => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>', leftLabels: true }), {
                 type: FormFieldTypes.PEOPLE,
                 required: true
             });

lib/process-services-cloud/src/lib/group/components/group-cloud.component.html

@@ -1,16 +1,13 @@
 <form>
-    <mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
-        <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-form-field class="adf-cloud-group adf-form-field-input" [class.adf-invalid]="hasError() && isDirty()">
+        @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }
+        <mat-chip-grid [required]="required" #groupChipList data-automation-id="adf-cloud-group-chip-list">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
                 [removable]="!(group.readonly)"
                 [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"
                 (removed)="onRemove(group)"
-                [disabled]="isReadonly() || isValidationLoading()"
+                [disabled]="readOnly || isValidationLoading()"
                 title="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                 {{group.name}}
                 <mat-icon
@@ -19,7 +16,7 @@
                     cancel
                 </mat-icon>
             </mat-chip-row>
-            <input [disabled]="isReadonly()" matInput
+            <input [disabled]="readOnly || isValidationLoading()" matInput
                    [formControl]="searchGroupsControl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="groupChipList"

lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

@@ -2,16 +2,15 @@
     <mat-form-field
         [subscriptSizing]="formFieldSubscriptSizing"
         [floatLabel]="'auto'"
-        class="adf-people-cloud"
+        class="adf-people-cloud adf-form-field-input"
         [class.adf-invalid]="hasError() && isDirty()"
     >
         <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-grid [required]="required" #userMultipleChipList data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
                 [removable]="!user.readonly"
@@ -38,6 +37,7 @@
                 [matChipInputFor]="userMultipleChipList"
                 [required]="required"
                 [placeholder]="placeholder"
+                [disabled]="isReadonly() || isValidationLoading()"
                 (focus)="setFocus(true)"
                 (blur)="setFocus(false); markAsTouched()"
                 class="adf-cloud-input"