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 6628ef5919..16577f134d 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 @@ -
diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss index e0e62e52fc..b283847a1a 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.scss +++ b/lib/core/src/lib/form/components/form-renderer.component.scss @@ -13,6 +13,14 @@ height: 100%; } +.adf-form-renderer { + // override Material styles, otherwise fields collapse on some screen widths + // related issue: https://hyland.atlassian.net/browse/AAE-36582 + .mat-mdc-form-field-infix { + width: auto; + } +} + .alfresco-tabs-widget { width: 100%; @@ -256,6 +264,18 @@ line-height: 64px; margin-right: 15px; } + + &-error-messages-container { + min-height: 35px; + } + + &-error-messages-container-visible { + visibility: visible; + } + + &-error-messages-container-hidden { + visibility: hidden; + } } form-field { @@ -267,7 +287,3 @@ form-field { line-height: normal; } } - -.adf-error-messages-container { - min-height: 35px; -} diff --git a/lib/core/src/lib/form/components/form-section/form-section.component.scss b/lib/core/src/lib/form/components/form-section/form-section.component.scss index c15228339b..6092f1882e 100644 --- a/lib/core/src/lib/form/components/form-section/form-section.component.scss +++ b/lib/core/src/lib/form/components/form-section/form-section.component.scss @@ -5,7 +5,7 @@ &-single-column { display: flex; flex-wrap: inherit; - align-items: baseline; + align-items: center; gap: 1%; @include flex.layout-bp(lt-md) { 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 a708c00e0a..9fe4680574 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,29 +13,30 @@
@if( (field.name || field?.required) && !field.leftLabels) { - - {{ field.name | translate }} - - } - + {{ field.name | translate }} + } + - + {{ field.params.externalPropertyLabel }} - +
- +
+
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 7d6517fc9b..39c48994f0 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,8 @@
- @if ( (field.name || this.field?.required) && !field.leftLabels) { {{ field.name | translate }} } + @if ( (field.name || this.field?.required) && !field.leftLabels) { + {{ field.name | translate }} } {{field.value}} -
- +
+ { widget.ngOnInit(); fixture.detectChanges(); - const errorMessageElement = getErrorMessageElement(); expect(getRestWidgetDataSpy).toHaveBeenCalled(); expect(widget.isRestApiFailed).toBe(true); expect(widget.field.options.length).toEqual(0); - expect(errorMessageElement).toBe(null); + + const errorsMessagesElement = fixture.debugElement.query(By.css('.adf-error-messages-container')); + expect(errorsMessagesElement.nativeElement.classList.contains('adf-error-messages-container-hidden')).toBe(true); }); }); @@ -1151,8 +1152,8 @@ describe('DropdownCloudWidgetComponent', () => { spyOn(formCloudService, 'getPreviewState').and.returnValue(true); fixture.detectChanges(); - const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); - expect(failedErrorMsgElement).toBeNull(); + const errorsMessagesElement = fixture.debugElement.query(By.css('.adf-error-messages-container')); + expect(errorsMessagesElement.nativeElement.classList.contains('adf-error-messages-container-hidden')).toBe(true); }); it('should NOT display errors if field is readonly', () => { @@ -1166,8 +1167,8 @@ describe('DropdownCloudWidgetComponent', () => { widget.field.readOnly = true; fixture.detectChanges(); - const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); - expect(failedErrorMsgElement).toBeNull(); + const errorsMessagesElement = fixture.debugElement.query(By.css('.adf-error-messages-container')); + expect(errorsMessagesElement.nativeElement.classList.contains('adf-error-messages-container-hidden')).toBe(true); }); it('should update options when form variable changes', async () => { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts index f9376a4357..31661cbcfa 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts @@ -29,7 +29,7 @@ import { SelectFilterInputComponent, WidgetComponent } from '@alfresco/adf-core'; -import { AsyncPipe, NgFor, NgIf } from '@angular/common'; +import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common'; import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -59,6 +59,7 @@ export const HIDE_FILTER_LIMIT = 5; imports: [ NgIf, NgFor, + NgClass, AsyncPipe, ReactiveFormsModule, MatFormFieldModule,