From 1c2b91dadc652cd13b06c4907c2417a8ca376bef Mon Sep 17 00:00:00 2001 From: David Olson <157068235+DavidOlson-Hyland@users.noreply.github.com> Date: Wed, 15 Apr 2026 10:46:38 -0500 Subject: [PATCH] AAE-44184 Colspan setting on form fields is ignored or not properly applied (#11800) * AAE-44184 Colspan setting on form fields is ignored or not properly applied * AAE-44184 Better handling of empty columns * AAE-44184 Fixing stale adf-form-field instances * AAE-44184 Consolidating duplicate code --- .../components/form-renderer.component.html | 154 ++++++++++-------- .../form-renderer.component.spec.ts | 60 +++++++ .../components/form-renderer.component.ts | 19 +-- .../form-section/form-section.component.html | 16 +- .../form-section.component.spec.ts | 69 ++++---- .../form-section/form-section.component.ts | 18 +- .../components/helpers/column-width.spec.ts | 82 ++++++++++ .../form/components/helpers/column-width.ts | 62 +++++++ .../mock/form-renderer.component.mock.ts | 124 ++++++++++++++ 9 files changed, 475 insertions(+), 129 deletions(-) create mode 100644 lib/core/src/lib/form/components/helpers/column-width.spec.ts create mode 100644 lib/core/src/lib/form/components/helpers/column-width.ts 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 df2d3beef5..237ee726d1 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.html +++ b/lib/core/src/lib/form/components/form-renderer.component.html @@ -1,94 +1,116 @@
-
-
+ @if (formDefinition.hasTabs()) { + @if (hasTabs()) { +
- + @for (tab of visibleTabs(); track tab) { +
+ }
-
+ } + } -
+ @if (!formDefinition.hasTabs() && formDefinition.hasFields()) { +
+ }
-
-
- + @for (currentRootElement of fieldToRender; track currentRootElement) { + @if (currentRootElement.type === 'section') { +
+
+ } -
-
-
-
- + @if (currentRootElement?.form?.enableFixedSpace) { + @if (currentRootElement?.isExpanded) { +
+ @for (field of getContainerFields(currentRootElement); track field ?? $index) { +
+ @if (field) { + + } +
+ }
-
-
+ } + } @else { + + } -
-
- - - - - -
- -
- - -
+ @if (currentRootElement?.isExpanded) { +
+ @for (column of currentRootElement?.columns; track column; let columnIndex = $index) { +
+ @for (field of column?.fields; track field) { + @if (field.type === 'section') { + + } @else { +
+ +
+ } + } +
+ }
+ } -
- -
+ @for (field of column?.fields; track field) { +
+ @if (field) { + + } +
+ }
+ } @if (currentRootElement.type === 'repeatable-section') { -
- @for (row of currentRootElement.field.rows; track row.id; let rowIndex = $index) { + @for (row of currentRootElement.field.rows; track row; let rowIndex = $index) { @let hasMultipleRows = currentRootElement.field.rows.length > 1; -
+ >
{{ 'FORM.FORM_RENDERER.ROW_LABEL' | translate: {number: rowIndex + 1} }} @let shouldDisplayRemoveRowButton = !currentRootElement.field.rows[rowIndex].isInitial || (currentRootElement.field.rows[rowIndex].isInitial && currentRootElement.field.params.allowInitialRowsDelete); @if (shouldDisplayRemoveRowButton) { -
@@ -123,13 +144,16 @@
} -
- -
+ @if (currentRootElement.type === 'dynamic-table') { +
+ +
+ } -
- -
-
+ @if (currentRootElement.type === 'readonly' && currentRootElement.field.params.field.type === 'dynamic-table') { +
+ +
+ } + } diff --git a/lib/core/src/lib/form/components/form-renderer.component.spec.ts b/lib/core/src/lib/form/components/form-renderer.component.spec.ts index fcc5c1fcc2..2bdb309182 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.spec.ts +++ b/lib/core/src/lib/form/components/form-renderer.component.spec.ts @@ -24,6 +24,7 @@ import { FormRendererComponent } from './form-renderer.component'; import { amountWidgetFormVisibilityMock, checkboxWidgetFormVisibilityMock, + colspanAnyColumnsForm, colspanForm, customWidgetForm, customWidgetFormWithVisibility, @@ -439,6 +440,65 @@ describe('Form Renderer Component', () => { expect(fullWidthElement.style['width']).toBe('100%'); }); + it('Should display widths 25% and 75% in non-grid mode for 4-column container with colspan 1 and 3', async () => { + formRendererComponent.formDefinition = formService.parseForm(colspanAnyColumnsForm.formRepresentation.formDefinition, null, false, false); + fixture.detectChanges(); + await fixture.whenStable(); + + const columns = testingUtils + .getAllByCSS('#field-4col-container-id-container section.adf-grid-list-column-view .adf-grid-list-single-column') + .map((element) => element.nativeElement as HTMLElement); + + expect(columns.length).toBe(4); + expect(columns[0].style['width']).toBe('25%'); + expect(columns[1].style['width']).toBe('75%'); + expect(columns[2].style['width']).toBe('0%'); + expect(columns[3].style['width']).toBe('0%'); + }); + + it('Should display widths 33.333% and 66.666% in non-grid mode for 12-column container with colspan 4 and 8', async () => { + formRendererComponent.formDefinition = formService.parseForm(colspanAnyColumnsForm.formRepresentation.formDefinition, null, false, false); + fixture.detectChanges(); + await fixture.whenStable(); + + const columns = testingUtils + .getAllByCSS('#field-12col-container-id-container section.adf-grid-list-column-view .adf-grid-list-single-column') + .map((element) => element.nativeElement as HTMLElement); + + expect(columns.length).toBe(12); + expect(parseFloat(columns[0].style['width'])).toBeCloseTo(33.33, 2); + expect(columns[1].style['width']).toBe('0%'); + expect(columns[2].style['width']).toBe('0%'); + expect(columns[3].style['width']).toBe('0%'); + expect(parseFloat(columns[4].style['width'])).toBeCloseTo(66.67, 2); + expect(columns[5].style['width']).toBe('0%'); + expect(columns[6].style['width']).toBe('0%'); + expect(columns[7].style['width']).toBe('0%'); + expect(columns[8].style['width']).toBe('0%'); + expect(columns[9].style['width']).toBe('0%'); + expect(columns[10].style['width']).toBe('0%'); + expect(columns[11].style['width']).toBe('0%'); + }); + + it('Should preserve width for an intentionally empty leading spacer column in non-grid mode', async () => { + formRendererComponent.formDefinition = formService.parseForm( + amountWidgetFormVisibilityMock.formRepresentation.formDefinition, + null, + false, + false + ); + fixture.detectChanges(); + await fixture.whenStable(); + + const columns = testingUtils + .getAllByCSS('#field-ce32844c-20b2-4361-88b5-a56f28219aef-container section.adf-grid-list-column-view .adf-grid-list-single-column') + .map((element) => element.nativeElement as HTMLElement); + + expect(columns.length).toBe(2); + expect(columns[0].style['width']).toBe('50%'); + expect(columns[1].style['width']).toBe('50%'); + }); + it('[C309872] - Should display Text widget spans on 2 columns when colspan is set to 2', () => { formRendererComponent.formDefinition = formService.parseForm(colspanForm.formRepresentation.formDefinition, null, false, false); fixture.detectChanges(); diff --git a/lib/core/src/lib/form/components/form-renderer.component.ts b/lib/core/src/lib/form/components/form-renderer.component.ts index 8b30bf11c2..3b49b02ac0 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.ts +++ b/lib/core/src/lib/form/components/form-renderer.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { NgClass, NgForOf, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common'; +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectorRef, Component, DestroyRef, inject, Injector, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { filter } from 'rxjs'; @@ -36,11 +36,12 @@ import { MatDialog } from '@angular/material/dialog'; import { ConfirmDialogComponent } from '../../../lib/dialogs/confirm-dialog/confirm.dialog'; import { MatTooltipModule } from '@angular/material/tooltip'; import { IconModule } from '../../icon/icon.module'; +import { FormLayoutColumn, getFormLayoutColumnWidth } from './helpers/column-width'; @Component({ selector: 'adf-form-renderer', templateUrl: './form-renderer.component.html', - styleUrls: ['./form-renderer.component.scss'], + styleUrl: './form-renderer.component.scss', providers: [ { provide: FormRulesManager, @@ -54,9 +55,7 @@ import { IconModule } from '../../icon/icon.module'; } ], imports: [ - NgIf, MatTabsModule, - NgForOf, NgTemplateOutlet, TranslatePipe, MatButtonModule, @@ -182,16 +181,8 @@ export class FormRendererComponent implements OnInit, OnDestroy { }); } - /** - * Calculate the column width based on the numberOfColumns and current field's colspan property - * - * @param container container model - * @returns the column width for the given model - */ - getColumnWidth(container: ContainerModel): string { - const { field } = container; - const colspan = field ? field.colspan : 1; - return (100 / field.numberOfColumns) * colspan + ''; + getColumnWidth(container: ContainerModel, columns: FormLayoutColumn[], columnIndex: number): string { + return getFormLayoutColumnWidth(container.field?.numberOfColumns, columns, columnIndex); } private runMiddlewareServices(): void { diff --git a/lib/core/src/lib/form/components/form-section/form-section.component.html b/lib/core/src/lib/form/components/form-section/form-section.component.html index 8d69084307..11028a7b2f 100644 --- a/lib/core/src/lib/form/components/form-section/form-section.component.html +++ b/lib/core/src/lib/form/components/form-section/form-section.component.html @@ -1,11 +1,13 @@
-
-
- -
-
+ @for (sectionColumn of field.columns; track sectionColumn; let columnIndex = $index) { +
+ @for (sectionField of sectionColumn.fields; track sectionField) { +
+ +
+ } +
+ }
diff --git a/lib/core/src/lib/form/components/form-section/form-section.component.spec.ts b/lib/core/src/lib/form/components/form-section/form-section.component.spec.ts index 07f76fea6c..38e5515452 100644 --- a/lib/core/src/lib/form/components/form-section/form-section.component.spec.ts +++ b/lib/core/src/lib/form/components/form-section/form-section.component.spec.ts @@ -38,17 +38,17 @@ describe('FormSectionComponent', () => { it('should calculate the correct width for section columns', () => { const numberOfColumns = 3; - const columnField = { colspan: 2 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 2 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(numberOfColumns, [columnField]); + const width = component.getSectionColumnWidth(numberOfColumns, columns, 0); expect(width).toBe('66.66666666666667'); }); it('should handle columns with no colspan defined', () => { const numberOfColumns = 3; - const columnField = {} as FormFieldModel; + const columns = [{ fields: [{} as FormFieldModel] }]; - const width = component.getSectionColumnWidth(numberOfColumns, [columnField]); + const width = component.getSectionColumnWidth(numberOfColumns, columns, 0); expect(width).toBe('33.333333333333336'); }); @@ -63,84 +63,93 @@ describe('FormSectionComponent', () => { describe('getSectionColumnWidth', () => { it('should cap width at 100% when numberOfColumns is not a number', () => { - const columnField = { colspan: 2 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 2 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth('invalid' as unknown as number, [columnField]); + const width = component.getSectionColumnWidth('invalid' as unknown as number, columns, 0); expect(width).toBe('100'); }); it('should cap width at 100% when numberOfColumns is null', () => { - const columnField = { colspan: 3 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 3 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(null as unknown as number, [columnField]); + const width = component.getSectionColumnWidth(null as unknown as number, columns, 0); expect(width).toBe('100'); }); it('should return 100% when numberOfColumns is undefined', () => { - const columnField = { colspan: 1 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 1 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(undefined as unknown as number, [columnField]); + const width = component.getSectionColumnWidth(undefined as unknown as number, columns, 0); expect(width).toBe('100'); }); it('should cap width at 100% when numberOfColumns is 0', () => { - const columnField = { colspan: 2 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 2 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(0, [columnField]); + const width = component.getSectionColumnWidth(0, columns, 0); expect(width).toBe('100'); }); it('should cap width at 100% when numberOfColumns is negative', () => { - const columnField = { colspan: 3 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 3 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(-1, [columnField]); + const width = component.getSectionColumnWidth(-1, columns, 0); expect(width).toBe('100'); }); it('should return 100 when numberOfColumns is falsy and no colspan is defined', () => { - const columnField = {} as FormFieldModel; + const columns = [{ fields: [{} as FormFieldModel] }]; - const width = component.getSectionColumnWidth(null as unknown as number, [columnField]); + const width = component.getSectionColumnWidth(null as unknown as number, columns, 0); expect(width).toBe('100'); }); it('should calculate percentage width when numberOfColumns is a valid number', () => { const numberOfColumns = 4; - const columnField = { colspan: 2 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 2 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(numberOfColumns, [columnField]); + const width = component.getSectionColumnWidth(numberOfColumns, columns, 0); expect(width).toBe('50'); }); it('should cap width at 100% when colspan exceeds numberOfColumns', () => { const numberOfColumns = 2; - const columnField = { colspan: 5 } as FormFieldModel; + const columns = [{ fields: [{ colspan: 5 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(numberOfColumns, [columnField]); + const width = component.getSectionColumnWidth(numberOfColumns, columns, 0); expect(width).toBe('100'); }); it('should use default colspan of 1 when field has no colspan and numberOfColumns is valid', () => { const numberOfColumns = 5; - const columnField = {} as FormFieldModel; + const columns = [{ fields: [{} as FormFieldModel] }]; - const width = component.getSectionColumnWidth(numberOfColumns, [columnField]); + const width = component.getSectionColumnWidth(numberOfColumns, columns, 0); expect(width).toBe('20'); }); - it('should handle empty columnFields array', () => { + it('should return default width for an authored empty spacer column', () => { const numberOfColumns = 3; + const columns = [{ fields: [] }, { fields: [{ colspan: 1 } as FormFieldModel] }]; - const width = component.getSectionColumnWidth(numberOfColumns, []); - expect(parseFloat(width)).toBeCloseTo(33.33); + const width = component.getSectionColumnWidth(numberOfColumns, columns, 0); + expect(width).toBe('33.333333333333336'); }); - it('should use first field colspan when multiple fields are provided', () => { - const numberOfColumns = 2; - const columnFields = [{ colspan: 1 } as FormFieldModel, { colspan: 3 } as FormFieldModel]; + it('should return 0 width for an empty column covered by a previous colspan', () => { + const numberOfColumns = 4; + const columns = [{ fields: [{ colspan: 3 } as FormFieldModel] }, { fields: [] }, { fields: [] }, { fields: [] }]; - const width = component.getSectionColumnWidth(numberOfColumns, columnFields); - expect(width).toBe('50'); + const width = component.getSectionColumnWidth(numberOfColumns, columns, 1); + expect(width).toBe('0'); + }); + + it('should use max field colspan when multiple fields are provided', () => { + const numberOfColumns = 2; + const columns = [{ fields: [{ colspan: 1 } as FormFieldModel, { colspan: 3 } as FormFieldModel] }]; + + const width = component.getSectionColumnWidth(numberOfColumns, columns, 0); + expect(width).toBe('100'); }); }); }); diff --git a/lib/core/src/lib/form/components/form-section/form-section.component.ts b/lib/core/src/lib/form/components/form-section/form-section.component.ts index 8d437218ae..48a5731fb1 100644 --- a/lib/core/src/lib/form/components/form-section/form-section.component.ts +++ b/lib/core/src/lib/form/components/form-section/form-section.component.ts @@ -19,14 +19,14 @@ import { Component, inject, Input, OnInit, ViewEncapsulation } from '@angular/co import { WidgetVisibilityService } from '../../services/widget-visibility.service'; import { FormFieldModel } from '../widgets/core/form-field.model'; import { FormFieldComponent } from '../form-field/form-field.component'; -import { NgFor } from '@angular/common'; +import { FormLayoutColumn, getFormLayoutColumnWidth } from '../helpers/column-width'; @Component({ selector: 'adf-form-section', templateUrl: './form-section.component.html', encapsulation: ViewEncapsulation.None, - styleUrls: ['./form-section.component.scss'], - imports: [NgFor, FormFieldComponent] + styleUrl: './form-section.component.scss', + imports: [FormFieldComponent] }) export class FormSectionComponent implements OnInit { @Input() @@ -38,15 +38,7 @@ export class FormSectionComponent implements OnInit { this.visibilityService.refreshVisibility(this.field.form); } - getSectionColumnWidth(numberOfColumns: number, columnFields: FormFieldModel[]): string { - const firstColumnFieldIndex = 0; - const defaultColspan = 1; - const fieldColspan = columnFields[firstColumnFieldIndex]?.colspan ?? defaultColspan; - - if (typeof numberOfColumns !== 'number' || !numberOfColumns || numberOfColumns <= 0) { - numberOfColumns = 1; - } - - return Math.min(100, (100 / numberOfColumns) * fieldColspan) + ''; + getSectionColumnWidth(numberOfColumns: number, columns: FormLayoutColumn[], columnIndex: number): string { + return getFormLayoutColumnWidth(numberOfColumns, columns, columnIndex); } } diff --git a/lib/core/src/lib/form/components/helpers/column-width.spec.ts b/lib/core/src/lib/form/components/helpers/column-width.spec.ts new file mode 100644 index 0000000000..369b1aac94 --- /dev/null +++ b/lib/core/src/lib/form/components/helpers/column-width.spec.ts @@ -0,0 +1,82 @@ +/*! + * @license + * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { FormLayoutColumn, getFormLayoutColumnWidth } from './column-width'; + +describe('getFormLayoutColumnWidth', () => { + it('should return the default width when numberOfColumns is invalid', () => { + const columns: FormLayoutColumn[] = [{ fields: [{ colspan: 1 }] }]; + + const width = getFormLayoutColumnWidth(undefined, columns, 0); + + expect(width).toBe('100'); + }); + + it('should return the default width for an authored empty spacer column', () => { + const NUMBER_OF_COLUMNS = 3; + const columns: FormLayoutColumn[] = [{ fields: [] }, { fields: [{ colspan: 1 }] }]; + + const width = getFormLayoutColumnWidth(NUMBER_OF_COLUMNS, columns, 0); + + expect(width).toBe('33.333333333333336'); + }); + + it('should return zero width for an empty column covered by a previous colspan', () => { + const NUMBER_OF_COLUMNS = 4; + const columns: FormLayoutColumn[] = [{ fields: [{ colspan: 3 }] }, { fields: [] }, { fields: [] }, { fields: [] }]; + + const width = getFormLayoutColumnWidth(NUMBER_OF_COLUMNS, columns, 1); + + expect(width).toBe('0'); + }); + + it('should use the maximum colspan when a column contains multiple fields', () => { + const NUMBER_OF_COLUMNS = 4; + const columns: FormLayoutColumn[] = [{ fields: [{ colspan: 1 }, { colspan: 3 }] }]; + + const width = getFormLayoutColumnWidth(NUMBER_OF_COLUMNS, columns, 0); + + expect(width).toBe('75'); + }); + + it('should cap the width at 100 percent when colspan exceeds the available columns', () => { + const NUMBER_OF_COLUMNS = 2; + const columns: FormLayoutColumn[] = [{ fields: [{ colspan: 5 }] }]; + + const width = getFormLayoutColumnWidth(NUMBER_OF_COLUMNS, columns, 0); + + expect(width).toBe('100'); + }); + + it('should treat a missing colspan as one column', () => { + const NUMBER_OF_COLUMNS = 5; + const columns: FormLayoutColumn[] = [{ fields: [{}] }]; + + const width = getFormLayoutColumnWidth(NUMBER_OF_COLUMNS, columns, 0); + + expect(width).toBe('20'); + }); + + it('should not mark a later empty spacer as covered when an earlier column is also empty', () => { + const NUMBER_OF_COLUMNS = 4; + const columns: FormLayoutColumn[] = [{ fields: [] }, { fields: [] }, { fields: [{ colspan: 1 }] }, { fields: [] }]; + + const width = getFormLayoutColumnWidth(NUMBER_OF_COLUMNS, columns, 1); + + expect(width).toBe('25'); + }); +}); diff --git a/lib/core/src/lib/form/components/helpers/column-width.ts b/lib/core/src/lib/form/components/helpers/column-width.ts new file mode 100644 index 0000000000..5a3a4db95a --- /dev/null +++ b/lib/core/src/lib/form/components/helpers/column-width.ts @@ -0,0 +1,62 @@ +/*! + * @license + * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface FormLayoutField { + colspan?: number | null; +} + +export interface FormLayoutColumn { + fields?: FormLayoutField[] | null; +} + +export const getFormLayoutColumnWidth = ( + numberOfColumns: number | null | undefined, + columns: FormLayoutColumn[] | null | undefined, + columnIndex: number +): string => { + const normalizedColumnCount = typeof numberOfColumns === 'number' && numberOfColumns > 0 ? numberOfColumns : 1; + const defaultColumnWidth = 100 / normalizedColumnCount; + const columnFields = columns?.[columnIndex]?.fields ?? []; + + if (columnFields.length === 0) { + return isColumnCoveredByPreviousField(columns, columnIndex) ? '0' : `${defaultColumnWidth}`; + } + + const maxColspan = Math.max(...columnFields.map((field) => field.colspan || 1)); + return `${Math.min(100, defaultColumnWidth * maxColspan)}`; +}; + +const isColumnCoveredByPreviousField = (columns: FormLayoutColumn[] | null | undefined, columnIndex: number): boolean => { + if (!columns || columnIndex <= 0) { + return false; + } + + for (let previousColumnIndex = 0; previousColumnIndex < columnIndex; previousColumnIndex++) { + const previousFields = columns[previousColumnIndex]?.fields ?? []; + + if (previousFields.length === 0) { + continue; + } + + const previousColumnSpan = Math.max(...previousFields.map((field) => field.colspan || 1)); + if (previousColumnIndex + previousColumnSpan > columnIndex) { + return true; + } + } + + return false; +}; diff --git a/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts b/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts index e70a81a06c..e4614abfd6 100644 --- a/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts +++ b/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts @@ -981,6 +981,130 @@ export const colspanForm = { } }; +export const colspanAnyColumnsForm = { + formRepresentation: { + id: 'form-any-columns-colspan', + name: 'any-columns-colspan', + description: '', + version: 0, + standAlone: true, + formDefinition: { + tabs: [], + fields: [ + { + id: '4col-container-id', + name: 'Label', + type: 'container', + tab: null, + numberOfColumns: 4, + fields: { + '1': [ + { + id: 'Text4ColLeft', + name: 'Left', + type: 'text', + readOnly: false, + required: false, + colspan: 1, + placeholder: null, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: null, + params: { + existingColspan: 1, + maxColspan: 4 + } + } + ], + '2': [ + { + id: 'Text4ColRight', + name: 'Right', + type: 'text', + readOnly: false, + required: false, + colspan: 3, + placeholder: null, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: null, + params: { + existingColspan: 1, + maxColspan: 4 + } + } + ], + '3': [], + '4': [] + } + }, + { + id: '12col-container-id', + name: 'Label', + type: 'container', + tab: null, + numberOfColumns: 12, + fields: { + '1': [ + { + id: 'Text12ColLeft', + name: 'Left', + type: 'text', + readOnly: false, + required: false, + colspan: 4, + placeholder: null, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: null, + params: { + existingColspan: 1, + maxColspan: 12 + } + } + ], + '2': [], + '3': [], + '4': [], + '5': [ + { + id: 'Text12ColRight', + name: 'Right', + type: 'text', + readOnly: false, + required: false, + colspan: 8, + placeholder: null, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: null, + params: { + existingColspan: 1, + maxColspan: 12 + } + } + ], + '6': [], + '7': [], + '8': [], + '9': [], + '10': [], + '11': [], + '12': [] + } + } + ], + outcomes: [], + metadata: {}, + variables: [] + } + } +}; + export const numberNotRequiredForm = { formRepresentation: { id: 'form-d4c462db-3838-442e-a006-171e6ccafe61',