tuain-ng-forms-lib 14.4.95 → 14.5.10

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

@@ -14,6 +14,7 @@ class PieceComponent {
         this.disabled = false;
         this.customAttributes = {};
     }
+    setForm(form) { this.form = form; }
     defaultProcessAttributeChange(attribute, value) {
         if (!attribute || attribute.trim() === '') {
             return false;
@@ -45,10 +46,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
         }] });
 
 class ElementComponent extends PieceComponent {
-    start() { }
+    start() {
+        this.setForm(this.element?._form);
+    }
 }
 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 });
+ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ElementComponent, selector: "lib-element", inputs: { element: "element" }, 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: [{
@@ -57,8 +60,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { element: [{
                 type: Input
-            }], form: [{
-                type: Input
             }] } });
 
 class ActionComponent extends ElementComponent {
@@ -66,8 +67,6 @@ class ActionComponent extends ElementComponent {
         super(...arguments);
         this.inProgress = false;
         this.action = null;
-        this.style = 'primary';
-        this.showLabel = true;
     }
     ngOnInit() {
         if (!this.action) {
@@ -96,21 +95,9 @@ class ActionComponent extends ElementComponent {
             this.action.notifyActivation();
         }
     }
-    visibleOnRestriction() {
-        if (!this.action?.restrictedOnField) {
-            return true;
-        }
-        if ((this.action?.restrictedOnOperator === '=='
-            && this.relatedField === this.action?.restrictedOnValue)
-            || (this.action?.restrictedOnOperator === '!='
-                && this.relatedField !== this.action?.restrictedOnValue)) {
-            return true;
-        }
-        return false;
-    }
 }
 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 });
+ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ActionComponent, selector: "lib-action", inputs: { action: "action" }, 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: [{
@@ -119,14 +106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { action: [{
                 type: Input
-            }], busy: [{
-                type: Input
-            }], relatedField: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], showLabel: [{
-                type: Input
             }] } });
 
 const VALUE = 'value';
@@ -227,7 +206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
 
 class FormHeaderComponent {
     constructor() {
-        this.canGoBack = false;
         this.goBackEvent = new EventEmitter();
     }
     goBackForm() {
@@ -235,7 +213,7 @@ 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: { form: "form", canGoBack: "canGoBack", 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" }, 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: [{
@@ -244,12 +222,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { form: [{
                 type: Input
-            }], canGoBack: [{
-                type: Input
-            }], showTitle: [{
-                type: Input
-            }], headerActions: [{
-                type: Input
             }], goBackEvent: [{
                 type: Output
             }] } });
@@ -272,10 +244,12 @@ class SectionComponent extends PieceComponent {
         });
         this.start();
     }
-    start() { }
+    start() {
+        this.setForm(this.section?._form);
+    }
 }
 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 });
+SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SectionComponent, selector: "lib-section", inputs: { section: "section" }, 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: [{
@@ -284,8 +258,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { section: [{
                 type: Input
-            }], form: [{
-                type: Input
             }] } });
 
 class SubSectionComponent extends PieceComponent {
@@ -306,10 +278,12 @@ class SubSectionComponent extends PieceComponent {
         });
         this.start();
     }
-    start() { }
+    start() {
+        this.setForm(this.subSection?._form);
+    }
 }
 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 });
+SubSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SubSectionComponent, selector: "lib-subsection", inputs: { subSection: "subSection" }, 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: [{
@@ -318,8 +292,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], propDecorators: { subSection: [{
                 type: Input
-            }], form: [{
-                type: Input
             }] } });
 
 const INLINE_ACTION$1 = 'INLINE';
@@ -345,7 +317,9 @@ class LibTableRecordActionComponent extends PieceComponent {
         });
         this.start();
     }
-    start() { }
+    start() {
+        this.action?.setRecodData(this.recordData);
+    }
     onActivate() {
         const tableEvent = {
             actionCode: this.action.actionCode,
@@ -522,6 +496,7 @@ class FormPiece {
         this._absoluteDisabled = false;
         this.visibleStates = null;
         this.enabledStates = null;
+        this._form = null;
         this._visible = true;
         this._disabled = false;
         this.customAttributes = {};
@@ -596,7 +571,7 @@ class FormPiece {
     set disabled(disabled) { this.enabled = !disabled; }
     enable() { this.enabled = true; }
     disable() { this.enabled = false; }
-    formStateChangeCustomSubscribe(formChangeSubject) { }
+    formStateChangeCustomSubscribe(form, formChangeSubject) { }
     formStateChange(state) {
         if (state) {
             this._formState = state;
@@ -604,8 +579,9 @@ class FormPiece {
             this._disabled = this._absoluteDisabled || !this.enabledOnState(state);
         }
     }
-    subscribeFormStateChange(formChangeSubject) {
-        this.formStateChangeCustomSubscribe(formChangeSubject);
+    connectWithParentForm(form, formChangeSubject) {
+        this._form = form;
+        this.formStateChangeCustomSubscribe(form, formChangeSubject);
         formChangeSubject.subscribe(event => this.formStateChange(event?.state));
     }
 }
@@ -659,14 +635,6 @@ class FormElement extends FormPiecePropagate {
     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';
@@ -675,6 +643,9 @@ class FormAction extends FormElement {
         super(actionDefinition, formConfig);
         this._actionActivated = new Subject();
         this.inProgress = false;
+        this.restrictedOnField = null;
+        this.restrictedOnOperator = null;
+        this.restrictedOnValue = null;
         this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.actions ?? [];
         this.elementType = elementTypes.action;
         this.actionCode = actionDefinition.actionCode ? actionDefinition.actionCode.toString() : '';
@@ -683,11 +654,27 @@ class FormAction extends FormElement {
         this.setCustomAttribute('location', actionDefinition.position || HEADER);
         this.backend = actionDefinition?.serverAction ?? false;
         this.newState = actionDefinition?.newState;
-        this.restrictedOnField = actionDefinition.fieldRestrictedCode ? actionDefinition.fieldRestrictedCode.toString() : '';
-        this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
-        this.restrictedOnValue = actionDefinition.valueRestricted ?? '';
+        this.restrictedOnField = actionDefinition.fieldRestrictedCode?.toString() ?? null;
+        if (this.restrictedOnField) {
+            this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
+            this.restrictedOnValue = actionDefinition.valueRestricted ?? '';
+        }
         this.customValidation = () => true;
     }
+    viewOnState(state) {
+        const actionVisible = (this.visibleStates && state) ? this.visibleStates.includes(state) : false;
+        if (actionVisible && this._form && this.restrictedOnField) {
+            const relatedField = this._form.fields?.[this.restrictedOnField];
+            if (relatedField) {
+                const fieldValue = relatedField.value;
+                if ((this.restrictedOnOperator === '==' && fieldValue !== this.restrictedOnValue)
+                    || (this.restrictedOnOperator === '!=' && fieldValue === this.restrictedOnValue)) {
+                    return false;
+                }
+            }
+        }
+        return actionVisible;
+    }
     get actionActivated() { return this._actionActivated; }
     start() { this.inProgress = true; }
     stop() { this.inProgress = false; }
@@ -722,13 +709,13 @@ const attrs$1 = {
     _defaultValue: { name: '_defaultValue', propagate: 'defaultValue' },
     _defaultEditable: { name: '_defaultEditable', propagate: 'defaultEditable' },
     _fieldAlignment: { name: '_fieldAlignment', propagate: 'alignment' },
-    _fieldCode: { name: '_fieldCode', propagate: 'code' },
+    fieldCode: { name: 'fieldCode', propagate: 'code' },
     _fieldInfo: { name: '_fieldInfo', propagate: 'info' },
     _fieldRequired: { name: '_fieldRequired', propagate: 'required' },
     _fieldTitle: { name: '_fieldTitle', propagate: 'title' },
     _fieldType: { name: '_fieldType', propagate: 'type' },
     _fieldFormat: { name: '_fieldFormat', propagate: 'format' },
-    _fieldOptions: { name: '_fieldOptions', propagate: 'options' },
+    fieldOptions: { name: 'fieldOptions', propagate: 'options' },
     _focus: { name: '_focus', propagate: 'focus' },
     _hasChanged: { name: '_hasChanged', propagate: 'hasChanged' },
     _intrinsicErrorMessage: { name: '_intrinsicErrorMessage', propagate: null },
@@ -752,7 +739,6 @@ class FieldDescriptor extends FormElement {
         this._errorType = '';
         this._errorCode = '';
         this._errorMessage = '';
-        this._fieldCode = '';
         this._intrinsicErrorMessage = '';
         this._maxLength = 0;
         this._minLength = 0;
@@ -769,15 +755,16 @@ class FieldDescriptor extends FormElement {
         this._fieldTitle = '';
         this._fieldType = '';
         this._fieldFormat = null;
-        this._fieldOptions = null;
         this._hasChanged = false;
         this._outputOnly = false;
         this._tooltipText = '';
+        this.fieldCode = '';
+        this.fieldOptions = null;
         this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.fields ?? [];
         this.elementType = elementTypes.field;
         const fld = (inputFieldReceived) ? inputFieldReceived : {};
-        this.setAttr(attrs$1._fieldCode, fld.fieldCode);
-        this.title = fld.fieldTitle ?? this._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;
         const defaultValue = fld.defaultValue ?? null;
@@ -820,8 +807,7 @@ class FieldDescriptor extends FormElement {
     get backend() { return this._validateOnServer; }
     get captureType() { return this._captureType; }
     set captureType(captureType) { this.setAttr(attrs$1._captureType, captureType); }
-    get code() { return this._fieldCode; }
-    get fieldCode() { return this._fieldCode; }
+    get code() { return this.fieldCode; }
     get defaultValue() { return this._defaultValue; }
     set defaultValue(defaultValue) { this.setAttr(attrs$1._defaultValue, defaultValue); }
     get defaultEditable() { return this._defaultEditable; }
@@ -886,9 +872,9 @@ class FieldDescriptor extends FormElement {
         }
         this.setAttr(attrs$1._minValue, minValue);
     }
-    get name() { return this._fieldCode; }
+    get name() { return this.fieldCode; }
     get options() {
-        return this._fieldOptions?.map(option => {
+        return this.fieldOptions?.map(option => {
             const optionCopy = { ...option };
             return optionCopy;
         }) ?? null;
@@ -908,25 +894,25 @@ class FieldDescriptor extends FormElement {
         });
         fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
             && fieldOptions.length > 0) ? fieldOptions : [];
-        this.setAttr(attrs$1._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));
+                const fieldValue = this._value?.filter(item => this.fieldOptions?.find(opt => opt.fieldOptionId === item));
                 this.setAttr(attrs$1._value, fieldValue);
             }
             else {
-                const valInOptions = this._fieldOptions?.find(item => item.fieldOptionId === this._value);
+                const valInOptions = this.fieldOptions?.find(item => item.fieldOptionId === this._value);
                 if (!valInOptions) {
                     this._setValue('');
                 }
             }
         }
-        if (this._fieldRequired && this._fieldOptions?.length === 1 && this._value !== this._fieldOptions?.[0].fieldOptionId) {
-            this._setValue(this._fieldOptions?.[0].fieldOptionId);
+        if (this._fieldRequired && this.fieldOptions?.length === 1 && this._value !== this.fieldOptions?.[0].fieldOptionId) {
+            this._setValue(this.fieldOptions?.[0].fieldOptionId);
             this.notifyEditionFinish();
         }
     }
-    get optionText() { return this._fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null; }
+    get optionText() { return this.fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null; }
     get outputOnly() { return this._outputOnly; }
     set outputOnly(outputOnly) { this.setAttr(attrs$1._outputOnly, outputOnly); }
     get required() { return this._fieldRequired; }
@@ -950,14 +936,6 @@ class FieldDescriptor extends FormElement {
     set value(newValue) { this._setValue(newValue); }
     get visibleLabel() { return this._visibleLabel; }
     set visibleLabel(visibleLabel) { this.setAttr(attrs$1._visibleLabel, visibleLabel); }
-    /**
-     * @deprecated Use options
-     */
-    get fieldOptions() { return this._fieldOptions; }
-    /**
-     * @deprecated Use options
-     */
-    set fieldOptions(options) { this.options = options; }
     /**
      * @deprecated Use value
      */
@@ -1033,7 +1011,7 @@ class FieldDescriptor extends FormElement {
     setVisibleLabel(visibleLabel) { this.visibleLabel = visibleLabel; }
     notifyEditionPartial() {
         this.resetError();
-        this._editionPartial.next({ code: this._fieldCode, intrinsicValidation: true });
+        this._editionPartial.next({ code: this.fieldCode, intrinsicValidation: true });
     }
     notifyEditionFinish() {
         const fieldValue = this.value;
@@ -1069,10 +1047,10 @@ class FieldDescriptor extends FormElement {
             intrinsicValidation = false;
             this.setError('99', `Longitud de ${this._fieldTitle} debe ser de al menos ${this._minLength}`);
         }
-        this._editionFinish.next({ code: this._fieldCode, intrinsicValidation });
+        this._editionFinish.next({ code: this.fieldCode, intrinsicValidation });
     }
     notifyEditionDetailRequest(detail) {
-        const detailEvent = { code: this._fieldCode, detail };
+        const detailEvent = { code: this.fieldCode, detail };
         this._detailRequest.next(detailEvent);
     }
     setError(code, message, type = DEFAULT_ERROR_TYPE) {
@@ -1219,6 +1197,9 @@ class RecordTableColumn extends FormPiece {
 class TableAction extends FormPiece {
     constructor(actionDefinition, formConfig) {
         super(actionDefinition, formConfig);
+        this.restrictedOnField = null;
+        this.restrictedOnValue = null;
+        this.restrictedOnOperator = null;
         this.actionCode = actionDefinition.actionCode;
         this.actionTitle = actionDefinition.actionTitle;
         this.iconName = actionDefinition.iconName || this.actionCode;
@@ -1227,9 +1208,30 @@ class TableAction extends FormPiece {
         this.newState = actionDefinition.newState;
         this.stateField = actionDefinition.stateField || '';
         this.backend = actionDefinition?.serverAction ?? false;
-        this.restrictedOnField = actionDefinition.fieldRestrictedCode || '';
-        this.restrictedOnValue = actionDefinition.valueRestricted ?? '';
-        this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
+        this.restrictedOnField = actionDefinition.fieldRestrictedCode ?? null;
+        if (this.restrictedOnField) {
+            this.restrictedOnValue = actionDefinition.valueRestricted ?? null;
+            this.restrictedOnOperator = actionDefinition.operatorRestricted || null;
+        }
+    }
+    viewOnState(state) {
+        const actionVisible = (this.visibleStates && state) ? this.visibleStates.includes(state) : false;
+        if (actionVisible && this._form && this.restrictedOnField) {
+            // Aqui se debe cambiar el campo por la columna del registro!!!!!
+            // const relatedField = this._form.fields?.[this.restrictedOnField];
+            const relatedField = this.recordData?.[this.restrictedOnField];
+            if (relatedField) {
+                const fieldValue = relatedField.value;
+                if ((this.restrictedOnOperator === '==' && fieldValue !== this.restrictedOnValue)
+                    || (this.restrictedOnOperator === '!=' && fieldValue === this.restrictedOnValue)) {
+                    return false;
+                }
+            }
+        }
+        return actionVisible;
+    }
+    setRecodData(recordData) {
+        this.recordData = recordData;
     }
 }
 
@@ -1748,12 +1750,12 @@ class RecordTable extends FormElement {
         }
         return direction === TABLE_SORT_ASCENDING ? result : -result;
     }
-    formStateChangeCustomSubscribe(formChangeSubject) {
+    formStateChangeCustomSubscribe(form, formChangeSubject) {
         this.columns?.forEach(column => {
-            column?.subscribeFormStateChange(formChangeSubject);
+            column?.connectWithParentForm(form, formChangeSubject);
         });
         this._actions?.forEach(action => {
-            action?.subscribeFormStateChange(formChangeSubject);
+            action?.connectWithParentForm(form, formChangeSubject);
         });
     }
 }
@@ -1965,9 +1967,9 @@ class RecordFormSection extends FormPiecePropagate {
         }
         return null;
     }
-    formStateChangeCustomSubscribe(formChangeSubject) {
+    formStateChangeCustomSubscribe(form, formChangeSubject) {
         this.subSections?.forEach(subsection => {
-            subsection?.subscribeFormStateChange(formChangeSubject);
+            subsection?.connectWithParentForm(form, formChangeSubject);
         });
     }
 }
@@ -2254,7 +2256,7 @@ class FormStructureAndData {
         return this.getFieldSet(fld => fld?.required && fld?.empty, codes ?? null, secCode, subCode);
     }
     getChangedFields(codes, secCode, subCode) {
-        return this.getFieldSet(fld => !fld?.outputOnly && fld?.hasChanged(), codes ?? null, secCode, subCode);
+        return this.getFieldSet(fld => !fld?.outputOnly && fld?.hasChanged, codes ?? null, secCode, subCode);
     }
     getFieldsWithValidationIssues(codes, secCode, subCode) {
         return this.getFieldSet(fld => fld?.hasError(), codes ?? null, secCode, subCode);
@@ -2517,6 +2519,7 @@ class BasicFormComponent {
         this._formRoute = null;
         this._definitionObtained = false;
         // Eventos de acciones y campos
+        this._formChangeState = [];
         this._formSectionsCanDeactivate = {};
         this._formSectionsActivate = {};
         this._formSectionsInactivate = {};
@@ -2559,7 +2562,6 @@ class BasicFormComponent {
     cleanData() { return this._formStructure?.cleanData(); }
     getCurrentState() { return this._formStructure?.getCurrentState(); }
     supportState(state) { return this._formStructure?.supportState(state ?? '') ?? false; }
-    changeState(state) { return this._formStructure?.changeState(state) ?? false; }
     getStates() { return this._formStructure?.states; }
     getImmutableElement(name) { return this._formStructure?.getImmutableElement(name); }
     getExtraInfo(name) { return this._formStructure?.getExtraInfo(name); }
@@ -2767,6 +2769,7 @@ class BasicFormComponent {
         // Se limpian los manejadores de eventos
         this.visible = false;
         this.busy = false;
+        this._formChangeState = [];
         this._formSectionsCanDeactivate = {};
         this._formSectionsActivate = {};
         this._formSectionsInactivate = {};
@@ -2789,14 +2792,14 @@ class BasicFormComponent {
         this.onTableServerError(() => this.displayTableServerError());
     }
     get formVisible() { return this.visible; }
-    get formManager() { return this; }
+    get form() { return this; }
     get formCode() { return this.name ?? ''; }
     set formCode(name) { this.name = name; }
     get inServerProcess() { return this.busy; }
-    get form() { return this._formStructure; }
+    get formStructure() { return this._formStructure; }
     get state() { return this._formStructure?.state ?? null; }
     get currentState() { return this._formStructure?.state ?? ''; }
-    set currentState(state) { this?._formStructure?.changeState(state); }
+    set currentState(state) { this?.changeState(state); }
     get immutableData() { return this._formStructure?.immutableData; }
     get extraInfo() { return this._formStructure?.extraInfo; }
     get visibleSections() { return this._formStructure?.visibleSections ?? null; }
@@ -2917,7 +2920,7 @@ class BasicFormComponent {
             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);
+            section.connectWithParentForm(this, this._formStructure?.stateChange);
         }
     }
     subscribeFieldsSubjects() {
@@ -2934,7 +2937,7 @@ class BasicFormComponent {
                 });
                 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);
+                field.connectWithParentForm(this, this._formStructure?.stateChange);
             });
         }
     }
@@ -2944,7 +2947,7 @@ class BasicFormComponent {
             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);
+                action.connectWithParentForm(this, this._formStructure?.stateChange);
             });
         }
     }
@@ -2958,7 +2961,7 @@ class BasicFormComponent {
                 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);
+                table.connectWithParentForm(this, this._formStructure?.stateChange);
             });
         }
     }
@@ -2994,7 +2997,7 @@ class BasicFormComponent {
         this.subscribeActionSubjects();
         this.subscribeTableSubjects();
         // Se define el estado inicial y se solicita la acción inicial
-        this._formStructure?.changeState(initialState || this._formStructure?.defaultState);
+        this.changeState(initialState || this._formStructure?.defaultState);
         const recordResponse = await this.requestFormAction(formActions.getData);
         this.checkErrorRecordReceived(recordResponse);
         this.visible = true;
@@ -3002,6 +3005,18 @@ class BasicFormComponent {
         this.start();
         this.customFormStart();
     }
+    changeState(state) {
+        const stateChanged = this._formStructure?.changeState(state ?? '') ?? false;
+        if (stateChanged) {
+            const clientActionMethods = this._formChangeState;
+            if (clientActionMethods && clientActionMethods.length > 0) {
+                for (const callback of clientActionMethods) {
+                    callback(state);
+                }
+            }
+        }
+        return stateChanged;
+    }
     checkErrorRecordReceived(recordResponse) {
         const { error } = recordResponse;
         if (!error) {
@@ -3113,6 +3128,9 @@ class BasicFormComponent {
     /**
      * Manejo de event handlers para acciones sobre el formulario
      */
+    onFormChange(callback) {
+        this._formChangeState.push(callback);
+    }
     onSectionCanDeactivate(codes, callback, properties = null) {
         const sectionSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
         sectionSet.forEach((sectionName) => {
@@ -3909,7 +3927,11 @@ class BasicFormComponent {
             for (const columnName of columnNames) {
                 const columnValue = tableRecord.getFieldValue(columnName) ?? '';
                 const code = mappingTable?.[columnName] ?? columnName;
-                this.setFieldValue(code, columnValue);
+                const field = code ? this.getField(code) : null;
+                if (field) {
+                    field.setValue(columnValue);
+                    field.hasChanged = false;
+                }
             }
             return true;
         }