@smartbit4all/ng-client 3.3.128 → 3.3.130

package/fesm2020/smartbit4all-ng-client.mjs

@@ -12894,101 +12894,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Public API Surface of smart-grid
  */
 
-class SmartComponentLayoutUtility {
-    static setParent(layout, parent) {
-        layout.parentComponent = parent;
-        layout.components?.forEach((l) => this.setParent(l, parent));
-    }
-    static equals(layout1, layout2) {
-        if ((layout1 && !layout2) || (layout2 && !layout1)) {
-            return false;
-        }
-        if (!layout1 && !layout2) {
-            return true;
-        }
-        // both layout1 and layout2 exists
-        let parent1 = layout1.parentComponent;
-        let parent2 = layout1.parentComponent;
-        this.setParent(layout1, null);
-        this.setParent(layout2, null);
-        const result = deepEqual(layout1, layout2);
-        this.setParent(layout1, parent1);
-        this.setParent(layout2, parent2);
-        return result;
-    }
-    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 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));
-        }
-        if (comp.toolbar) {
-            result.push(comp.toolbar);
-        }
-        return result;
-    }
-    static getExpandableComponent(comp) {
-        return comp.expandableComponents?.first?.componentRef?.instance;
-    }
-}
-
 class SmartComponentLayoutComponent {
     constructor(layoutService) {
         this.layoutService = layoutService;
@@ -13036,20 +12941,20 @@ class SmartComponentLayoutComponent {
         this._destroy$.complete();
     }
     ngOnChanges(changes) {
-        let newLayout = changes['smartComponentLayout'].currentValue;
-        if (SmartComponentLayoutUtility.equals(this.smartComponentLayout, newLayout)) {
-            // no change in layout, don't setup again
-            return;
+        if (deepEqual(this.smartComponentLayout, this.currentLayout)) {
+            // no layout change, keep current state
         }
-        this.smartComponentLayout = newLayout;
-        if (this.smartComponentLayout) {
-            this.setUp();
+        else {
+            // layout changed, render
+            this.currentLayout = JSON.parse(JSON.stringify(this.smartComponentLayout));
+            if (this.smartComponentLayout) {
+                this.setUp();
+            }
         }
     }
     setUp() {
-        this.parent = this.smartComponentLayout?.parentComponent;
-        this.uuid = this.parent.uuid;
-        this.treeService = this.parent.smartTreeService;
+        this.uuid = this.parentSmartComponent.uuid;
+        this.treeService = this.parentSmartComponent.smartTreeService;
         this.smartComponentLayout?.direction;
         if (this.smartComponentLayout?.expandable) {
             this.constructExpandableSection();
@@ -13071,7 +12976,10 @@ class SmartComponentLayoutComponent {
             else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TOOLBAR) {
                 this.constructToolbar();
             }
-            this.parent.initActions();
+            if (!this.parentLayoutComponent) {
+                // only top level component should call init actions
+                this.parentSmartComponent.initActions();
+            }
         }
     }
     type() {
@@ -13093,7 +13001,7 @@ class SmartComponentLayoutComponent {
         });
         this.smartForm = {
             direction: this.getFormLayout(),
-            componentModel: this.parent?.model,
+            componentModel: this.parentSmartComponent?.model,
             widgets,
         };
         this.bindForm();
@@ -13113,11 +13021,11 @@ class SmartComponentLayoutComponent {
         }
     }
     bindForm() {
-        if (this.parent?.useQueryLists) {
+        if (this.parentSmartComponent?.useQueryLists) {
             return;
         }
         if (this.smartForm && this.smartFormComponent) {
-            this.parent?.addForm(
+            this.parentSmartComponent?.addForm(
             // unique identifier for the form
             `form_${this.makeid(5)}`, this.smartForm, this.smartFormComponent);
         }
@@ -13154,11 +13062,11 @@ class SmartComponentLayoutComponent {
         }
     }
     bindGrid() {
-        if (this.parent?.useQueryLists) {
+        if (this.parentSmartComponent?.useQueryLists) {
             return;
         }
         if (this.smartGrid && this.smartGridComponent) {
-            this.smartGrid = this.parent?.addGrid(this.smartGrid, {
+            this.smartGrid = this.parentSmartComponent?.addGrid(this.smartGrid, {
                 rowUiActionType: GridUiActionType.POPUP_MENU,
             }, false, this.smartGridComponent);
         }
@@ -13179,10 +13087,10 @@ class SmartComponentLayoutComponent {
         // TODO
     }
     constructTree() {
-        if (this.parent?.useQueryLists) {
+        if (this.parentSmartComponent?.useQueryLists) {
             return;
         }
-        this.parent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
+        this.parentSmartComponent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
         this.treeService?.initialize();
     }
     constructToolbar() {
@@ -13193,12 +13101,16 @@ class SmartComponentLayoutComponent {
     }
 }
 SmartComponentLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }], target: i0.ɵɵFactoryTarget.Component });
-SmartComponentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout" }, viewQueries: [{ propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], 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  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\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-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"], components: [{ type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout"] }, { type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SmartComponentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent" }, viewQueries: [{ propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], 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  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\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    ></smart-component-layout>\r\n  </div>\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-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"], components: [{ type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent"] }, { type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-component-layout', 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  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\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-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'smart-component-layout', 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  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\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    ></smart-component-layout>\r\n  </div>\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-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: SmartformLayoutDefinitionService }]; }, propDecorators: { smartComponentLayout: [{
                 type: Input
+            }], parentLayoutComponent: [{
+                type: Input
+            }], parentSmartComponent: [{
+                type: Input
             }], smartFormList: [{
                 type: ViewChildren,
                 args: ['form']
@@ -14551,6 +14463,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Public API Surface of smarttree
  */
 
+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 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));
+        }
+        if (comp.toolbar) {
+            result.push(comp.toolbar);
+        }
+        return result;
+    }
+    static getExpandableComponent(comp) {
+        return comp.expandableComponents?.first?.componentRef?.instance;
+    }
+}
+
 /*
  * Public API Surface of smart-component-layout
  */
@@ -15017,8 +15003,6 @@ class SmartComponentApiClient {
             else {
                 this.handleQueryList(this.getSmartComponentLayoutsQL(), (comp) => {
                     if (comp.smartComponentLayout) {
-                        // TODO maybe we should set comp.parent, not comp.smartComponentLayout.parentComponent..
-                        SmartComponentLayoutUtility.setParent(comp.smartComponentLayout, this);
                         this.initActions();
                     }
                     if (this.uuid && this.uuid !== comp.uuid)