tuain-ng-forms-lib 14.3.19 → 14.4.45

package/fesm2020/tuain-ng-forms-lib.mjs

@@ -1,22 +1,79 @@
 import * as i0 from '@angular/core';
 import { Component, Input, EventEmitter, Output, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { Subject, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, Subject, ReplaySubject } from 'rxjs';
 import yn from 'yn';
 import { nanoid } from 'nanoid';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 
-class ActionComponent {
+class PieceComponent {
     constructor() {
+        this.visible = true;
+        this.disabled = false;
+    }
+    defaultProcessAttributeChange(attribute, value) {
+        attribute && (this[attribute] = value);
+    }
+    customProcessAttributeChange(attribute, value) { }
+}
+PieceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: PieceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PieceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: PieceComponent, selector: "lib-piece", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: PieceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-piece',
+                    template: `<ng-content></ng-content>`
+                }]
+        }] });
+
+class ElementComponent extends PieceComponent {
+    start() { }
+}
+ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ElementComponent, selector: "lib-element", inputs: { element: "element", form: "form" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-element',
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { element: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class ActionComponent extends ElementComponent {
+    constructor() {
+        super(...arguments);
+        this.inProgress = false;
+        this.action = null;
         this.style = 'primary';
         this.showLabel = true;
     }
     ngOnInit() {
+        if (!this.action) {
+            return;
+        }
         this.formConfig = this.action?._formConfig;
+        const mapping = Object.entries(this.formConfig?.actionPropagateAttributes);
+        for (let index = 0; index < mapping.length; index++) {
+            const actionAttr = mapping[index]?.[0];
+            const componentAttr = mapping[index]?.[1]?.toString() ?? '';
+            if (componentAttr) {
+                const value = this.action?.[actionAttr];
+                this.defaultProcessAttributeChange(componentAttr, value);
+                this.customProcessAttributeChange(componentAttr, value);
+            }
+        }
+        this.action?.attributeChange?.subscribe(event => {
+            const { name: componentAttr, value } = event;
+            this.defaultProcessAttributeChange(componentAttr, value);
+            this.customProcessAttributeChange(componentAttr, value);
+        });
         this.start();
     }
-    start() { }
     activate() {
         if (this.action?.notifyActivation) {
             this.action.notifyActivation();
@@ -34,15 +91,9 @@ class ActionComponent {
         }
         return false;
     }
-    get visible() {
-        return this.action?.visibleOn(this.state) && this.visibleOnRestriction();
-    }
-    get disabled() {
-        return !(this.action?.enabledOn(this.state));
-    }
 }
-ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ActionComponent, selector: "lib-action", inputs: { action: "action", busy: "busy", relatedField: "relatedField", state: "state", style: "style", showLabel: "showLabel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ActionComponent, selector: "lib-action", inputs: { action: "action", busy: "busy", relatedField: "relatedField", style: "style", showLabel: "showLabel" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ActionComponent, decorators: [{
             type: Component,
             args: [{
@@ -55,8 +106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Input
             }], relatedField: [{
                 type: Input
-            }], state: [{
-                type: Input
             }], style: [{
                 type: Input
             }], showLabel: [{
@@ -65,8 +114,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
 
 const VALUE = 'value';
 const FOCUS = 'focus';
-class FieldComponent {
+class FieldComponent extends ElementComponent {
     constructor() {
+        super(...arguments);
         // Atributos obtenidos estáticamente
         this.code = '';
         this.info = '';
@@ -79,23 +129,25 @@ class FieldComponent {
             return;
         }
         this.formConfig = this.field?._formConfig;
-        // Inicialización
-        const mapping = this.formConfig.fieldPropagateAttributes;
+        const mapping = Object.entries(this.formConfig?.fieldPropagateAttributes);
         for (let index = 0; index < mapping.length; index++) {
-            const attrName = mapping[index].toString();
-            const attributeValue = this.field?.[attrName];
-            this.dafaultProcessFieldChange(attrName, attributeValue);
-            this.processFieldChange(attrName, attributeValue);
+            const fieldAttr = mapping[index]?.[0];
+            const componentAttr = mapping[index]?.[1]?.toString() ?? '';
+            if (componentAttr) {
+                const value = this.field?.[fieldAttr];
+                this.defaultProcessAttributeChange(componentAttr, value);
+                this.customProcessAttributeChange(componentAttr, value);
+            }
         }
         // Subscripción a cambios en atributos
         this.field?.attributeChange.subscribe(event => {
-            const { name: attrName, value } = event;
-            this.dafaultProcessFieldChange(attrName, value);
-            this.processFieldChange(attrName, value);
+            const { name: componentAttr, value } = event;
+            this.defaultProcessAttributeChange(componentAttr, value);
+            this.customProcessAttributeChange(componentAttr, value);
         });
         this.start();
     }
-    dafaultProcessFieldChange(attribute, value) {
+    defaultProcessAttributeChange(attribute, value) {
         if (attribute === VALUE) {
             this.updateValue();
         }
@@ -106,14 +158,10 @@ class FieldComponent {
             this[attribute] = value;
         }
     }
-    get visible() { return this.field?.visibleOn(this.state); }
-    get disabled() { return !this.field?.enabledOn(this.state); }
     updateValue() { this.value = this.field?.value; }
     onInputChange() { setTimeout(() => this.field?.notifyEditionPartial(), 50); }
     onChangeContent() { setTimeout(() => this.field?.notifyEditionFinish(), 50); }
     onShowInfo(detail = null) { setTimeout(() => this.field?.notifyEditionDetailRequest(detail), 50); }
-    processFieldChange(attribute, value) { }
-    start() { }
     focus() { }
     updateObject() { this.field?.setValue(this.value); }
     inputChanged() {
@@ -129,8 +177,8 @@ class FieldComponent {
         return (k > 47 && k < 58);
     }
 }
-FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FieldComponent, selector: "lib-field", inputs: { field: "field", state: "state" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FieldComponent, selector: "lib-field", inputs: { field: "field" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -139,37 +187,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { field: [{
                 type: Input
-            }], state: [{
-                type: Input
-            }] } });
-
-class ElementComponent {
-    ngOnInit() {
-        this.formConfig = this.element?._formConfig;
-        this.start();
-    }
-    start() { }
-    get visible() {
-        return this.element?.visibleOn(this.state);
-    }
-    get disabled() {
-        return !this.element?.enabledOn(this.state);
-    }
-}
-ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ElementComponent, selector: "lib-element", inputs: { element: "element", form: "form", state: "state" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-element',
-                    template: `<ng-content></ng-content>`
-                }]
-        }], propDecorators: { element: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], state: [{
-                type: Input
             }] } });
 
 class FormErrorComponent {
@@ -192,7 +209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
 
 class FormHeaderComponent {
     constructor() {
-        this.goBackAction = false;
+        this.canGoBack = false;
         this.goBackEvent = new EventEmitter();
     }
     goBackForm() {
@@ -200,16 +217,16 @@ class FormHeaderComponent {
     }
 }
 FormHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FormHeaderComponent, selector: "lib-form-header", inputs: { formManager: "formManager", goBackAction: "goBackAction", showTitle: "showTitle", headerActions: "headerActions" }, outputs: { goBackEvent: "goBackEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+FormHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FormHeaderComponent, selector: "lib-form-header", inputs: { form: "form", canGoBack: "canGoBack", showTitle: "showTitle", headerActions: "headerActions" }, outputs: { goBackEvent: "goBackEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-form-header',
                     template: `<ng-content></ng-content>`
                 }]
-        }], propDecorators: { formManager: [{
+        }], propDecorators: { form: [{
                 type: Input
-            }], goBackAction: [{
+            }], canGoBack: [{
                 type: Input
             }], showTitle: [{
                 type: Input
@@ -219,14 +236,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Output
             }] } });
 
-class SectionComponent {
+class SectionComponent extends PieceComponent {
     ngOnInit() {
+        this.formConfig = this.section?._formConfig;
+        const mapping = this.formConfig?.sectionPropagateAttributes;
+        for (let index = 0; index < mapping.length; index++) {
+            const attrName = mapping[index].toString();
+            const attributeValue = this.section?.[attrName];
+            this.defaultProcessAttributeChange(attrName, attributeValue);
+            this.customProcessAttributeChange(attrName, attributeValue);
+        }
+        // Subscripción a cambios en atributos
+        this.section?.attributeChange.subscribe(event => {
+            const { name: attrName, value } = event;
+            this.defaultProcessAttributeChange(attrName, value);
+            this.customProcessAttributeChange(attrName, value);
+        });
         this.start();
     }
     start() { }
 }
-SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SectionComponent, selector: "lib-section", inputs: { section: "section", formManager: "formManager" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SectionComponent, selector: "lib-section", inputs: { section: "section", form: "form" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -235,18 +266,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { section: [{
                 type: Input
-            }], formManager: [{
+            }], form: [{
                 type: Input
             }] } });
 
-class SubSectionComponent {
+class SubSectionComponent extends PieceComponent {
     ngOnInit() {
+        this.formConfig = this.subSection?._formConfig;
+        const mapping = this.formConfig?.subSectionPropagateAttributes;
+        for (let index = 0; index < mapping.length; index++) {
+            const attrName = mapping[index].toString();
+            const attributeValue = this.subSection?.[attrName];
+            this.defaultProcessAttributeChange(attrName, attributeValue);
+            this.customProcessAttributeChange(attrName, attributeValue);
+        }
+        // Subscripción a cambios en atributos
+        this.subSection?.attributeChange.subscribe(event => {
+            const { name: attrName, value } = event;
+            this.defaultProcessAttributeChange(attrName, value);
+            this.customProcessAttributeChange(attrName, value);
+        });
         this.start();
     }
     start() { }
 }
-SubSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SubSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SubSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SubSectionComponent, selector: "lib-subsection", inputs: { subSection: "subSection", showHeader: "showHeader", formManager: "formManager" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+SubSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SubSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SubSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SubSectionComponent, selector: "lib-subsection", inputs: { subSection: "subSection", form: "form" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SubSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -255,18 +300,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { subSection: [{
                 type: Input
-            }], showHeader: [{
-                type: Input
-            }], formManager: [{
+            }], form: [{
                 type: Input
             }] } });
 
 const INLINE_ACTION$1 = 'INLINE';
-class LibTableRecordActionComponent {
+class LibTableRecordActionComponent extends PieceComponent {
     constructor() {
+        super(...arguments);
         this.actionSelected = new EventEmitter();
     }
     ngOnInit() {
+        this.formConfig = this.action?._formConfig;
+        const mapping = this.formConfig?.actionPropagateAttributes;
+        for (let index = 0; index < mapping.length; index++) {
+            const attrName = mapping[index].toString();
+            const attributeValue = this.action?.[attrName];
+            this.defaultProcessAttributeChange(attrName, attributeValue);
+            this.customProcessAttributeChange(attrName, attributeValue);
+        }
+        // Subscripción a cambios en atributos
+        this.action?.attributeChange.subscribe(event => {
+            const { name: attrName, value } = event;
+            this.defaultProcessAttributeChange(attrName, value);
+            this.customProcessAttributeChange(attrName, value);
+        });
         this.start();
     }
     start() { }
@@ -280,8 +338,8 @@ class LibTableRecordActionComponent {
     }
     class() { }
 }
-LibTableRecordActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibTableRecordActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: LibTableRecordActionComponent, selector: "lib-table-record-action", inputs: { recordId: "recordId", recordData: "recordData", action: "action" }, outputs: { actionSelected: "actionSelected" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LibTableRecordActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LibTableRecordActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: LibTableRecordActionComponent, selector: "lib-table-record-action", inputs: { recordId: "recordId", recordData: "recordData", action: "action" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordActionComponent, decorators: [{
             type: Component,
             args: [{
@@ -289,7 +347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                     template: `<ng-content></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { recordId: [{
+        }], propDecorators: { recordId: [{
                 type: Input
             }], recordData: [{
                 type: Input
@@ -328,12 +386,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
             }] } });
 
 const changeViewAttributes = ['visibleRecords', 'currentPage', 'recordsPerPage'];
-class LibTableComponent {
+class LibTableComponent extends ElementComponent {
     constructor() {
+        super(...arguments);
         this.currentPage = 1;
         this.globalSearch = false;
         this.globalFilterString = '';
-        this.visibleRecords = [];
+        // visibleRecords: any[] = [];
         this.selectedRecords = [];
         this.totalRecordsNumber = 0;
         this.allSelected = false;
@@ -341,51 +400,73 @@ class LibTableComponent {
         this.loaded = false;
         this.selectable = false;
         this.hasActions = false;
-        this.disabled = false;
+        this.table = null;
+        this.visibleRecords = [];
+        this.waiting = false;
     }
     ngOnInit() {
-        if (this.table) {
-            this.formConfig = this.table?._formConfig;
-            this.tableFieldStyles = this.formConfig.tableFieldStyles;
-            this.selectable = this.table.selectable;
-            this.hasActions = this.table.hasActions();
-            this.inlineActions = this.table.getActions(this.formConfig.tableActions.inline);
-            this.globalActions = this.table.getActions(this.formConfig.tableActions.global);
-            this.selectionActions = this.table.getActions(this.formConfig.tableActions.selection);
-            // Inicialización de campos mapeados del objeto
-            const mapping = Object.entries(this.formConfig.componentTableAttrMap);
-            for (let index = 0; index < mapping.length; index++) {
-                const [tableAttrRaw, compAttrRaw] = mapping[index];
-                const tableAttr = tableAttrRaw.toString();
-                const compAttr = compAttrRaw.toString();
-                this.syncAttribute(compAttr, this.table[tableAttr]);
-            }
-            // Subscripción a cambios en atributos
-            this.table.attributeChange.subscribe(event => {
-                const { name: tableAttr, value } = event;
-                const compAttr = this.formConfig.componentTableAttrMap[tableAttr];
-                this.syncAttribute(compAttr, value);
-            });
+        if (!this.table) {
+            return;
         }
+        this.formConfig = this.table?._formConfig;
+        this.tableFieldStyles = this.formConfig?.tableFieldStyles;
+        this.selectable = this.table?.selectable;
+        this.hasActions = this.table?.hasActions();
+        this.inlineActions = this.table?.getActions(this.formConfig?.tableActions.inline);
+        this.globalActions = this.table?.getActions(this.formConfig?.tableActions.global);
+        this.selectionActions = this.table?.getActions(this.formConfig?.tableActions.selection);
+        // Inicialización de campos mapeados del objeto
+        const mapping = Object.entries(this.formConfig?.actionPropagateAttributes);
+        for (let index = 0; index < mapping.length; index++) {
+            const tableAttr = mapping[index]?.[0];
+            const componentAttr = mapping[index]?.[1]?.toString() ?? '';
+            const attributeValue = this.table?.[tableAttr];
+            this.defaultProcessAttributeChange(componentAttr, attributeValue);
+            this.customProcessAttributeChange(componentAttr, attributeValue);
+        }
+        // Subscripción a cambios en atributos
+        this.table?.attributeChange.subscribe(event => {
+            const { name: attrName, value } = event;
+            this.defaultProcessAttributeChange(attrName, value);
+            this.customProcessAttributeChange(attrName, value);
+        });
+        // Suscripción a los cambios de atributos de las columnas
+        // this.table.columns.forEach(column => {
+        //   mapping = this.formConfig?.tableColumnPropagateAttributes;
+        //   for (let index = 0; index < mapping.length; index++) {
+        //     const attrName = mapping[index].toString();
+        //     const attributeValue = column?.[attrName];
+        //     this.defaultColumnAttributeChange(column, attrName, attributeValue);
+        //   }
+        //   column?.attributeChange.subscribe(event => {
+        //     const { name: attrName, value } = event;
+        //     this.defaultColumnAttributeChange(column, attrName, value);
+        //   });
+        // });
         this.start();
     }
-    start() { }
+    // defaultColumnAttributeChange(column: any, attribute: string, value?: any) {
+    //   attribute && (column[attribute] = value);
+    // }
     updateTableData() { }
-    tableGlobalAction(actionCode) { this.table.notifyGlobalAction(actionCode); }
-    tableSelectionAction(actionCode) { this.table.notifySelectionAction(actionCode); }
-    tableActionSelected(actionEvent) { this.table.notifyInlineAction(actionEvent); }
-    tableSelectionToggle(recordId) { this.table.notifyRecordSelection(recordId); }
-    toggleSelectAll() { return (this.allSelected) ? this.table.unSelectAll() : this.table.selectAll(); }
+    tableGlobalAction(actionCode) { this.table?.notifyGlobalAction(actionCode); }
+    tableSelectionAction(actionCode) { this.table?.notifySelectionAction(actionCode); }
+    tableActionSelected(actionEvent) { this.table?.notifyInlineAction(actionEvent); }
+    tableSelectionToggle(recordId) { this.table?.notifyRecordSelection(recordId); }
+    toggleSelectAll() { return (this.allSelected) ? this.table?.unSelectAll() : this.table?.selectAll(); }
     globalFilterCompleted() { this.changePage(1); }
-    changePage(requestedPage) { this.table.changePage(requestedPage); }
-    tableColumnSort(columnName, direction = null) { this.table.sort(columnName, direction ?? 'ascend'); }
-    globalFilterChanged() { this.table.setGlobalFilterString(this.globalFilterString?.trim() ?? '', false); }
-    syncAttribute(name, value) {
+    changePage(requestedPage) { this.table?.changePage(requestedPage); }
+    tableColumnSort(columnName, direction = null) { this.table?.sort(columnName, direction ?? 'ascend'); }
+    globalFilterChanged() { this.table?.setGlobalFilterString(this.globalFilterString?.trim() ?? '', false); }
+    defaultProcessAttributeChange(attribute, value) {
+        if (!attribute) {
+            return false;
+        }
         try {
-            if (name === 'visibleRecords') {
+            if (attribute === 'visibleRecords') {
                 this.updateTableData();
             }
-            this[name] = value;
+            this[attribute] = value;
             return true;
         }
         catch {
@@ -394,15 +475,15 @@ class LibTableComponent {
     }
     filterHasChanged(column, values) {
         if (!values || values.length === 0) {
-            this.table.removeColumnFilter(column.fieldCode);
+            this.table?.removeColumnFilter(column.fieldCode);
         }
         else {
-            this.table.addColumnFilter(column.fieldCode, values);
+            this.table?.addColumnFilter(column.fieldCode, values);
         }
     }
 }
-LibTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: LibTableComponent, selector: "lib-table", inputs: { table: "table", tableRecords: "tableRecords", disabled: "disabled", state: "state", waiting: "waiting" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LibTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LibTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: LibTableComponent, selector: "lib-table", inputs: { table: "table", visibleRecords: "visibleRecords", waiting: "waiting" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -412,11 +493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { table: [{
                 type: Input
-            }], tableRecords: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], state: [{
+            }], visibleRecords: [{
                 type: Input
             }], waiting: [{
                 type: Input
@@ -448,22 +525,30 @@ const operators = {
     IN: 'IN',
 };
 
-class FormElement {
-    constructor(elementDefinition, formConfig) {
+class FormPiece {
+    constructor(pieceDefinition, formConfig) {
+        this._attributeChange = new BehaviorSubject(null);
+        this._formState = '';
         this._visible = true;
+        this._disabled = false;
         this.visibleStates = null;
         this.enabledStates = null;
-        this.elementType = null;
+        this.visibleOnState = true;
+        this.disabledOnState = false;
+        this.customAttributes = {};
         this._formConfig = formConfig;
         this._isForced = false;
-        this.setVisibleStates(elementDefinition.visibleStates);
-        this.setEnabledStates(elementDefinition.enabledStates);
         this._visibleForced = false;
-        this.disabled = elementDefinition?.disabled ?? false;
-        this.setVisibility(elementDefinition?.visible ?? true);
-        this.customAttributes = elementDefinition?.customAttributes ?? {};
+        this.setVisibleStates(pieceDefinition.visibleStates);
+        this.setEnabledStates(pieceDefinition.enabledStates);
+        this.enabled = !pieceDefinition?.disabled ?? false;
+        this.setVisibility(pieceDefinition?.visible ?? true);
+        this.customAttributes = pieceDefinition?.customAttributes ?? {};
+        if (pieceDefinition?.customAttributes) {
+            Object.keys(pieceDefinition?.customAttributes)
+                ?.forEach(attr => this.customAttributes[attr] = pieceDefinition?.customAttributes[attr]);
+        }
     }
-    ;
     getCustomAttribute(name) { return this.customAttributes?.[name] ?? null; }
     setCustomAttribute(name, value) { if (name) {
         this.customAttributes[name] = value;
@@ -474,9 +559,10 @@ class FormElement {
         });
     }
     matchAttribute(name, value) { return this.customAttributes?.[name] === value; }
-    isField() { return this.elementType === elementTypes.field; }
-    isAction() { return this.elementType === elementTypes.action; }
-    isTable() { return this.elementType === elementTypes.table; }
+    get attributeChange() { return this._attributeChange; }
+    propagateAttribute(name, value) {
+        this._attributeChange.next({ name, value });
+    }
     setVisibleStates(newStates) {
         const visibleStates = (!Array.isArray(newStates) && typeof newStates === 'string')
             ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
@@ -491,47 +577,90 @@ class FormElement {
     }
     viewOnState(state) { return (this.visibleStates && state) ? this.visibleStates.includes(state) : false; }
     enabledOnState(state) { return (this.enabledStates && state) ? this.enabledStates.includes(state) : false; }
-    /**
-     * @deprecated Utilizar viewOnState
-     */
-    supportState(state) { return this.viewOnState(state); }
-    /**
-     * @deprecated Utilizar viewOnState
-     */
-    supportMode(state) { return this.viewOnState(state); }
-    get visible() { return (this._isForced) ? this._visibleForced : this._visible; }
+    get visible() { return this._visible; }
     set visible(visible) { this.setVisibility(visible); }
     visibleOn(state) {
         return this.visible && this.viewOnState(state);
     }
     enabledOn(state) {
-        return !this.disabled && this.enabledOnState(state);
+        return !this._disabled && this.enabledOnState(state);
     }
     setVisibility(visible, forced = null) {
         this._visible = visible && true;
-        if (forced != null) {
+        this.propagateVisible();
+        if (forced !== null) {
             this._isForced = forced;
+            this._visibleForced = visible;
+        }
+        const formerVisibleOnState = this.visibleOnState;
+        this.visibleOnState = this.visible && this.viewOnState(this._formState);
+        if (formerVisibleOnState !== this.visibleOnState) {
+            this.propagateAttribute('visible', this.visibleOnState);
         }
     }
     show(forced = null) {
-        this._visible = true;
-        if (forced !== null) {
-            this._isForced = forced;
-            this._visibleForced = true;
-        }
+        this.setVisibility(true, forced);
     }
     hide(forced = null) {
-        this._visible = false;
-        if (forced !== null) {
-            this._isForced = forced;
-            this._visibleForced = false;
-        }
+        this.setVisibility(false, forced);
+    }
+    get disabled() { return this._disabled; }
+    get enabled() { return !this._disabled; }
+    get editable() { return !this._disabled; }
+    set enabled(enabled) {
+        this._disabled = !enabled;
+        const formerDisableOnState = this.disabledOnState;
+        this.disabledOnState = this._disabled || !this.enabledOnState(this._formState);
+        if (formerDisableOnState !== this.disabledOnState) {
+            this.propagateDisabled();
+        }
+    }
+    enable() { this.enabled = true; }
+    disable() { this.enabled = false; }
+    subscribeFormStateChange(formChangeSubject) {
+        this.formStateChangeCustom(formChangeSubject);
+        formChangeSubject.subscribe(event => {
+            const { state } = event ?? {};
+            if (state) {
+                this._formState = state;
+                this.visibleOnState = this.visible && this.viewOnState(state);
+                this.disabledOnState = this._disabled || !this.enabledOnState(state);
+                this.propagateVisible();
+                this.propagateDisabled();
+            }
+        });
+    }
+    formStateChangeCustom(formChangeSubject) { }
+    propagateVisible() {
+        this.propagateAttribute('visible', this.visibleOnState);
+    }
+    propagateDisabled() {
+        this.propagateAttribute('disabled', this.disabledOnState);
+    }
+}
+
+class FormElement extends FormPiece {
+    constructor(elementDefinition, formConfig) {
+        super(elementDefinition, formConfig);
+        this.elementType = null;
+    }
+    ;
+    setAttr(attr, value) {
+        const { name: attrName, propagate: name } = attr;
+        this[attrName] = value;
+        name && this.propagateAttribute(name, value);
     }
-    enable() { this.disabled = false; }
-    disable() { this.disabled = true; }
-    get enabled() { return !this.disabled; }
-    get editable() { return !this.disabled; }
-    set editable(editable) { this.disabled = !editable; }
+    isField() { return this.elementType === elementTypes.field; }
+    isAction() { return this.elementType === elementTypes.action; }
+    isTable() { return this.elementType === elementTypes.table; }
+    /**
+     * @deprecated Utilizar viewOnState
+     */
+    supportState(state) { return this.viewOnState(state); }
+    /**
+     * @deprecated Utilizar viewOnState
+     */
+    supportMode(state) { return this.viewOnState(state); }
 }
 
 const HEADER = 'HEADER';
@@ -578,7 +707,7 @@ const directChanges = [
     'maxLength', 'maxValue', 'minLength', 'minValue', 'validateOnServer', 'serverAction', 'visibleLabel',
     'options',
 ];
-const attrs = {
+const attrs$1 = {
     _captureType: { name: '_captureType', propagate: 'captureType' },
     _errorCode: { name: '_errorCode', propagate: 'errorCode' },
     _errorMessage: { name: '_errorMessage', propagate: 'errorMessage' },
@@ -613,7 +742,6 @@ class FieldDescriptor extends FormElement {
         this._editionFinish = new Subject();
         this._editionPartial = new Subject();
         this._detailRequest = new Subject();
-        this._attributeChange = new Subject();
         this._errorType = '';
         this._errorCode = '';
         this._errorMessage = '';
@@ -640,7 +768,7 @@ class FieldDescriptor extends FormElement {
         this._tooltipText = '';
         this.elementType = elementTypes.field;
         const fld = (inputFieldReceived) ? inputFieldReceived : {};
-        this.setAttr(attrs._fieldCode, fld.fieldCode);
+        this.setAttr(attrs$1._fieldCode, fld.fieldCode);
         this.title = fld.fieldTitle ?? this._fieldCode;
         this.type = fld.fieldTypeCode;
         this.captureType = fld.captureType ?? DEFAULT_CAPTURE_TYPE;
@@ -680,17 +808,16 @@ class FieldDescriptor extends FormElement {
         this._setValue(fld.fieldValue ?? this._defaultValue ?? '');
     }
     get alignment() { return this._fieldAlignment; }
-    set alignment(alignment) { this.setAttr(attrs._fieldAlignment, alignment); }
-    get attributeChange() { return this._attributeChange; }
+    set alignment(alignment) { this.setAttr(attrs$1._fieldAlignment, alignment); }
     get backend() { return this._validateOnServer; }
     get captureType() { return this._captureType; }
-    set captureType(captureType) { this.setAttr(attrs._captureType, captureType); }
+    set captureType(captureType) { this.setAttr(attrs$1._captureType, captureType); }
     get code() { return this._fieldCode; }
     get fieldCode() { return this._fieldCode; }
     get defaultValue() { return this._defaultValue; }
-    set defaultValue(defaultValue) { this.setAttr(attrs._defaultValue, defaultValue); }
+    set defaultValue(defaultValue) { this.setAttr(attrs$1._defaultValue, defaultValue); }
     get defaultEditable() { return this._defaultEditable; }
-    set defaultEditable(editable) { this.setAttr(attrs._defaultEditable, editable); }
+    set defaultEditable(editable) { this.setAttr(attrs$1._defaultEditable, editable); }
     get detailRequest() { return this._detailRequest; }
     get editionFinish() { return this._editionFinish; }
     get editionPartial() { return this._editionPartial; }
@@ -725,31 +852,31 @@ class FieldDescriptor extends FormElement {
     get errorType() { return this._errorType; }
     get externalValue() { return this._externalValue; }
     get format() { return this._fieldFormat; }
-    set format(format) { this.setAttr(attrs._fieldFormat, format); }
+    set format(format) { this.setAttr(attrs$1._fieldFormat, format); }
     get hasChanged() { return this._hasChanged; }
-    set hasChanged(hasChanged) { this.setAttr(attrs._hasChanged, hasChanged); }
+    set hasChanged(hasChanged) { this.setAttr(attrs$1._hasChanged, hasChanged); }
     get info() { return this._fieldInfo; }
-    set info(newInfo) { this.setAttr(attrs._fieldInfo, newInfo); }
-    set intrinsicErrorMessage(message) { this.setAttr(attrs._intrinsicErrorMessage, message); }
+    set info(newInfo) { this.setAttr(attrs$1._fieldInfo, newInfo); }
+    set intrinsicErrorMessage(message) { this.setAttr(attrs$1._intrinsicErrorMessage, message); }
     get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
-    set maxLength(requiredMaxLength) { this.setAttr(attrs._maxLength, +requiredMaxLength); }
+    set maxLength(requiredMaxLength) { this.setAttr(attrs$1._maxLength, +requiredMaxLength); }
     get maxValue() { return this._maxValue; }
     set maxValue(inputMaxValue) {
         let maxValue = inputMaxValue;
         if (this._fieldType === this._formConfig.fieldTypes.date) {
             maxValue = new Date(maxValue);
         }
-        this.setAttr(attrs._maxValue, maxValue);
+        this.setAttr(attrs$1._maxValue, maxValue);
     }
     get minLength() { return this._minLength; }
-    set minLength(requiredMinLength) { this.setAttr(attrs._minLength, +requiredMinLength); }
+    set minLength(requiredMinLength) { this.setAttr(attrs$1._minLength, +requiredMinLength); }
     get minValue() { return this._minValue; }
     set minValue(inputMinValue) {
         let minValue = inputMinValue;
         if (this._fieldType === this._formConfig.fieldTypes.date) {
             minValue = new Date(minValue);
         }
-        this.setAttr(attrs._minValue, minValue);
+        this.setAttr(attrs$1._minValue, minValue);
     }
     get name() { return this._fieldCode; }
     get options() {
@@ -773,11 +900,11 @@ class FieldDescriptor extends FormElement {
         });
         fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
             && fieldOptions.length > 0) ? fieldOptions : [];
-        this.setAttr(attrs._fieldOptions, fieldOptions);
+        this.setAttr(attrs$1._fieldOptions, fieldOptions);
         if (this._value) {
             if (this._fieldType === this._formConfig.fieldTypes.array && Array.isArray(this._value)) {
                 const fieldValue = this._value?.filter(item => this._fieldOptions?.find(opt => opt.fieldOptionId === item));
-                this.setAttr(attrs._value, fieldValue);
+                this.setAttr(attrs$1._value, fieldValue);
             }
             else {
                 const valInOptions = this._fieldOptions?.find(item => item.fieldOptionId === this._value);
@@ -793,28 +920,28 @@ class FieldDescriptor extends FormElement {
     }
     get optionText() { return this._fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null; }
     get outputOnly() { return this._outputOnly; }
-    set outputOnly(outputOnly) { this.setAttr(attrs._outputOnly, outputOnly); }
+    set outputOnly(outputOnly) { this.setAttr(attrs$1._outputOnly, outputOnly); }
     get required() { return this._fieldRequired; }
-    set required(required) { this.setAttr(attrs._fieldRequired, required ?? false); }
+    set required(required) { this.setAttr(attrs$1._fieldRequired, required ?? false); }
     get title() { return this._fieldTitle; }
-    set title(title) { this.setAttr(attrs._fieldTitle, title.toString()); }
+    set title(title) { this.setAttr(attrs$1._fieldTitle, title?.toString() ?? ''); }
     get tooltip() { return this._tooltipText; }
-    set tooltip(tooltip) { this.setAttr(attrs._tooltipText, tooltip); }
+    set tooltip(tooltip) { this.setAttr(attrs$1._tooltipText, tooltip); }
     get type() { return this._fieldType; }
-    set type(fieldType) { this.setAttr(attrs._fieldType, fieldType); }
+    set type(fieldType) { this.setAttr(attrs$1._fieldType, fieldType); }
     get validating() { return this._onValidation; }
-    set validating(isValidating) { this.setAttr(attrs._onValidation, isValidating); }
+    set validating(isValidating) { this.setAttr(attrs$1._onValidation, isValidating); }
     get value() {
         return (this._fieldType === this._formConfig.fieldTypes.boolean
             || this._fieldType === this._formConfig.fieldTypes.check) ? yn(this._value) : this._value;
     }
     get validateOnServer() { return this._validateOnServer; }
-    set validateOnServer(validateOnServer) { this.setAttr(attrs._validateOnServer, validateOnServer); }
+    set validateOnServer(validateOnServer) { this.setAttr(attrs$1._validateOnServer, validateOnServer); }
     get serverAction() { return this._validateOnServer; }
     set serverAction(validateOnServer) { this.validateOnServer = validateOnServer; }
     set value(newValue) { this._setValue(newValue); }
     get visibleLabel() { return this._visibleLabel; }
-    set visibleLabel(visibleLabel) { this.setAttr(attrs._visibleLabel, visibleLabel); }
+    set visibleLabel(visibleLabel) { this.setAttr(attrs$1._visibleLabel, visibleLabel); }
     /**
      * @deprecated Use options
      */
@@ -832,7 +959,7 @@ class FieldDescriptor extends FormElement {
      */
     changed(hasChanged = true) { this.hasChanged = hasChanged; }
     clean() { this._setValue(this._defaultValue || ''); this.resetError(); }
-    focus() { this.setAttr(attrs._focus, true); }
+    focus() { this.setAttr(attrs$1._focus, true); }
     getErrorCode() { return this.error.code; }
     setErrorCode(code) { this.setError(code, this._errorMessage); }
     getErrorMessage() { return this.error.message; }
@@ -940,15 +1067,10 @@ class FieldDescriptor extends FormElement {
         const detailEvent = { code: this._fieldCode, detail };
         this._detailRequest.next(detailEvent);
     }
-    setAttr(attr, value) {
-        const { name: attrName, propagate: name } = attr;
-        this[attrName] = value;
-        name && this._attributeChange.next({ name, value });
-    }
     setError(code, message, type = DEFAULT_ERROR_TYPE) {
-        this.setAttr(attrs._errorCode, code ?? NO_ERROR);
-        this.setAttr(attrs._errorType, (this._errorCode === NO_ERROR) ? '' : type);
-        this.setAttr(attrs._errorMessage, message ?? '');
+        this.setAttr(attrs$1._errorCode, code ?? NO_ERROR);
+        this.setAttr(attrs$1._errorType, (this._errorCode === NO_ERROR) ? '' : type);
+        this.setAttr(attrs$1._errorMessage, message ?? '');
     }
     updateFromServer(fld) {
         const fieldKeys = Object.keys(fld);
@@ -1003,7 +1125,7 @@ class FieldDescriptor extends FormElement {
         if (this._value !== newFinalValue) {
             this.hasChanged = true;
             if (widgetUpdate) {
-                this.setAttr(attrs._value, newFinalValue);
+                this.setAttr(attrs$1._value, newFinalValue);
             }
             else {
                 this._value = newFinalValue;
@@ -1013,22 +1135,20 @@ class FieldDescriptor extends FormElement {
     }
 }
 
-class RecordTableColumn {
+class RecordTableColumn extends FormPiece {
     constructor(recTableColReceived, formConfig) {
+        super(recTableColReceived, formConfig);
         this.fieldCode = '';
         this.fieldTitle = '';
         this.fieldType = '';
         this.fieldAlignment = '';
         this.fieldFormat = '';
-        this.visible = true;
         this.sortable = true;
         this.sortDirections = [];
-        this.customAttributes = {};
         // Filtros
         this.filterVisible = false;
         this.filterDef = null;
         this.filterSetup = null;
-        this._formConfig = formConfig;
         this.filterDef = null;
         if (recTableColReceived) {
             this.fieldCode = recTableColReceived.fieldCode;
@@ -1043,15 +1163,6 @@ class RecordTableColumn {
             this.customAttributes = recTableColReceived?.customAttributes ?? {};
         }
     }
-    getCustomAttribute(name) { return this.customAttributes?.[name] ?? null; }
-    setCustomAttribute(name, value) { if (name) {
-        this.customAttributes[name] = value;
-    } }
-    setCustomAttributes(attributes) {
-        Object.entries(attributes).forEach(([name, value]) => {
-            this.setCustomAttribute(name, value);
-        });
-    }
     hideFilter() {
         this.filterVisible = false;
     }
@@ -1094,8 +1205,9 @@ class RecordTableColumn {
     }
 }
 
-class TableAction {
-    constructor(actionDefinition) {
+class TableAction extends FormPiece {
+    constructor(actionDefinition, formConfig) {
+        super(actionDefinition, formConfig);
         this.actionCode = actionDefinition.actionCode;
         this.actionTitle = actionDefinition.actionTitle;
         this.iconName = actionDefinition.iconName || this.actionCode;
@@ -1103,26 +1215,11 @@ class TableAction {
         this.actionClass = actionDefinition.actionClass || 'INLINE';
         this.newState = actionDefinition.newState;
         this.stateField = actionDefinition.stateField || '';
-        this.visibleStates = actionDefinition.visibleStates || [];
-        this.enabledStates = actionDefinition.enabledStates || [];
         this.backend = actionDefinition?.serverAction ?? false;
         this.restrictedOnField = actionDefinition.fieldRestrictedCode || '';
         this.restrictedOnValue = actionDefinition.valueRestricted ?? '';
         this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
-        this.customAttributes = actionDefinition?.customAttributes ?? {};
-    }
-    getCustomAttribute(name) { return this.customAttributes?.[name] ?? null; }
-    setCustomAttribute(name, value) { if (name) {
-        this.customAttributes[name] = value;
-    } }
-    setCustomAttributes(attributes) {
-        Object.entries(attributes).forEach(([name, value]) => {
-            this.setCustomAttribute(name, value);
-        });
     }
-    supportMode(state) { return this.viewOnState(state); }
-    viewOnState(state) { return this.visibleStates.includes(state); }
-    enabledOnState(state) { return this.enabledStates.includes(state); }
 }
 
 class TableRecordData {
@@ -1237,6 +1334,21 @@ class TableRecordData {
 
 const TABLE_SORT_ASCENDING = 'asc';
 const TABLE_SORT_DESCENDING = 'desc';
+const attrs = {
+    allSelected: { name: 'allSelected', propagate: 'allSelected' },
+    tableCode: { name: 'tableCode', propagate: 'code' },
+    clientPaging: { name: 'clientPaging', propagate: null },
+    globalSearch: { name: 'globalSearch', propagate: 'globalSearch' },
+    globalFilterString: { name: 'globalFilterString', propagate: null },
+    sorting: { name: 'sorting', propagate: null },
+    recordsPerPage: { name: 'recordsPerPage', propagate: 'recordsPerPage' },
+    layout: { name: 'layout', propagate: 'layout' },
+    columns: { name: 'columns', propagate: 'columns' },
+    selectedRecords: { name: 'selectedRecords', propagate: 'selectedRecords' },
+    currentPage: { name: 'currentPage', propagate: 'currentPage' },
+    totalRecordsNumber: { name: 'totalRecordsNumber', propagate: 'totalRecordsNumber' },
+    visibleRecords: { name: 'visibleRecords', propagate: 'visibleRecords' },
+};
 class RecordTable extends FormElement {
     constructor(tableReceived, formConfig) {
         super(tableReceived, formConfig);
@@ -1245,7 +1357,6 @@ class RecordTable extends FormElement {
         this._recordSelectionTrigger = new Subject();
         this._selectionActionTrigger = new Subject();
         this._getDataTrigger = new Subject();
-        this._attributeChange = new Subject();
         this._tableColumnObj = {};
         this._actionsObj = {};
         // Mecanismos de filtrado nueva versión
@@ -1276,22 +1387,23 @@ class RecordTable extends FormElement {
         this.selectable = tableReceived?.selectable ?? false;
         this.selectionBackend = tableReceived?.selectionBackend ?? false;
         this.sortable = tableReceived?.sortable ?? false;
-        this.setAttr('allSelected', false);
-        this.setAttr('tableCode', tableReceived.tableCode);
-        this.setAttr('clientPaging', tableReceived?.clientPaging ?? true);
-        this.setAttr('globalSearch', tableReceived?.simpleFilter ?? false);
-        this.setAttr('globalFilterString', '');
-        this.setAttr('sorting', { columnName: '', direction: '' });
-        this.setAttr('recordsPerPage', formConfig.defaultRecordsPerPage);
-        this.setAttr('layout', '');
+        this.setAttr(attrs.allSelected, false);
+        this.setAttr(attrs.tableCode, tableReceived.tableCode);
+        this.setAttr(attrs.clientPaging, tableReceived?.clientPaging ?? true);
+        this.setAttr(attrs.globalSearch, tableReceived?.simpleFilter ?? false);
+        this.setAttr(attrs.globalFilterString, '');
+        this.setAttr(attrs.sorting, { columnName: '', direction: '' });
+        this.setAttr(attrs.recordsPerPage, formConfig.defaultRecordsPerPage);
+        this.setAttr(attrs.layout, '');
         if (tableReceived.fields) {
             const columns = [];
             for (const columnReceived of tableReceived.fields) {
-                const columnDefinition = new RecordTableColumn(columnReceived, this._formConfig);
+                const columnEnriched = { ...columnReceived, visibleStates: this.visibleStates };
+                const columnDefinition = new RecordTableColumn(columnEnriched, this._formConfig);
                 columns.push(columnDefinition);
                 this._tableColumnObj[columnDefinition.fieldCode] = columnDefinition;
             }
-            this.setAttr('columns', columns);
+            this.setAttr(attrs.columns, columns);
         }
         if (tableReceived.actions) {
             const tableActions = tableReceived.actions.map(objDef => {
@@ -1308,7 +1420,7 @@ class RecordTable extends FormElement {
                 return { ...objDef, visibleStates, enabledStates };
             });
             for (const actionReceived of tableActions) {
-                const inlineAction = new TableAction(actionReceived);
+                const inlineAction = new TableAction(actionReceived, this._formConfig);
                 this._actions.push(inlineAction);
                 this._actionsObj[inlineAction.actionCode] = inlineAction;
             }
@@ -1327,9 +1439,8 @@ class RecordTable extends FormElement {
     get selectionActionTrigger() { return this._selectionActionTrigger; }
     get recordSelectionTrigger() { return this._recordSelectionTrigger; }
     get getDataTrigger() { return this._getDataTrigger; }
-    get attributeChange() { return this._attributeChange; }
     getLayout() { return this.layout; }
-    setLayout(layout) { this.setAttr('layout', layout); }
+    setLayout(layout) { this.setAttr(attrs.layout, layout); }
     hasActions() { return (this._actions.length > 0); }
     getSelectedRecords() { return this.tableRecords.filter(rec => rec.selected).map(rec => rec.recordId); }
     activateGlobalSearch() { this.globalSearch = true; }
@@ -1337,12 +1448,6 @@ class RecordTable extends FormElement {
     columnDefinition(fieldCode) { return this._tableColumnObj[fieldCode]; }
     putOnWait() { this.waiting = true; }
     freeWaiting() { this.waiting = false; }
-    setAttr(name, value) {
-        this[name] = value;
-        if (this._formConfig.monitoredTableAttributes.includes(name)) {
-            this._attributeChange.next({ name, value });
-        }
-    }
     notifyGlobalAction(actionCode) {
         const tableEvent = {
             tableCode: this.tableCode,
@@ -1407,23 +1512,23 @@ class RecordTable extends FormElement {
         this.updateVisibleRecords();
     }
     selectAll() {
-        this.setAttr('allSelected', true);
+        this.setAttr(attrs.allSelected, true);
         this.tableRecords.forEach(record => record.select());
-        this.setAttr('selectedRecords', this.getSelectedRecords());
+        this.setAttr(attrs.selectedRecords, this.getSelectedRecords());
         return true;
     }
     unSelectAll() {
-        this.setAttr('allSelected', false);
+        this.setAttr(attrs.allSelected, false);
         this.tableRecords.forEach(record => record.unselect());
-        this.setAttr('selectedRecords', this.getSelectedRecords());
+        this.setAttr(attrs.selectedRecords, this.getSelectedRecords());
         return true;
     }
     setTableRecords(tableRecords, append) {
         if (!append) {
             this.tableRecords = [];
-            this.setAttr('allSelected', false);
+            this.setAttr(attrs.allSelected, false);
             this.tableRecords.forEach(record => record.unselect());
-            this.setAttr('selectedRecords', []);
+            this.setAttr(attrs.selectedRecords, []);
             this.tableRecordObj = {};
         }
         const newRecordsObj = { ...this.tableRecordObj };
@@ -1435,7 +1540,7 @@ class RecordTable extends FormElement {
             newRecordsObj[recordIdKey] = recordReceived;
         }
         this.tableRecords = newRecords;
-        this.setAttr('selectedRecords', this.getSelectedRecords());
+        this.setAttr(attrs.selectedRecords, this.getSelectedRecords());
         this.tableRecordObj = newRecordsObj;
         this.updateVisibleRecords();
     }
@@ -1444,7 +1549,7 @@ class RecordTable extends FormElement {
     setTableAppend(append) { this._appendPages = append; }
     changePage(requestedPage) {
         if (this.clientPaging) {
-            this.setAttr('currentPage', requestedPage);
+            this.setAttr(attrs.currentPage, requestedPage);
             this.updateVisibleRecords();
         }
         else {
@@ -1456,7 +1561,7 @@ class RecordTable extends FormElement {
         let visibleRecords;
         if (this.clientPaging) {
             let filteredRecords = this.getFilteredRecords();
-            this.setAttr('totalRecordsNumber', filteredRecords.length);
+            this.setAttr(attrs.totalRecordsNumber, filteredRecords.length);
             const sliceNumber1 = (this.currentPage - 1) * this.recordsPerPage;
             const sliceNumber2 = (this.currentPage - 1) * this.recordsPerPage + this.recordsPerPage;
             visibleRecords = filteredRecords.slice(sliceNumber1, sliceNumber2);
@@ -1469,17 +1574,17 @@ class RecordTable extends FormElement {
         else {
             visibleRecords = this.tableRecords;
         }
-        this.setAttr('visibleRecords', visibleRecords);
+        this.setAttr(attrs.visibleRecords, visibleRecords);
     }
     updateFromServer(tableReceived) {
         this.requestedPage = 1;
         this.visible = tableReceived?.visible || true;
         this.totalPages = tableReceived.totalPages || 1;
         this.recordsNumber = tableReceived.recordsNumber;
-        this.setAttr('currentPage', +tableReceived?.currentPage || 1);
-        this.setAttr('recordsPerPage', +tableReceived.recordsPerPage);
-        this.setAttr('totalRecordsNumber', (this.clientPaging) ? tableReceived.tableRecords.length : +tableReceived.totalRecordsNumber);
-        this.setAttr('sorting', {
+        this.setAttr(attrs.currentPage, +tableReceived?.currentPage || 1);
+        this.setAttr(attrs.recordsPerPage, +tableReceived.recordsPerPage);
+        this.setAttr(attrs.totalRecordsNumber, (this.clientPaging) ? tableReceived.tableRecords.length : +tableReceived.totalRecordsNumber);
+        this.setAttr(attrs.sorting, {
             columnName: tableReceived.sortingColumn || '',
             direction: tableReceived.sortingDirection || ''
         });
@@ -1528,7 +1633,7 @@ class RecordTable extends FormElement {
             this.changePage(1);
         }
         if (notifyComponent) {
-            this.setAttr('globalFilterString', text);
+            this.setAttr(attrs.globalFilterString, text);
         }
     }
     addFilterDefinition(columnName, filterDefinition) {
@@ -1595,7 +1700,7 @@ class RecordTable extends FormElement {
         }
     }
     setRequiredOrder(columnField, direction = null) {
-        this.setAttr('sorting', {
+        this.setAttr(attrs.sorting, {
             columnName: columnField,
             direction: (direction === 'ascend') ? TABLE_SORT_ASCENDING : TABLE_SORT_DESCENDING,
         });
@@ -1622,28 +1727,35 @@ class RecordTable extends FormElement {
         }
         return direction === TABLE_SORT_ASCENDING ? result : -result;
     }
+    formStateChangeCustom(formChangeSubject) {
+        this.columns?.forEach(column => {
+            column?.subscribeFormStateChange(formChangeSubject);
+        });
+    }
 }
 
-class RecordFormSubSection {
-    constructor(subsectionReceived, formObject) {
-        if (!subsectionReceived) {
-            return;
-        }
+class RecordFormSubSection extends FormPiece {
+    constructor(subsectionReceived, formObject, formConfig) {
+        super(subsectionReceived, formConfig);
         this._customRender = null;
-        this.visible = true;
+        this.subsectionId = null;
+        this.subsectionCode = null;
+        this.subsectionTitle = null;
         this.subSectionElements = [];
         this.subSectionFields = [];
         this.subSectionTables = [];
         this.subSectionActions = [];
         this.elementsArray = {};
+        if (!subsectionReceived) {
+            return;
+        }
         this.subsectionId = (subsectionReceived.subsectionId) ? subsectionReceived.subsectionId.toString() : '';
         this.subsectionCode = (subsectionReceived.subsectionCode) ? subsectionReceived.subsectionCode : '';
         this.subsectionTitle = (subsectionReceived.subsectionTitle) ? subsectionReceived.subsectionTitle : '';
-        this.visibleStates = subsectionReceived.visibleStates || [];
         if (subsectionReceived.elements) {
             for (const receivedElement of subsectionReceived.elements) {
                 let elementObject = null;
-                let arrayToAdd = null;
+                let arrayToAdd = [];
                 const { type, code } = receivedElement;
                 switch (type) {
                     case elementTypes.field:
@@ -1668,8 +1780,6 @@ class RecordFormSubSection {
             }
         }
     }
-    show() { this.visible = true; }
-    hide() { this.visible = false; }
     get customRender() { return this._customRender; }
     set customRender(customRenderName) { this._customRender = customRenderName; }
     getField(name) {
@@ -1687,26 +1797,24 @@ class RecordFormSubSection {
     getActionNames() {
         return this.subSectionActions.map(action => action.actionCode);
     }
-    viewOnState(state) {
-        return this.visibleStates.includes(state);
-    }
-    supportMode(state) { return this.viewOnState(state); }
 }
 
-class RecordFormSection {
-    constructor(sectionReceived, formObject) {
+class RecordFormSection extends FormPiece {
+    constructor(sectionReceived, formObject, formConfig) {
+        super(sectionReceived, formConfig);
         this._activation = new Subject();
         this._inactivation = new Subject();
         this.active = false;
-        this.customAttributes = {};
+        this.sectionId = null;
+        this.sectionCode = null;
+        this.sectionTitle = null;
+        this.subSections = [];
         if (!sectionReceived) {
             return;
         }
-        this.visible = true;
         this.sectionId = (sectionReceived.sectionId) ? sectionReceived.sectionId.toString() : '';
         this.sectionCode = (sectionReceived.sectionCode) ? sectionReceived.sectionCode : '';
         this.sectionTitle = (sectionReceived.sectionTitle) ? sectionReceived.sectionTitle : '';
-        this.visibleStates = sectionReceived.visibleStates || [];
         this.subSections = [];
         this.subSectionsObj = {};
         if (sectionReceived.subsections) {
@@ -1726,7 +1834,7 @@ class RecordFormSection {
                 return { ...objDef, visibleStates };
             });
             for (const subsectionReceived of subsections) {
-                const subSectionToAdd = new RecordFormSubSection(subsectionReceived, formObject);
+                const subSectionToAdd = new RecordFormSubSection(subsectionReceived, formObject, formConfig);
                 const subsectionCode = subSectionToAdd.subsectionCode;
                 if (subsectionCode) {
                     this.subSections.push(subSectionToAdd);
@@ -1734,36 +1842,22 @@ class RecordFormSection {
                 }
             }
         }
-        if (sectionReceived?.customAttributes) {
-            Object.keys(sectionReceived?.customAttributes)
-                ?.forEach(attr => this.customAttributes[attr] = sectionReceived?.customAttributes[attr]);
-        }
-    }
-    getCustomAttribute(name) { return this.customAttributes?.[name] ?? null; }
-    setCustomAttribute(name, value) { return name && (this.customAttributes[name] = value); }
-    setCustomAttributes(attributes) {
-        Object.entries(attributes).forEach(([name, value]) => {
-            this.setCustomAttribute(name, value);
-        });
     }
-    matchAttribute(name, value) { return this.customAttributes?.[name] === value; }
     get code() { return this.sectionCode; }
     get activation() { return this._activation; }
     get inactivation() { return this._inactivation; }
     activate() {
         if (!this.active) {
             this.active = true;
-            this._activation.next(this.sectionCode);
+            this.sectionCode && this._activation.next(this.sectionCode);
         }
     }
     inactivate() {
         if (this.active) {
             this.active = false;
-            this._inactivation.next(this.sectionCode);
+            this.sectionCode && this._inactivation.next(this.sectionCode);
         }
     }
-    show() { this.visible = true; }
-    hide() { this.visible = false; }
     get title() { return this.sectionTitle; }
     set title(title) { this.sectionTitle = title; }
     getVisibleSubsections(state) {
@@ -1779,7 +1873,10 @@ class RecordFormSection {
         let fieldsArray = [];
         if (this.subSections && this.subSections.length > 0) {
             for (const subSection of this.subSections) {
-                fieldsArray = fieldsArray.concat(subSection.getFields());
+                const subsectionFields = subSection.getFields() ?? [];
+                if (subsectionFields?.length > 0) {
+                    fieldsArray = fieldsArray.concat(subsectionFields);
+                }
             }
         }
         return fieldsArray;
@@ -1788,7 +1885,10 @@ class RecordFormSection {
         let actionArray = [];
         if (this.subSections && this.subSections.length > 0) {
             for (const subSection of this.subSections) {
-                actionArray = actionArray.concat(subSection.getActions());
+                const subSectionActions = subSection.getActions() ?? [];
+                if (subSectionActions?.length > 0) {
+                    actionArray = actionArray.concat(subSectionActions);
+                }
             }
         }
         return actionArray;
@@ -1823,9 +1923,11 @@ class RecordFormSection {
         }
         return null;
     }
-    supportState(state) { return this.viewOnState(state); }
-    viewOnState(state) { return this.visibleStates.includes(state); }
-    supportMode(state) { return this.viewOnState(state); }
+    formStateChangeCustom(formChangeSubject) {
+        this.subSections?.forEach(subsection => {
+            subsection?.subscribeFormStateChange(formChangeSubject);
+        });
+    }
 }
 
 const ACTIVE = 'active';
@@ -1836,6 +1938,7 @@ const DISABLE = 'disable';
 const CLEAN = 'clean';
 class FormStructureAndData {
     constructor(definitionReceived, formConfig) {
+        this._stateChange = new Subject();
         this._name = '';
         this._title = '';
         this._fields = {};
@@ -1940,7 +2043,7 @@ class FormStructureAndData {
                 return { ...objDef, visibleStates };
             });
             for (const sectionReceived of formSections) {
-                const sectionToAdd = new RecordFormSection(sectionReceived, this);
+                const sectionToAdd = new RecordFormSection(sectionReceived, this, this._formConfig);
                 const sectionCode = sectionToAdd.sectionCode;
                 if (sectionCode) {
                     this._sectionArray.push(sectionToAdd);
@@ -1972,8 +2075,10 @@ class FormStructureAndData {
                 this.state = newState;
             }
         }
+        this._stateChange.next({ state: this.state });
         return (this.state === newState);
     }
+    get stateChange() { return this._stateChange; }
     setStateFlow(states, transitions, defaultState) {
         this._stateFlow.states = states;
         this._stateFlow.defaultState = defaultState || this._stateFlow.states[0];
@@ -2405,6 +2510,8 @@ class BasicFormComponent {
         this.cleanStart();
         this.customPreProcessing();
     }
+    get title() { return this.getTitle() ?? ''; }
+    set title(title) { this.setTitle(title); }
     getTitle() { return this._formStructure?.getTitle(); }
     setTitle(title) { return this._formStructure?.setTitle(title); }
     cleanData() { return this._formStructure?.cleanData(); }
@@ -2767,6 +2874,8 @@ class BasicFormComponent {
             const section = formSections[sectionName];
             section.activation.subscribe((code) => this.launchSectionActivation(code));
             section.inactivation.subscribe((code) => this.launchSectionInactivation(code));
+            // Adicionalmente se le pide a la sección se subscriba al cambio de estado del formulario
+            section.subscribeFormStateChange(this._formStructure?.stateChange);
         }
     }
     subscribeFieldsSubjects() {
@@ -2782,6 +2891,8 @@ class BasicFormComponent {
                     this.startFieldInputValidation(code, intrinsicValidation);
                 });
                 field.detailRequest.subscribe(event => this.showFieldInfo(event.code, event.detail));
+                // Adicionalmente se le pide al campo se subscriba al cambio de estado del formulario
+                field.subscribeFormStateChange(this._formStructure?.stateChange);
             });
         }
     }
@@ -2790,6 +2901,8 @@ class BasicFormComponent {
         if (Array.isArray(formActions)) {
             formActions.forEach(action => {
                 action.actionActivated.subscribe(code => this.startAction(code));
+                // Adicionalmente se le pide a la acción se subscriba al cambio de estado del formulario
+                action.subscribeFormStateChange(this._formStructure?.stateChange);
             });
         }
     }
@@ -2802,6 +2915,8 @@ class BasicFormComponent {
                 table.recordSelectionTrigger.subscribe(event => this.startTableRecordSelection(event));
                 table.selectionActionTrigger.subscribe(event => this.startTableSelectionAction(event));
                 table.getDataTrigger.subscribe(event => this.startTableGetData(event));
+                // Adicionalmente se le pide a la tabla se subscriba al cambio de estado del formulario
+                table.subscribeFormStateChange(this._formStructure?.stateChange);
             });
         }
     }
@@ -2826,21 +2941,22 @@ class BasicFormComponent {
         if (!this.supportState(initialState)) {
             initialState = this._formStructure?.defaultState ?? null;
         }
-        this._formStructure?.changeState(initialState || this._formStructure?.defaultState);
         const inputFieldNames = Object.keys(this.inputDataFields);
         for (let index = 0; index < inputFieldNames.length; index++) {
             const code = inputFieldNames[index];
             const fieldValue = this.inputDataFields[code];
             this.setFieldValue(code, fieldValue);
         }
-        const recordResponse = await this.requestFormAction(formActions.getData);
-        this.checkErrorRecordReceived(recordResponse);
-        this.visible = true;
-        this.enabledSections = this._formStructure?.visibleSections ?? [];
         this.subscribeSectionActivation();
         this.subscribeFieldsSubjects();
         this.subscribeActionSubjects();
         this.subscribeTableSubjects();
+        // Se define el estado inicial y se solicita la acción inicial
+        this._formStructure?.changeState(initialState || this._formStructure?.defaultState);
+        const recordResponse = await this.requestFormAction(formActions.getData);
+        this.checkErrorRecordReceived(recordResponse);
+        this.visible = true;
+        this.enabledSections = this._formStructure?.visibleSections ?? [];
         this.start();
         this.customFormStart();
     }
@@ -3459,7 +3575,7 @@ class BasicFormComponent {
         if (action.backend) {
             const actionSubject = {
                 tableCode,
-                actionType: this.formConfig.tableActions.inline,
+                actionType: this.formConfig?.tableActions.inline,
                 actionCode,
                 tableRecordId: recordId,
                 tableRecordData: recordData
@@ -3538,7 +3654,7 @@ class BasicFormComponent {
         if (tableObject.selectionBackend) {
             const actionSubject = {
                 tableCode,
-                actionType: this.formConfig.tableActions.rowSelection,
+                actionType: this.formConfig?.tableActions.rowSelection,
                 actionCode: null,
                 tableRecordId: recordId,
                 tableRecordData: recordData
@@ -3616,7 +3732,7 @@ class BasicFormComponent {
         if (action.backend) {
             const actionSubject = {
                 tableCode,
-                actionType: this.formConfig.tableActions.selection,
+                actionType: this.formConfig?.tableActions.selection,
                 actionCode,
                 selectedRecords
             };
@@ -3706,7 +3822,7 @@ class BasicFormComponent {
     }
     checkSectionRequiredFields(sectionCode, reqFieldMessage) {
         this.cleanErrorFields(null, sectionCode);
-        const requiredFieldMessage = reqFieldMessage ?? this.formConfig.formStandardErrors.requiredField;
+        const requiredFieldMessage = reqFieldMessage ?? this.formConfig?.formStandardErrors.requiredField;
         const numErrors = this.tagFieldsWithError(requiredFieldMessage, this.getRequiredEmptyFields(null, sectionCode));
         return (numErrors === 0);
     }
@@ -3714,15 +3830,15 @@ class BasicFormComponent {
         this.resetError();
         const completeFields = this.checkSectionRequiredFields(sectionCode, reqFieldMessage);
         if (!completeFields) {
-            this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.requiredFields);
+            this.setError(this.formConfig?.formStandardErrors.typeWarning, this.formConfig?.formStandardErrors.validationTitle, this.formConfig?.formStandardErrors.requiredFields);
             return false;
         }
         let validationError = false;
         const requiredEmptyFields = this.getRequiredEmptyFields(null, sectionCode) ?? [];
         if (requiredEmptyFields?.length > 0) {
             validationError = true;
-            this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.requiredFields);
-            this.tagFieldsWithError(this.formConfig.formStandardErrors.requiredField, requiredEmptyFields);
+            this.setError(this.formConfig?.formStandardErrors.typeWarning, this.formConfig?.formStandardErrors.validationTitle, this.formConfig?.formStandardErrors.requiredFields);
+            this.tagFieldsWithError(this.formConfig?.formStandardErrors.requiredField, requiredEmptyFields);
             for (const code of requiredEmptyFields) {
                 const requiredEmptyField = this.getField(code);
                 requiredEmptyField?.focus();
@@ -3732,7 +3848,7 @@ class BasicFormComponent {
         const validationIssueFields = this.getFieldsWithValidationIssues(null, sectionCode) ?? [];
         if (!validationError && validationIssueFields.length > 0) {
             validationError = true;
-            this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.validationFields);
+            this.setError(this.formConfig?.formStandardErrors.typeWarning, this.formConfig?.formStandardErrors.validationTitle, this.formConfig?.formStandardErrors.validationFields);
             for (const code of validationIssueFields) {
                 const validationIssueField = this.getField(code);
                 if (validationIssueField) {