-
-
-
-
-
-
-
-
+
diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.scss b/lib/core/form/components/widgets/date-time/date-time.widget.scss
index 9016d14ec19..4ae5337d5e6 100644
--- 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 {
diff --git 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
index 7b2c043b20c..6c5a2ced06a 100644
--- 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();
+ });
+ });
});
diff --git 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
index b52db10c997..f65fb13fa0c 100644
--- 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 @@
-
diff --git 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
index d19b11747a1..d73296ddb66 100644
--- 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%;
+ }
+ }
}
diff --git 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
index 31a09e53a0a..4a670ca92ed 100644
--- 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();
+ });
+ });
+
});
diff --git 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
index e364b5ca272..c58472b989a 100644
--- 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 @@
diff --git 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
index 0359e3a8601..b8c4f3e3c20 100644
--- 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();
+ });
+ });
});
diff --git 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
index 320167cd723..a95be104114 100644
--- 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 @@
diff --git 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
index 07194bd348d..15cea99c191 100644
--- 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();
+ });
+ });
});