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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, signal, computed, isSignal, effect, untracked, InjectionToken, Injectable, runInInjectionContext, input, Renderer2, ElementRef, booleanAttribute, Pipe, makeEnvironmentProviders, HostListener, ChangeDetectionStrategy, Component, EventEmitter, Output, ContentChildren, ChangeDetectorRef, output, viewChild, EnvironmentInjector, createComponent, linkedSignal, contentChild, forwardRef, contentChildren, provideAppInitializer } from '@angular/core';
+import { Input, Directive, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, signal, computed, isSignal, effect, untracked, InjectionToken, Injectable, runInInjectionContext, input, Renderer2, ElementRef, booleanAttribute, Pipe, makeEnvironmentProviders, HostListener, ChangeDetectionStrategy, Component, EventEmitter, Output, ContentChildren, ChangeDetectorRef, viewChild, EnvironmentInjector, createComponent, linkedSignal, output, contentChild, forwardRef, contentChildren, provideAppInitializer } from '@angular/core';
 import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import * as i1 from 'rxjs';
 import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, pipe, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp, BehaviorSubject } from 'rxjs';
@@ -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) {
@@ -1974,6 +1977,13 @@ class DialogDirective {
         this.opDialogAddDialogClass = true;
         this.injector = inject(Injector);
         this.subscriber = subscriber(this.injector);
+        /**
+         * For use with origin element to keep dialog on screen.
+         * If true, will position based on width and height provided IF it was provide as a number.
+         * If no width provided or/and height, provide a default in number (of pixels) of the not provided values.
+         * If no width/height provided at all, will default to 600x400.
+         */
+        this.$positionOnScreen = input(false, { alias: 'opDialogPositionOnScreen' });
         this._data = new Subject();
         this.setDataAndState = (data) => {
             if (data) {
@@ -2009,7 +2019,28 @@ class DialogDirective {
     initDialog() {
         if (this.nativeElement) {
             const rect = this.nativeElement.getBoundingClientRect();
-            const position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
+            const position = {};
+            if (this.$positionOnScreen()) {
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                const p = this.$positionOnScreen();
+                const width = typeof p === 'object' && p.width ? p.width : typeof this.dialogConfig.width === 'number' ? this.dialogConfig.width : 600;
+                const height = typeof p === 'object' && p.height ? p.height : typeof this.dialogConfig.height === 'number' ? this.dialogConfig.height : 400;
+                // Check horizontal positioning
+                if (rect.left + width > viewportWidth) {
+                    position.right = `${viewportWidth - rect.right}px`;
+                }
+                else {
+                    position.left = `${rect.left}px`;
+                }
+                // Check vertical positioning
+                if (rect.bottom + height > viewportHeight) {
+                    position.bottom = `${viewportHeight - rect.top}px`;
+                }
+                else {
+                    position.top = `${rect.bottom - 20}px`;
+                }
+            }
             this.opDialogConfig = { ...this.opDialogConfig, position };
         }
         if (this.opDialogAddDialogClass) {
@@ -2047,7 +2078,7 @@ class DialogDirective {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { opDialogAddDialogClass: "opDialogAddDialogClass", opDialogConfig: "opDialogConfig", setControl: ["opDialog", "setControl"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { opDialogAddDialogClass: { classPropertyName: "opDialogAddDialogClass", publicName: "opDialogAddDialogClass", isSignal: false, isRequired: false, transformFunction: null }, opDialogConfig: { classPropertyName: "opDialogConfig", publicName: "opDialogConfig", isSignal: false, isRequired: false, transformFunction: null }, setControl: { classPropertyName: "setControl", publicName: "opDialog", isSignal: false, isRequired: false, transformFunction: null }, nativeElement: { classPropertyName: "nativeElement", publicName: "opDialogOrigin", isSignal: false, isRequired: false, transformFunction: null }, $positionOnScreen: { classPropertyName: "$positionOnScreen", publicName: "opDialogPositionOnScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogDirective, decorators: [{
             type: Directive,
@@ -2912,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);
@@ -2925,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
@@ -2950,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))
@@ -2969,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;
@@ -3008,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: {} } });
@@ -3069,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) => {
@@ -3088,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 };
         });
@@ -3199,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 });
         });
@@ -3284,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 }); }
 }
@@ -3304,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 }); }
@@ -3712,7 +3794,10 @@ class FilterComponent {
             const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
             return filterable === 'all values' || filterable?.allValues === true;
         });
-        this.close = output();
+        this.close$ = new Subject();
+        this.done$ = new Subject();
+        this.close = outputFromObservable(this.close$);
+        this.done = outputFromObservable(merge(this.done$, this.close$));
         this.$enteredFilterType = signal(undefined);
         this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType);
         this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType]);
@@ -3722,14 +3807,15 @@ class FilterComponent {
         event.preventDefault();
         if (filter.filterValue != null && filter.filterType) {
             this.addFilter(filter);
-            this.close.emit();
+            this.close$.next();
         }
     }
     addFilter(filter) {
         this.state.addFilter({ ...filter, filterBy: this.$filterBy() });
+        this.done$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\r\n  <mat-card appearance=\"outlined\" class=\"filter-card\">\r\n    <mat-card-content>\r\n      <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\r\n        <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n        <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n        <div class=\"head-row\" >\r\n          <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n          <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close.emit();\">\r\n            <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n          </button>\r\n        </div>\r\n        <div class=\"filter-row\">\r\n            <div class=\"inline\">\r\n              <mat-form-field class=\"my-filter\" >\r\n                  <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" [panelWidth]=\"null\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\r\n              <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n                <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n                <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n              </mat-radio-group>\r\n            }\r\n        </div>\r\n        <button mat-button disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\r\n          Apply\r\n        </button>\r\n      \r\n      \r\n      <ng-template #String>\r\n        @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          @if($allValuesInMeta())\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n          @else\r\n          {\r\n            <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">False</mat-radio-button>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #Enum>\r\n        @if(currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n\r\n        }\r\n      </ng-template>\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n}\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["currentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "currentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "currentFilterType"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", done: "done" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\r\n  <mat-card appearance=\"outlined\" class=\"filter-card\">\r\n    <mat-card-content>\r\n      <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close$.next()\">\r\n        <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n        <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n        <div class=\"head-row\" >\r\n          <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n          <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close$.next();\">\r\n            <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n          </button>\r\n        </div>\r\n        <div class=\"filter-row\">\r\n            <div class=\"inline\">\r\n              <mat-form-field class=\"my-filter\" >\r\n                  <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" [panelWidth]=\"null\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\r\n              <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n                <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n                <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n              </mat-radio-group>\r\n            }\r\n        </div>\r\n        <button mat-button disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\r\n          Apply\r\n        </button>\r\n      \r\n      \r\n      <ng-template #String>\r\n        @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          @if($allValuesInMeta())\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n          @else\r\n          {\r\n            <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">False</mat-radio-button>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #Enum>\r\n        @if(currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n\r\n        }\r\n      </ng-template>\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n}\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["currentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "currentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "currentFilterType"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -3738,7 +3824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         MatInputModule, MatSelectModule, NumberFilterComponent,
                         DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
                         NgTemplateOutlet
-                    ], template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\r\n  <mat-card appearance=\"outlined\" class=\"filter-card\">\r\n    <mat-card-content>\r\n      <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\r\n        <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n        <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n        <div class=\"head-row\" >\r\n          <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n          <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close.emit();\">\r\n            <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n          </button>\r\n        </div>\r\n        <div class=\"filter-row\">\r\n            <div class=\"inline\">\r\n              <mat-form-field class=\"my-filter\" >\r\n                  <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" [panelWidth]=\"null\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\r\n              <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n                <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n                <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n              </mat-radio-group>\r\n            }\r\n        </div>\r\n        <button mat-button disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\r\n          Apply\r\n        </button>\r\n      \r\n      \r\n      <ng-template #String>\r\n        @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          @if($allValuesInMeta())\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n          @else\r\n          {\r\n            <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">False</mat-radio-button>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #Enum>\r\n        @if(currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n\r\n        }\r\n      </ng-template>\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n}\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+                    ], template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\r\n  <mat-card appearance=\"outlined\" class=\"filter-card\">\r\n    <mat-card-content>\r\n      <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close$.next()\">\r\n        <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n        <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n        <div class=\"head-row\" >\r\n          <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n          <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close$.next();\">\r\n            <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n          </button>\r\n        </div>\r\n        <div class=\"filter-row\">\r\n            <div class=\"inline\">\r\n              <mat-form-field class=\"my-filter\" >\r\n                  <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" [panelWidth]=\"null\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\r\n              <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n                <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n                <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n              </mat-radio-group>\r\n            }\r\n        </div>\r\n        <button mat-button disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\r\n          Apply\r\n        </button>\r\n      \r\n      \r\n      <ng-template #String>\r\n        @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          @if($allValuesInMeta())\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n          @else\r\n          {\r\n            <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">False</mat-radio-button>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #Enum>\r\n        @if(currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n\r\n        }\r\n      </ng-template>\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n}\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }] });
 
 class GenColDisplayerComponent {
@@ -3929,7 +4015,7 @@ class FilterChipsComponent {
         this.filterStore.clearAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key)\r\n      {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @for (filter of $certainCustomFilters(); track filter.filterId)\r\n    {\r\n      <mat-chip (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{filter.chipLabel}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if (($filters().length + $certainCustomFilters().length) > 1)\r\n    {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ 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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key)\r\n      {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @for (filter of $certainCustomFilters(); track filter.filterId)\r\n    {\r\n      <mat-chip (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{filter.chipLabel}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if (($filters().length + $certainCustomFilters().length) > 1)\r\n    {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ 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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close", "done"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
@@ -4166,6 +4252,7 @@ class ColumnHeaderMenuComponent {
         });
         this.$currentFilterType = linkedSignal(() => this.$metaFilterType());
         this.$key = computed(() => this.$metaData().key || crypto.randomUUID());
+        this.addFilter$ = new Subject();
     }
     hideField(key) {
         this.tableState.hideColumn(key);
@@ -4200,21 +4287,22 @@ class ColumnHeaderMenuComponent {
     addFilter(metaData) {
         if (!this.filterStore)
             return;
-        this.filterStore.addFilter({
+        this.addFilter$.next({
             key: metaData.key,
             fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
             filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\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  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @let filterValue = $filterValue();\r\n    <ng-template matMenuContent>\r\n      @if (filterFieldType !== FieldType.NotMapped)\r\n      {\r\n        <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n          <mat-icon color=\"primary\">filter_list</mat-icon>\r\n          <span>Choose Other Filter</span>\r\n        </button>\r\n        <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n          @if(currentFilterType === FilterType.In)\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n          }\r\n          @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n          {\r\n            <mat-form-field stop-propagation class=\"font auto-width\">\r\n              <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n              <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n              <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n                <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                  <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                    block\r\n                  </mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n          {\r\n            <mat-form-field class=\"auto-width\" stop-propagation>\r\n              <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                  <mat-icon  class=\"suffix-icons\"\r\n                    >\r\n                    arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                  <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n                (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                  <span class=\"suffix-icons\">=</span>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Boolean)\r\n          {\r\n            <div>\r\n              <label>\r\n                <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n              </label>\r\n              <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n              </mat-radio-group>\r\n            </div>\r\n          }\r\n          @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n          {\r\n            <mat-form-field class=\"font auto-width\" stop-propagation >\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                  (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                  <span  class=\"suffix-icons underline\"> =</span>\r\n                </button>\r\n              </span>\r\n              <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n                currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n                (click)=\"calendar.open()\"/>\r\n              <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n              <mat-datepicker #calendar />\r\n            </mat-form-field>\r\n          }\r\n          <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n            Apply\r\n          </button>\r\n        </ng-form>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b 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  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @let filterValue = $filterValue();\r\n    <ng-template matMenuContent>\r\n      @if (filterFieldType !== FieldType.NotMapped)\r\n      {\r\n        <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n          <mat-icon color=\"primary\">filter_list</mat-icon>\r\n          <span>Choose Other Filter</span>\r\n        </button>\r\n        <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n          @if(currentFilterType === FilterType.In)\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n          }\r\n          @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n          {\r\n            <mat-form-field stop-propagation class=\"font auto-width\">\r\n              <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n              <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n              <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n                <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                  <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                    block\r\n                  </mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n          {\r\n            <mat-form-field class=\"auto-width\" stop-propagation>\r\n              <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                  <mat-icon  class=\"suffix-icons\"\r\n                    >\r\n                    arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                  <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n                (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                  <span class=\"suffix-icons\">=</span>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Boolean)\r\n          {\r\n            <div>\r\n              <label>\r\n                <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n              </label>\r\n              <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n              </mat-radio-group>\r\n            </div>\r\n          }\r\n          @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n          {\r\n            <mat-form-field class=\"font auto-width\" stop-propagation >\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                  (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                  <span  class=\"suffix-icons underline\"> =</span>\r\n                </button>\r\n              </span>\r\n              <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n                currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n                (click)=\"calendar.open()\"/>\r\n              <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n              <mat-datepicker #calendar />\r\n            </mat-form-field>\r\n          }\r\n          <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n            Apply\r\n          </button>\r\n        </ng-form>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n  *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n  [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin", "opDialogPositionOnScreen"], outputs: ["opDialogClosed"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
-                        MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule
-                    ], template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\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  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @let filterValue = $filterValue();\r\n    <ng-template matMenuContent>\r\n      @if (filterFieldType !== FieldType.NotMapped)\r\n      {\r\n        <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n          <mat-icon color=\"primary\">filter_list</mat-icon>\r\n          <span>Choose Other Filter</span>\r\n        </button>\r\n        <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n          @if(currentFilterType === FilterType.In)\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n          }\r\n          @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n          {\r\n            <mat-form-field stop-propagation class=\"font auto-width\">\r\n              <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n              <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n              <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n                <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                  <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                    block\r\n                  </mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n          {\r\n            <mat-form-field class=\"auto-width\" stop-propagation>\r\n              <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                  <mat-icon  class=\"suffix-icons\"\r\n                    >\r\n                    arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                  <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n                (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                  <span class=\"suffix-icons\">=</span>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Boolean)\r\n          {\r\n            <div>\r\n              <label>\r\n                <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n              </label>\r\n              <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n              </mat-radio-group>\r\n            </div>\r\n          }\r\n          @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n          {\r\n            <mat-form-field class=\"font auto-width\" stop-propagation >\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                  (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                  <span  class=\"suffix-icons underline\"> =</span>\r\n                </button>\r\n              </span>\r\n              <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n                currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n                (click)=\"calendar.open()\"/>\r\n              <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n              <mat-datepicker #calendar />\r\n            </mat-form-field>\r\n          }\r\n          <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n            Apply\r\n          </button>\r\n        </ng-form>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+                        MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule,
+                        DialogDirective, FilterComponent
+                    ], template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b 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  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @let filterValue = $filterValue();\r\n    <ng-template matMenuContent>\r\n      @if (filterFieldType !== FieldType.NotMapped)\r\n      {\r\n        <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n          <mat-icon color=\"primary\">filter_list</mat-icon>\r\n          <span>Choose Other Filter</span>\r\n        </button>\r\n        <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n          @if(currentFilterType === FilterType.In)\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n          }\r\n          @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n          {\r\n            <mat-form-field stop-propagation class=\"font auto-width\">\r\n              <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n              <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n              <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n                <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                  <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                    block\r\n                  </mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n          {\r\n            <mat-form-field class=\"auto-width\" stop-propagation>\r\n              <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                  <mat-icon  class=\"suffix-icons\"\r\n                    >\r\n                    arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n                (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                  <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n                (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                  <span class=\"suffix-icons\">=</span>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          }\r\n          @else if (filterFieldType === FieldType.Boolean)\r\n          {\r\n            <div>\r\n              <label>\r\n                <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n              </label>\r\n              <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n              </mat-radio-group>\r\n            </div>\r\n          }\r\n          @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n          {\r\n            <mat-form-field class=\"font auto-width\" stop-propagation >\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                  (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                  <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n                </button>\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                  (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                  <span  class=\"suffix-icons underline\"> =</span>\r\n                </button>\r\n              </span>\r\n              <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n                currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n                (click)=\"calendar.open()\"/>\r\n              <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n              <mat-datepicker #calendar />\r\n            </mat-form-field>\r\n          }\r\n          <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n            Apply\r\n          </button>\r\n        </ng-form>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n  *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n  [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }] });
 
 class ColumnTotalPipe {
@@ -4498,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) {
@@ -4566,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;
@@ -4591,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' });
@@ -4947,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) {
@@ -5013,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,
@@ -6687,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({
@@ -6732,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,
@@ -6742,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';