diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss index 63c96cf5ad..a013bd9b46 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss @@ -20,10 +20,6 @@ transition: none; } - .adf-input { - margin-top: 3px; - } - &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) { .adf-amount-widget__prefix-spacing { color: var(--adf-theme-foreground-secondary-text-color); diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss index 54c0202234..802d08cf53 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss @@ -11,10 +11,6 @@ #{ms.$mat-form-field-suffix} { top: 26px; } - - #{ms.$mat-form-field-label} { - top: 20px; - } } &-left-label-input-datepicker { diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss index 256588156f..fcb68154ab 100644 --- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss +++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss @@ -7,9 +7,5 @@ align-items: flex-start; flex-direction: column; } - - .adf-label { - top: 20px; - } } } diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.scss b/lib/core/src/lib/form/components/widgets/number/number.widget.scss index f272f89e91..e2e277d3a5 100644 --- a/lib/core/src/lib/form/components/widgets/number/number.widget.scss +++ b/lib/core/src/lib/form/components/widgets/number/number.widget.scss @@ -7,9 +7,5 @@ align-items: flex-start; flex-direction: column; } - - .adf-label { - top: 20px; - } } } diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.scss b/lib/core/src/lib/form/components/widgets/text/text.widget.scss index 2544387edf..5585f3a788 100644 --- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss +++ b/lib/core/src/lib/form/components/widgets/text/text.widget.scss @@ -1,14 +1,7 @@ -/* stylelint-disable selector-class-pattern */ -@use '../../../../styles/mat-selectors' as ms; - .adf { &-text-widget { width: 100%; - #{ms.$mat-form-field-label} { - top: 20px; - } - &-container { display: flex; align-items: flex-start; diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html index 9382402cb5..f312fcbdc7 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html @@ -11,7 +11,7 @@ } -
+
@if ( (field.name || this.field?.required) && !field.leftLabels) { {{ field.name | translate }} diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss index 1e637a5e91..8062ed5f8a 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss @@ -17,6 +17,12 @@ width: 100%; } + &-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } + &-dropdown-required-message { .adf-error-container { margin-top: 1px; diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.stories.ts b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.stories.ts index 9e42d0fa0f..4c54e6b638 100644 --- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.stories.ts +++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.stories.ts @@ -23,6 +23,156 @@ import { TaskCloudServiceMock } from '../../../mock/task-cloud.service.mock'; import { FormCloudServiceMock } from '../../../../form/mocks/form-cloud.service.mock'; import { provideStoryProcessServicesCloud } from '../../../../stories/process-services-cloud-story.providers'; import { taskWithFormDetailsMock } from '../../../task-header/mocks/task-details-cloud.mock'; +import { Observable, of } from 'rxjs'; +import { FormContent } from '../../../../services/form-fields.interfaces'; + +const allWidgetTypesForm: FormContent = { + formRepresentation: { + id: 'form-all-widget-types', + name: 'Widget Alignment Test', + description: '', + version: 0, + formDefinition: { + tabs: [], + fields: [ + { + type: 'container', + id: 'row-text-dropdown', + name: 'Label', + tab: '', + numberOfColumns: 2, + fields: { + 1: [ + { + type: 'text', + id: 'textField', + name: 'Text Field', + colspan: 1, + placeholder: null, + value: '', + required: false, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: null, + params: { existingColspan: 1, maxColspan: 2 } + } + ], + 2: [ + { + type: 'dropdown', + id: 'dropdownField', + name: 'Dropdown Field', + colspan: 1, + value: '', + required: false, + optionType: 'manual', + options: [ + { id: 'empty', name: 'Choose one...' }, + { id: 'opt1', name: 'Option 1' }, + { id: 'opt2', name: 'Option 2' } + ], + visibilityCondition: null, + params: { existingColspan: 1, maxColspan: 2 } + } + ] + } + }, + { + type: 'container', + id: 'row-amount-number', + name: 'Label', + tab: '', + numberOfColumns: 2, + fields: { + 1: [ + { + type: 'amount', + id: 'amountField', + name: 'Amount Field', + colspan: 1, + placeholder: '123', + value: '', + required: false, + minValue: null, + maxValue: null, + visibilityCondition: null, + params: { existingColspan: 1, maxColspan: 2 }, + enableFractions: false, + currency: '$' + } + ], + 2: [ + { + type: 'integer', + id: 'numberField', + name: 'Number Field', + colspan: 1, + placeholder: null, + value: null, + required: false, + minValue: null, + maxValue: null, + visibilityCondition: null, + params: { existingColspan: 1, maxColspan: 2 } + } + ] + } + }, + { + type: 'container', + id: 'row-date-text2', + name: 'Label', + tab: '', + numberOfColumns: 2, + fields: { + 1: [ + { + type: 'date', + id: 'dateField', + name: 'Date Field', + value: null, + colspan: 1, + placeholder: null, + required: false, + minValue: null, + maxValue: null, + visibilityCondition: null, + params: { existingColspan: 1, maxColspan: 2 }, + dateDisplayFormat: 'D-M-YYYY' + } + ], + 2: [ + { + type: 'text', + id: 'textField2', + name: 'Another Text', + colspan: 1, + placeholder: null, + value: '', + required: false, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: null, + params: { existingColspan: 1, maxColspan: 2 } + } + ] + } + } + ], + outcomes: [], + metadata: {}, + variables: [] + } + } +}; + +class AllWidgetTypesFormCloudServiceMock extends FormCloudServiceMock { + override getForm(_appName: string, _formKey: string, _version?: number): Observable { + return of(allWidgetTypesForm); + } +} const meta: Meta = { component: TaskFormCloudComponent, @@ -218,3 +368,26 @@ export const InvalidOrMissingTaskId: Story = { taskDetails: { ...taskWithFormDetailsMock } } }; + +export const AllWidgetTypes: Story = { + decorators: [ + moduleMetadata({ + imports: [TaskFormCloudComponent], + providers: [ + { provide: TaskCloudService, useClass: TaskCloudServiceMock }, + { provide: FormCloudService, useClass: AllWidgetTypesFormCloudServiceMock } + ] + }), + applicationConfig({ + providers: [...provideStoryProcessServicesCloud()] + }) + ], + render: (args) => ({ + props: args + }), + args: { + appName: 'app', + taskId: 'mock-task-with-form', + taskDetails: { ...taskWithFormDetailsMock } + } +};