@smartbit4all/ng-client 3.1.78 → 3.1.80

package/fesm2020/smartbit4all-ng-client.mjs

@@ -7761,7 +7761,7 @@ class UiActionService {
         };
         if (uiAction.submit || uiAction.model) {
             // submit: with validation, model: without validation. both can be undefined
-            const validate = !uiAction.model;
+            const validate = uiAction.submit || !uiAction.model;
             if ('reSubscribeToChange' in this.uiActionModel.serviceToUse) {
                 if (!validate) {
                     console.error(`Validate = false, but UseUiAction doesn't support it`);
@@ -11573,10 +11573,10 @@ class SmartGridComponent {
     }
 }
 SmartGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartGridComponent, deps: [{ token: SmartGridService }, { token: ComponentFactoryService }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-SmartGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;grid-gap:1rem;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-edit-button{display:flex;flex-direction:row;justify-content:flex-end}.tree-button{width:24px!important;height:24px!important}\n"], components: [{ 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: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid"] }, { type: i2$6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i2$6.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i2$6.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i2$6.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }] });
+SmartGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;grid-gap:1rem;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-edit-button{display:flex;flex-direction:row;justify-content:flex-end}.tree-button{width:24px!important;height:24px!important}\n"], components: [{ 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: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid"] }, { type: i2$6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i2$6.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i2$6.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i2$6.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;grid-gap:1rem;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-edit-button{display:flex;flex-direction:row;justify-content:flex-end}.tree-button{width:24px!important;height:24px!important}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-edit-button\" *ngIf=\"smartGrid.showEditColumns\">\r\n    <button (click)=\"editColumns()\" mat-raised-button color=\"primary\">\r\n      Oszlopok testreszab\u00E1sa\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;grid-gap:1rem;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-edit-button{display:flex;flex-direction:row;justify-content:flex-end}.tree-button{width:24px!important;height:24px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: SmartGridService }, { type: ComponentFactoryService }, { type: i1$2.MatDialog }]; }, propDecorators: { smartGrid: [{
                 type: Input
             }], uuid: [{
@@ -13370,6 +13370,7 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         // Contained Widgets
         this.widgets = new WidgetMap();
         this.formWidgets = new WidgetMap();
+        this.useQueryLists = false;
         this.detectChange.subscribe((change) => {
             this.handleChanges(change);
         });
@@ -13391,7 +13392,7 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         }
         this._uuid = uuid;
         if (uuid) {
-            this.widgets.widgets.forEach((ref, key) => {
+            this.getWidgets().widgets.forEach((ref, key) => {
                 if (ref instanceof SmartGridComponent) {
                     ref.uuid = uuid;
                 }
@@ -13443,6 +13444,23 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         this._destroy$.next();
         this._destroy$.complete();
     }
+    getWidgets() {
+        if (this.useQueryLists) {
+            let widgets = new WidgetMap();
+            if (this.getAllGridComponents()) {
+                this.getAllGridComponents()
+                    .filter((grid) => (grid?.smartGrid?.gridIdentifier ? true : false))
+                    .forEach((grid) => widgets.addWidget(grid.smartGrid.gridIdentifier, grid));
+            }
+            if (this.getAllTreeComponents()) {
+                this.getAllTreeComponents()
+                    .filter((tree) => (tree?.smartTreeModel?.identifier ? true : false))
+                    .forEach((tree) => widgets.addWidget(tree.smartTreeModel.identifier, tree));
+            }
+            return widgets;
+        }
+        return this.widgets;
+    }
     initComponentByModel() {
         this.initData();
         this.initActions();
@@ -13490,15 +13508,21 @@ let SmartComponentApiClient = class SmartComponentApiClient {
             invalidFieldKeys: [],
             invalidFieldNames: [],
         };
-        for (let entry of this.formWidgets.widgets) {
-            let invalidFieldsOfForm = entry[1]?.getInvalidFields();
-            if (invalidFieldsOfForm) {
-                invalidFieldsOfForm.invalidFieldKeys.forEach((key) => aggregatedInvalidFields.invalidFieldKeys.push(key));
-                invalidFieldsOfForm.invalidFieldNames.forEach((key) => aggregatedInvalidFields.invalidFieldNames.push(key));
-            }
+        if (this.useQueryLists) {
+            this.getAllFormComponents()?.forEach((form) => this.validateForm(form, aggregatedInvalidFields));
+        }
+        else {
+            this.formWidgets?.widgets?.forEach((form) => this.validateForm(form, aggregatedInvalidFields));
         }
         return aggregatedInvalidFields;
     }
+    validateForm(form, aggregatedInvalidFields) {
+        let invalidFieldsOfForm = form?.getInvalidFields();
+        if (invalidFieldsOfForm) {
+            invalidFieldsOfForm.invalidFieldKeys.forEach((key) => aggregatedInvalidFields.invalidFieldKeys.push(key));
+            invalidFieldsOfForm.invalidFieldNames.forEach((key) => aggregatedInvalidFields.invalidFieldNames.push(key));
+        }
+    }
     //#region UseUiAction
     getAdditionalParams(uiAction) {
         return {
@@ -13557,9 +13581,12 @@ let SmartComponentApiClient = class SmartComponentApiClient {
      * Submits all the registered forms in the SmartComponent
      */
     submitForms(validate) {
-        this.formWidgets?.widgets?.forEach((form) => {
-            form?.submitForm(validate);
-        });
+        if (this.useQueryLists) {
+            this.getAllFormComponents()?.forEach((form) => form?.submitForm(validate));
+        }
+        else {
+            this.formWidgets?.widgets?.forEach((form) => form?.submitForm(validate));
+        }
     }
     addGrid(smartGrid, options, useAsDefaultGrid, componentReference) {
         smartGrid.options = options;
@@ -13567,7 +13594,9 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         smartGrid.uiActionDescriptorService = this.uiActionDescriptorService;
         smartGrid.serviceToUse = this;
         smartGrid.viewContextService = this.viewContext;
-        this.widgets.addWidget(smartGrid.gridIdentifier, componentReference);
+        if (!this.useQueryLists) {
+            this.widgets.addWidget(smartGrid.gridIdentifier, componentReference);
+        }
         if (useAsDefaultGrid) {
             this.smartGrid = smartGrid;
             return this.smartGrid;
@@ -13575,7 +13604,9 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         return smartGrid;
     }
     addForm(smartFormId, smartForm, componentReference) {
-        this.formWidgets.addWidget(smartFormId, componentReference);
+        if (!this.useQueryLists) {
+            this.formWidgets.addWidget(smartFormId, componentReference);
+        }
         // if (this.sendDataChanges && componentReference) {
         //   smartForm.useOnValueChangeEvent = true;
         //   componentReference.sophisticatedValueChange
@@ -13587,12 +13618,13 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         return smartForm;
     }
     setUpDefaultTree(treeId) {
-        this.smartTreeService = new SmarttreeGenericService(this.inject, this.pageName, treeId);
-        this.widgets.addWidget(treeId, this.smartTreeService);
+        this.smartTreeService = this.createTreeService(treeId);
     }
     createTreeService(treeId) {
         const treeService = new SmarttreeGenericService(this.inject, this.pageName, treeId);
-        this.widgets.addWidget(treeId, treeService);
+        if (!this.useQueryLists) {
+            this.widgets.addWidget(treeId, treeService);
+        }
         return treeService;
     }
     addFileUploader(uiActionCode, fileFormats, maxSizeMb, isMultiple) {
@@ -13671,8 +13703,9 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         }
     }
     handleChangeWidgets(changedWidgets) {
+        let widgets = this.getWidgets();
         changedWidgets.forEach((key) => {
-            const reference = this.widgets.get(key);
+            const reference = widgets.get(key);
             if (reference instanceof SmartGridComponent) {
                 reference.refresh();
             }
@@ -13708,14 +13741,19 @@ let SmartComponentApiClient = class SmartComponentApiClient {
     }
     handleDataChange(changes, changeKey) {
         this.setValueDeeply(this.model, changeKey, changes[changeKey]);
-        this.formWidgets.widgets.forEach((formComponent, key) => {
-            if (formComponent === undefined) {
-                console.error(`Provided form reference for ${key} is undefined.`);
-            }
-            else {
-                formComponent.refresh();
-            }
-        });
+        if (this.useQueryLists) {
+            this.getAllFormComponents()?.forEach((form) => form.refresh());
+        }
+        else {
+            this.formWidgets.widgets.forEach((formComponent, key) => {
+                if (formComponent === undefined) {
+                    console.error(`Provided form reference for ${key} is undefined.`);
+                }
+                else {
+                    formComponent.refresh();
+                }
+            });
+        }
     }
     handleLayoutChange(changes, changeKey) {
         let layoutKey = changeKey.split('.')[1];
@@ -13775,9 +13813,18 @@ class SmartComponent extends SmartComponentApiClient {
     ngOnDestroy() {
         this._ngOnDestroy();
     }
+    getAllFormComponents() {
+        return this.formComponents;
+    }
+    getAllGridComponents() {
+        return this.gridComponents;
+    }
+    getAllTreeComponents() {
+        return this.treeComponents;
+    }
 }
 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", 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: "formComponents", predicate: SmartformComponent, descendants: true }, { propertyName: "gridComponents", predicate: SmartGridComponent, descendants: true }, { propertyName: "treeComponents", predicate: SmarttreeGenericService, 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: [{
@@ -13789,7 +13836,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['pageName']
-                }] }]; } });
+                }] }]; }, propDecorators: { formComponents: [{
+                type: ViewChildren,
+                args: [SmartformComponent]
+            }], gridComponents: [{
+                type: ViewChildren,
+                args: [SmartGridComponent]
+            }], treeComponents: [{
+                type: ViewChildren,
+                args: [SmarttreeGenericService]
+            }] } });
 
 class SmartService extends SmartComponentApiClient {
     constructor(inject, auth, pageName) {
@@ -13801,6 +13857,15 @@ class SmartService extends SmartComponentApiClient {
     ngOnDestroy() {
         this._ngOnDestroy();
     }
+    getAllFormComponents() {
+        return this.formComponents;
+    }
+    getAllGridComponents() {
+        return this.gridComponents;
+    }
+    getAllTreeComponents() {
+        return this.treeComponents;
+    }
 }
 SmartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartService, deps: [{ token: i0.Injector }, { token: SmartAuthService }, { token: 'pageName' }], target: i0.ɵɵFactoryTarget.Injectable });
 SmartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartService, providedIn: 'root' });
@@ -13815,7 +13880,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['pageName']
-                }] }]; } });
+                }] }]; }, propDecorators: { formComponents: [{
+                type: ViewChildren,
+                args: [SmartformComponent]
+            }], gridComponents: [{
+                type: ViewChildren,
+                args: [SmartGridComponent]
+            }], treeComponents: [{
+                type: ViewChildren,
+                args: [SmarttreeGenericService]
+            }] } });
 
 class SmartComponentLayoutUtility {
     static setParent(layout, parent) {