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/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -10,10 +10,8 @@
         >
     </div>
     <div>
-        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : null">
+        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
-            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
+            @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
-                >{{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
                 matInput
@@ -21,7 +19,7 @@
                 class="adf-input"
                 type="text"
                 [id]="field.id"
-                [required]="isRequired()"
+                [required]="field.required && field.isVisible"
                 [placeholder]="placeholder"
                 [value]="field.value"
                 [(ngModel)]="field.value"

lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts

@@ -113,14 +113,14 @@ describe('AmountWidgetComponent', () => {
             expect(testingUtils.getByCSS('.adf-invalid')).toBeTruthy();
         });
 
-        it('should be able to display label with asterisk', async () => {
+        it('should be able to display label with asterisk and input field is required', async () => {
-            fixture.detectChanges();
+            const formField = await testingUtils.getMatFormField();
-            await fixture.whenStable();
+            const formControl = await formField.getControl();
 
-            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+            expect(formControl.isRequired).toBeTruthy();
 
-            expect(asterisk).toBeTruthy();
+            const inputField = testingUtils.getByCSS('.adf-input').nativeElement;
-            expect(asterisk.textContent).toEqual('*');
+            expect(inputField.hasAttribute('required')).toBeTruthy();
         });
     });
 });
@@ -193,7 +193,7 @@ describe('AmountWidgetComponent - rendering', () => {
         expect(await field.getPrefixText()).toBe('$');
 
         const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
-        expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
+        expect(widgetLabel.textContent.trim()).toBe('Test Amount');
         expect(widget.field.isValid).toBe(false);
 
         const input = await testingUtils.getMatInput();
@@ -229,7 +229,7 @@ describe('AmountWidgetComponent - rendering', () => {
         await fixture.whenStable();
 
         const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
-        expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
+        expect(widgetLabel.textContent.trim()).toBe('Test Amount');
 
         const field = await testingUtils.getMatFormField();
         expect(await field.getPrefixText()).toBe('£');
@@ -311,6 +311,24 @@ describe('AmountWidgetComponent - rendering', () => {
             expect(testingUtils.getByCSS('.adf-left-label-input-container')).toBeNull();
             expect(testingUtils.getByCSS('.adf-left-label')).toBeNull();
         });
+
+        it('should be able to display label with  manually when left-labels are true', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'amount-id',
+                name: 'amount-name',
+                value: '',
+                type: FormFieldTypes.AMOUNT,
+                readOnly: false,
+                required: true
+            });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+
+            expect(asterisk).toBeTruthy();
+            expect(asterisk.textContent).toEqual('*');
+        });
     });
 });
 

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -10,12 +10,17 @@
     <div>
         <mat-form-field class="adf-date-time-widget adf-form-field-input"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
-                        [hideRequiredMarker]="true" [floatLabel]="field.placeholder ? 'always' : null">
+                        [floatLabel]="field.placeholder ? 'always' : null">
-            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            @if( (field.name || field?.required) && !field.leftLabels) {
-                {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
+            <mat-label class="adf-label" [attr.for]="field.id">
+                {{ field.name | translate }} ({{ field.dateDisplayFormat }})
             </mat-label>
+            }
             <input matInput
+                   class="adf-input"
                    [matDatetimepicker]="datetimePicker"
+                   [readonly]="field.readOnly"
+                   [required]="field.required && field.isVisible"
                    [id]="field.id"
                    [formControl]="datetimeInputControl"
                    (keydown.enter)="datetimePicker.open()"

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -290,14 +290,6 @@ describe('DateTimeWidgetComponent', () => {
             expect(testingUtils.getByCSS('.adf-invalid')).toBeTruthy();
         });
 
-        it('should be able to display label with asterisk', () => {
-            fixture.detectChanges();
-            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
-
-            expect(asterisk).not.toBeNull();
-            expect(asterisk?.textContent).toEqual('*');
-        });
-
         it('should be valid when field is hidden with empty value', () => {
             widget.field.isVisible = false;
             fixture.detectChanges();
@@ -315,6 +307,16 @@ describe('DateTimeWidgetComponent', () => {
             expect(widget.datetimeInputControl.valid).toBeFalse();
             expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
         });
+
+        it('should be able to display label with asterisk and input field is required', async () => {
+            const formField = await testingUtils.getMatFormField();
+            const formControl = await formField.getControl();
+
+            expect(formControl.isRequired).toBeTruthy();
+
+            const inputField = testingUtils.getByCSS('.adf-input').nativeElement;
+            expect(inputField.hasAttribute('required')).toBeTruthy();
+        });
     });
 
     describe('template check', () => {
@@ -504,5 +506,19 @@ describe('DateTimeWidgetComponent', () => {
 
             expect(testingUtils.getByDataAutomationId('adf-date-time-widget-picker')).toBeTruthy();
         });
+
+        it('should be able to display label with asterisk when leftlable is true', () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'datetime-id',
+                name: 'datetime-name',
+                value: '',
+                type: FormFieldTypes.DATETIME,
+                readOnly: false,
+                required: true
+            });
+            fixture.detectChanges();
+            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+            expect(asterisk?.textContent).toEqual('*');
+        });
     });
 });

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -12,6 +12,8 @@
                [placeholder]="field.placeholder"
                [min]="minDate"
                [max]="maxDate"
+               [required]="field.required && field.isVisible"
+               [readonly]="field.readOnly"
         />
         <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
         <mat-datepicker #datePicker

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -9,17 +9,14 @@
     </div>
 
     <div>
-        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
-            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+           @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
-                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </mat-label>
-
             <input matInput
                    class="adf-input"
                    type="text"
                    pattern="-?[0-9]*(\.[0-9]*)?"
                    [id]="field.id"
-                   [required]="isRequired()"
+                   [required]="field.required && field.isVisible"
                    [(ngModel)]="field.value"
                    (ngModelChange)="onFieldChanged(field)"
                    [disabled]="field.readOnly"

lib/core/src/lib/form/components/widgets/decimal/decimal.component.spec.ts

@@ -79,11 +79,14 @@ describe('DecimalComponent', () => {
             expect(testingUtils.getByCSS('.adf-invalid')).toBeTruthy();
         });
 
-        it('should be able to display label with asterisk', async () => {
+        it('should be able to display label with asterisk and input field is required', async () => {
-            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+            const formField = await testingUtils.getMatFormField();
+            const formControl = await formField.getControl();
 
-            expect(asterisk).toBeTruthy();
+            expect(formControl.isRequired).toBeTruthy();
-            expect(asterisk?.textContent).toEqual('*');
+
+            const inputField = testingUtils.getByCSS('.adf-input').nativeElement;
+            expect(inputField.hasAttribute('required')).toBeTruthy();
         });
     });
 
@@ -147,5 +150,22 @@ describe('DecimalComponent', () => {
             const adfLeftLabel = testingUtils.getByCSS('.adf-left-label');
             expect(adfLeftLabel).toBeNull();
         });
+
+        it('should be able to display label with asterisk when leftlabel is true', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'decimal-id',
+                name: 'decimal-name',
+                value: '',
+                type: FormFieldTypes.DECIMAL,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+
+            expect(asterisk).toBeTruthy();
+            expect(asterisk?.textContent).toEqual('*');
+        });
     });
 });

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -1,23 +1,31 @@
-<div class="adf-multiline-text-widget {{ field.className }}"
+<div
-     [class.adf-invalid]="!field.isValid && isTouched()"
+    class="adf-multiline-text-widget {{ field.className }}"
-     [class.adf-readonly]="field.readOnly">
+    [class.adf-invalid]="!field.isValid && isTouched()"
-    <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+    [class.adf-readonly]="field.readOnly"
-        <mat-label class="adf-label" [attr.for]="field.id">
+>
-            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
+    <mat-form-field
-        </mat-label>
+        floatPlaceholder="never"
-        <textarea matInput
+        class="adf-form-field-input"
-                  class="adf-input"
+        [floatLabel]="field.placeholder ? 'always' : null"
-                  [cdkTextareaAutosize]="true"
+    >
-                  type="text"
+        @if(field.name || field.required) {
-                  rows="3"
+        <mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
-                  [id]="field.id"
+        }
-                  [required]="isRequired()"
+        <textarea
-                  [(ngModel)]="field.value"
+            matInput
-                  (ngModelChange)="onFieldChanged(field)"
+            class="adf-input"
-                  [disabled]="field.readOnly || readOnly"
+            [cdkTextareaAutosize]="true"
-                  [placeholder]="field.placeholder"
+            type="text"
-                  [title]="field.tooltip"
+            rows="3"
-                  (blur)="markAsTouched()">
+            [id]="field.id"
+            [required]="field.required"
+            [(ngModel)]="field.value"
+            (ngModelChange)="onFieldChanged(field)"
+            [disabled]="field.readOnly || readOnly"
+            [placeholder]="field.placeholder"
+            [title]="field.tooltip"
+            (blur)="markAsTouched()"
+        >
         </textarea>
     </mat-form-field>
     <div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">
@@ -32,4 +40,3 @@
         />
     </div>
 </div>
-

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.spec.ts

@@ -64,7 +64,8 @@ describe('MultilineTextWidgetComponentComponent', () => {
         beforeEach(() => {
             widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
                 type: FormFieldTypes.MULTILINE_TEXT,
-                required: true
+                required: true,
+                name: 'myField'
             });
             fixture.detectChanges();
         });
@@ -76,11 +77,14 @@ describe('MultilineTextWidgetComponentComponent', () => {
             expect(testingUtils.getByCSS('.adf-invalid')).toBeTruthy();
         });
 
-        it('should be able to display label with asterisk', async () => {
+        it('should be able to display label with asterisk and input field is required', async () => {
-            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+            const formField = await testingUtils.getMatFormField();
+            const formControl = await formField.getControl();
 
-            expect(asterisk).toBeTruthy();
+            expect(formControl.isRequired).toBeTruthy();
-            expect(asterisk.textContent).toEqual('*');
+
+            const inputField = testingUtils.getByCSS('.adf-input').nativeElement;
+            expect(inputField.hasAttribute('required')).toBeTruthy();
         });
     });
 });

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -9,16 +9,18 @@
         </label>
     </div>
     <div>
-        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
-            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            @if( (field.name || this.field?.required) && !field.leftLabels) {
-                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
+            <mat-label class="adf-label" [attr.for]="field.id">
+                {{ field.name | translate }}
             </mat-label>
+            }
             <input matInput
                    class="adf-input"
                    type="text"
                    pattern="-?[0-9]*(\.[0-9]+)?"
                    [id]="field.id"
-                   [required]="isRequired()"
+                   [required]="field.required"
                    [value]="displayValue"
                    [(ngModel)]="field.value"
                    (ngModelChange)="onNumberChange($event)"

lib/core/src/lib/form/components/widgets/number/number.widget.spec.ts

@@ -152,11 +152,14 @@ describe('NumberWidgetComponent', () => {
             expect(testingUtils.getByCSS('.adf-invalid')).toBeTruthy();
         });
 
-        it('should be able to display label with asterisk', async () => {
+        it('should be able to display label with asterisk and input field is required', async () => {
-            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+            const formField = await testingUtils.getMatFormField();
+            const formControl = await formField.getControl();
 
-            expect(asterisk).toBeTruthy();
+            expect(formControl.isRequired).toBeTruthy();
-            expect(asterisk.textContent).toEqual('*');
+
+            const inputField = testingUtils.getByCSS('.adf-input').nativeElement;
+            expect(inputField.hasAttribute('required')).toBeTruthy();
         });
     });
 
@@ -220,5 +223,22 @@ describe('NumberWidgetComponent', () => {
             const adfLeftLabel = testingUtils.getByCSS('.adf-left-label');
             expect(adfLeftLabel).toBeNull();
         });
+
+        it('should be able to display label with asterisk', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'number-id',
+                name: 'number-name',
+                value: '',
+                type: FormFieldTypes.NUMBER,
+                readOnly: false,
+                required: true
+            });
+            fixture.detectChanges();
+
+            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+
+            expect(asterisk).toBeTruthy();
+            expect(asterisk.textContent).toEqual('*');
+        });
     });
 });

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -8,15 +8,16 @@
         </label>
     </div>
     <div>
-        <mat-form-field [hideRequiredMarker]="true" class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
+        <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
-            <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
+            @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
-                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
+                {{ field.name | translate }}
             </mat-label>
+        }
             <input matInput
                    class="adf-input"
                    type="text"
                    [id]="field.id"
-                   [required]="isRequired()"
+                   [required]="field.required"
                    [value]="field.value"
                    [(ngModel)]="field.value"
                    (ngModelChange)="onFieldChanged(field)"

lib/core/src/lib/form/components/widgets/text/text.widget.spec.ts

@@ -182,14 +182,14 @@ describe('TextWidgetComponent', () => {
                 expect(testingUtils.getByCSS('.adf-invalid')).toBeTruthy();
             });
 
-            it('should be able to display label with asterisk', async () => {
+            it('should be able to display label with asterisk and input field is required', async () => {
-                fixture.detectChanges();
+                const formField = await testingUtils.getMatFormField();
-                await fixture.whenStable();
+                const formControl = await formField.getControl();
 
-                const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+                expect(formControl.isRequired).toBeTruthy();
 
-                expect(asterisk).toBeTruthy();
+                const inputField = testingUtils.getByCSS('.adf-input').nativeElement;
-                expect(asterisk.textContent).toEqual('*');
+                expect(inputField.hasAttribute('required')).toBeTruthy();
             });
         });
 
@@ -437,5 +437,23 @@ describe('TextWidgetComponent', () => {
                 expect(adfLeftLabel).toBeNull();
             });
         });
+
+        it('should be able to display label with asterisk', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'text-id',
+                name: 'text-name',
+                value: '',
+                type: FormFieldTypes.TEXT,
+                readOnly: false,
+                required: true
+            });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
+
+            expect(asterisk).toBeTruthy();
+            expect(asterisk.textContent).toEqual('*');
+        });
     });
 });

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-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
-            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
+            @if ( (field.name || field?.required) && !field.leftLabels) {
-                >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
+                <mat-label class="adf-label" [attr.for]="field.id">
-                    class="adf-asterisk"
+                    {{field.name | translate }} ({{field.dateDisplayFormat}})
-                    [style.visibility]="isRequired() ? 'visible' : 'hidden'"
+                </mat-label>
-                    >*</span
+            }
-                ></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();
+            const inputField = await testingUtils.getByCSS('.adf-input').nativeElement;
-            expect(asterisk.textContent).toEqual('*');
+            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">
+        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            @if( (field.name || field?.required) && !field.leftLabels) {
-                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
+            <mat-label class="adf-label" [attr.for]="field.id">
-            </label>
+                {{ 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', () => {
+        it('should be able to display label with asterisk', async () => {
-            const asterisk = element.querySelector('.adf-asterisk');
+            const formField = await testingUtils.getMatFormField();
+            const formControl = await formField.getControl();
 
-            expect(asterisk).toBeTruthy();
+            expect(formControl.isRequired).toBeTruthy();
-            expect(asterisk?.textContent).toEqual('*');
+
+            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-form-field class="adf-form-field-input">
-            <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
+            @if ( (field.name || this.field?.required) && !field.leftLabels) {  <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
-                {{ 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', () => {
+        it('should be able to display label with asterisk when left-label is present', async () => {
-            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
-            });
             fixture.detectChanges();
-
+            const asterisk = testingUtils.getByCSS('.adf-asterisk').nativeElement;
-            const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
 
             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-form-field class="adf-cloud-group adf-form-field-input" [class.adf-invalid]="hasError() && isDirty()">
-        <mat-label>
+        @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }
-            <span>{{label}}</span>
+        <mat-chip-grid [required]="required" #groupChipList data-automation-id="adf-cloud-group-chip-list">
-            <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"
                 [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"

lib/process-services/src/lib/form/start-form/start-form.component.spec.ts

@@ -331,7 +331,7 @@ describe('StartFormComponent', () => {
             expect(dateElement).toBeDefined();
             expect(selectElement).toBeDefined();
 
-            expect(translate.instant(inputLabelElement.textContent.trim())).toBe('ClientName*');
+            expect(translate.instant(inputLabelElement.textContent.trim())).toBe('ClientName');
             expect(translate.instant(dateLabelElement.innerText)).toBe('BillDate (D-M-YYYY)');
             expect(translate.instant(selectLabelElement.innerText)).toBe('ClaimType');
         });