diff --git a/lib/core/src/lib/form/components/form-renderer.component.html b/lib/core/src/lib/form/components/form-renderer.component.html index 337ad73c58..423480d686 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.html +++ b/lib/core/src/lib/form/components/form-renderer.component.html @@ -1,4 +1,4 @@ -
@if (formDefinition.hasTabs()) { @if (hasTabs()) { diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html index 00fefd8e34..e8a31f7124 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html @@ -11,9 +11,10 @@
- @if ( (field.name || field?.required) && !field.leftLabels) { {{field.name | translate }} } - @if(!enableDisplayBasedOnLocale) { - {{ currency }}  + @if ( (field.name || field?.required) && !field.leftLabels) { + {{field.name | translate }} + } @if(!enableDisplayBasedOnLocale) { + {{ currency }}  } + /> @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) { - - error_outline - @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}} - + + error_outline + @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ + 'FORM.FIELD.REQUIRED' | translate }}} + }
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts b/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts index ac4ab4a1d4..aa6ba3deab 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts @@ -325,7 +325,7 @@ describe('AmountWidgetComponent - rendering', () => { expect(inputField).toBeTruthy(); expect(await field.getPrefixText()).toBe('$'); - const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement; + const widgetLabel = testingUtils.getByDataAutomationId('adf-amount-widget-label').nativeElement; expect(widgetLabel.textContent.trim()).toBe('Test Amount'); expect(widget.field.isValid).toBe(false); @@ -362,7 +362,7 @@ describe('AmountWidgetComponent - rendering', () => { fixture.detectChanges(); await fixture.whenStable(); - const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement; + const widgetLabel = testingUtils.getByDataAutomationId('adf-amount-widget-label').nativeElement; expect(widgetLabel.textContent.trim()).toBe('Test Amount'); const field = await testingUtils.formField.get(); diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html index d1c5a7b33b..51796aaf94 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html @@ -13,7 +13,7 @@ [class.adf-left-label-input-datepicker]="field.leftLabels" [floatLabel]="field.placeholder ? 'always' : null"> @if( (field.name || field?.required) && !field.leftLabels) { - + {{ field.name | translate }} ({{ field.dateDisplayFormat }}) } diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html index f36c6ae24e..3f1189dadb 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.html +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html @@ -1,32 +1,36 @@ -
+
- - {{ field.name | translate }} ({{ field.dateDisplayFormat }}) - - {{ field.name | translate }} ({{ field.dateDisplayFormat }}) + - + @if (dateInputControl.invalid && dateInputControl.touched) { - - error_outline - @if (dateInputControl.hasError('required')) {{{ 'FORM.FIELD.REQUIRED' | translate }}} @else if (dateInputControl.hasError('matDatepickerParse')) {{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate: { format: field.dateDisplayFormat || field.defaultDateTimeFormat } }}} @else if (dateInputControl.hasError('matDatepickerMin')) {{{ 'FORM.FIELD.VALIDATOR.NOT_LESS_THAN' | translate: { minValue: formattedMinDate } }}} @else if (dateInputControl.hasError('matDatepickerMax')) {{{ 'FORM.FIELD.VALIDATOR.NOT_GREATER_THAN' | translate: { maxValue: formattedMaxDate } }}} - + + error_outline + @if (dateInputControl.hasError('required')) {{{ 'FORM.FIELD.REQUIRED' | translate }}} @else if + (dateInputControl.hasError('matDatepickerParse')) {{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate: { format: + field.dateDisplayFormat || field.defaultDateTimeFormat } }}} @else if (dateInputControl.hasError('matDatepickerMin')) {{{ + 'FORM.FIELD.VALIDATOR.NOT_LESS_THAN' | translate: { minValue: formattedMinDate } }}} @else if + (dateInputControl.hasError('matDatepickerMax')) {{{ 'FORM.FIELD.VALIDATOR.NOT_GREATER_THAN' | translate: { maxValue: formattedMaxDate + } }}} + }
diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html index e2c5be4965..d7d3bc47a3 100644 --- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html +++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html @@ -10,7 +10,7 @@
- @if ( (field.name || field?.required) && !field.leftLabels) { {{ field.name | translate }} } + @if ( (field.name || field?.required) && !field.leftLabels) { {{ field.name | translate }} } @if(field.name || field.required) { - {{ field.name | translate }} + {{ field.name | translate }} } @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) { - - @if (field.maxLength > 0) {{{ field?.value?.length || 0 }}/{{ field.maxLength }}} - error_outline - @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}} - + + @if (field.maxLength > 0) {{{ field?.value?.length || 0 }}/{{ field.maxLength }}} + error_outline + @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ + 'FORM.FIELD.REQUIRED' | translate }}} + } @else if (field.maxLength > 0) { - {{ field?.value?.length || 0 }}/{{ field.maxLength }} + {{ field?.value?.length || 0 }}/{{ field.maxLength }} }
diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss index 242d172457..15ebec59e0 100644 --- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss +++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss @@ -8,7 +8,7 @@ flex-direction: column; position: relative; - .adf-label { + .adf-multiline-text-widget-label { top: 20px; } diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.html b/lib/core/src/lib/form/components/widgets/number/number.widget.html index 11999ea2b1..2e5ca37a90 100644 --- a/lib/core/src/lib/form/components/widgets/number/number.widget.html +++ b/lib/core/src/lib/form/components/widgets/number/number.widget.html @@ -11,7 +11,7 @@
@if( (field.name || this.field?.required) && !field.leftLabels) { - + {{ field.name | translate }} } diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.html b/lib/core/src/lib/form/components/widgets/text/text.widget.html index e1fc6d47e0..abe2d3f855 100644 --- a/lib/core/src/lib/form/components/widgets/text/text.widget.html +++ b/lib/core/src/lib/form/components/widgets/text/text.widget.html @@ -9,7 +9,7 @@
- @if ( (field.name || this.field?.required) && !field.leftLabels) { + @if ( (field.name || this.field?.required) && !field.leftLabels) { {{ field.name | translate }} } diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html index fe95e37114..e3015ab182 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html @@ -5,6 +5,7 @@ } @else {
@if ( (field.name || field?.required) && !field.leftLabels) { - + {{field.name | translate }} ({{field.dateDisplayFormat}}) } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html index 39a356ac8d..a74d86179b 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html @@ -13,7 +13,7 @@
@if( (field.name || field?.required) && !field.leftLabels) { - {{ field.name | translate }} + {{ field.name | translate }} } @if (propertyLoadFailed && !previewState) { - error_outline{{ 'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate }} + error_outline{{ 'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate }} }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss index 9f6ffc3f39..fa4032fb06 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss @@ -4,7 +4,7 @@ &-display-external-property-widget { width: 100%; - .adf-label { + .adf-display-external-property-widget-label { top: 20px; } 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 eedec326ff..ed158cceea 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 @@ -14,7 +14,7 @@
@if ( (field.name || this.field?.required) && !field.leftLabels) { - {{ field.name | translate }} + {{ field.name | translate }} } { const formFields = component.form.getFormFields(); const labelField = formFields.find((field) => field.id === 'mocktext'); const textWidget = fixture.debugElement.nativeElement.querySelector('text-widget'); - const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-label'); + const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-text-widget-label"]'); expect(labelField.type).toBe('text'); expect(textWidget).toBeTruthy(); @@ -262,7 +262,7 @@ describe('StartFormComponent', () => { const formFields = component.form.getFormFields(); const dropdownField = formFields.find((field) => field.id === 'mockTypeDropDown'); const dropdownWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget'); - const dropdownLabel = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget .adf-label'); + const dropdownLabel = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]'); const selectElement = await loader.getHarness(MatSelectHarness); await selectElement.open(); @@ -287,7 +287,7 @@ describe('StartFormComponent', () => { const formFields = component.form.getFormFields(); const labelField = formFields.find((field) => field.id === 'date'); const dateWidget = fixture.debugElement.nativeElement.querySelector('date-widget'); - const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .adf-label'); + const dateLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-date-widget-label"]'); expect(dateWidget).toBeTruthy(); expect(labelField.type).toBe('date'); @@ -320,11 +320,11 @@ describe('StartFormComponent', () => { const formFieldsWidget = fixture.debugElement.nativeElement.querySelector('form-field'); const inputElement = fixture.debugElement.nativeElement.querySelector('.adf-input'); - const inputLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-label'); + const inputLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-text-widget-label"]'); const dateElement = fixture.debugElement.nativeElement.querySelector('#billdate'); - const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .adf-label'); + const dateLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-date-widget-label"]'); const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype'); - const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label'); + const selectLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]'); expect(formFieldsWidget).toBeDefined(); expect(inputElement).toBeDefined(); @@ -348,7 +348,7 @@ describe('StartFormComponent', () => { /* cspell:disable-next-line */ const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype'); - const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label'); + const selectLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]'); expect(refreshElement).toBeDefined(); expect(selectElement).toBeDefined(); expect(translate.instant(selectLabelElement.innerText)).toBe('ClaimType'); diff --git a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html index 55a0f27e0c..170e50fc1f 100644 --- a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html +++ b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html @@ -3,20 +3,26 @@ [class.adf-invalid]="dropdownControl.invalid && dropdownControl.touched" [class.adf-readonly]="field.readOnly" > - - + {{ field.name | translate }} + {{opt.name}} {{field.value}} @if (!isReadOnlyField && dropdownControl.touched && (field.validationSummary?.message || dropdownControl.hasError('required'))) { - - error_outline - @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}} - + + error_outline + @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' | + translate }}} + }
diff --git a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts index cf1394b84a..046e5aed6d 100644 --- a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts +++ b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts @@ -161,10 +161,9 @@ describe('DropdownWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const asterisk: HTMLElement = element.querySelector('.adf-asterisk'); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-dropdown-widget-select"]' })); - expect(asterisk).toBeTruthy(); - expect(asterisk.textContent).toEqual('*'); + expect(await dropdown.isRequired()).toBeTrue(); }); it('should be invalid if no default option after interaction', async () => { diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html index 013bfabb22..d5f034f541 100644 --- a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html +++ b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html @@ -1,6 +1,6 @@
- + {{ displayName }} - + {{ column.name }} ({{ DATE_FORMAT }}) - + {{ column.name }} {{ DATE_TIME_FORMAT }} - + {{column.name}} + (selectionChange)="onValueChanged(row, column, $event)" + > {{opt.name}} diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html index 4071c0bf09..d54914b18e 100644 --- a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html +++ b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html @@ -1,6 +1,6 @@
- + {{ displayName }} - - + {{ field.name | translate }} + @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) { - - error_outline - @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}} - + + error_outline + @if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' | + translate }}} + }
diff --git a/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts b/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts index 49cf00daef..3a7924ad04 100644 --- a/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts +++ b/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts @@ -22,7 +22,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { PeopleProcessService } from '../../../services/people-process.service'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { HarnessLoader } from '@angular/cdk/testing'; -import { MatChipRowHarness } from '@angular/material/chips/testing'; +import { MatChipGridHarness, MatChipRowHarness } from '@angular/material/chips/testing'; import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing'; describe('FunctionalGroupWidgetComponent', () => { @@ -30,7 +30,6 @@ describe('FunctionalGroupWidgetComponent', () => { let component: FunctionalGroupWidgetComponent; let peopleProcessService: PeopleProcessService; let getWorkflowGroupsSpy: jasmine.Spy; - let element: HTMLElement; let loader: HarnessLoader; let unitTestingUtils: UnitTestingUtils; @@ -51,7 +50,6 @@ describe('FunctionalGroupWidgetComponent', () => { unitTestingUtils = new UnitTestingUtils(fixture.debugElement); loader = TestbedHarnessEnvironment.loader(fixture); component.field = new FormFieldModel(new FormModel()); - element = fixture.nativeElement; fixture.detectChanges(); }); @@ -176,10 +174,9 @@ describe('FunctionalGroupWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const asterisk: HTMLElement = element.querySelector('.adf-asterisk'); + const chipGrid = await loader.getHarness(MatChipGridHarness); - expect(asterisk).toBeTruthy(); - expect(asterisk.textContent).toEqual('*'); + expect(await chipGrid.isRequired()).toBeTrue(); }); }); diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.html b/lib/process-services/src/lib/form/widgets/people/people.widget.html index 662abf7051..222399930d 100644 --- a/lib/process-services/src/lib/form/widgets/people/people.widget.html +++ b/lib/process-services/src/lib/form/widgets/people/people.widget.html @@ -2,11 +2,11 @@ [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" id="people-widget-content"> - + {{ field.name | translate }} + [required]="isRequired()" [ngModel]="selectedUsers" [errorStateMatcher]="errorStateMatcher"> { fixture.detectChanges(); await fixture.whenStable(); - const asterisk: HTMLElement = element.querySelector('.adf-asterisk'); + const chipGrid = await loader.getHarness(MatChipGridHarness); - expect(asterisk).toBeTruthy(); - expect(asterisk.textContent).toEqual('*'); + expect(await chipGrid.isRequired()).toBeTrue(); }); }); diff --git a/lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html b/lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html index c4160a0040..f9dbb09528 100644 --- a/lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html +++ b/lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html @@ -5,7 +5,7 @@ [class.adf-readonly]="field.readOnly" id="typehead-div"> - + {{ field.name | translate }}