@smartbit4all/ng-client 3.1.58 → 3.1.60

package/fesm2020/smartbit4all-ng-client.mjs

@@ -64,9 +64,9 @@ import * as i2$5 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import { catchError, switchMap } from 'rxjs/operators';
 import * as i2$6 from '@angular/material/tree';
-import { MatTreeNestedDataSource, MatTreeModule } from '@angular/material/tree';
-import { NestedTreeControl } from '@angular/cdk/tree';
-import * as i7$1 from '@angular/material/paginator';
+import { MatTreeNestedDataSource, MatTreeModule, MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
+import { NestedTreeControl, FlatTreeControl } from '@angular/cdk/tree';
+import * as i10$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -9606,6 +9606,7 @@ var SmartLayoutDef;
     SmartLayoutDef["TABLE"] = "TABLE";
     SmartLayoutDef["EXPANDABLE"] = "EXPANDABLE";
     SmartLayoutDef["CARD"] = "CARD";
+    SmartLayoutDef["TREE"] = "TREE";
 })(SmartLayoutDef || (SmartLayoutDef = {}));
 var SmartGridButtonType;
 (function (SmartGridButtonType) {
@@ -9622,7 +9623,13 @@ var SmartGridType;
     SmartGridType["CARD1"] = "CARD1";
     SmartGridType["CARD2"] = "CARD2";
     SmartGridType["CUSTOM"] = "CUSTOM";
-})(SmartGridType || (SmartGridType = {}));
+})(SmartGridType || (SmartGridType = {}));
+// export type SmartGridTreeNode = {
+//   item: string;
+//   level: number;
+//   expandable: boolean;
+//   row: SmartGrid;
+// };
 
 class SmartGridCardComponent {
     constructor(cfService) {
@@ -10254,7 +10261,8 @@ var GridViewDescriptor;
 (function (GridViewDescriptor) {
     GridViewDescriptor.KindEnum = {
         Table: 'TABLE',
-        Expandablecards1: 'EXPANDABLECARDS1'
+        Expandablecards1: 'EXPANDABLECARDS1',
+        Tree: 'TREE'
     };
 })(GridViewDescriptor || (GridViewDescriptor = {}));
 
@@ -10957,6 +10965,22 @@ class SmartGridComponent {
         this.uiActionDescriptors = new Map();
         this.afterViewInitExecuted = false;
         this.isBlocked = true;
+        this.getLevel = (node) => node.level ?? 0;
+        this.isExpandable = (node) => (node.children ? true : false);
+        this.getChildren = (node) => {
+            if (node.children) {
+                let rows = this.smartGrid?.gridModel.page.rows?.filter((row) => node.children?.some((child) => child === row.id));
+                if (rows) {
+                    return rows;
+                }
+            }
+            return [];
+        };
+        this.hasChild = (_, _nodeData) => (_nodeData.children ? true : false);
+        this.transformer = (row, level) => {
+            row.level = level;
+            return row;
+        };
         this.service.gridModelChanged.subscribe(() => {
             // called after every service call (load, save, refresh, etc.)
             this.smartGrid.gridModel = this.service.gridModel;
@@ -11033,6 +11057,9 @@ class SmartGridComponent {
         else if (this.smartGrid.layoutDef === SmartLayoutDef.CARD) {
             this.renderCards();
         }
+        else if (this.smartGrid.layoutDef === SmartLayoutDef.TREE) {
+            this.renderTree();
+        }
         this.isBlocked = false;
     }
     async renderTable() {
@@ -11196,6 +11223,112 @@ class SmartGridComponent {
     renderCards() {
         // TODO
     }
+    renderTree() {
+        if (!this.treeDataSource) {
+            this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
+            this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
+            this.treeDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+            const selectionMode = this.service.gridModel.view?.descriptor?.selectionMode;
+            const isMultiple = selectionMode === GridSelectionMode.Multiple;
+            this.treeChecklistSelection = new SelectionModel(isMultiple);
+        }
+        this.treeDataSource.data = this.smartGrid.gridModel.page.rows.filter((row) => !row.parent);
+        // TODO handle and set selection..
+        this.treeChecklistSelection?.clear();
+        this.treeControl?.dataNodes.forEach((node) => {
+            if (node.selected) {
+                this.treeChecklistSelection?.select(node);
+            }
+        });
+    }
+    getTreeItem(row) {
+        let columns = this.smartGrid?.gridModel.view?.orderedColumnNames;
+        let data = row.data;
+        if (columns && columns.length > 0) {
+            return columns.map((col) => data[col]).join(' ');
+        }
+        return row.id;
+    }
+    /** Toggle the treeNode selection. Select/deselect all the descendants node */
+    treeNodeSelectionToggle(node) {
+        if (!this.treeChecklistSelection) {
+            return;
+        }
+        let selectionBefore = this.treeChecklistSelection.selected.map((row) => row.id);
+        this.treeChecklistSelection.toggle(node);
+        const descendants = this.treeControl.getDescendants(node);
+        this.treeChecklistSelection.isSelected(node)
+            ? this.treeChecklistSelection.select(...descendants)
+            : this.treeChecklistSelection.deselect(...descendants);
+        this.checkAllParentsSelection(node);
+        let selectionAfter = this.treeChecklistSelection.selected.map((row) => row.id);
+        let selectedIds = selectionAfter.filter((s) => !selectionBefore.includes(s));
+        let unselectedIds = selectionBefore.filter((s) => !selectionAfter.includes(s));
+        this.service.gridModel.page.rows
+            ?.filter((row) => selectedIds.includes(row.id))
+            .forEach((row) => (row.selected = true));
+        this.service.gridModel.page.rows
+            ?.filter((row) => unselectedIds.includes(row.id))
+            .forEach((row) => (row.selected = false));
+        let union = selectedIds.concat(unselectedIds);
+        this.onSelectList(union);
+    }
+    checkAllParentsSelection(node) {
+        let parent = this.getParentNode(node);
+        while (parent) {
+            this.checkParentNodeSelection(parent);
+            parent = this.getParentNode(parent);
+        }
+    }
+    checkParentNodeSelection(node) {
+        if (!this.treeChecklistSelection) {
+            return;
+        }
+        const nodeSelected = this.treeChecklistSelection.isSelected(node);
+        const descAllSelected = this.descendantsAllSelected(node);
+        if (nodeSelected && !descAllSelected) {
+            this.treeChecklistSelection.deselect(node);
+        }
+        else if (!nodeSelected && descAllSelected) {
+            this.treeChecklistSelection.select(node);
+        }
+    }
+    /* Get the parent node of a node */
+    getParentNode(node) {
+        const currentLevel = this.getLevel(node);
+        if (currentLevel < 1) {
+            return null;
+        }
+        const startIndex = this.treeControl.dataNodes.indexOf(node) - 1;
+        for (let i = startIndex; i >= 0; i--) {
+            const currentNode = this.treeControl.dataNodes[i];
+            if (this.getLevel(currentNode) < currentLevel) {
+                return currentNode;
+            }
+        }
+        return null;
+    }
+    /** Whether all the descendants of the node are selected. */
+    descendantsAllSelected(node) {
+        if (!this.treeControl || !this.treeChecklistSelection) {
+            return false;
+        }
+        const descendants = this.treeControl.getDescendants(node);
+        const descAllSelected = descendants.length > 0 &&
+            descendants.every((child) => {
+                return this.treeChecklistSelection.isSelected(child);
+            });
+        return descAllSelected;
+    }
+    /** Whether part of the descendants are selected */
+    descendantsPartiallySelected(node) {
+        if (!this.treeControl || !this.treeChecklistSelection) {
+            return false;
+        }
+        const descendants = this.treeControl.getDescendants(node);
+        const result = descendants.some((child) => this.treeChecklistSelection.isSelected(child));
+        return result && !this.descendantsAllSelected(node);
+    }
     async constructHeader() {
         let header = [];
         if (this.smartGrid.gridModel.page.rows && this.smartGrid.gridModel.page.rows.length) {
@@ -11371,9 +11504,17 @@ class SmartGridComponent {
     }
     async onSelect(rowId) {
         this.isBlocked = true;
+        this.onSelectInternal(rowId);
+        this.refresh();
+    }
+    async onSelectInternal(rowId) {
         const row = this.service.gridModel.page.rows?.find((gridRow) => gridRow.id === rowId);
         const viewContextChange = await this.service.select(this.smartGrid, row);
         this.smartGrid.viewContextService.handleChanges(viewContextChange.changes);
+    }
+    async onSelectList(rowIds) {
+        this.isBlocked = true;
+        rowIds.forEach((rowId) => this.onSelectInternal(rowId));
         this.refresh();
     }
     async onSelectAll(selected) {
@@ -11402,10 +11543,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\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}\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: i7$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"] }] });
+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 *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding>\r\n          <button mat-icon-button disabled></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 *matTreeNodeDef=\"let node; when: hasNoContent\" matTreeNodePadding>\r\n          <button mat-icon-button disabled></button>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>New item...</mat-label>\r\n            <input matInput #itemValue placeholder=\"Ex. Lettuce\" />\r\n          </mat-form-field>\r\n          <button mat-button (click)=\"saveNode(node, itemValue.value)\">Save</button>\r\n        </mat-tree-node> -->\r\n\r\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n          <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.item\">\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          <!--             [checked]=\"descendantsAllSelected(node)\" -->\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}\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\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}\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 *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding>\r\n          <button mat-icon-button disabled></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 *matTreeNodeDef=\"let node; when: hasNoContent\" matTreeNodePadding>\r\n          <button mat-icon-button disabled></button>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>New item...</mat-label>\r\n            <input matInput #itemValue placeholder=\"Ex. Lettuce\" />\r\n          </mat-form-field>\r\n          <button mat-button (click)=\"saveNode(node, itemValue.value)\">Save</button>\r\n        </mat-tree-node> -->\r\n\r\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n          <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.item\">\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          <!--             [checked]=\"descendantsAllSelected(node)\" -->\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}\n"] }]
         }], ctorParameters: function () { return [{ type: SmartGridService }, { type: ComponentFactoryService }, { type: i1$2.MatDialog }]; }, propDecorators: { smartGrid: [{
                 type: Input
             }], uuid: [{
@@ -11445,6 +11586,8 @@ SmartGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         MatIconModule,
         MatButtonModule,
         MatPaginatorModule,
+        MatTreeModule,
+        MatCheckboxModule,
         SmartExpandableSectionModule,
         DragDropModule,
         SmartformModule,
@@ -11456,6 +11599,8 @@ SmartGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             MatIconModule,
             MatButtonModule,
             MatPaginatorModule,
+            MatTreeModule,
+            MatCheckboxModule,
             SmartExpandableSectionModule,
             DragDropModule,
             SmartformModule,
@@ -11477,6 +11622,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         MatIconModule,
                         MatButtonModule,
                         MatPaginatorModule,
+                        MatTreeModule,
+                        MatCheckboxModule,
                         SmartExpandableSectionModule,
                         DragDropModule,
                         SmartformModule,
@@ -12724,10 +12871,10 @@ class SmartFilterParamsComponent {
     }
 }
 SmartFilterParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: { service: "service" }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"targetGroupFilterParamsContainer\" *ngIf=\"!service.model?.showGroups\">\r\n  <ng-template #smartFilter></ng-template>\r\n  <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { 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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SmartFilterParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: { service: "service" }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <ng-template #smartFilter></ng-template>\r\n  <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { 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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-filter-group-params', template: "<div class=\"targetGroupFilterParamsContainer\" *ngIf=\"!service.model?.showGroups\">\r\n  <ng-template #smartFilter></ng-template>\r\n  <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
+            args: [{ selector: 'smart-filter-group-params', template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <ng-template #smartFilter></ng-template>\r\n  <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { service: [{
                 type: Input
             }], filterVcRef: [{