@smartbit4all/ng-client 4.5.16 → 4.5.17

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, Component, EventEmitter, Output, ViewChildren, ViewChild, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, inject, input, computed, effect, signal, ChangeDetectorRef } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, Component, EventEmitter, Output, ViewChildren, ViewChild, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, inject, input, computed, effect, signal, ApplicationRef, viewChild, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { Subject, lastValueFrom, take, takeUntil, interval, startWith, map, distinctUntilChanged, catchError, throwError, from } from 'rxjs';
@@ -20027,6 +20027,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Public API Surface of smart-grid
  */
 
+class SmartComponentLayoutUtility {
+    static getForms(comp) {
+        let result = [];
+        if (comp.components) {
+            const children = comp.components
+                .map((c) => this.getForms(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getForms(expandable));
+        }
+        if (comp.smartFormComponent) {
+            result.push(comp.smartFormComponent);
+        }
+        return result;
+    }
+    static getGrids(comp) {
+        let result = [];
+        if (comp.components) {
+            const children = comp.components
+                .map((c) => this.getGrids(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getGrids(expandable));
+        }
+        if (comp.smartGridComponent) {
+            result.push(comp.smartGridComponent);
+        }
+        return result;
+    }
+    static getMaps(comp) {
+        const result = [];
+        if (comp.components) {
+            const children = comp.components
+                .map((c) => SmartComponentLayoutUtility.getMaps(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getMaps(expandable));
+        }
+        if (comp.smartMapComponent) {
+            result.push(comp.smartMapComponent);
+        }
+        return result;
+    }
+    static getDiagrams(comp) {
+        const result = [];
+        if (comp.components) {
+            const children = comp.components
+                .map((c) => SmartComponentLayoutUtility.getDiagrams(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getDiagrams(expandable));
+        }
+        if (comp.smartDiagramComponent) {
+            result.push(comp.smartDiagramComponent);
+        }
+        return result;
+    }
+    static getTrees(comp) {
+        let result = [];
+        if (comp.components) {
+            const children = comp.components
+                ?.map((c) => this.getTrees(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getTrees(expandable));
+        }
+        if (comp.treeService) {
+            result.push(comp.treeService);
+        }
+        return result;
+    }
+    static getToolbars(comp) {
+        let result = [];
+        if (comp.components) {
+            const children = comp.components
+                .map((c) => this.getToolbars(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getToolbars(expandable));
+        }
+        let expandeableHeaderToolbar = comp.expandableComponents?.first?.toolbar;
+        if (expandeableHeaderToolbar) {
+            result.push(expandeableHeaderToolbar);
+        }
+        if (comp.toolbar) {
+            result.push(comp.toolbar);
+        }
+        return result;
+    }
+    static clearFormHandlers(comp) {
+        const smartComponent = comp.parentSmartComponent;
+        const forms = SmartComponentLayoutUtility.getForms(comp);
+        forms.forEach((form) => {
+            form.smartForm?.widgets
+                .map((w) => w.key)
+                .forEach((wKey) => {
+                smartComponent.removeDataChangeActionHandler(wKey);
+            });
+            const subs = smartComponent.dataChangeActionHandlers.get(form);
+            if (subs) {
+                subs.forEach((sub) => sub.unsubscribe());
+                smartComponent.dataChangeActionHandlers.delete(form);
+            }
+        });
+    }
+    static getEmbeddedSlots(comp) {
+        const result = [];
+        if (comp.components) {
+            const children = comp.components
+                .map((c) => this.getEmbeddedSlots(c))
+                .reduce((acc, value) => acc.concat(value), []);
+            result.push(...children);
+        }
+        const expandable = this.getExpandableComponent(comp);
+        if (expandable) {
+            result.push(...this.getEmbeddedSlots(expandable));
+        }
+        if (comp._embeddedSlotVcRef && comp.embeddedSlotContainerId) {
+            result.push({ containerId: comp.embeddedSlotContainerId, vcRef: comp._embeddedSlotVcRef });
+        }
+        return result;
+    }
+    static getExpandableComponent(comp) {
+        return comp.expandableComponents?.first?.componentRef?.instance;
+    }
+    static applyStyle(style, elementRef, renderer) {
+        if (style && elementRef && renderer) {
+            let element = elementRef.nativeElement;
+            // css style properties
+            if (style.style) {
+                Object.entries(style.style).forEach(([key, value]) => {
+                    renderer.setStyle(element, key, value, RendererStyleFlags2.Important);
+                });
+            }
+            // add classes
+            if (style.classesToAdd) {
+                style.classesToAdd.forEach((cl) => renderer.addClass(element, cl));
+            }
+            // remove classes
+            if (style.classesToRemove) {
+                style.classesToRemove.forEach((cl) => renderer.removeClass(element, cl));
+            }
+        }
+    }
+    static setUuid(comp, uuid) {
+        comp.updateUuid(uuid);
+        comp.components?.forEach((child) => this.setUuid(child, uuid));
+    }
+}
+
 function deepMerge(target, source) {
     for (const key of Object.keys(source)) {
         if (source[key] instanceof Object && target[key]) {
@@ -21045,6 +21213,16 @@ class SmartComponentLayoutComponent {
         this.element = element;
         this.renderer = renderer;
         this._destroy$ = new Subject();
+        this.appRef = inject(ApplicationRef);
+        this.formRef = viewChild(SmartformComponent);
+        this.onFormChange = effect(() => {
+            const form = this.formRef();
+            if (this.smartForm && form && this.parentSmartComponent) {
+                this.parentSmartComponent.handleDataChangeSubscriptions(form);
+                this.parentSmartComponent.handleLayoutUploadCallback(form);
+                form.markAllWidgetsForChangeDetection();
+            }
+        });
         this.pendingOrphanCleanup = false;
         this.embeddedSlotActive = false;
     }
@@ -21122,6 +21300,7 @@ class SmartComponentLayoutComponent {
         }
         // layout changed, render, but save current
         // this.currentLayout = JSON.parse(JSON.stringify(this.smartComponentLayout));
+        SmartComponentLayoutUtility.clearFormHandlers(this);
         this.currentLayout = this.smartComponentLayout;
         this.uuid = this.parentSmartComponent.uuid;
         this.treeService = this.parentSmartComponent.smartTreeService;
@@ -21235,10 +21414,6 @@ class SmartComponentLayoutComponent {
     }
     bindForm() {
         if (this.parentSmartComponent?.useQueryLists) {
-            if (this.smartForm && this.smartFormComponent && this.parentSmartComponent) {
-                this.parentSmartComponent.handleDataChangeSubscriptions();
-                this.parentSmartComponent.handleLayoutUploadCallback(this.smartFormComponent);
-            }
             return;
         }
         if (this.smartForm && this.smartFormComponent) {
@@ -21376,7 +21551,7 @@ class SmartComponentLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }, { token: SmartViewContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  @if (smartComponentLayout?.type === type().CONTAINER) {\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n      [gridRow]=\"gridRow\"\r\n    ></smart-component-layout>\r\n  }\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <smart-map\r\n    *ngIf=\"!!uuid && !!mapId\"\r\n    #map\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"mapId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-map>\r\n  <smart-diagram\r\n    *ngIf=\"!!uuid && !!smartDiagramId\"\r\n    #diagram\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"smartDiagramId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-diagram>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"!!toolbarId\"\r\n    #toolbar\r\n    [id]=\"toolbarId\"\r\n    [toolbarPropertes]=\"toolbarPropertes\"\r\n  ></smart-ui-action-toolbar>\r\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "formRef", first: true, predicate: SmartformComponent, descendants: true, isSignal: true }, { propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  @if (smartComponentLayout?.type === type().CONTAINER) {\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n      [gridRow]=\"gridRow\"\r\n    ></smart-component-layout>\r\n  }\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <smart-map\r\n    *ngIf=\"!!uuid && !!mapId\"\r\n    #map\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"mapId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-map>\r\n  <smart-diagram\r\n    *ngIf=\"!!uuid && !!smartDiagramId\"\r\n    #diagram\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"smartDiagramId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-diagram>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"!!toolbarId\"\r\n    #toolbar\r\n    [id]=\"toolbarId\"\r\n    [toolbarPropertes]=\"toolbarPropertes\"\r\n  ></smart-ui-action-toolbar>\r\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
             type: Component,
@@ -22399,158 +22574,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
-class SmartComponentLayoutUtility {
-    static getForms(comp) {
-        let result = [];
-        if (comp.components) {
-            const children = comp.components
-                .map((c) => this.getForms(c))
-                .reduce((acc, value) => acc.concat(value), []);
-            result.push(...children);
-        }
-        const expandable = this.getExpandableComponent(comp);
-        if (expandable) {
-            result.push(...this.getForms(expandable));
-        }
-        if (comp.smartFormComponent) {
-            result.push(comp.smartFormComponent);
-        }
-        return result;
-    }
-    static getGrids(comp) {
-        let result = [];
-        if (comp.components) {
-            const children = comp.components
-                .map((c) => this.getGrids(c))
-                .reduce((acc, value) => acc.concat(value), []);
-            result.push(...children);
-        }
-        const expandable = this.getExpandableComponent(comp);
-        if (expandable) {
-            result.push(...this.getGrids(expandable));
-        }
-        if (comp.smartGridComponent) {
-            result.push(comp.smartGridComponent);
-        }
-        return result;
-    }
-    static getMaps(comp) {
-        const result = [];
-        if (comp.components) {
-            const children = comp.components
-                .map((c) => SmartComponentLayoutUtility.getMaps(c))
-                .reduce((acc, value) => acc.concat(value), []);
-            result.push(...children);
-        }
-        const expandable = this.getExpandableComponent(comp);
-        if (expandable) {
-            result.push(...this.getMaps(expandable));
-        }
-        if (comp.smartMapComponent) {
-            result.push(comp.smartMapComponent);
-        }
-        return result;
-    }
-    static getDiagrams(comp) {
-        const result = [];
-        if (comp.components) {
-            const children = comp.components
-                .map((c) => SmartComponentLayoutUtility.getDiagrams(c))
-                .reduce((acc, value) => acc.concat(value), []);
-            result.push(...children);
-        }
-        const expandable = this.getExpandableComponent(comp);
-        if (expandable) {
-            result.push(...this.getDiagrams(expandable));
-        }
-        if (comp.smartDiagramComponent) {
-            result.push(comp.smartDiagramComponent);
-        }
-        return result;
-    }
-    static getTrees(comp) {
-        let result = [];
-        if (comp.components) {
-            const children = comp.components
-                ?.map((c) => this.getTrees(c))
-                .reduce((acc, value) => acc.concat(value), []);
-            result.push(...children);
-        }
-        const expandable = this.getExpandableComponent(comp);
-        if (expandable) {
-            result.push(...this.getTrees(expandable));
-        }
-        if (comp.treeService) {
-            result.push(comp.treeService);
-        }
-        return result;
-    }
-    static getToolbars(comp) {
-        let result = [];
-        if (comp.components) {
-            const children = comp.components
-                .map((c) => this.getToolbars(c))
-                .reduce((acc, value) => acc.concat(value), []);
-            result.push(...children);
-        }
-        const expandable = this.getExpandableComponent(comp);
-        if (expandable) {
-            result.push(...this.getToolbars(expandable));
-        }
-        let expandeableHeaderToolbar = comp.expandableComponents?.first?.toolbar;
-        if (expandeableHeaderToolbar) {
-            result.push(expandeableHeaderToolbar);
-        }
-        if (comp.toolbar) {
-            result.push(comp.toolbar);
-        }
-        return result;
-    }
-    static getEmbeddedSlots(comp) {
-        const result = [];
-        if (comp.components) {
-            const children = comp.components
-                .map((c) => this.getEmbeddedSlots(c))
-                .reduce((acc, value) => acc.concat(value), []);
-            result.push(...children);
-        }
-        const expandable = this.getExpandableComponent(comp);
-        if (expandable) {
-            result.push(...this.getEmbeddedSlots(expandable));
-        }
-        if (comp._embeddedSlotVcRef && comp.embeddedSlotContainerId) {
-            result.push({ containerId: comp.embeddedSlotContainerId, vcRef: comp._embeddedSlotVcRef });
-        }
-        return result;
-    }
-    static getExpandableComponent(comp) {
-        return comp.expandableComponents?.first?.componentRef?.instance;
-    }
-    static applyStyle(style, elementRef, renderer) {
-        if (style && elementRef && renderer) {
-            let element = elementRef.nativeElement;
-            // css style properties
-            if (style.style) {
-                Object.entries(style.style).forEach(([key, value]) => {
-                    renderer.setStyle(element, key, value, RendererStyleFlags2.Important);
-                });
-            }
-            // add classes
-            if (style.classesToAdd) {
-                style.classesToAdd.forEach((cl) => renderer.addClass(element, cl));
-            }
-            // remove classes
-            if (style.classesToRemove) {
-                style.classesToRemove.forEach((cl) => renderer.removeClass(element, cl));
-            }
-        }
-    }
-    static setUuid(comp, uuid) {
-        comp.updateUuid(uuid);
-        comp.components?.forEach((child) => this.setUuid(child, uuid));
-    }
-}
-
 /*
  * Public API Surface of smart-component-layout
  */
@@ -23429,45 +23452,43 @@ class SmartComponentApiClient {
             }
         });
     }
-    handleDataChangeSubscriptions() {
-        if (this.useQueryLists) {
-            let forms = this.getAllSmartFormComponents();
-            // add elements to dataChangeKeys
-            forms.forEach((form) => {
-                form.smartForm?.widgets.forEach((widget) => {
-                    if (widget.key) {
-                        if (widget.valueChangeMode === ValueChangeMode.IMMEDIATE_ACTION ||
-                            widget.valueChangeMode === ValueChangeMode.BLUR) {
-                            this.addDataChangeActionHandler(widget.key, widget.valueChangeMode);
-                        }
-                        else {
-                            this.removeDataChangeActionHandler(widget.key);
-                        }
-                    }
-                });
-            });
-            // subscribe to new forms
-            forms.forEach((component) => {
-                if (!this.dataChangeActionHandlers.has(component)) {
-                    let inmediateValueChangeSub = component.sophisticatedValueChange
-                        .pipe(takeUntil(this._destroy$))
-                        .subscribe((event) => this.dataChangeActionHandler(event, ValueChangeMode.IMMEDIATE_ACTION));
-                    let blurValueChangeSub = component.blurSophisticatedValueChange
-                        .pipe(takeUntil(this._destroy$))
-                        .subscribe((event) => this.dataChangeActionHandler(event, ValueChangeMode.BLUR));
-                    this.dataChangeActionHandlers.set(component, [
-                        inmediateValueChangeSub,
-                        blurValueChangeSub,
-                    ]);
+    handleFormSubscriptions(form) {
+        form.smartForm?.widgets.forEach((widget) => {
+            if (widget.key) {
+                if (widget.valueChangeMode === ValueChangeMode.IMMEDIATE_ACTION ||
+                    widget.valueChangeMode === ValueChangeMode.BLUR) {
+                    this.addDataChangeActionHandler(widget.key, widget.valueChangeMode);
                 }
-            });
-            // unsubscribe from removed forms
-            this.dataChangeActionHandlers.forEach((subs, form) => {
-                if (!forms.find((c) => c === form)) {
-                    subs.forEach((sub) => sub.unsubscribe());
-                    this.dataChangeActionHandlers.delete(form);
+                else {
+                    this.removeDataChangeActionHandler(widget.key);
                 }
+            }
+        });
+        if (!this.dataChangeActionHandlers.has(form)) {
+            let inmediateValueChangeSub = form.sophisticatedValueChange
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((event) => {
+                this.dataChangeActionHandler(event, ValueChangeMode.IMMEDIATE_ACTION);
             });
+            let blurValueChangeSub = form.blurSophisticatedValueChange
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((event) => this.dataChangeActionHandler(event, ValueChangeMode.BLUR));
+            this.dataChangeActionHandlers.set(form, [inmediateValueChangeSub, blurValueChangeSub]);
+        }
+    }
+    handleDataChangeSubscriptions(formComponent) {
+        if (this.useQueryLists) {
+            let forms = !!formComponent ? [formComponent] : this.getAllSmartFormComponents();
+            forms.forEach((form) => this.handleFormSubscriptions(form));
+            // unsubscribe from removed forms
+            if (!formComponent) {
+                this.dataChangeActionHandlers.forEach((subs, form) => {
+                    if (!forms.find((c) => c === form)) {
+                        subs.forEach((sub) => sub.unsubscribe());
+                        this.dataChangeActionHandlers.delete(form);
+                    }
+                });
+            }
         }
     }
     getInvalidFields() {