@one-paragon/angular-utilities 2.0.22 → 2.0.24

package/fesm2022/one-paragon-angular-utilities.mjs

@@ -4,7 +4,7 @@ import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switch
 import * as i1 from 'rxjs';
 import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, pipe, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp } from 'rxjs';
 import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-import { isFunction, merge as merge$1, get, sumBy, difference, intersection, groupBy, orderBy, set } from 'lodash';
+import { isFunction, merge as merge$1, get, sumBy, difference, groupBy, intersection, orderBy, set } from 'lodash';
 import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { CdkColumnDef } from '@angular/cdk/table';
@@ -19,7 +19,7 @@ import * as i3 from '@angular/forms';
 import { NgControl, NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i9 from '@angular/material/core';
 import { MatOption } from '@angular/material/core';
-import { DatePipe, CurrencyPipe, KeyValuePipe, NgTemplateOutlet, formatDate, formatCurrency, DecimalPipe, CommonModule, AsyncPipe } from '@angular/common';
+import { DatePipe, CurrencyPipe, KeyValuePipe, NgTemplateOutlet, formatDate, formatCurrency, DecimalPipe, formatNumber, CommonModule, AsyncPipe } from '@angular/common';
 import { ComponentStore } from '@ngrx/component-store';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDropList, CDK_DROP_LIST, transferArrayItem } from '@angular/cdk/drag-drop';
@@ -928,6 +928,9 @@ function parseTbSizeToPixels(size) {
     return undefined;
 }
 
+function isGroupHeader(data) {
+    return !!data?.isGroupHeader;
+}
 class KeysToDelete {
     initializationState = null;
     metaData = null;
@@ -3758,6 +3761,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
+const supportsGroupBy = typeof Object.groupBy === 'function';
+function getGroupedData(data, groupByKeys) {
+    return tbGroupBy(data, groupByKeys);
+}
+const tbGroupBy = (data, groupByKeys, level = 1, parentGroupName) => {
+    const currentKey = groupByKeys[0];
+    const groupedDataArr = groupData(currentKey, data, level, parentGroupName);
+    const remainingGroupByKeys = groupByKeys.slice(1);
+    const hasChildrenGroups = !!remainingGroupByKeys.length;
+    if (hasChildrenGroups) {
+        //group the children by iterating over each group and grouping it by the next keys
+        const groupOfGroups = groupedDataArr.map((group) => {
+            const children = group.children;
+            const groupGroup = {
+                groupName: group.groupName,
+                groupHeaderDisplay: group.groupHeaderDisplay,
+                uniqueName: group.uniqueName,
+                key: currentKey,
+                hasTheData: false,
+                isGroupHeader: true,
+                padding: group.padding,
+                level: group.level,
+                length: group.length,
+                groups: tbGroupBy(children, remainingGroupByKeys, level + 1, group.groupName),
+                [initIndexSymbol]: group[initIndexSymbol],
+            };
+            return groupGroup;
+        });
+        return groupOfGroups;
+    }
+    return groupedDataArr;
+};
+function groupData(groupByKey, groupData, level = 1, parentGroupName) {
+    const groupedDataDict = supportsGroupBy ? Object.groupBy(groupData, d => d[groupByKey]) : groupBy(groupData, groupByKey);
+    const groupedDataArr = Object.entries(groupedDataDict).map(([name, groupData]) => {
+        const uniqueName = parentGroupName ? `${parentGroupName}-${name}` : `${name}`;
+        return {
+            isGroupHeader: true,
+            groupHeaderDisplay: name,
+            hasTheData: true,
+            children: groupData,
+            groupName: `tb_group_${uniqueName}`,
+            padding: 1 + (20 * (level - 1)),
+            key: groupByKey,
+            length: groupData.length,
+            uniqueName,
+            level,
+            [initIndexSymbol]: uniqueName,
+        };
+    });
+    return groupedDataArr;
+}
+function updateGroupByState(groupedData, { data, groups, expanded }, firstRun) {
+    if (firstRun
+        || dataUpdated(data, groups, expanded)
+        || groupsUpdated(groups, expanded)) {
+        groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
+    }
+    const newDisplayData = expanded.value.length === 0
+        ? groupedData
+        : groupedData.map(group => mapGroupHeader(group, expanded.value.flatMap(g => g.expandedHeaders))).flat();
+    return ({ displayData: newDisplayData, groupedData });
+}
+function mapGroupHeader(obj, expandedHeaders) {
+    const showChildren = expandedHeaders === true || expandedHeaders.includes(obj.groupName);
+    const children = !showChildren ? [] :
+        obj.hasTheData ? obj.children
+            : obj.groups.map(a => mapGroupHeader(a, expandedHeaders));
+    return [obj, ...children].flat();
+}
+function dataUpdated(data, groups, expandedGroups) {
+    return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
+}
+function groupsUpdated(groups, expandedGroups) {
+    return groups.timestamp >= expandedGroups.timestamp;
+}
+;
+const initialGroupByState = { displayData: [], groupedData: [] };
+const getAllGroupHeaderNames = (data) => {
+    const groups = getGroupHeaders(data, (d) => d.isGroupHeader);
+    const a = supportsGroupBy ? Object.groupBy(groups, group => group.key) : groupBy(groups, 'key');
+    return Object.entries(a).reduce((names, [key, groups]) => {
+        names[key] = groups.map(g => ({ groupName: g.groupName, key: g.key }));
+        return names;
+    }, {});
+};
+const getAllGroupHeaderNamesByKeys = (data, keys) => {
+    const groups = getGroupHeaders(data, (d) => d.isGroupHeader && keys.includes(d.key));
+    return supportsGroupBy ? Object.groupBy(groups, group => group.key) : groupBy(groups, 'key');
+};
+const getGroupHeaders = (data, filterFunc, arr = []) => {
+    const headers = data.filter(filterFunc);
+    arr.push(...headers);
+    headers.forEach(h => { if (h.hasTheData === false && !!h.groups.length)
+        getGroupHeaders(h.groups, filterFunc, arr); });
+    return arr;
+};
+
 class GenericTableComponent {
     state = inject(TableStore);
     dataStore = inject(DataStore);
@@ -3932,7 +4033,7 @@ class GenericTableComponent {
     $isAllSelected = computed(() => {
         this.$selectionChange();
         const selected = this.$selection()?.selected;
-        if (!selected)
+        if (!selected?.length)
             return false;
         return this.$selectableData()?.length === selected.length;
     });
@@ -3941,9 +4042,17 @@ class GenericTableComponent {
         this.$selectionChange();
         return !!this.$selection()?.selected.length && !this.$masterToggleChecked();
     });
+    $paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator');
     $selectableData = computed(() => {
-        if (this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator') {
+        const isGrouped = !!this.state.$groupByKeys().length;
+        this.state.$expandGroups();
+        if (this.$paginated()) {
             const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
+            if (isGrouped) {
+                const onScreen = this.$dataSource().data.slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
+                const nested = onScreen.flatMap((group) => (group.isGroupHeader && !this.state.$getIsExpanded(group.key, group.groupName)()) ? mapGroupHeader(group, true) : []);
+                return onScreen.concat(nested).filter(row => !row.isGroupHeader);
+            }
             return this.$data().slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
         }
         else if (this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all') {
@@ -3951,6 +4060,16 @@ class GenericTableComponent {
         }
         return [];
     });
+    $selectAllMessage = computed(() => {
+        if (this.$isAllSelected())
+            return `Deselect all ${this.$selection().selected.length} selected`;
+        const selectable = formatNumber(this.$selectableData().length, 'en-US');
+        let message = `Select all ${selectable}`;
+        if (this.$paginated()) {
+            message += ' on this page';
+        }
+        return message;
+    });
     #onSelectableDataChangeEffect = effect(() => {
         const selectableData = this.$selectableData();
         untracked(() => {
@@ -3987,16 +4106,16 @@ class GenericTableComponent {
             }
         }
     });
-    getTransform = (key, val) => {
+    getTransform = (key, val) => computed(() => {
         if (val == undefined || val === 'null')
             return '';
         try {
             return createTransformer(this.state.$getMetaData(key)(), this.config, true, true)({ [`${key}`]: val });
         }
         catch (error) {
-            return val;
+            return signal(val);
         }
-    };
+    });
     $rowHeight = computed(() => {
         if (this.state.$userDefinedRowHeight()) {
             return this.state.$userDefinedRowHeight() + 'px';
@@ -4046,15 +4165,52 @@ class GenericTableComponent {
     $stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
     $rowStyles = computed(() => this.state.$tableSettings().rowStyles || {});
     $rowClasses = computed(() => this.state.$tableSettings().rowClasses || {});
+    allOfGroupSelected = (uniqueName) => computed(() => {
+        //make sure signal is marked dirty when selection or over all data changes
+        this.$selectionChange();
+        this.$data();
+        const header = this.$dataSource().data.find(d => isGroupHeader(d) && d.uniqueName === uniqueName);
+        const children = mapGroupHeader(header, true).filter(i => !isGroupHeader(i));
+        if (!children.length)
+            return { containsAll: false, containsSome: false, length: 0 };
+        let containsAll = true;
+        let containsSome = false;
+        for (var a of children) {
+            const contains = this.$selection().isSelected(a);
+            if (contains)
+                containsSome = true;
+            else
+                containsAll = false;
+            if (!containsAll && containsSome)
+                break;
+        }
+        return { containsAll, containsSome, length: children.length };
+    });
+    toggleGroup = (uniqueName, allSelected) => {
+        const header = this.$dataSource().data.find(d => isGroupHeader(d) && d.uniqueName === uniqueName);
+        const children = mapGroupHeader(header, true).filter(i => !isGroupHeader(i));
+        if (allSelected) {
+            this.$selection().deselect(...children);
+        }
+        else {
+            this.$selection().select(...children);
+        }
+    };
+    toggleGroupMessage = (amountOfItems, allSelected) => {
+        if (allSelected)
+            return `Deselect all in this group`;
+        const selectable = formatNumber(amountOfItems, 'en-US');
+        return `Select all ${selectable} in this group`;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n  />\r\n\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\" [matTooltip]=\"$selectAllMessage()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\"\r\n            [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\" >\r\n          </mat-checkbox>\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ (getTransform | func : row.key :  row.groupHeaderDisplay)() }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n  />\r\n\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
                         MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective
-                    ], template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n  />\r\n\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
+                    ], template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\" [matTooltip]=\"$selectAllMessage()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\"\r\n            [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\" >\r\n          </mat-checkbox>\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ (getTransform | func : row.key :  row.groupHeaderDisplay)() }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n  />\r\n\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
         }] });
 
 function downloadData(data, filename, mimeType) {
@@ -4434,78 +4590,6 @@ function patchDirectiveFromState(directive, stateFilter) {
     }
 }
 
-function getGroupedData(data, groupByKeys) {
-    return tbGroupBy(data, groupByKeys);
-}
-const tbGroupBy = (data, groupByKeys, parentGroupName) => {
-    const currentKey = groupByKeys[0];
-    const res = groupBy(data, currentKey);
-    const remainingGroupByKeys = groupByKeys.slice(1);
-    const finalGroups = !remainingGroupByKeys.length;
-    if (remainingGroupByKeys.length) {
-        Object.keys(res).forEach(key => res[key] = tbGroupBy(res[key], remainingGroupByKeys, key));
-    }
-    return Object.keys(res).map((groupName, i) => {
-        const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
-        const groupHeaders = res[groupName]?.filter(row => row.isGroupHeader) ?? [];
-        return {
-            isGroupHeader: true,
-            groupHeaderDisplay: groupName,
-            hasTheData: finalGroups,
-            children: finalGroups ? res[groupName] : res[groupName].map(d => { d.padding += 20; return d; }),
-            groupName: `tb_group_${uniqName}`,
-            padding: 1,
-            key: currentKey,
-            length: groupHeaders.reduce((acc, curr) => curr.length + acc, 0) + ((res[groupName] ?? []).length - groupHeaders.length),
-            [initIndexSymbol]: uniqName,
-        };
-    });
-};
-function updateGroupByState(groupedData, { data, groups, expanded }, firstRun) {
-    if (firstRun
-        || dataUpdated(data, groups, expanded)
-        || groupsUpdated(groups, expanded)) {
-        groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
-    }
-    const newDisplayData = expanded.value.length === 0
-        ? groupedData
-        : groupedData.map(group => mapGroupHeader(group, expanded.value)).flat();
-    return ({ displayData: newDisplayData, groupedData });
-}
-function _updateGroupByState({ groupedData }, [data, groups, expanded], index) {
-    return updateGroupByState(groupedData, { data, groups, expanded }, index === 0);
-}
-function mapGroupHeader(obj, data) {
-    const showChildren = data.find(a => a.expandedHeaders.includes(obj.groupName));
-    const children = !showChildren ? [] :
-        obj.hasTheData ? obj.children
-            : obj.children.map(a => mapGroupHeader(a, data));
-    return [obj, ...children].flat();
-}
-function dataUpdated(data, groups, expandedGroups) {
-    return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
-}
-function groupsUpdated(groups, expandedGroups) {
-    return groups.timestamp > expandedGroups.timestamp;
-}
-;
-const initialGroupByState = { displayData: [], groupedData: [] };
-const getAllGroupHeaderNames = (data) => {
-    const groups = getGroupHeaders(data, (d) => d.isGroupHeader);
-    return groupBy(groups, 'key');
-};
-const getAllGroupHeaderNamesByKeys = (data, keys) => {
-    const groups = getGroupHeaders(data, (d) => d.isGroupHeader && keys.includes(d.key));
-    return groupBy(groups, 'key');
-};
-const getGroupHeaders = (data, filterFunc, arr = []) => {
-    const headers = data.filter(filterFunc);
-    arr.push(...headers);
-    headers.forEach(h => { if (!!h.children.length)
-        getGroupHeaders(h.children, filterFunc, arr); });
-    return arr;
-};
-
 function sortData(data, sorted) {
     const ordered = orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction));
     return ordered;
@@ -5493,11 +5577,13 @@ class TableContainerComponent {
         const groupHeaderHeight = this.$groupHeaderHeight();
         return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight });
     });
-    #initTableBuilderIfNeeded = effect(() => {
+    #initTableBuilder = effect(() => {
         const tb = this.$tableBuilder();
         untracked(() => {
-            if (tb)
-                this.$tableBuilder()?.prep(this.injector);
+            if (tb) {
+                tb?.prep(this.injector);
+                tb.container.set(this);
+            }
         });
     });
     #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
@@ -5809,36 +5895,37 @@ class TableBuilder {
     #$metaData;
     #$data;
     #$settings;
+    container = signal(undefined);
     $metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined);
     $settings = computed(() => this.$initialized() ? this.#$settings() : undefined);
-    $metaNeedsPrep = signal(false);
-    $dataIsObservable = signal(false);
-    $settingsIsObservable = signal(false);
-    $needsPrep = computed(() => this.$dataIsObservable() || this.$metaNeedsPrep() || this.$settingsIsObservable());
+    #$metaNeedsPrep = signal(false);
+    #$dataIsObservable = signal(false);
+    #$settingsIsObservable = signal(false);
+    #$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable());
     $initialized = signal(false);
     constructor(data, metaData, settings = new GeneralTableSettings()) {
         this.data = data;
         this.metaData = metaData;
         this.settings = settings;
         if (isObservable(data)) {
-            this.$dataIsObservable.set(true);
+            this.#$dataIsObservable.set(true);
         }
         else {
             this.#$data = isSignal(data) ? data : signal(data);
         }
         if (isObservable(metaData) || !metaData) {
-            this.$metaNeedsPrep.set(true);
+            this.#$metaNeedsPrep.set(true);
         }
         else {
             this.#$metaData = isSignal(metaData) ? metaData : signal(metaData);
         }
         if (isObservable(settings)) {
-            this.$settingsIsObservable.set(true);
+            this.#$settingsIsObservable.set(true);
         }
         else {
             this.#$settings = isSignal(settings) ? settings : signal(settings);
         }
-        if (!this.$needsPrep()) {
+        if (!this.#$needsPrep()) {
             this.$initialized.set(true);
         }
         else {
@@ -5851,13 +5938,13 @@ class TableBuilder {
         }
     }
     prep(injector) {
-        if (this.$settingsIsObservable()) {
+        if (this.#$settingsIsObservable()) {
             this.#$settings = toSignal(this.settings, { injector, requireSync: true });
         }
-        if (this.$dataIsObservable()) {
+        if (this.#$dataIsObservable()) {
             this.#$data = toSignal(this.data, { injector, initialValue: [] });
         }
-        if (this.$metaNeedsPrep()) {
+        if (this.#$metaNeedsPrep()) {
             if (this.metaData) {
                 this.#$metaData = toSignal(this.metaData, { injector, initialValue: [] });
             }