@one-paragon/angular-utilities 2.5.3 → 2.5.4-beta.1

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

@@ -920,6 +920,7 @@ class TableSettings {
         this.groupHeaderHeight = undefined;
         this.rowClick = undefined;
         this.exportSettings = undefined;
+        this.groupBySettings = [];
     }
 }
 class PersistedTableSettings {
@@ -959,6 +960,7 @@ class NotPersistedTableSettings {
         this.headerHeight = undefined;
         this.rowClick = undefined;
         this.exportSettings = undefined;
+        this.groupBySettings = [];
     }
     merge(tableSettings) {
         const newNpts = merge$1(this, new NotPersistedTableSettings());
@@ -984,6 +986,7 @@ class NotPersistedTableSettings {
             newNpts.rowStyles = tableSettings.tableSettings?.rowStyles ?? newNpts.rowStyles;
             newNpts.rowClick = tableSettings.tableSettings?.rowClick ?? newNpts.rowClick;
             newNpts.exportSettings = tableSettings.tableSettings?.exportSettings ?? newNpts.exportSettings;
+            newNpts.groupBySettings = tableSettings.tableSettings?.groupBySettings ?? newNpts.groupBySettings ?? [];
             if (tableSettings.tableSettings?.virtualScrollSettings) {
                 const currVirt = tableSettings.tableSettings?.virtualScrollSettings || newNpts.virtualSettings;
                 if (!currVirt.headerHeight) {
@@ -2940,6 +2943,28 @@ class TableStore extends ComponentStore {
             const state = this.state();
             return mapSaveableState(state);
         });
+        //#region meta order and hidden
+        this.showColumn = this.updater((state, key) => ({
+            ...state,
+            hiddenKeys: state.hiddenKeys.filter(k => k !== key),
+        }));
+        this.hideColumn = this.updater((state, key) => ({
+            ...state,
+            hiddenKeys: [...state.hiddenKeys.filter(k => k !== key), key],
+        }));
+        this.setHiddenColumns = this.updater((state, displayCols) => {
+            return ({ ...state, hiddenKeys: displayCols.filter(d => !d.visible).map(d => d.key) });
+        });
+        this.setUserDefinedOrder = this.updater((state, moved) => {
+            const { newOrder, oldOrder } = moved;
+            const mdsArr = orderedStateVisibleMetaData(state);
+            moveItemInArray(mdsArr, oldOrder, newOrder);
+            const userDefinedOrder = mdsArr.reduce((aggregate, current, index) => {
+                aggregate[current.key] = index;
+                return aggregate;
+            }, {});
+            return ({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } });
+        });
         this.$userDefinedOrder = this.selectSignal(state => state.userDefined.order);
         this.metaData$ = this.select(state => state.metaData);
         this.$metaData = this.selectSignal(state => state.metaData);
@@ -2953,15 +2978,87 @@ class TableStore extends ComponentStore {
         });
         this.$hiddenKeys = this.selectSignal(state => state.hiddenKeys);
         this.$orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys, (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
+        //#endregion meta order and hidden
+        //#region widths
+        this.setUserDefinedWidth = this.updater((state, colWidths) => {
+            const userDefinedWidths = { ...state.userDefined.widths };
+            colWidths.forEach(cw => {
+                userDefinedWidths[cw.key] = cw.widthInPixel;
+            });
+            return { ...state, userDefined: { ...state.userDefined, widths: userDefinedWidths } };
+        });
+        this.setTableWidth = this.updater((state, widthInPixels) => ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
         this.$getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
         this.$tableSettingsMinWidth = this.selectSignal(state => parseTbSizeToPixels(state.notPersistedTableSettings.minColumnWidth));
         this.$getUserDefinedWidth = (key) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
+        this.$getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
+        this.getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
+        //#endregion widths
+        //#region filter
+        this.addFilter = this.updater((state, filter) => {
+            return this.addFiltersToState(state, [filter]);
+        });
+        this.addFilters = this.updater((state, filters) => {
+            return this.addFiltersToState(state, filters);
+        });
+        this.removeFilter = this.updater((state, filterId) => {
+            const filtersCopy = { ...state.filters };
+            delete filtersCopy[filterId];
+            return ({ ...state, filters: filtersCopy });
+        });
+        this.removeFilters = this.updater((state, filterIds) => {
+            const filtersCopy = { ...state.filters };
+            filterIds.forEach(id => { delete filtersCopy[id]; });
+            return ({ ...state, filters: filtersCopy });
+        });
+        this.clearFilters = this.updater((state) => ({ ...state, filters: {} }));
+        this.addFiltersToState = (state, filters) => {
+            var customFilters = filters.filter(isCustomFilter);
+            var filterInfos = filters.filter(isFilterInfo);
+            const filtersObj = filterInfos
+                .filter(fltr => Object.keys(state.metaData).some(key => key === fltr.key) || console.warn(`Meta data with key ${fltr.key} not found`))
+                .reduce((filtersObj, filter) => {
+                if (!filter.filterId) {
+                    filter.filterId = crypto.randomUUID();
+                }
+                filtersObj[filter.filterId] = filter;
+                return filtersObj;
+            }, {});
+            customFilters.forEach(fltr => {
+                if (!fltr.filterId) {
+                    fltr.filterId = crypto.randomUUID();
+                }
+                filtersObj[fltr.filterId] = fltr;
+            });
+            return {
+                ...state,
+                filters: { ...state.filters, ...filtersObj }
+            };
+        };
         this.$filters = this.selectSignal(state => state.filters);
         this.$filtersArray = computed(() => Object.values(this.state().filters) || []);
         this.filters$ = this.select(state => state.filters);
         this.$getFilter = (filterId) => {
             return this.selectSignal(this.$filters, filters => filters[filterId]);
         };
+        //#endregion filter
+        //#region sort
+        this.setSort = this.updater((state, { key, direction }) => {
+            const sortArray = state.sorted.filter(s => s.active !== key);
+            if (direction) {
+                sortArray.unshift({ active: key, direction });
+            }
+            return {
+                ...state,
+                sorted: sortArray,
+            };
+        });
+        this.setAllSort = this.updater((state, sortArray) => {
+            return {
+                ...state,
+                sorted: sortArray,
+            };
+        });
         this.$preSort = computed(() => createPreSort(this.$metaData()));
         this._$selectSorted = this.selectSignal(state => state.sorted, {
             equal: sortsAreSame
@@ -2978,15 +3075,90 @@ class TableStore extends ComponentStore {
         this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
         this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
         this.sort$ = toObservable(this.$getSorts);
-        this.$getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
-        this.getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
-        this.$userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
-        this.$userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
-        this.$userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
-        this.$footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
-        this.$headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
-        this.$groupBy = this.selectSignal(state => state.groupBy);
-        this.$groupByData = this.selectSignal(this.$groupBy, this.$metaDataArray, (gb, mds) => gb.filter(bg => mds.some(md => md.key === bg.key)), {
+        //#endregion sort
+        //#region groupBy
+        this.addGroupByKey = this.updater((state, metaDataKey) => ({
+            ...state,
+            groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [], sort: '' }]
+        }));
+        this.removeGroupByKey = this.updater((state, groupByKey) => ({
+            ...state,
+            groupBy: state.groupBy.filter(key => groupByKey !== key.key)
+        }));
+        this.updateExpandedGroups = this.updater((state, data) => {
+            const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
+                if (data.isExpanded) {
+                    if (gk.expandedHeaders === 'all' || gk.expandedHeaders.includes(data.groupUniqueName))
+                        return;
+                    gk.expandedHeaders = [...gk.expandedHeaders, data.groupUniqueName];
+                }
+                else {
+                    //we need to make sure it will not = all at this point. See generic table setExpanded
+                    if (gk.expandedHeaders !== 'all') {
+                        gk.expandedHeaders = gk.expandedHeaders.filter(g => g !== data.groupUniqueName);
+                    }
+                }
+            });
+            return ({
+                ...state,
+                groupBy: gbk
+            });
+        });
+        this.expandAllOfGroup = this.updater((state, data) => {
+            const newGroupedData = state.groupBy.map(gb => ({
+                key: gb.key,
+                expandedHeaders: data.groupHeadersByKey[gb.key]?.map(g => g.uniqueName) ?? gb.expandedHeaders,
+                sort: gb.sort,
+            }));
+            return ({ ...state, groupBy: newGroupedData });
+        });
+        this.collapseAll = this.updater((state) => ({
+            ...state,
+            groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [], sort: gb.sort }))
+        }));
+        this.collapseAllOfKey = this.updater((state, data) => ({
+            ...state,
+            groupBy: state.groupBy.map(gb => ({
+                key: gb.key,
+                expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders,
+                sort: gb.sort,
+            }))
+        }));
+        this.updateGroupBySort = this.updater((state, data) => {
+            const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === data.key, gb => {
+                gb.sort = data.sort;
+            });
+            return ({ ...state, groupBy: newGroupedData });
+        });
+        this.getGroupBySortDirection = (key) => computed(() => {
+            const groupBy = this.state().groupBy.find(gb => gb.key === key);
+            return groupBy ? groupBy.sort : '';
+        });
+        this.cycleGroupBySortDirection = this.updater((state, key) => {
+            const currentGroupBy = state.groupBy.find(gb => gb.key === key);
+            console.log(currentGroupBy);
+            if (!currentGroupBy)
+                return state;
+            let nextSort;
+            switch (currentGroupBy.sort) {
+                case '':
+                case undefined:
+                    nextSort = 'desc';
+                    break;
+                case 'desc':
+                    nextSort = 'asc';
+                    break;
+                case 'asc':
+                    nextSort = '';
+                    break;
+            }
+            const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === key, gb => {
+                gb.sort = nextSort;
+            });
+            return ({ ...state, groupBy: newGroupedData });
+        });
+        this.#$groupBy = this.selectSignal(state => state.groupBy);
+        this.$groupByData = this.selectSignal(this.#$groupBy, this.$metaDataArray, (gb, mds) => gb.filter(bg => mds.some(md => md.key === bg.key)), {
             equal: (prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i].key === k.key)
         });
         this.groupByKeys$ = this.select(state => state.groupBy.map(gbk => gbk.key))
@@ -2997,28 +3169,25 @@ class TableStore extends ComponentStore {
             return aa.length === bb.length && aa.every((k) => bb.includes(k));
         }));
         this.$expandGroups = this.selectSignal(state => state.groupBy, { equal: (a, b) => {
-                const aa = a.flatMap(g => g.expandedHeaders);
-                const bb = b.flatMap(g => g.expandedHeaders);
+                const aa = a.flatMap(g => g.expandedHeaders === 'all' ? ['all'] : g.expandedHeaders);
+                const bb = b.flatMap(g => g.expandedHeaders === 'all' ? ['all'] : g.expandedHeaders);
                 return aa.length === bb.length && aa.every((k) => bb.includes(k));
             } });
         this.$getIsExpanded = (columnKey, groupUniqueName) => {
-            return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupUniqueName)).length);
+            return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && (g.expandedHeaders.includes(groupUniqueName) || g.expandedHeaders === 'all')).length);
         };
+        this.$expandAllGroupsOfKey = (columnKey) => this.selectSignal(state => state.groupBy.find(g => g.key === columnKey)?.expandedHeaders === 'all');
         this.$sortedGroupsUpdates = this.selectSignal(state => state.groupBy, { equal: (a, b) => sortsAreSame(a.map(g => ({ active: g.key, direction: g.sort })), b.map(g => ({ active: g.key, direction: g.sort }))) });
-        this.$currentPage = this.selectSignal(state => state.currentPage);
-        this.$pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
-        this.$showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
-        this.$tableSettings = this.selectSignal(state => {
-            const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
-            return ts;
-        });
-        this.$notPersistedTableSettings = this.selectSignal(state => state.notPersistedTableSettings);
-        this.tableSettings$ = toObservable(this.$tableSettings);
-        this.$props = this.selectSignal(s => s.props);
-        this.$getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
+        //#endregion groupBy
+        //#region page paginator and show all
+        this.setCurrentPage = this.updater((state, currentPage) => ({ ...state, currentPage }));
+        this.setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize }));
+        this.setUserDefinedPageSize = this.updater((state, pageSize) => ({ ...state, userDefined: { ...state.userDefined, pageSize } }));
+        this.setUserDefinedShowAll = this.updater((state, showAll) => ({ ...state, showAll, userDefined: { ...state.userDefined, showAll } }));
         this.$isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll
             || state.showAll
             || state.userDefined?.showAll);
+        this.$showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
         this.$viewType = this.selectSignal(state => {
             const usePaginator = state.notPersistedTableSettings.usePaginator;
             const showAll = state.showAll || state.userDefined?.showAll;
@@ -3036,6 +3205,30 @@ class TableStore extends ComponentStore {
                 return 'all';
             }
         });
+        this.$userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
+        this.$currentPage = this.selectSignal(state => state.currentPage);
+        this.$pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
+        //#endregion page paginator and show all
+        //#region table settings and props
+        this.$tableSettings = this.selectSignal(state => {
+            const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
+            return ts;
+        });
+        this.$notPersistedTableSettings = this.selectSignal(state => state.notPersistedTableSettings);
+        this.tableSettings$ = toObservable(this.$tableSettings);
+        this.$props = this.selectSignal(s => s.props);
+        //#endregion table settings and props
+        this.setUserDefinedRowHeight = this.updater((state, rowHeight) => {
+            return ({ ...state, userDefined: { ...state.userDefined, rowHeight } });
+        });
+        this.setUserDefinedHeaderHeight = this.updater((state, headerHeight) => {
+            return ({ ...state, userDefined: { ...state.userDefined, headerHeight } });
+        });
+        this.$userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
+        this.$userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
+        this.$footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
+        this.$headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
+        this.$getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
         this.resetState = this.updater((state) => {
             const sorted = this.$preSort();
             return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
@@ -3097,6 +3290,11 @@ class TableStore extends ComponentStore {
             };
             s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
             s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
+            s.groupBy = (settings.tableSettings?.groupBySettings || []).map(g => ({
+                expandedHeaders: g.expanded ? 'all' : [],
+                key: g.key,
+                sort: ''
+            }));
             return s;
         });
         this.setMetaData = this.updater((state, md) => {
@@ -3116,104 +3314,9 @@ class TableStore extends ComponentStore {
             const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
             return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
         });
-        this.showColumn = this.updater((state, key) => ({
-            ...state,
-            hiddenKeys: state.hiddenKeys.filter(k => k !== key),
-        }));
-        this.hideColumn = this.updater((state, key) => ({
-            ...state,
-            hiddenKeys: [...state.hiddenKeys.filter(k => k !== key), key],
-        }));
-        this.setHiddenColumns = this.updater((state, displayCols) => {
-            return ({ ...state, hiddenKeys: displayCols.filter(d => !d.visible).map(d => d.key) });
-        });
-        this.setUserDefinedWidth = this.updater((state, colWidths) => {
-            const userDefinedWidths = { ...state.userDefined.widths };
-            colWidths.forEach(cw => {
-                userDefinedWidths[cw.key] = cw.widthInPixel;
-            });
-            return { ...state, userDefined: { ...state.userDefined, widths: userDefinedWidths } };
-        });
-        this.setUserDefinedOrder = this.updater((state, moved) => {
-            const { newOrder, oldOrder } = moved;
-            const mdsArr = orderedStateVisibleMetaData(state);
-            moveItemInArray(mdsArr, oldOrder, newOrder);
-            const userDefinedOrder = mdsArr.reduce((aggregate, current, index) => {
-                aggregate[current.key] = index;
-                return aggregate;
-            }, {});
-            return ({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } });
-        });
-        this.setUserDefinedRowHeight = this.updater((state, rowHeight) => {
-            return ({ ...state, userDefined: { ...state.userDefined, rowHeight } });
-        });
-        this.setUserDefinedHeaderHeight = this.updater((state, headerHeight) => {
-            return ({ ...state, userDefined: { ...state.userDefined, headerHeight } });
-        });
-        this.addFilter = this.updater((state, filter) => {
-            return this.addFiltersToState(state, [filter]);
-        });
-        this.addFilters = this.updater((state, filters) => {
-            return this.addFiltersToState(state, filters);
-        });
-        this.removeFilter = this.updater((state, filterId) => {
-            const filtersCopy = { ...state.filters };
-            delete filtersCopy[filterId];
-            return ({ ...state, filters: filtersCopy });
-        });
-        this.removeFilters = this.updater((state, filterIds) => {
-            const filtersCopy = { ...state.filters };
-            filterIds.forEach(id => { delete filtersCopy[id]; });
-            return ({ ...state, filters: filtersCopy });
-        });
-        this.clearFilters = this.updater((state) => ({ ...state, filters: {} }));
-        this.addFiltersToState = (state, filters) => {
-            var customFilters = filters.filter(isCustomFilter);
-            var filterInfos = filters.filter(isFilterInfo);
-            const filtersObj = filterInfos
-                .filter(fltr => Object.keys(state.metaData).some(key => key === fltr.key) || console.warn(`Meta data with key ${fltr.key} not found`))
-                .reduce((filtersObj, filter) => {
-                if (!filter.filterId) {
-                    filter.filterId = crypto.randomUUID();
-                }
-                filtersObj[filter.filterId] = filter;
-                return filtersObj;
-            }, {});
-            customFilters.forEach(fltr => {
-                if (!fltr.filterId) {
-                    fltr.filterId = crypto.randomUUID();
-                }
-                filtersObj[fltr.filterId] = fltr;
-            });
-            return {
-                ...state,
-                filters: { ...state.filters, ...filtersObj }
-            };
-        };
-        this.setSort = this.updater((state, { key, direction }) => {
-            const sortArray = state.sorted.filter(s => s.active !== key);
-            if (direction) {
-                sortArray.unshift({ active: key, direction });
-            }
-            return {
-                ...state,
-                sorted: sortArray,
-            };
-        });
-        this.setAllSort = this.updater((state, sortArray) => {
-            return {
-                ...state,
-                sorted: sortArray,
-            };
-        });
-        this.setCurrentPage = this.updater((state, currentPage) => ({ ...state, currentPage }));
-        this.setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize }));
-        this.setUserDefinedPageSize = this.updater((state, pageSize) => ({ ...state, userDefined: { ...state.userDefined, pageSize } }));
-        this.setUserDefinedShowAll = this.updater((state, showAll) => ({ ...state, showAll, userDefined: { ...state.userDefined, showAll } }));
         this.setProps = this.updater((state, props) => {
             return ({ ...state, props });
         });
-        this.setTableWidth = this.updater((state, widthInPixels) => ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
         this.setInitializationState = this.updater((state, initializationState) => {
             return { ...state, initializationState };
         });
@@ -3227,73 +3330,6 @@ class TableStore extends ComponentStore {
             tableSettings.collapseFooter = options?.collapseFooter ?? !tableSettings.collapseFooter;
             return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
         });
-        this.addGroupByKey = this.updater((state, metaDataKey) => ({
-            ...state,
-            groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [], sort: '' }]
-        }));
-        this.removeGroupByKey = this.updater((state, groupByKey) => ({
-            ...state,
-            groupBy: state.groupBy.filter(key => groupByKey !== key.key)
-        }));
-        this.updateExpandedGroups = this.updater((state, data) => {
-            const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
-                gk.expandedHeaders = data.isExpanded ? [...gk.expandedHeaders, data.groupUniqueName] : gk.expandedHeaders.filter(g => g !== data.groupUniqueName);
-            });
-            return ({
-                ...state,
-                groupBy: gbk
-            });
-        });
-        this.expandAllOfGroup = this.updater((state, data) => {
-            const newGroupedData = state.groupBy.map(gb => ({
-                key: gb.key,
-                expandedHeaders: data.groupHeadersByKey[gb.key]?.map(g => g.uniqueName) ?? gb.expandedHeaders
-            }));
-            return ({ ...state, groupBy: newGroupedData });
-        });
-        this.collapseAll = this.updater((state) => ({
-            ...state,
-            groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [], sort: gb.sort }))
-        }));
-        this.collapseAllOfKey = this.updater((state, data) => ({
-            ...state,
-            groupBy: state.groupBy.map(gb => ({
-                key: gb.key,
-                expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders,
-                sort: gb.sort,
-            }))
-        }));
-        this.updateGroupBySort = this.updater((state, data) => {
-            const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === data.key, gb => {
-                gb.sort = data.sort;
-            });
-            return ({ ...state, groupBy: newGroupedData });
-        });
-        this.getGroupBySortDirection = (key) => computed(() => {
-            const groupBy = this.state().groupBy.find(gb => gb.key === key);
-            return groupBy ? groupBy.sort : '';
-        });
-        this.cycleGroupBySortDirection = this.updater((state, key) => {
-            const currentGroupBy = state.groupBy.find(gb => gb.key === key);
-            if (!currentGroupBy)
-                return state;
-            let nextSort;
-            switch (currentGroupBy.sort) {
-                case '':
-                    nextSort = 'desc';
-                    break;
-                case 'desc':
-                    nextSort = 'asc';
-                    break;
-                case 'asc':
-                    nextSort = '';
-                    break;
-            }
-            const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === key, gb => {
-                gb.sort = nextSort;
-            });
-            return ({ ...state, groupBy: newGroupedData });
-        });
         this.setLinkMaps = this.updater((state, maps) => {
             return ({ ...state, linkMaps: maps });
         });
@@ -3312,6 +3348,7 @@ class TableStore extends ComponentStore {
             return this;
         };
     }
+    #$groupBy;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore }); }
 }
@@ -3332,19 +3369,36 @@ const resetable = [
 ];
 
 class MultiSortDirective extends MatSort {
+    #onSortChange;
+    #onStateSortUpdate;
     constructor() {
         super();
         this.state = inject(TableStore);
-        this.state.setSort(this.sortChange.pipe(distinctUntilChanged((f, s) => f.active === s.active && f.direction === s.direction), map(sc => ({ key: sc.active, direction: sc.direction }))));
-        this.state.on(this.state.sort$, (rules) => {
-            const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' };
-            const topActiveChanged = topRule.active !== this.active || '';
-            const topDirectionChanged = topRule.direction !== this.direction || '';
-            if (topActiveChanged || topDirectionChanged) {
-                this.active = topRule.active;
-                this.direction = topRule.direction;
-                this.sortChange.emit(topRule);
-            }
+        this.$sortChange = toSignal(this.sortChange, {
+            equal: (f, s) => f?.active === s?.active && f?.direction === s?.direction
+        });
+        this.#onSortChange = effect(() => {
+            const sortChange = this.$sortChange();
+            if (!sortChange)
+                return;
+            untracked(() => {
+                this.state.setSort({ key: sortChange.active, direction: sortChange.direction });
+            });
+        });
+        this.#onStateSortUpdate = effect(() => {
+            const rules = this.state.$getSorts();
+            if (!rules)
+                return;
+            untracked(() => {
+                const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' };
+                const topActiveChanged = topRule.active !== this.active || '';
+                const topDirectionChanged = topRule.direction !== this.direction || '';
+                if (topActiveChanged || topDirectionChanged) {
+                    this.active = topRule.active;
+                    this.direction = topRule.direction;
+                    this.sortChange.emit(topRule);
+                }
+            });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4532,56 +4586,54 @@ function groupData(groupByData, groupData, level = 1, metaData, parentGroupName)
         };
     });
     if (groupByData.sort) {
-        groupedDataArr = sortGroups(groupByData, groupedDataArr);
+        groupedDataArr = sortGroupsByGroupSortOneLevel(groupByData, groupedDataArr);
     }
     return groupedDataArr;
 }
 function setCustomGroupBy(customGroupBy) {
     tbGroupBy = customGroupBy;
 }
-function updateGroupByState(groupedData, { data, groups, expanded, sorts }, firstRun, metaData) {
+function updateGroupByState(groupedData, { data, groups, expanded, groupSorts }, firstRun, metaData) {
     if (firstRun
-        || dataUpdated(data, groups, expanded, sorts)
-        || groupsUpdated(groups, expanded, sorts)) {
+        || dataUpdated(data, groups, expanded, groupSorts)
+        || groupsUpdated(groups, expanded, groupSorts)) {
         const combinedGroupsAndSorts = groups.value.map(g => {
-            const sortForGroup = sorts.value.find(s => s.key === g.key);
+            const sortForGroup = groupSorts.value.find(s => s.key === g.key);
             return { ...g, sort: sortForGroup?.sort || '' };
         });
         groupedData = groups.value.length ? getGroupedData(data.value, combinedGroupsAndSorts, metaData) : data.value;
     }
     else {
-        let curr = [...sorts.value];
-        groupedData = sort(groupedData);
-        function sort(groups) {
-            const sortData = sorts.value?.find(gs => gs.key === groups[0]?.key);
-            if (sortData?.sort) {
-                groups = sortGroups(sortData, groups);
-            }
-            else {
-                groups = groups.toSorted((a, b) => a[initIndexSymbol] - b[initIndexSymbol]);
-            }
-            curr = curr.filter(c => c.key !== sortData?.key);
-            if (!groups[0]?.hasTheData) {
-                groups.forEach((g, i) => groups[i].groups = sort(g.groups));
-            }
-            return groups;
-        }
+        groupedData = sortGroupsDeep(groupedData, groupSorts.value);
     }
     const newDisplayData = expanded.value.length === 0
         ? groupedData
-        : groupedData.map(group => mapGroupHeader(group, expanded.value.flatMap(g => g.expandedHeaders))).flat();
+        : groupedData.map(group => mapGroupHeader(group, expanded.value.flatMap(g => g.expandedHeaders), expanded.value.filter(g => g.expandedHeaders === 'all').map(g => g.key))).flat();
     return ({ displayData: newDisplayData, groupedData });
 }
-function sortGroups(sortData, groups) {
+function sortGroupsByGroupSortOneLevel(sortData, groups) {
     const direction = sortData.sort;
     const multiplier = direction === 'asc' ? 1 : -1;
     return groups.toSorted((a, b) => a.length === b.length ? 0 : (a.length > b.length ? 1 : -1) * multiplier);
 }
-function mapGroupHeader(obj, expandedHeaders) {
-    const showChildren = expandedHeaders === true || expandedHeaders.includes(obj.uniqueName);
+function sortGroupsDeep(groups, sorts) {
+    const sortData = sorts?.find(gs => gs.key === groups[0]?.key);
+    if (sortData?.sort) {
+        groups = sortGroupsByGroupSortOneLevel(sortData, groups);
+    }
+    else {
+        groups = groups.toSorted((a, b) => a[initIndexSymbol] - b[initIndexSymbol]);
+    }
+    if (!groups[0]?.hasTheData) {
+        groups.forEach((g, i) => groups[i].groups = sortGroupsDeep(g.groups, sorts));
+    }
+    return groups;
+}
+function mapGroupHeader(obj, expandedHeaders, expandAllGroups = []) {
+    const showChildren = expandedHeaders === true || expandedHeaders.includes(obj.uniqueName) || expandAllGroups.includes(obj.key);
     const children = !showChildren ? [] :
         obj.hasTheData ? obj.children
-            : obj.groups.map(a => mapGroupHeader(a, expandedHeaders));
+            : obj.groups.map(a => mapGroupHeader(a, expandedHeaders, expandAllGroups));
     return [obj, ...children].flat();
 }
 function dataUpdated(data, groups, expandedGroups, sorts) {
@@ -4600,12 +4652,18 @@ const getAllGroupHeaderNames = (data) => {
     }, {});
 };
 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 groups = getGroupHeaders(data, (d) => d.isGroupHeader && keys.includes(d.key), [], keys.length === 1);
+    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 => ({ uniqueName: g.uniqueName, key: g.key }));
+        return names;
+    }, {});
 };
-const getGroupHeaders = (data, filterFunc, arr = []) => {
+const getGroupHeaders = (data, filterFunc, arr = [], oneLevel = false) => {
     const headers = data.filter(filterFunc);
     arr.push(...headers);
+    if (oneLevel)
+        return arr;
     headers.forEach(h => { if (h.hasTheData === false && !!h.groups.length)
         getGroupHeaders(h.groups, filterFunc, arr); });
     return arr;
@@ -4625,7 +4683,8 @@ class GenericTableComponent {
         this.$table = viewChild(MatTable);
         this.$dropList = viewChild(CdkDropList);
         this.selection$ = output({ alias: 'selection' });
-        this.$displayDataLength = input.required({ alias: 'displayDataLength' });
+        this.$displayData = input.required({ alias: 'displayData' });
+        this.$displayDataLength = computed(() => this.$displayData().length);
         this.$data = input.required({ alias: 'data' });
         this.$rows = input([], { alias: 'rows' });
         this.$columnInfos = input.required({ alias: 'columnInfos' });
@@ -4981,6 +5040,10 @@ class GenericTableComponent {
         return row.isGroupHeader;
     }
     setExpanded(key, groupUniqueName, isExpanded) {
+        if (!isExpanded && this.state.$expandAllGroupsOfKey(key)()) {
+            const groupHeaders = getAllGroupHeaderNamesByKeys(this.$displayData(), [key]);
+            this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
+        }
         this.state.updateExpandedGroups({ key, isExpanded, groupUniqueName });
     }
     buildColumn(column) {
@@ -5047,7 +5110,7 @@ class GenericTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\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 [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n      <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n        <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\" >\r\n        <button mat-menu-item>\r\n          <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n            Show Only Selected\r\n          </mat-slide-toggle>\r\n        </button>\r\n        @if(this.$selection().selected.length)\r\n        {\r\n          <button mat-menu-item (click)=\"$selection().clear()\">\r\n            Clear Selection\r\n          </button>\r\n        }\r\n        <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n          Select top \r\n              <input #i class=\"input\" stop-propagation type=\"number\" \r\n                placeholder=\"Set Size\"\r\n                [value]=\"10\"\r\n                [min]=\"1\"\r\n                [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n        </button>\r\n      </mat-menu>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\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\" />\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.uniqueName );\r\n      @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n      \r\n\r\n\r\n      <!-- Default group row template -->\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !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        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        @if(customTemplate)\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n            $implicit: row, \r\n            element: row, \r\n            expanded: expanded(), \r\n            level: row.level, \r\n            key: row.key, \r\n            uniqueName: row.uniqueName, \r\n            groupHeaderDisplay: row.groupHeaderDisplay, \r\n            length: row.length, \r\n            padding: row.padding \r\n          }\" />\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n        }\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    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [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</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-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)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}: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$1.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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.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.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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayData: { classPropertyName: "$displayData", publicName: "displayData", 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  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\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 [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n      <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n        <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\" >\r\n        <button mat-menu-item>\r\n          <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n            Show Only Selected\r\n          </mat-slide-toggle>\r\n        </button>\r\n        @if(this.$selection().selected.length)\r\n        {\r\n          <button mat-menu-item (click)=\"$selection().clear()\">\r\n            Clear Selection\r\n          </button>\r\n        }\r\n        <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n          Select top \r\n              <input #i class=\"input\" stop-propagation type=\"number\" \r\n                placeholder=\"Set Size\"\r\n                [value]=\"10\"\r\n                [min]=\"1\"\r\n                [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n        </button>\r\n      </mat-menu>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\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\" />\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.uniqueName );\r\n      @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n      \r\n\r\n\r\n      <!-- Default group row template -->\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !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        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        @if(customTemplate)\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n            $implicit: row, \r\n            element: row, \r\n            expanded: expanded(), \r\n            level: row.level, \r\n            key: row.key, \r\n            uniqueName: row.uniqueName, \r\n            groupHeaderDisplay: row.groupHeaderDisplay, \r\n            length: row.length, \r\n            padding: row.padding \r\n          }\" />\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n        }\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    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [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</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-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)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}: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$1.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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.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.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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -6721,14 +6784,14 @@ class TableContainerComponent {
             const data = this.$sortedAndFilteredData();
             const groups = this.$timestampedGroups();
             const expanded = this.$timestampedExpanded();
-            const sorts = this.$timestampedGroupSortUpdated();
+            const groupSorts = this.$timestampedGroupSortUpdated();
             if (!data)
                 return undefined;
             return ({
                 data,
                 groups,
                 expanded,
-                sorts,
+                groupSorts,
             });
         });
         this.$filteredSortedAndGrouped = linkedSignal({
@@ -6766,7 +6829,7 @@ class TableContainerComponent {
     #setUpAllValuesFilters;
     static { this.headerId = 'tb-header-wrapper'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "$customGroupRows", predicate: CustomGroupRowDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByData().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='_selection$.next($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "$customGroupRows", predicate: CustomGroupRowDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByData().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='_selection$.next($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayData", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
@@ -6776,7 +6839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
                         SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
                         MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer,
-                    ], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByData().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='_selection$.next($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
+                    ], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByData().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='_selection$.next($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }] });
 function isFunction(a) {
     return typeof a === 'function';