@smartbit4all/ng-client 3.1.85 → 3.1.87

package/fesm2015/smartbit4all-ng-client.mjs

@@ -10448,14 +10448,15 @@ class TableLayoutDefinerComponent {
         this.orderedColumnsAsObject = {};
         this.disableSave = false;
         this.alwaysShowColumns = [];
-        this.addDisabled = false;
         this.showAddBtn = true;
         this.view = JSON.parse(JSON.stringify(data.customComponentInputs.config.view));
         this.mapOrderedColumnsToObject();
         this.constructForms();
         this.getAlwaysShowColumns();
-        this.addDisabled = !(this.forms.length < this.view.descriptor.columns.length);
-        this.showAddBtn = !(this.forms.length == this.view.descriptor.columns.length);
+        this.showAddBtn = !(this.forms.length == this.getMaxColumnCount());
+    }
+    getMaxColumnCount() {
+        return this.view.descriptor.columns.filter((col) => !col.alwaysHidden).length;
     }
     ngOnDestroy() {
         this._destroy$.next();
@@ -10507,13 +10508,13 @@ class TableLayoutDefinerComponent {
     }
     addColumn() {
         var _a;
-        if (this.forms.length < this.view.descriptor.columns.length) {
+        if (this.forms.length < this.getMaxColumnCount()) {
             (_a = this.view) === null || _a === void 0 ? void 0 : _a.orderedColumnNames.push('');
             this.orderedColumnsAsObject[this.view.orderedColumnNames.length - 1] = '';
             this.constructForms();
             this.disableSave = true;
         }
-        this.showAddBtn = this.forms.length < this.view.descriptor.columns.length;
+        this.showAddBtn = this.forms.length < this.getMaxColumnCount();
     }
     removeColumn(form) {
         var _a;
@@ -10524,7 +10525,7 @@ class TableLayoutDefinerComponent {
         }
         this.mapOrderedColumnsToObject();
         this.constructForms();
-        this.addDisabled = !(this.forms.length < this.view.descriptor.columns.length);
+        this.showAddBtn = this.forms.length < this.getMaxColumnCount();
     }
     getLabelFromColumnMeta(prop) {
         var _a, _b, _c;
@@ -10605,10 +10606,10 @@ class TableLayoutDefinerComponent {
     }
 }
 TableLayoutDefinerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableLayoutDefinerComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-TableLayoutDefinerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableLayoutDefinerComponent, selector: "app-table-layout-definer", viewQueries: [{ propertyName: "formChildren", predicate: ["forms"], descendants: true }], ngImport: i0, template: "<div class=\"edit-columns-container\">\r\n  <div class=\"example-list\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n    <div class=\"column-meta-row\" *ngFor=\"let col of forms\" cdkDrag cdkDragLockAxis=\"y\">\r\n      <smart-icon color=\"primary\" icon=\"drag_handle\"></smart-icon>\r\n      <smartform class=\"form\" #forms [smartForm]=\"col\"></smartform>\r\n      <button\r\n        *ngIf=\"isAlwaysShow(col) && (view?.orderedColumnNames)!.length > 1\"\r\n        (click)=\"removeColumn(col)\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n      >\r\n        <mat-icon>delete_outline</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add-btn\" *ngIf=\"showAddBtn\">\r\n    <button mat-icon-button color=\"primary\" [disabled]=\"addDisabled\" (click)=\"addColumn()\">\r\n      <mat-icon>add</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"button-toolbar\">\r\n    <button mat-button color=\"primary\" (click)=\"cancel()\"> M\u00E9gsem </button>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"disableSave\" (click)=\"submit()\">\r\n      Ment\u00E9s\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".edit-columns-container{padding:1rem;display:flex;flex-direction:column;gap:1rem}.row{display:flex;flex-direction:row;gap:.5rem}.form{flex:1}.fields{padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}.example-list{display:flex;flex-direction:column;gap:1rem;width:500px;max-width:100%;max-height:80vh;overflow:auto}.column-meta-row{display:flex;flex-direction:row;gap:1rem;justify-content:space-between;border:solid 1px #ccc;padding:1rem}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}h2{margin:0}.button-toolbar{display:flex;flex-direction:row;justify-content:space-between;padding:.5rem}.add-btn{display:flex;flex-direction:column;align-items:center}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TableLayoutDefinerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableLayoutDefinerComponent, selector: "app-table-layout-definer", viewQueries: [{ propertyName: "formChildren", predicate: ["forms"], descendants: true }], ngImport: i0, template: "<div class=\"edit-columns-container\">\r\n  <div class=\"example-list\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n    <div class=\"column-meta-row\" *ngFor=\"let col of forms\" cdkDrag cdkDragLockAxis=\"y\">\r\n      <smart-icon color=\"primary\" icon=\"drag_handle\"></smart-icon>\r\n      <smartform class=\"form\" #forms [smartForm]=\"col\"></smartform>\r\n      <button\r\n        *ngIf=\"isAlwaysShow(col) && (view?.orderedColumnNames)!.length > 1\"\r\n        (click)=\"removeColumn(col)\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n      >\r\n        <mat-icon>delete_outline</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add-btn\" *ngIf=\"showAddBtn\">\r\n    <button mat-icon-button color=\"primary\" (click)=\"addColumn()\">\r\n      <mat-icon>add</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"button-toolbar\">\r\n    <button mat-button color=\"primary\" (click)=\"cancel()\"> M\u00E9gsem </button>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"disableSave\" (click)=\"submit()\">\r\n      Ment\u00E9s\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".edit-columns-container{padding:1rem;display:flex;flex-direction:column;gap:1rem}.row{display:flex;flex-direction:row;gap:.5rem}.form{flex:1}.fields{padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}.example-list{display:flex;flex-direction:column;gap:1rem;width:500px;max-width:100%;max-height:80vh;overflow:auto}.column-meta-row{display:flex;flex-direction:row;gap:1rem;justify-content:space-between;border:solid 1px #ccc;padding:1rem}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}h2{margin:0}.button-toolbar{display:flex;flex-direction:row;justify-content:space-between;padding:.5rem}.add-btn{display:flex;flex-direction:column;align-items:center}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableLayoutDefinerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-layout-definer', template: "<div class=\"edit-columns-container\">\r\n  <div class=\"example-list\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n    <div class=\"column-meta-row\" *ngFor=\"let col of forms\" cdkDrag cdkDragLockAxis=\"y\">\r\n      <smart-icon color=\"primary\" icon=\"drag_handle\"></smart-icon>\r\n      <smartform class=\"form\" #forms [smartForm]=\"col\"></smartform>\r\n      <button\r\n        *ngIf=\"isAlwaysShow(col) && (view?.orderedColumnNames)!.length > 1\"\r\n        (click)=\"removeColumn(col)\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n      >\r\n        <mat-icon>delete_outline</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add-btn\" *ngIf=\"showAddBtn\">\r\n    <button mat-icon-button color=\"primary\" [disabled]=\"addDisabled\" (click)=\"addColumn()\">\r\n      <mat-icon>add</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"button-toolbar\">\r\n    <button mat-button color=\"primary\" (click)=\"cancel()\"> M\u00E9gsem </button>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"disableSave\" (click)=\"submit()\">\r\n      Ment\u00E9s\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".edit-columns-container{padding:1rem;display:flex;flex-direction:column;gap:1rem}.row{display:flex;flex-direction:row;gap:.5rem}.form{flex:1}.fields{padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}.example-list{display:flex;flex-direction:column;gap:1rem;width:500px;max-width:100%;max-height:80vh;overflow:auto}.column-meta-row{display:flex;flex-direction:row;gap:1rem;justify-content:space-between;border:solid 1px #ccc;padding:1rem}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}h2{margin:0}.button-toolbar{display:flex;flex-direction:row;justify-content:space-between;padding:.5rem}.add-btn{display:flex;flex-direction:column;align-items:center}\n"] }]
+            args: [{ selector: 'app-table-layout-definer', template: "<div class=\"edit-columns-container\">\r\n  <div class=\"example-list\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n    <div class=\"column-meta-row\" *ngFor=\"let col of forms\" cdkDrag cdkDragLockAxis=\"y\">\r\n      <smart-icon color=\"primary\" icon=\"drag_handle\"></smart-icon>\r\n      <smartform class=\"form\" #forms [smartForm]=\"col\"></smartform>\r\n      <button\r\n        *ngIf=\"isAlwaysShow(col) && (view?.orderedColumnNames)!.length > 1\"\r\n        (click)=\"removeColumn(col)\"\r\n        mat-icon-button\r\n        color=\"primary\"\r\n      >\r\n        <mat-icon>delete_outline</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"add-btn\" *ngIf=\"showAddBtn\">\r\n    <button mat-icon-button color=\"primary\" (click)=\"addColumn()\">\r\n      <mat-icon>add</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"button-toolbar\">\r\n    <button mat-button color=\"primary\" (click)=\"cancel()\"> M\u00E9gsem </button>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"disableSave\" (click)=\"submit()\">\r\n      Ment\u00E9s\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".edit-columns-container{padding:1rem;display:flex;flex-direction:column;gap:1rem}.row{display:flex;flex-direction:row;gap:.5rem}.form{flex:1}.fields{padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}.example-list{display:flex;flex-direction:column;gap:1rem;width:500px;max-width:100%;max-height:80vh;overflow:auto}.column-meta-row{display:flex;flex-direction:row;gap:1rem;justify-content:space-between;border:solid 1px #ccc;padding:1rem}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}h2{margin:0}.button-toolbar{display:flex;flex-direction:row;justify-content:space-between;padding:.5rem}.add-btn{display:flex;flex-direction:column;align-items:center}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -12270,7 +12271,7 @@ 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 }], 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      [smartComponentLayout]=\"layout\"\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid #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</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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.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" }, viewQueries: [{ propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], 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      [smartComponentLayout]=\"layout\"\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid #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</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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.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      [smartComponentLayout]=\"layout\"\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid #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</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
@@ -12285,6 +12286,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], smartFilterList: [{
                 type: ViewChildren,
                 args: ['filter']
+            }], components: [{
+                type: ViewChildren,
+                args: [SmartComponentLayoutComponent]
             }] } });
 
 class SmartComponentLayoutModule {
@@ -13508,6 +13512,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Public API Surface of smarttree
  */
 
+class SmartComponentLayoutUtility {
+    static setParent(layout, parent) {
+        var _a;
+        layout.parentComponent = parent;
+        (_a = layout.components) === null || _a === void 0 ? void 0 : _a.forEach((l) => this.setParent(l, parent));
+    }
+    static getForms(comp) {
+        let result = [];
+        if (comp.components) {
+            result = comp.components
+                .map((c) => this.getForms(c))
+                .reduce((acc, value) => acc.concat(value), []);
+        }
+        if (comp.smartFormComponent) {
+            result.push(comp.smartFormComponent);
+        }
+        return result;
+    }
+    static getGrids(comp) {
+        let result = [];
+        if (comp.components) {
+            result = comp.components
+                .map((c) => this.getGrids(c))
+                .reduce((acc, value) => acc.concat(value), []);
+        }
+        if (comp.smartGridComponent) {
+            result.push(comp.smartGridComponent);
+        }
+        return result;
+    }
+    static getTrees(comp) {
+        var _a;
+        let result = [];
+        if (comp.components) {
+            result = (_a = comp.components) === null || _a === void 0 ? void 0 : _a.map((c) => this.getTrees(c)).reduce((acc, value) => acc.concat(value), []);
+        }
+        if (comp.treeService) {
+            result.push(comp.treeService);
+        }
+        return result;
+    }
+}
+
+/*
+ * Public API Surface of smart-component-layout
+ */
+
 let SmartComponentApiClient = class SmartComponentApiClient {
     constructor(inject, auth, pageName) {
         this.inject = inject;
@@ -13597,16 +13648,12 @@ let SmartComponentApiClient = class SmartComponentApiClient {
     getWidgets() {
         if (this.useQueryLists) {
             let widgets = new WidgetMap();
-            if (this.getAllGridComponents()) {
-                this.getAllGridComponents()
-                    .filter((grid) => { var _a; return (((_a = grid === null || grid === void 0 ? void 0 : grid.smartGrid) === null || _a === void 0 ? void 0 : _a.gridIdentifier) ? true : false); })
-                    .forEach((grid) => widgets.addWidget(grid.smartGrid.gridIdentifier, grid));
-            }
-            if (this.getAllTreeComponents()) {
-                this.getAllTreeComponents()
-                    .filter((tree) => { var _a; return (((_a = tree === null || tree === void 0 ? void 0 : tree.smartTreeModel) === null || _a === void 0 ? void 0 : _a.identifier) ? true : false); })
-                    .forEach((tree) => widgets.addWidget(tree.smartTreeModel.identifier, tree));
-            }
+            this.getAllSmartGridComponents()
+                .filter((grid) => { var _a; return (((_a = grid === null || grid === void 0 ? void 0 : grid.smartGrid) === null || _a === void 0 ? void 0 : _a.gridIdentifier) ? true : false); })
+                .forEach((grid) => widgets.addWidget(grid.smartGrid.gridIdentifier, grid));
+            this.getAllSmartTreeComponents()
+                .filter((tree) => { var _a; return (((_a = tree === null || tree === void 0 ? void 0 : tree.smartTreeModel) === null || _a === void 0 ? void 0 : _a.identifier) ? true : false); })
+                .forEach((tree) => widgets.addWidget(tree.smartTreeModel.identifier, tree));
             return widgets;
         }
         return this.widgets;
@@ -13616,14 +13663,39 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         this.initData();
         this.initActions();
         if (this.useQueryLists) {
-            (_a = this.getAllFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => {
+            (_a = this.getAllSmartFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => {
                 if (form.smartForm) {
                     form.smartForm.componentModel = this.model;
+                    // uses data, valueSets, constraints
                     form.constructForm();
                 }
             });
         }
-        // TODO: layout, valueSet, widgets
+        // TODO: layout, widgets
+    }
+    getAllSmartFormComponents() {
+        var _a, _b, _c;
+        let forms = (_b = (_a = this.getSmartFormsQL()) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : [];
+        (_c = this.getSmartComponentLayoutsQL()) === null || _c === void 0 ? void 0 : _c.forEach((comp) => {
+            forms.push(...SmartComponentLayoutUtility.getForms(comp));
+        });
+        return forms;
+    }
+    getAllSmartGridComponents() {
+        var _a, _b, _c;
+        let grids = (_b = (_a = this.getSmartGridsQL()) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : [];
+        (_c = this.getSmartComponentLayoutsQL()) === null || _c === void 0 ? void 0 : _c.forEach((comp) => {
+            grids.push(...SmartComponentLayoutUtility.getGrids(comp));
+        });
+        return grids;
+    }
+    getAllSmartTreeComponents() {
+        var _a, _b, _c;
+        let trees = (_b = (_a = this.getSmartTreesQL()) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : [];
+        (_c = this.getSmartComponentLayoutsQL()) === null || _c === void 0 ? void 0 : _c.forEach((comp) => {
+            trees.push(...SmartComponentLayoutUtility.getTrees(comp));
+        });
+        return trees;
     }
     initData() {
         var _a, _b;
@@ -13675,7 +13747,7 @@ let SmartComponentApiClient = class SmartComponentApiClient {
             invalidFieldNames: [],
         };
         if (this.useQueryLists) {
-            (_a = this.getAllFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => this.validateForm(form, aggregatedInvalidFields));
+            (_a = this.getAllSmartFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => this.validateForm(form, aggregatedInvalidFields));
         }
         else {
             (_c = (_b = this.formWidgets) === null || _b === void 0 ? void 0 : _b.widgets) === null || _c === void 0 ? void 0 : _c.forEach((form) => this.validateForm(form, aggregatedInvalidFields));
@@ -13751,7 +13823,7 @@ let SmartComponentApiClient = class SmartComponentApiClient {
     submitForms(validate) {
         var _a, _b, _c;
         if (this.useQueryLists) {
-            (_a = this.getAllFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => {
+            (_a = this.getAllSmartFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => {
                 form === null || form === void 0 ? void 0 : form.submitForm(validate);
             });
         }
@@ -13926,7 +13998,7 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         var _a;
         this.setValueDeeply(this.model, changeKey, changes[changeKey]);
         if (this.useQueryLists) {
-            (_a = this.getAllFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => form.refresh());
+            (_a = this.getAllSmartFormComponents()) === null || _a === void 0 ? void 0 : _a.forEach((form) => form.refresh());
         }
         else {
             this.formWidgets.widgets.forEach((formComponent, key) => {
@@ -13997,18 +14069,21 @@ class SmartComponent extends SmartComponentApiClient {
     ngOnDestroy() {
         this._ngOnDestroy();
     }
-    getAllFormComponents() {
-        return this.formComponents;
+    getSmartFormsQL() {
+        return this.smartFormsQL;
     }
-    getAllGridComponents() {
-        return this.gridComponents;
+    getSmartGridsQL() {
+        return this.smartGridsQL;
     }
-    getAllTreeComponents() {
-        return this.treeComponents;
+    getSmartTreesQL() {
+        return this.smartTreesQL;
+    }
+    getSmartComponentLayoutsQL() {
+        return this.smartComponentLayoutsQL;
     }
 }
 SmartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponent, deps: [{ token: i0.Injector }, { token: SmartAuthService }, { token: 'pageName' }], target: i0.ɵɵFactoryTarget.Component });
-SmartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartComponent, selector: "ng-component", viewQueries: [{ propertyName: "formComponents", predicate: SmartformComponent, descendants: true }, { propertyName: "gridComponents", predicate: SmartGridComponent, descendants: true }, { propertyName: "treeComponents", predicate: SmarttreeGenericService, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+SmartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartComponent, selector: "ng-component", viewQueries: [{ propertyName: "smartFormsQL", predicate: SmartformComponent, descendants: true }, { propertyName: "smartGridsQL", predicate: SmartGridComponent, descendants: true }, { propertyName: "smartTreesQL", predicate: SmarttreeGenericService, descendants: true }, { propertyName: "smartComponentLayoutsQL", predicate: SmartComponentLayoutComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponent, decorators: [{
             type: Component,
             args: [{
@@ -14022,15 +14097,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         type: Inject,
                         args: ['pageName']
                     }] }];
-    }, propDecorators: { formComponents: [{
+    }, propDecorators: { smartFormsQL: [{
                 type: ViewChildren,
                 args: [SmartformComponent]
-            }], gridComponents: [{
+            }], smartGridsQL: [{
                 type: ViewChildren,
                 args: [SmartGridComponent]
-            }], treeComponents: [{
+            }], smartTreesQL: [{
                 type: ViewChildren,
                 args: [SmarttreeGenericService]
+            }], smartComponentLayoutsQL: [{
+                type: ViewChildren,
+                args: [SmartComponentLayoutComponent]
             }] } });
 
 class SmartService extends SmartComponentApiClient {
@@ -14043,13 +14121,13 @@ class SmartService extends SmartComponentApiClient {
     ngOnDestroy() {
         this._ngOnDestroy();
     }
-    getAllFormComponents() {
+    getSmartFormsQL() {
         return this.formComponents;
     }
-    getAllGridComponents() {
+    getSmartGridsQL() {
         return this.gridComponents;
     }
-    getAllTreeComponents() {
+    getSmartTreesQL() {
         return this.treeComponents;
     }
 }
@@ -14079,18 +14157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 args: [SmarttreeGenericService]
             }] } });
 
-class SmartComponentLayoutUtility {
-    static setParent(layout, parent) {
-        var _a;
-        layout.parentComponent = parent;
-        (_a = layout.components) === null || _a === void 0 ? void 0 : _a.forEach((l) => this.setParent(l, parent));
-    }
-}
-
-/*
- * Public API Surface of smart-component-layout
- */
-
 class SmartNavbarService {
     constructor() { }
 }