Add option to use full column on field-layout

core/app/core/src/lib/common/record/field.model.ts

@@ -99,7 +99,8 @@ export interface FieldDefinition {
     defaultValueModes?: ViewMode[];
     modes?: ViewMode[];
     relationship?: string;
-    relationshipMetadata?: RelationshipMetadata
+    relationshipMetadata?: RelationshipMetadata;
+    useFullColumn?: string[];
 
     [key: string]: any;
 }
@@ -203,6 +204,7 @@ export interface Field {
     logic?: FieldLogicMap;
     displayLogic?: FieldLogicMap;
     previousValue?: string;
+    useFullColumn?: string[];
 
     initDefaultValue?: DefaultValueInitCallback;
 }
@@ -236,6 +238,7 @@ export class BaseField implements Field {
     attributeDependencies: AttributeDependency[] = [];
     logic?: FieldLogicMap;
     displayLogic?: FieldLogicMap;
+    useFullColumn?: string[];
 
     protected valueState?: string;
     protected valueListState?: string[];

core/app/core/src/lib/components/field-grid/field-grid.model.ts

@@ -34,6 +34,8 @@ export interface FieldGridColumn {
     actionSlot?: boolean;
     specialSlot?: boolean;
     fieldActions?: FieldActions;
+    headerColumnClass?: string;
+    valueColumnClass?: string;
 }
 
 export interface FieldGridRow {

core/app/core/src/lib/components/field-layout/field-layout.component.html

@@ -35,7 +35,7 @@
 
             <ng-container *ngIf="col.field && col.field.display !== 'none'">
                 <div class="field-layout-field-group-wrapper form-group row">
-                    <div class="col-sm-3 field-layout-field-label-wrapper col-form-label label-container">
+                    <div class="{{col?.headerColumnClass}} field-layout-field-label-wrapper col-form-label label-container">
                         <strong>
                             <ng-container
                                 *ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
@@ -44,7 +44,7 @@
                             <label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>
                         </strong>
                     </div>
-                    <div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper"
+                    <div class="{{col?.valueColumnClass}} d-flex flex-grow-1 field-layout-field-wrapper"
                         [ngClass]="{ 'align-items-center': (col?.fieldActions && col?.fieldActions?.position === 'inline') }">
                         <div class="flex-grow-1 text-break field-layout-field-value-wrapper">
                             <scrm-field [type]="col.field.type"

core/app/core/src/lib/components/field-layout/field-layout.component.ts

@@ -103,6 +103,32 @@ export class FieldLayoutComponent extends BaseFieldGridComponent {
                 const field = this.fields[fieldName] || null;
                 const fieldActions = layoutCol.fieldActions || null;
                 const adaptor = layoutCol.adaptor ?? null;
+                const useFullColumn = field?.useFullColumn ?? field?.definition?.useFullColumn ?? [];
+
+                let headerColumnClass = 'col-sm-3';
+                let valueColumnClass = 'col-sm-9';
+
+                const headerColSizes = {'xs': '12', 'sm': '3', 'md': '3', 'lg': '3', 'xl': '3'};
+                const valuesColSizes = {'xs': '12', 'sm': '9', 'md': '9', 'lg': '9', 'xl': '9'};
+                const useFullColumnsMaps = useFullColumn.reduce((ac,a) => ({...ac,[a]:true}),{});
+
+                if (useFullColumn.length) {
+                    headerColumnClass = Object.keys(headerColSizes).map(size => {
+                        if (useFullColumnsMaps[size]) {
+                            return `col-${size}-12`;
+                        }
+
+                        return `col-${size}-${headerColSizes[size]}`
+                    }).join(' ');
+
+                    valueColumnClass = Object.keys(valuesColSizes).map(size => {
+                        if (useFullColumnsMaps[size]) {
+                            return `col-${size}-12`;
+                        }
+
+                        return `col-${size}-${valuesColSizes[size]}`
+                    }).join(' ');
+                }
 
                 if (!field) {
                     row.cols.push({} as FieldGridColumn);
@@ -112,7 +138,9 @@ export class FieldLayoutComponent extends BaseFieldGridComponent {
                 row.cols.push({
                     field,
                     fieldActions,
-                    adaptor
+                    adaptor,
+                    valueColumnClass,
+                    headerColumnClass
                 } as FieldGridColumn);
 
                 if (this.colNumber === 1 && colIndex < layoutRow.cols.length - 1) {

core/app/core/src/lib/services/record/field/attribute.builder.ts

@@ -160,6 +160,7 @@ export class AttributeBuilder extends FieldBuilder {
         fieldAttribute.valueParent = definition.valueParent;
         fieldAttribute.source = 'attribute';
         fieldAttribute.parentKey = parentField.name;
+        fieldAttribute.useFullColumn = definition?.useFullColumn || field?.definition?.useFullColumn || null;
 
         return fieldAttribute;
     }

core/app/core/src/lib/services/record/field/field.builder.ts

@@ -217,6 +217,7 @@ export class FieldBuilder {
             field.formControl = new UntypedFormControl(formattedValue);
         }
 
+        field.useFullColumn = viewField?.useFullColumn || definition?.useFullColumn || null;
         field.attributes = {};
         field.source = 'field';
         field.logic = viewField.logic || definition.logic || null;