[AAE-8764] Enable left labels in text, number and dropdown cloud widget (#7628)

lib/core/form/components/form-renderer.component.scss

@@ -106,6 +106,19 @@
             font-weight: bold;
         }
     }
+
+    &-left-label-input-container {
+        display: flex;
+
+        div:nth-child(2) {
+            flex: 1;
+        }
+    }
+
+    &-left-label {
+        line-height: 64px;
+        margin-right: 15px;
+    }
 }
 
 form-field {

lib/core/form/components/widgets/core/form-field.model.ts

@@ -76,6 +76,7 @@ export class FormFieldModel extends FormWidgetModel {
     rule?: FormFieldRule;
     selectLoggedUser: boolean;
     groupsRestriction: string[];
+    leftLabels: boolean = false;
 
     // container model members
     numberOfColumns: number = 1;
@@ -219,6 +220,10 @@ export class FormFieldModel extends FormWidgetModel {
             }
         }
 
+        if (form?.json) {
+            this.leftLabels = form.json.leftLabels || false;
+        }
+
         const emptyOption = Array.isArray(this.options) ? this.options.find(({ id }) => id === 'empty') : undefined;
         if (this.hasEmptyValue === undefined) {
             this.hasEmptyValue = json?.hasEmptyValue ?? !!emptyOption;

lib/core/form/components/widgets/form.theme.scss

@@ -64,6 +64,10 @@ ul > li > form-field > .adf-focus {
             border-color: var(--theme-warn-color);
         }
     }
+
+    &-left-label {
+        color: var(--theme-secondary-text-color);
+    }
 }
 
 /* query for Microsoft IE 11 */

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

@@ -1,7 +1,11 @@
 <div class="adf-textfield adf-number-widget {{field.className}}"
-     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
+     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [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 }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    </div>
+    <div>
         <mat-form-field [hideRequiredMarker]="true">
-        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
             <input matInput
                 class="adf-input"
                 type="text"
@@ -20,4 +24,5 @@
         </mat-form-field>
         <error-widget [error]="field.validationSummary" ></error-widget>
         <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+    </div>
 </div>

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

@@ -15,17 +15,101 @@
  * limitations under the License.
  */
 
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreTestingModule, setupTestBed } from 'core/testing';
+import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
 import { NumberWidgetComponent } from './number.widget';
 
 describe('NumberWidgetComponent', () => {
 
     let widget: NumberWidgetComponent;
+    let fixture: ComponentFixture<NumberWidgetComponent>;
+    let element: HTMLElement;
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            CoreTestingModule,
+            MatInputModule,
+            FormsModule,
+            MatIconModule
+        ]
+    });
 
     beforeEach(() => {
-        widget = new NumberWidgetComponent(null, null);
+        fixture = TestBed.createComponent(NumberWidgetComponent);
+        widget = fixture.componentInstance;
+        element = fixture.nativeElement;
     });
 
     it('should exist', () => {
         expect(widget).toBeDefined();
     });
+
+    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: 'number-id',
+                name: 'number-name',
+                value: '',
+                type: FormFieldTypes.NUMBER,
+                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: 'number-id',
+                name: 'number-name',
+                value: '',
+                type: FormFieldTypes.NUMBER,
+                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: 'number-id',
+                name: 'number-name',
+                value: '',
+                type: FormFieldTypes.NUMBER,
+                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();
+        });
+    });
 });

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

@@ -1,7 +1,11 @@
 <div class="adf-textfield adf-text-widget {{field.className}}"
-     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
+     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [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 }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+     </div>
+     <div>
          <mat-form-field [hideRequiredMarker]="true">
-        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+             <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
              <input matInput
                     class="adf-input"
                     type="text"
@@ -20,4 +24,5 @@
          </mat-form-field>
          <error-widget [error]="field.validationSummary"></error-widget>
          <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-</div>
+     </div>
+ </div>

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

@@ -442,5 +442,68 @@ describe('TextWidgetComponent', () => {
                 expect(label.innerText).toBe('Phone : (__) ___-___');
             });
         });
+
+        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: 'text-id',
+                    name: 'text-name',
+                    value: '',
+                    type: FormFieldTypes.TEXT,
+                    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: 'text-id',
+                    name: 'text-name',
+                    value: '',
+                    type: FormFieldTypes.TEXT,
+                    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: 'text-id',
+                    name: 'text-name',
+                    value: '',
+                    type: FormFieldTypes.TEXT,
+                    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();
+            });
+        });
     });
 });

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

@@ -1,10 +1,11 @@
 <div class="adf-dropdown-widget {{field.className}}"
-     [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly">
+     [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
     <div class="adf-dropdown-widget-top-labels">
-        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
+        <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
             *ngIf="isRequired()">*</span>
         </label>
     </div>
+    <div>
         <mat-form-field>
             <mat-select class="adf-select"
                         [id]="field.id"
@@ -33,4 +34,5 @@
                       required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
         <error-widget class="adf-dropdown-failed-message" *ngIf="isRestApiFailed"
                       required="{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}"></error-widget>
+    </div>
 </div>

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

@@ -628,5 +628,65 @@ describe('DropdownCloudWidgetComponent', () => {
                 expect(widget.field.options).toEqual(mockRestDropdownOptions);
             });
         });
+
+        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: 'dropdown-id',
+                    name: 'option list',
+                    type: FormFieldTypes.DROPDOWN,
+                    readOnly: false,
+                    options: filterOptionList
+                });
+
+                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: 'dropdown-id',
+                    name: 'option list',
+                    type: FormFieldTypes.DROPDOWN,
+                    readOnly: false,
+                    options: filterOptionList
+                });
+
+                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: 'dropdown-id',
+                    name: 'option list',
+                    type: FormFieldTypes.DROPDOWN,
+                    readOnly: false,
+                    options: filterOptionList
+                });
+
+                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();
+            });
+        });
     });
 });