[AAE-8856] Enable left label for form widgets in several widgets (#7640)

2025-06-30 18:15:11 +00:00 · 2022-05-18 18:43:59 +02:00 · 2022-05-18 18:43:59 +02:00 · b13a5cc282
commit b13a5cc282
parent d4779360d8
13 changed files with 482 additions and 109 deletions
--- a/lib/core/form/components/widgets/amount/amount.widget.html
+++ b/lib/core/form/components/widgets/amount/amount.widget.html
@ -1,26 +1,21 @@
 <div class="adf-amount-widget__container adf-amount-widget {{field.className}}"
-     [class.adf-invalid]="!field.isValid && isTouched()"
-     [class.adf-readonly]="field.readOnly">
-    <label class="adf-label"
-           [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
-    <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
-        <span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
-        <input matInput
-               [matTooltip]="field.tooltip"
-               matTooltipPosition="above"
-               matTooltipShowDelay="1000"
-               class="adf-input"
-               type="text"
-               [id]="field.id"
-               [required]="isRequired()"
-               [placeholder]="placeholder"
-               [value]="field.value"
-               [(ngModel)]="field.value"
-               (ngModelChange)="onFieldChanged(field)"
-               [disabled]="field.readOnly"
-               (blur)="markAsTouched()">
-    </mat-form-field>
-    <error-widget [error]="field.validationSummary"></error-widget>
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-</div>
+       [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"
+       [class.adf-left-label-input-container]="field.leftLabels">
+       <div>
+              <label class="adf-label"
+                     [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+       </div>
+       <div>
+              <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
+                     <span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
+                     <input matInput [matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000"
+                            class="adf-input" type="text" [id]="field.id" [required]="isRequired()"
+                            [placeholder]="placeholder" [value]="field.value" [(ngModel)]="field.value"
+                            (ngModelChange)="onFieldChanged(field)" [disabled]="field.readOnly"
+                            (blur)="markAsTouched()">
+              </mat-form-field>
+              <error-widget [error]="field.validationSummary"></error-widget>
+              <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
+                     required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+       </div>
+</div>
--- a/lib/core/form/components/widgets/amount/amount.widget.scss
+++ b/lib/core/form/components/widgets/amount/amount.widget.scss
@ -2,6 +2,10 @@
    &-amount-widget {
        width: 100%;
        margin-top: 15px;
+
+        .adf-left-label {
+            line-height: 36px;
+        }
    }

    &-amount-widget__input {
--- a/lib/core/form/components/widgets/amount/amount.widget.spec.ts
+++ b/lib/core/form/components/widgets/amount/amount.widget.spec.ts
@ -118,6 +118,7 @@ describe('AmountWidgetComponent - rendering', () => {

    let widget: AmountWidgetComponent;
    let fixture: ComponentFixture<AmountWidgetComponent>;
+    let element: HTMLElement;

    setupTestBed({
        imports: [
@ -130,6 +131,7 @@ describe('AmountWidgetComponent - rendering', () => {
    beforeEach(() => {
        fixture = TestBed.createComponent(AmountWidgetComponent);
        widget = fixture.componentInstance;
+        element = fixture.nativeElement;
    });

    it('[C309692] - Should be possible to set the General Properties for Amount Widget', async () => {
@ -207,6 +209,69 @@ describe('AmountWidgetComponent - rendering', () => {

        expect(tooltip).toEqual(widget.field.tooltip);
    });
+
+    describe('when form model has left labels', () => {
+
+        it('should have left labels classes on leftLabels 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 widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).not.toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).not.toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels false', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), {
+                id: 'amount-id',
+                name: 'amount-name',
+                value: '',
+                type: FormFieldTypes.AMOUNT,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels not present', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                id: 'amount-id',
+                name: 'amount-name',
+                value: '',
+                type: FormFieldTypes.AMOUNT,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+    });
 });

 describe('AmountWidgetComponent settings', () => {
--- a/lib/core/form/components/widgets/date-time/date-time.widget.html
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.html
@ -1,23 +1,27 @@
-<div class="{{field.className}}" id="data-time-widget" [class.adf-invalid]="!field.isValid && isTouched()">
-    <mat-form-field class="adf-date-time-widget" [hideRequiredMarker]="true">
-        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
-        <input matInput
-               [id]="field.id"
-               [value]="field.value"
-               [required]="isRequired()"
-               [disabled]="field.readOnly"
-               (change)="onDateChanged($any($event).srcElement.value)"
-               [placeholder]="field.placeholder"
-               [matTooltip]="field.tooltip"
-               (blur)="markAsTouched()"
-               matTooltipPosition="above"
-               matTooltipShowDelay="1000"
-               (focus)="datetimePicker.open()">
-        <mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
-    </mat-form-field>
-    <error-widget [error]="field.validationSummary"></error-widget>
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-    <mat-datetimepicker #datetimePicker type="datetime" [touchUi]="true" [timeInterval]="5" [disabled]="field.readOnly"></mat-datetimepicker>
+<div class="{{field.className}}" id="data-time-widget" [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-left-label-input-container]="field.leftLabels">
+    <div *ngIf="field.leftLabels">
+        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+     </div>
+    <div>
+        <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">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+            <input matInput
+                   [id]="field.id"
+                   [value]="field.value"
+                   [required]="isRequired()"
+                   [disabled]="field.readOnly"
+                   (change)="onDateChanged($any($event).srcElement.value)"
+                   [placeholder]="field.placeholder"
+                   [matTooltip]="field.tooltip"
+                   (blur)="markAsTouched()"
+                   matTooltipPosition="above"
+                   matTooltipShowDelay="1000"
+                   (focus)="datetimePicker.open()">
+            <mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
+        </mat-form-field>
+        <error-widget [error]="field.validationSummary"></error-widget>
+        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+        <mat-datetimepicker #datetimePicker type="datetime" [touchUi]="true" [timeInterval]="5" [disabled]="field.readOnly"></mat-datetimepicker>
        <input
            type="hidden"
            [matDatetimepicker]="datetimePicker"
@ -26,4 +30,5 @@
            [max]="maxDate"
            [disabled]="field.readOnly"
            (dateInput)="onDateChanged($any($event).targetElement.value)">
+    </div>
 </div>
--- a/lib/core/form/components/widgets/date-time/date-time.widget.scss
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.scss
@ -8,6 +8,16 @@
            top: 20px;
        }
    }
+
+    &-left-label-input-datepicker {
+        .mat-form-field-suffix {
+            top: 0;
+        }
+
+        .mat-form-field-infix {
+            width: 100%;
+        }
+    }
 }

 .mat-datetimepicker-toggle {
--- a/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts
@ -250,4 +250,76 @@ describe('DateTimeWidgetComponent', () => {
                    });
            });
    });
+
+    describe('when form model has left labels', () => {
+
+        it('should have left labels classes on leftLabels true', async () => {
+            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();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).not.toBeNull();
+
+            const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker');
+            expect(leftDatePicker).not.toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).not.toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels false', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), {
+                id: 'datetime-id',
+                name: 'datetime-name',
+                value: '',
+                type: FormFieldTypes.DATETIME,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker');
+            expect(leftDatePicker).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels not present', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                id: 'datetime-id',
+                name: 'datetime-name',
+                value: '',
+                type: FormFieldTypes.DATETIME,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker');
+            expect(leftDatePicker).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+    });
 });
--- 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
@ -1,29 +1,35 @@
-<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid && isTouched()">
-    <mat-form-field class="adf-date-widget" [hideRequiredMarker]="true">
-        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
+<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-left-label-input-container]="field.leftLabels">
+    <div *ngIf="field.leftLabels">
+        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
            *ngIf="isRequired()">*</span></label>
-        <input matInput
-               [id]="field.id"
-               [value]="field.value"
-               [required]="isRequired()"
-               [disabled]="field.readOnly"
-               (change)="onDateChanged($any($event).srcElement.value)"
-               [placeholder]="field.placeholder"
-               [matTooltip]="field.tooltip"
-               (blur)="markAsTouched()"
-               matTooltipPosition="above"
-               matTooltipShowDelay="1000">
-        <mat-datepicker-toggle  matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
-    </mat-form-field>
-    <error-widget [error]="field.validationSummary"></error-widget>
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-    <mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfMomentDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
-    <input
-        type="hidden"
-        [matDatepicker]="datePicker"
-        [value]="field.value | adfMomentDate: field.dateDisplayFormat"
-        [min]="minDate"
-        [max]="maxDate"
-        [disabled]="field.readOnly"
-        (dateInput)="onDateChanged($any($event).targetElement.value)">
+     </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">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
+                *ngIf="isRequired()">*</span></label>
+            <input matInput
+                   [id]="field.id"
+                   [value]="field.value"
+                   [required]="isRequired()"
+                   [disabled]="field.readOnly"
+                   (change)="onDateChanged($any($event).srcElement.value)"
+                   [placeholder]="field.placeholder"
+                   [matTooltip]="field.tooltip"
+                   (blur)="markAsTouched()"
+                   matTooltipPosition="above"
+                   matTooltipShowDelay="1000">
+            <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
+        </mat-form-field>
+        <error-widget [error]="field.validationSummary"></error-widget>
+        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+        <mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfMomentDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
+        <input
+            type="hidden"
+            [matDatepicker]="datePicker"
+            [value]="field.value | adfMomentDate: field.dateDisplayFormat"
+            [min]="minDate"
+            [max]="maxDate"
+            [disabled]="field.readOnly"
+            (dateInput)="onDateChanged($any($event).targetElement.value)">
+    </div>    
 </div>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
@ -8,4 +8,14 @@
            top: 20px;
        }
    }
+
+    &-left-label-input-datepicker {
+        .mat-form-field-suffix {
+            top: 0;
+        }
+
+        .mat-form-field-infix {
+            width: 100%;
+        }
+    }
 }
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
@ -17,7 +17,7 @@

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DateCloudWidgetComponent, DATE_FORMAT_CLOUD } from './date-cloud.widget';
-import { setupTestBed, FormFieldModel, FormModel } from '@alfresco/adf-core';
+import { setupTestBed, FormFieldModel, FormModel, FormFieldTypes } from '@alfresco/adf-core';
 import moment from 'moment-es6';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
@ -230,4 +230,76 @@ describe('DateWidgetComponent', () => {
            });
    });

+    describe('when form model has left labels', () => {
+
+        it('should have left labels classes on leftLabels true', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'date-id',
+                name: 'date-name',
+                value: '',
+                type: FormFieldTypes.DATE,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).not.toBeNull();
+
+            const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker');
+            expect(leftDatePicker).not.toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).not.toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels false', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), {
+                id: 'date-id',
+                name: 'date-name',
+                value: '',
+                type: FormFieldTypes.DATE,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker');
+            expect(leftDatePicker).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels not present', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                id: 'date-id',
+                name: 'date-name',
+                value: '',
+                type: FormFieldTypes.DATE,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker');
+            expect(leftDatePicker).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+    });
+
 });
--- 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
@ -1,22 +1,26 @@
 <div class="adf-dropdown-widget {{field.className}}"
-     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
-        *ngIf="isRequired()">*</span></label>
+     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
+    <div>
+        <label class="adf-label" [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
+            *ngIf="isRequired()">*</span></label>
+    </div>
+    <div>
        <adf-cloud-group [mode]="mode"
-                         [title]="title"
-                         [readOnly]="field.readOnly"
-                         [roles]="roles"
-                         [searchGroupsControl]="search"
-                         [required]="isRequired()"
-                         (changedGroups)="onChangedGroup($event)"
-                         [preSelectGroups]="preSelectGroup"
-                         (blur)="markAsTouched()"
-                         [matTooltip]="field.tooltip"
-                         [matTooltipPosition]="'above'"
-                         [matTooltipShowDelay]="1000">
+                [title]="title"
+                [readOnly]="field.readOnly"
+                [roles]="roles"
+                [searchGroupsControl]="search"
+                [required]="isRequired()"
+                (changedGroups)="onChangedGroup($event)"
+                [preSelectGroups]="preSelectGroup"
+                (blur)="markAsTouched()"
+                [matTooltip]="field.tooltip"
+                [matTooltipPosition]="'above'"
+                [matTooltipShowDelay]="1000">
        </adf-cloud-group>
        <error-widget [error]="field.validationSummary"></error-widget>
        <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+        required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+    </div>
 </div>

--- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
@ -80,4 +80,67 @@ describe('GroupCloudWidgetComponent', () => {
            expect(element.querySelector('.adf-invalid')).toBeTruthy();
        });
    });
+
+    describe('when form model has left labels', () => {
+
+        it('should have left labels classes on leftLabels true', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'group-id',
+                name: 'group-name',
+                value: '',
+                type: FormFieldTypes.GROUP,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).not.toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).not.toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels false', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), {
+                id: 'group-id',
+                name: 'group-name',
+                value: '',
+                type: FormFieldTypes.GROUP,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels not present', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                id: 'group-id',
+                name: 'group-name',
+                value: '',
+                type: FormFieldTypes.GROUP,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+    });
 });
--- 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
@ -1,25 +1,29 @@
 <div class="adf-dropdown-widget {{field.className}}"
-     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
+    <div>
+        <label class="adf-label" [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    </div>
+    <div>
        <adf-cloud-people
-            [preSelectUsers]="preSelectUsers"
-            [validate]="true"
-            [appName]="appName"
-            [title]="title"
-            [readOnly]="field.readOnly"
-            [searchUserCtrl]="search"
-            [required]="isRequired()"
-            (changedUsers)="onChangedUser($event)"
-            [roles]="roles"
-            [mode]="mode"
-            [groupsRestriction]="groupsRestriction"
-            (blur)="markAsTouched()"
-            [matTooltip]="field.tooltip"
-            matTooltipPosition="above"
-            matTooltipShowDelay="1000">
-        </adf-cloud-people>
-    <error-widget [error]="field.validationSummary"></error-widget>
-    <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
-                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+                [preSelectUsers]="preSelectUsers"
+                [validate]="true"
+                [appName]="appName"
+                [title]="title"
+                [readOnly]="field.readOnly"
+                [searchUserCtrl]="search"
+                [required]="isRequired()"
+                (changedUsers)="onChangedUser($event)"
+                [roles]="roles"
+                [mode]="mode"
+                [groupsRestriction]="groupsRestriction"
+                (blur)="markAsTouched()"
+                [matTooltip]="field.tooltip"
+                matTooltipPosition="above"
+                matTooltipShowDelay="1000">
+            </adf-cloud-people>
+        <error-widget [error]="field.validationSummary"></error-widget>
+        <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
+                    required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+    </div>
 </div>

--- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
@ -99,4 +99,67 @@ describe('PeopleCloudWidgetComponent', () => {
            expect(element.querySelector('.adf-invalid')).toBeTruthy();
        });
    });
+
+    describe('when form model has left labels', () => {
+
+        it('should have left labels classes on leftLabels true', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                id: 'people-id',
+                name: 'people-name',
+                value: '',
+                type: FormFieldTypes.PEOPLE,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).not.toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).not.toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels false', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), {
+                id: 'people-id',
+                name: 'people-name',
+                value: '',
+                type: FormFieldTypes.PEOPLE,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+
+        it('should not have left labels classes on leftLabels not present', async () => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                id: 'people-id',
+                name: 'people-name',
+                value: '',
+                type: FormFieldTypes.PEOPLE,
+                readOnly: false,
+                required: true
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const widgetContainer = element.querySelector('.adf-left-label-input-container');
+            expect(widgetContainer).toBeNull();
+
+            const adfLeftLabel = element.querySelector('.adf-left-label');
+            expect(adfLeftLabel).toBeNull();
+        });
+    });
 });