tuain-ng-forms-lib 14.3.19 → 14.4.45

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

@@ -1,24 +1,81 @@
 import * as i0 from '@angular/core';
 import { Component, Input, EventEmitter, Output, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { __awaiter } from 'tslib';
-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() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!this.action) {
+            return;
+        }
         this.formConfig = (_a = this.action) === null || _a === void 0 ? void 0 : _a._formConfig;
+        const mapping = Object.entries((_b = this.formConfig) === null || _b === void 0 ? void 0 : _b.actionPropagateAttributes);
+        for (let index = 0; index < mapping.length; index++) {
+            const actionAttr = (_c = mapping[index]) === null || _c === void 0 ? void 0 : _c[0];
+            const componentAttr = (_f = (_e = (_d = mapping[index]) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : '';
+            if (componentAttr) {
+                const value = (_g = this.action) === null || _g === void 0 ? void 0 : _g[actionAttr];
+                this.defaultProcessAttributeChange(componentAttr, value);
+                this.customProcessAttributeChange(componentAttr, value);
+            }
+        }
+        (_j = (_h = this.action) === null || _h === void 0 ? void 0 : _h.attributeChange) === null || _j === void 0 ? void 0 : _j.subscribe(event => {
+            const { name: componentAttr, value } = event;
+            this.defaultProcessAttributeChange(componentAttr, value);
+            this.customProcessAttributeChange(componentAttr, value);
+        });
         this.start();
     }
-    start() { }
     activate() {
         var _a;
         if ((_a = this.action) === null || _a === void 0 ? void 0 : _a.notifyActivation) {
@@ -38,17 +95,9 @@ class ActionComponent {
         }
         return false;
     }
-    get visible() {
-        var _a;
-        return ((_a = this.action) === null || _a === void 0 ? void 0 : _a.visibleOn(this.state)) && this.visibleOnRestriction();
-    }
-    get disabled() {
-        var _a;
-        return !((_a = this.action) === null || _a === void 0 ? void 0 : _a.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: [{
@@ -61,8 +110,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Input
             }], relatedField: [{
                 type: Input
-            }], state: [{
-                type: Input
             }], style: [{
                 type: Input
             }], showLabel: [{
@@ -71,8 +118,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 = '';
@@ -81,28 +129,30 @@ class FieldComponent {
         this.field = null;
     }
     ngOnInit() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!this.field) {
             return;
         }
         this.formConfig = (_a = this.field) === null || _a === void 0 ? void 0 : _a._formConfig;
-        // Inicialización
-        const mapping = this.formConfig.fieldPropagateAttributes;
+        const mapping = Object.entries((_b = this.formConfig) === null || _b === void 0 ? void 0 : _b.fieldPropagateAttributes);
         for (let index = 0; index < mapping.length; index++) {
-            const attrName = mapping[index].toString();
-            const attributeValue = (_b = this.field) === null || _b === void 0 ? void 0 : _b[attrName];
-            this.dafaultProcessFieldChange(attrName, attributeValue);
-            this.processFieldChange(attrName, attributeValue);
+            const fieldAttr = (_c = mapping[index]) === null || _c === void 0 ? void 0 : _c[0];
+            const componentAttr = (_f = (_e = (_d = mapping[index]) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : '';
+            if (componentAttr) {
+                const value = (_g = this.field) === null || _g === void 0 ? void 0 : _g[fieldAttr];
+                this.defaultProcessAttributeChange(componentAttr, value);
+                this.customProcessAttributeChange(componentAttr, value);
+            }
         }
         // Subscripción a cambios en atributos
-        (_c = this.field) === null || _c === void 0 ? void 0 : _c.attributeChange.subscribe(event => {
-            const { name: attrName, value } = event;
-            this.dafaultProcessFieldChange(attrName, value);
-            this.processFieldChange(attrName, value);
+        (_h = this.field) === null || _h === void 0 ? void 0 : _h.attributeChange.subscribe(event => {
+            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();
         }
@@ -113,14 +163,10 @@ class FieldComponent {
             this[attribute] = value;
         }
     }
-    get visible() { var _a; return (_a = this.field) === null || _a === void 0 ? void 0 : _a.visibleOn(this.state); }
-    get disabled() { var _a; return !((_a = this.field) === null || _a === void 0 ? void 0 : _a.enabledOn(this.state)); }
     updateValue() { var _a; this.value = (_a = this.field) === null || _a === void 0 ? void 0 : _a.value; }
     onInputChange() { setTimeout(() => { var _a; return (_a = this.field) === null || _a === void 0 ? void 0 : _a.notifyEditionPartial(); }, 50); }
     onChangeContent() { setTimeout(() => { var _a; return (_a = this.field) === null || _a === void 0 ? void 0 : _a.notifyEditionFinish(); }, 50); }
     onShowInfo(detail = null) { setTimeout(() => { var _a; return (_a = this.field) === null || _a === void 0 ? void 0 : _a.notifyEditionDetailRequest(detail); }, 50); }
-    processFieldChange(attribute, value) { }
-    start() { }
     focus() { }
     updateObject() { var _a; (_a = this.field) === null || _a === void 0 ? void 0 : _a.setValue(this.value); }
     inputChanged() {
@@ -138,8 +184,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: [{
@@ -148,40 +194,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { field: [{
                 type: Input
-            }], state: [{
-                type: Input
-            }] } });
-
-class ElementComponent {
-    ngOnInit() {
-        var _a;
-        this.formConfig = (_a = this.element) === null || _a === void 0 ? void 0 : _a._formConfig;
-        this.start();
-    }
-    start() { }
-    get visible() {
-        var _a;
-        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.visibleOn(this.state);
-    }
-    get disabled() {
-        var _a;
-        return !((_a = this.element) === null || _a === void 0 ? void 0 : _a.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 {
@@ -204,7 +216,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() {
@@ -212,16 +224,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
@@ -231,14 +243,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Output
             }] } });
 
-class SectionComponent {
+class SectionComponent extends PieceComponent {
     ngOnInit() {
+        var _a, _b, _c, _d;
+        this.formConfig = (_a = this.section) === null || _a === void 0 ? void 0 : _a._formConfig;
+        const mapping = (_b = this.formConfig) === null || _b === void 0 ? void 0 : _b.sectionPropagateAttributes;
+        for (let index = 0; index < mapping.length; index++) {
+            const attrName = mapping[index].toString();
+            const attributeValue = (_c = this.section) === null || _c === void 0 ? void 0 : _c[attrName];
+            this.defaultProcessAttributeChange(attrName, attributeValue);
+            this.customProcessAttributeChange(attrName, attributeValue);
+        }
+        // Subscripción a cambios en atributos
+        (_d = this.section) === null || _d === void 0 ? void 0 : _d.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: [{
@@ -247,18 +274,33 @@ 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() {
+        var _a, _b, _c, _d;
+        this.formConfig = (_a = this.subSection) === null || _a === void 0 ? void 0 : _a._formConfig;
+        const mapping = (_b = this.formConfig) === null || _b === void 0 ? void 0 : _b.subSectionPropagateAttributes;
+        for (let index = 0; index < mapping.length; index++) {
+            const attrName = mapping[index].toString();
+            const attributeValue = (_c = this.subSection) === null || _c === void 0 ? void 0 : _c[attrName];
+            this.defaultProcessAttributeChange(attrName, attributeValue);
+            this.customProcessAttributeChange(attrName, attributeValue);
+        }
+        // Subscripción a cambios en atributos
+        (_d = this.subSection) === null || _d === void 0 ? void 0 : _d.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: [{
@@ -267,18 +309,32 @@ 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() {
+        var _a, _b, _c, _d;
+        this.formConfig = (_a = this.action) === null || _a === void 0 ? void 0 : _a._formConfig;
+        const mapping = (_b = this.formConfig) === null || _b === void 0 ? void 0 : _b.actionPropagateAttributes;
+        for (let index = 0; index < mapping.length; index++) {
+            const attrName = mapping[index].toString();
+            const attributeValue = (_c = this.action) === null || _c === void 0 ? void 0 : _c[attrName];
+            this.defaultProcessAttributeChange(attrName, attributeValue);
+            this.customProcessAttributeChange(attrName, attributeValue);
+        }
+        // Subscripción a cambios en atributos
+        (_d = this.action) === null || _d === void 0 ? void 0 : _d.attributeChange.subscribe(event => {
+            const { name: attrName, value } = event;
+            this.defaultProcessAttributeChange(attrName, value);
+            this.customProcessAttributeChange(attrName, value);
+        });
         this.start();
     }
     start() { }
@@ -292,8 +348,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: [{
@@ -301,7 +357,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
@@ -340,12 +396,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;
@@ -353,52 +410,74 @@ class LibTableComponent {
         this.loaded = false;
         this.selectable = false;
         this.hasActions = false;
-        this.disabled = false;
+        this.table = null;
+        this.visibleRecords = [];
+        this.waiting = false;
     }
     ngOnInit() {
-        var _a;
-        if (this.table) {
-            this.formConfig = (_a = this.table) === null || _a === void 0 ? void 0 : _a._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);
-            });
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        if (!this.table) {
+            return;
+        }
+        this.formConfig = (_a = this.table) === null || _a === void 0 ? void 0 : _a._formConfig;
+        this.tableFieldStyles = (_b = this.formConfig) === null || _b === void 0 ? void 0 : _b.tableFieldStyles;
+        this.selectable = (_c = this.table) === null || _c === void 0 ? void 0 : _c.selectable;
+        this.hasActions = (_d = this.table) === null || _d === void 0 ? void 0 : _d.hasActions();
+        this.inlineActions = (_e = this.table) === null || _e === void 0 ? void 0 : _e.getActions((_f = this.formConfig) === null || _f === void 0 ? void 0 : _f.tableActions.inline);
+        this.globalActions = (_g = this.table) === null || _g === void 0 ? void 0 : _g.getActions((_h = this.formConfig) === null || _h === void 0 ? void 0 : _h.tableActions.global);
+        this.selectionActions = (_j = this.table) === null || _j === void 0 ? void 0 : _j.getActions((_k = this.formConfig) === null || _k === void 0 ? void 0 : _k.tableActions.selection);
+        // Inicialización de campos mapeados del objeto
+        const mapping = Object.entries((_l = this.formConfig) === null || _l === void 0 ? void 0 : _l.actionPropagateAttributes);
+        for (let index = 0; index < mapping.length; index++) {
+            const tableAttr = (_m = mapping[index]) === null || _m === void 0 ? void 0 : _m[0];
+            const componentAttr = (_q = (_p = (_o = mapping[index]) === null || _o === void 0 ? void 0 : _o[1]) === null || _p === void 0 ? void 0 : _p.toString()) !== null && _q !== void 0 ? _q : '';
+            const attributeValue = (_r = this.table) === null || _r === void 0 ? void 0 : _r[tableAttr];
+            this.defaultProcessAttributeChange(componentAttr, attributeValue);
+            this.customProcessAttributeChange(componentAttr, attributeValue);
         }
+        // Subscripción a cambios en atributos
+        (_s = this.table) === null || _s === void 0 ? void 0 : _s.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) { var _a; (_a = this.table) === null || _a === void 0 ? void 0 : _a.notifyGlobalAction(actionCode); }
+    tableSelectionAction(actionCode) { var _a; (_a = this.table) === null || _a === void 0 ? void 0 : _a.notifySelectionAction(actionCode); }
+    tableActionSelected(actionEvent) { var _a; (_a = this.table) === null || _a === void 0 ? void 0 : _a.notifyInlineAction(actionEvent); }
+    tableSelectionToggle(recordId) { var _a; (_a = this.table) === null || _a === void 0 ? void 0 : _a.notifyRecordSelection(recordId); }
+    toggleSelectAll() { var _a, _b; return (this.allSelected) ? (_a = this.table) === null || _a === void 0 ? void 0 : _a.unSelectAll() : (_b = this.table) === null || _b === void 0 ? void 0 : _b.selectAll(); }
     globalFilterCompleted() { this.changePage(1); }
-    changePage(requestedPage) { this.table.changePage(requestedPage); }
-    tableColumnSort(columnName, direction = null) { this.table.sort(columnName, direction !== null && direction !== void 0 ? direction : 'ascend'); }
-    globalFilterChanged() { var _a, _b; this.table.setGlobalFilterString((_b = (_a = this.globalFilterString) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '', false); }
-    syncAttribute(name, value) {
+    changePage(requestedPage) { var _a; (_a = this.table) === null || _a === void 0 ? void 0 : _a.changePage(requestedPage); }
+    tableColumnSort(columnName, direction = null) { var _a; (_a = this.table) === null || _a === void 0 ? void 0 : _a.sort(columnName, direction !== null && direction !== void 0 ? direction : 'ascend'); }
+    globalFilterChanged() { var _a, _b, _c; (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilterString((_c = (_b = this.globalFilterString) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '', 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 (_a) {
@@ -406,16 +485,17 @@ class LibTableComponent {
         }
     }
     filterHasChanged(column, values) {
+        var _a, _b;
         if (!values || values.length === 0) {
-            this.table.removeColumnFilter(column.fieldCode);
+            (_a = this.table) === null || _a === void 0 ? void 0 : _a.removeColumnFilter(column.fieldCode);
         }
         else {
-            this.table.addColumnFilter(column.fieldCode, values);
+            (_b = this.table) === null || _b === void 0 ? void 0 : _b.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: [{
@@ -425,11 +505,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
@@ -461,23 +537,30 @@ const operators = {
     IN: 'IN',
 };
 
-class FormElement {
-    constructor(elementDefinition, formConfig) {
-        var _a, _b, _c;
+class FormPiece {
+    constructor(pieceDefinition, formConfig) {
+        var _a, _b, _c, _d;
+        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 = (_a = elementDefinition === null || elementDefinition === void 0 ? void 0 : elementDefinition.disabled) !== null && _a !== void 0 ? _a : false;
-        this.setVisibility((_b = elementDefinition === null || elementDefinition === void 0 ? void 0 : elementDefinition.visible) !== null && _b !== void 0 ? _b : true);
-        this.customAttributes = (_c = elementDefinition === null || elementDefinition === void 0 ? void 0 : elementDefinition.customAttributes) !== null && _c !== void 0 ? _c : {};
+        this.setVisibleStates(pieceDefinition.visibleStates);
+        this.setEnabledStates(pieceDefinition.enabledStates);
+        this.enabled = (_a = !(pieceDefinition === null || pieceDefinition === void 0 ? void 0 : pieceDefinition.disabled)) !== null && _a !== void 0 ? _a : false;
+        this.setVisibility((_b = pieceDefinition === null || pieceDefinition === void 0 ? void 0 : pieceDefinition.visible) !== null && _b !== void 0 ? _b : true);
+        this.customAttributes = (_c = pieceDefinition === null || pieceDefinition === void 0 ? void 0 : pieceDefinition.customAttributes) !== null && _c !== void 0 ? _c : {};
+        if (pieceDefinition === null || pieceDefinition === void 0 ? void 0 : pieceDefinition.customAttributes) {
+            (_d = Object.keys(pieceDefinition === null || pieceDefinition === void 0 ? void 0 : pieceDefinition.customAttributes)) === null || _d === void 0 ? void 0 : _d.forEach(attr => this.customAttributes[attr] = pieceDefinition === null || pieceDefinition === void 0 ? void 0 : pieceDefinition.customAttributes[attr]);
+        }
     }
-    ;
     getCustomAttribute(name) { var _a, _b; return (_b = (_a = this.customAttributes) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : null; }
     setCustomAttribute(name, value) {
         if (name) {
@@ -490,9 +573,10 @@ class FormElement {
         });
     }
     matchAttribute(name, value) { var _a; return ((_a = this.customAttributes) === null || _a === void 0 ? void 0 : _a[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)
@@ -507,47 +591,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 !== null && event !== void 0 ? 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);
     }
-    enable() { this.disabled = false; }
-    disable() { this.disabled = true; }
-    get enabled() { return !this.disabled; }
-    get editable() { return !this.disabled; }
-    set editable(editable) { this.disabled = !editable; }
+}
+
+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);
+    }
+    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';
@@ -595,7 +722,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' },
@@ -631,7 +758,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 = '';
@@ -658,7 +784,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 = (_a = fld.fieldTitle) !== null && _a !== void 0 ? _a : this._fieldCode;
         this.type = fld.fieldTypeCode;
         this.captureType = (_b = fld.captureType) !== null && _b !== void 0 ? _b : DEFAULT_CAPTURE_TYPE;
@@ -697,17 +823,16 @@ class FieldDescriptor extends FormElement {
         this._setValue((_v = (_u = fld.fieldValue) !== null && _u !== void 0 ? _u : this._defaultValue) !== null && _v !== void 0 ? _v : '');
     }
     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; }
@@ -742,31 +867,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() {
@@ -792,11 +917,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 = (_a = this._value) === null || _a === void 0 ? void 0 : _a.filter(item => { var _a; return (_a = this._fieldOptions) === null || _a === void 0 ? void 0 : _a.find(opt => opt.fieldOptionId === item); });
-                this.setAttr(attrs._value, fieldValue);
+                this.setAttr(attrs$1._value, fieldValue);
             }
             else {
                 const valInOptions = (_b = this._fieldOptions) === null || _b === void 0 ? void 0 : _b.find(item => item.fieldOptionId === this._value);
@@ -812,28 +937,28 @@ class FieldDescriptor extends FormElement {
     }
     get optionText() { var _a, _b, _c; return (_c = (_b = (_a = this._fieldOptions) === null || _a === void 0 ? void 0 : _a.find(item => item.fieldOptionId === this._value)) === null || _b === void 0 ? void 0 : _b.fieldOptionValue) !== null && _c !== void 0 ? _c : 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 !== null && required !== void 0 ? required : false); }
+    set required(required) { this.setAttr(attrs$1._fieldRequired, required !== null && required !== void 0 ? required : false); }
     get title() { return this._fieldTitle; }
-    set title(title) { this.setAttr(attrs._fieldTitle, title.toString()); }
+    set title(title) { var _a; this.setAttr(attrs$1._fieldTitle, (_a = title === null || title === void 0 ? void 0 : title.toString()) !== null && _a !== void 0 ? _a : ''); }
     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
      */
@@ -851,7 +976,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; }
@@ -960,15 +1085,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 !== null && code !== void 0 ? code : NO_ERROR);
-        this.setAttr(attrs._errorType, (this._errorCode === NO_ERROR) ? '' : type);
-        this.setAttr(attrs._errorMessage, message !== null && message !== void 0 ? message : '');
+        this.setAttr(attrs$1._errorCode, code !== null && code !== void 0 ? code : NO_ERROR);
+        this.setAttr(attrs$1._errorType, (this._errorCode === NO_ERROR) ? '' : type);
+        this.setAttr(attrs$1._errorMessage, message !== null && message !== void 0 ? message : '');
     }
     updateFromServer(fld) {
         const fieldKeys = Object.keys(fld);
@@ -1024,7 +1144,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;
@@ -1034,23 +1154,21 @@ class FieldDescriptor extends FormElement {
     }
 }
 
-class RecordTableColumn {
+class RecordTableColumn extends FormPiece {
     constructor(recTableColReceived, formConfig) {
         var _a, _b, _c;
+        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;
@@ -1065,17 +1183,6 @@ class RecordTableColumn {
             this.customAttributes = (_c = recTableColReceived === null || recTableColReceived === void 0 ? void 0 : recTableColReceived.customAttributes) !== null && _c !== void 0 ? _c : {};
         }
     }
-    getCustomAttribute(name) { var _a, _b; return (_b = (_a = this.customAttributes) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : 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;
     }
@@ -1121,9 +1228,10 @@ class RecordTableColumn {
     }
 }
 
-class TableAction {
-    constructor(actionDefinition) {
-        var _a, _b, _c;
+class TableAction extends FormPiece {
+    constructor(actionDefinition, formConfig) {
+        var _a, _b;
+        super(actionDefinition, formConfig);
         this.actionCode = actionDefinition.actionCode;
         this.actionTitle = actionDefinition.actionTitle;
         this.iconName = actionDefinition.iconName || this.actionCode;
@@ -1131,28 +1239,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 = (_a = actionDefinition === null || actionDefinition === void 0 ? void 0 : actionDefinition.serverAction) !== null && _a !== void 0 ? _a : false;
         this.restrictedOnField = actionDefinition.fieldRestrictedCode || '';
         this.restrictedOnValue = (_b = actionDefinition.valueRestricted) !== null && _b !== void 0 ? _b : '';
         this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
-        this.customAttributes = (_c = actionDefinition === null || actionDefinition === void 0 ? void 0 : actionDefinition.customAttributes) !== null && _c !== void 0 ? _c : {};
-    }
-    getCustomAttribute(name) { var _a, _b; return (_b = (_a = this.customAttributes) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : 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 {
@@ -1267,6 +1358,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) {
         var _a, _b, _c, _d, _e, _f;
@@ -1276,7 +1382,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
@@ -1307,22 +1412,23 @@ class RecordTable extends FormElement {
         this.selectable = (_b = tableReceived === null || tableReceived === void 0 ? void 0 : tableReceived.selectable) !== null && _b !== void 0 ? _b : false;
         this.selectionBackend = (_c = tableReceived === null || tableReceived === void 0 ? void 0 : tableReceived.selectionBackend) !== null && _c !== void 0 ? _c : false;
         this.sortable = (_d = tableReceived === null || tableReceived === void 0 ? void 0 : tableReceived.sortable) !== null && _d !== void 0 ? _d : false;
-        this.setAttr('allSelected', false);
-        this.setAttr('tableCode', tableReceived.tableCode);
-        this.setAttr('clientPaging', (_e = tableReceived === null || tableReceived === void 0 ? void 0 : tableReceived.clientPaging) !== null && _e !== void 0 ? _e : true);
-        this.setAttr('globalSearch', (_f = tableReceived === null || tableReceived === void 0 ? void 0 : tableReceived.simpleFilter) !== null && _f !== void 0 ? _f : 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, (_e = tableReceived === null || tableReceived === void 0 ? void 0 : tableReceived.clientPaging) !== null && _e !== void 0 ? _e : true);
+        this.setAttr(attrs.globalSearch, (_f = tableReceived === null || tableReceived === void 0 ? void 0 : tableReceived.simpleFilter) !== null && _f !== void 0 ? _f : 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 = Object.assign(Object.assign({}, 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 => {
@@ -1339,7 +1445,7 @@ class RecordTable extends FormElement {
                 return Object.assign(Object.assign({}, 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;
             }
@@ -1358,9 +1464,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; }
@@ -1368,12 +1473,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,
@@ -1439,23 +1538,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 = Object.assign({}, this.tableRecordObj);
@@ -1467,7 +1566,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();
     }
@@ -1476,7 +1575,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 {
@@ -1488,7 +1587,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);
@@ -1501,17 +1600,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 === null || tableReceived === void 0 ? void 0 : tableReceived.visible) || true;
         this.totalPages = tableReceived.totalPages || 1;
         this.recordsNumber = tableReceived.recordsNumber;
-        this.setAttr('currentPage', +(tableReceived === null || tableReceived === void 0 ? void 0 : 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 === null || tableReceived === void 0 ? void 0 : 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 || ''
         });
@@ -1561,7 +1660,7 @@ class RecordTable extends FormElement {
             this.changePage(1);
         }
         if (notifyComponent) {
-            this.setAttr('globalFilterString', text);
+            this.setAttr(attrs.globalFilterString, text);
         }
     }
     addFilterDefinition(columnName, filterDefinition) {
@@ -1630,7 +1729,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,
         });
@@ -1657,28 +1756,36 @@ class RecordTable extends FormElement {
         }
         return direction === TABLE_SORT_ASCENDING ? result : -result;
     }
+    formStateChangeCustom(formChangeSubject) {
+        var _a;
+        (_a = this.columns) === null || _a === void 0 ? void 0 : _a.forEach(column => {
+            column === null || column === void 0 ? void 0 : 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:
@@ -1703,8 +1810,6 @@ class RecordFormSubSection {
             }
         }
     }
-    show() { this.visible = true; }
-    hide() { this.visible = false; }
     get customRender() { return this._customRender; }
     set customRender(customRenderName) { this._customRender = customRenderName; }
     getField(name) {
@@ -1722,27 +1827,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) {
-        var _a;
+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) {
@@ -1762,7 +1864,7 @@ class RecordFormSection {
                 return Object.assign(Object.assign({}, 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);
@@ -1770,35 +1872,22 @@ class RecordFormSection {
                 }
             }
         }
-        if (sectionReceived === null || sectionReceived === void 0 ? void 0 : sectionReceived.customAttributes) {
-            (_a = Object.keys(sectionReceived === null || sectionReceived === void 0 ? void 0 : sectionReceived.customAttributes)) === null || _a === void 0 ? void 0 : _a.forEach(attr => this.customAttributes[attr] = sectionReceived === null || sectionReceived === void 0 ? void 0 : sectionReceived.customAttributes[attr]);
-        }
     }
-    getCustomAttribute(name) { var _a, _b; return (_b = (_a = this.customAttributes) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : 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) { var _a; return ((_a = this.customAttributes) === null || _a === void 0 ? void 0 : _a[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) {
@@ -1811,19 +1900,27 @@ class RecordFormSection {
             ? this.subSectionsObj[subSectionCode] : null;
     }
     getFields() {
+        var _a;
         let fieldsArray = [];
         if (this.subSections && this.subSections.length > 0) {
             for (const subSection of this.subSections) {
-                fieldsArray = fieldsArray.concat(subSection.getFields());
+                const subsectionFields = (_a = subSection.getFields()) !== null && _a !== void 0 ? _a : [];
+                if ((subsectionFields === null || subsectionFields === void 0 ? void 0 : subsectionFields.length) > 0) {
+                    fieldsArray = fieldsArray.concat(subsectionFields);
+                }
             }
         }
         return fieldsArray;
     }
     getActions() {
+        var _a;
         let actionArray = [];
         if (this.subSections && this.subSections.length > 0) {
             for (const subSection of this.subSections) {
-                actionArray = actionArray.concat(subSection.getActions());
+                const subSectionActions = (_a = subSection.getActions()) !== null && _a !== void 0 ? _a : [];
+                if ((subSectionActions === null || subSectionActions === void 0 ? void 0 : subSectionActions.length) > 0) {
+                    actionArray = actionArray.concat(subSectionActions);
+                }
             }
         }
         return actionArray;
@@ -1858,9 +1955,12 @@ 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) {
+        var _a;
+        (_a = this.subSections) === null || _a === void 0 ? void 0 : _a.forEach(subsection => {
+            subsection === null || subsection === void 0 ? void 0 : subsection.subscribeFormStateChange(formChangeSubject);
+        });
+    }
 }
 
 const ACTIVE = 'active';
@@ -1871,6 +1971,7 @@ const DISABLE = 'disable';
 const CLEAN = 'clean';
 class FormStructureAndData {
     constructor(definitionReceived, formConfig) {
+        this._stateChange = new Subject();
         this._name = '';
         this._title = '';
         this._fields = {};
@@ -1975,7 +2076,7 @@ class FormStructureAndData {
                 return Object.assign(Object.assign({}, 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);
@@ -2007,8 +2108,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];
@@ -2453,6 +2556,8 @@ class BasicFormComponent {
         this.cleanStart();
         this.customPreProcessing();
     }
+    get title() { var _a; return (_a = this.getTitle()) !== null && _a !== void 0 ? _a : ''; }
+    set title(title) { this.setTitle(title); }
     getTitle() { var _a; return (_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.getTitle(); }
     setTitle(title) { var _a; return (_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.setTitle(title); }
     cleanData() { var _a; return (_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.cleanData(); }
@@ -2864,7 +2969,7 @@ class BasicFormComponent {
         return null;
     }
     subscribeSectionActivation() {
-        var _a;
+        var _a, _b;
         const formSections = (_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.sections;
         const sectionNames = Object.keys(formSections);
         for (let index = 0; index < sectionNames.length; index++) {
@@ -2872,6 +2977,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((_b = this._formStructure) === null || _b === void 0 ? void 0 : _b.stateChange);
         }
     }
     subscribeFieldsSubjects() {
@@ -2879,6 +2986,7 @@ class BasicFormComponent {
         const formFields = (_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.getFields();
         if (Array.isArray(formFields)) {
             formFields.forEach(field => {
+                var _a;
                 field.editionFinish.subscribe(event => {
                     const { code, intrinsicValidation } = event;
                     this.startFieldValidation(code, intrinsicValidation);
@@ -2888,6 +2996,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((_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.stateChange);
             });
         }
     }
@@ -2896,7 +3006,10 @@ class BasicFormComponent {
         const formActions = (_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.getActions();
         if (Array.isArray(formActions)) {
             formActions.forEach(action => {
+                var _a;
                 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((_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.stateChange);
             });
         }
     }
@@ -2905,11 +3018,14 @@ class BasicFormComponent {
         const formTables = (_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.getTables();
         if (Array.isArray(formTables)) {
             formTables.forEach(table => {
+                var _a;
                 table.inlineActionTrigger.subscribe(event => this.startTableAction(event));
                 table.globalActionTrigger.subscribe(event => this.startTableGlobalAction(event));
                 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((_a = this._formStructure) === null || _a === void 0 ? void 0 : _a.stateChange);
             });
         }
     }
@@ -2936,21 +3052,22 @@ class BasicFormComponent {
             if (!this.supportState(initialState)) {
                 initialState = (_e = (_d = this._formStructure) === null || _d === void 0 ? void 0 : _d.defaultState) !== null && _e !== void 0 ? _e : null;
             }
-            (_f = this._formStructure) === null || _f === void 0 ? void 0 : _f.changeState(initialState || ((_g = this._formStructure) === null || _g === void 0 ? void 0 : _g.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 = yield this.requestFormAction(formActions.getData);
-            this.checkErrorRecordReceived(recordResponse);
-            this.visible = true;
-            this.enabledSections = (_j = (_h = this._formStructure) === null || _h === void 0 ? void 0 : _h.visibleSections) !== null && _j !== void 0 ? _j : [];
             this.subscribeSectionActivation();
             this.subscribeFieldsSubjects();
             this.subscribeActionSubjects();
             this.subscribeTableSubjects();
+            // Se define el estado inicial y se solicita la acción inicial
+            (_f = this._formStructure) === null || _f === void 0 ? void 0 : _f.changeState(initialState || ((_g = this._formStructure) === null || _g === void 0 ? void 0 : _g.defaultState));
+            const recordResponse = yield this.requestFormAction(formActions.getData);
+            this.checkErrorRecordReceived(recordResponse);
+            this.visible = true;
+            this.enabledSections = (_j = (_h = this._formStructure) === null || _h === void 0 ? void 0 : _h.visibleSections) !== null && _j !== void 0 ? _j : [];
             this.start();
             this.customFormStart();
         });
@@ -3599,6 +3716,7 @@ class BasicFormComponent {
         });
     }
     startTableServerAction(tableActionDetail) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const { tableObject, action, tableCode, actionCode, recordId, recordData } = tableActionDetail;
             if (!tableObject || !action) {
@@ -3610,7 +3728,7 @@ class BasicFormComponent {
             if (action.backend) {
                 const actionSubject = {
                     tableCode,
-                    actionType: this.formConfig.tableActions.inline,
+                    actionType: (_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.tableActions.inline,
                     actionCode,
                     tableRecordId: recordId,
                     tableRecordData: recordData
@@ -3685,6 +3803,7 @@ class BasicFormComponent {
         });
     }
     startTableServerRecordSelection(tableSelectionDetail) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const { tableObject, tableCode, recordId, recordData } = tableSelectionDetail;
             if (!tableObject) {
@@ -3696,7 +3815,7 @@ class BasicFormComponent {
             if (tableObject.selectionBackend) {
                 const actionSubject = {
                     tableCode,
-                    actionType: this.formConfig.tableActions.rowSelection,
+                    actionType: (_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.tableActions.rowSelection,
                     actionCode: null,
                     tableRecordId: recordId,
                     tableRecordData: recordData
@@ -3770,6 +3889,7 @@ class BasicFormComponent {
         });
     }
     startTableServerSelectionAction(tableActionDetail) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const { tableObject, action, tableCode, actionCode, selectedRecords } = tableActionDetail;
             if (!tableObject || !action) {
@@ -3781,7 +3901,7 @@ class BasicFormComponent {
             if (action.backend) {
                 const actionSubject = {
                     tableCode,
-                    actionType: this.formConfig.tableActions.selection,
+                    actionType: (_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.tableActions.selection,
                     actionCode,
                     selectedRecords
                 };
@@ -3881,35 +4001,36 @@ class BasicFormComponent {
         });
     }
     checkSectionRequiredFields(sectionCode, reqFieldMessage) {
+        var _a;
         this.cleanErrorFields(null, sectionCode);
-        const requiredFieldMessage = reqFieldMessage !== null && reqFieldMessage !== void 0 ? reqFieldMessage : this.formConfig.formStandardErrors.requiredField;
+        const requiredFieldMessage = reqFieldMessage !== null && reqFieldMessage !== void 0 ? reqFieldMessage : (_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.formStandardErrors.requiredField;
         const numErrors = this.tagFieldsWithError(requiredFieldMessage, this.getRequiredEmptyFields(null, sectionCode));
         return (numErrors === 0);
     }
     validateSectionConsistency(sectionCode, reqFieldMessage) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         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((_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.formStandardErrors.typeWarning, (_b = this.formConfig) === null || _b === void 0 ? void 0 : _b.formStandardErrors.validationTitle, (_c = this.formConfig) === null || _c === void 0 ? void 0 : _c.formStandardErrors.requiredFields);
             return false;
         }
         let validationError = false;
-        const requiredEmptyFields = (_a = this.getRequiredEmptyFields(null, sectionCode)) !== null && _a !== void 0 ? _a : [];
+        const requiredEmptyFields = (_d = this.getRequiredEmptyFields(null, sectionCode)) !== null && _d !== void 0 ? _d : [];
         if ((requiredEmptyFields === null || requiredEmptyFields === void 0 ? void 0 : 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((_e = this.formConfig) === null || _e === void 0 ? void 0 : _e.formStandardErrors.typeWarning, (_f = this.formConfig) === null || _f === void 0 ? void 0 : _f.formStandardErrors.validationTitle, (_g = this.formConfig) === null || _g === void 0 ? void 0 : _g.formStandardErrors.requiredFields);
+            this.tagFieldsWithError((_h = this.formConfig) === null || _h === void 0 ? void 0 : _h.formStandardErrors.requiredField, requiredEmptyFields);
             for (const code of requiredEmptyFields) {
                 const requiredEmptyField = this.getField(code);
                 requiredEmptyField === null || requiredEmptyField === void 0 ? void 0 : requiredEmptyField.focus();
                 break;
             }
         }
-        const validationIssueFields = (_b = this.getFieldsWithValidationIssues(null, sectionCode)) !== null && _b !== void 0 ? _b : [];
+        const validationIssueFields = (_j = this.getFieldsWithValidationIssues(null, sectionCode)) !== null && _j !== void 0 ? _j : [];
         if (!validationError && validationIssueFields.length > 0) {
             validationError = true;
-            this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.validationFields);
+            this.setError((_k = this.formConfig) === null || _k === void 0 ? void 0 : _k.formStandardErrors.typeWarning, (_l = this.formConfig) === null || _l === void 0 ? void 0 : _l.formStandardErrors.validationTitle, (_m = this.formConfig) === null || _m === void 0 ? void 0 : _m.formStandardErrors.validationFields);
             for (const code of validationIssueFields) {
                 const validationIssueField = this.getField(code);
                 if (validationIssueField) {