@one-paragon/angular-utilities 2.0.0-beta.9 → 2.0.1

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

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, linkedSignal, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
-import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, observeOn, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
+import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, linkedSignal, effect, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
+import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, observeOn, debounceTime, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
 import * as i1 from 'rxjs';
-import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, animationFrameScheduler, debounceTime, timestamp, BehaviorSubject } from 'rxjs';
+import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp, animationFrameScheduler, debounceTime as debounceTime$1, BehaviorSubject } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
 import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-import * as i1$8 from '@angular/common';
 import { DatePipe, CurrencyPipe, KeyValuePipe, NgTemplateOutlet, DecimalPipe, CommonModule, AsyncPipe } from '@angular/common';
 import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -24,7 +23,7 @@ import * as i9 from '@angular/material/core';
 import { MatOption, MatNativeDateModule } from '@angular/material/core';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CDK_DROP_LIST, CdkDropList, transferArrayItem } from '@angular/cdk/drag-drop';
-import * as i1$4 from '@angular/router';
+import * as i1$5 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
@@ -42,16 +41,16 @@ import * as i2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i4$2 from '@angular/material/menu';
-import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import * as i4$3 from '@angular/material/chips';
+import * as i1$4 from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger, MatMenu } from '@angular/material/menu';
+import * as i4$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i1$5 from '@angular/material/table';
+import * as i1$6 from '@angular/material/table';
 import { MatTable, MatColumnDef, MatTableModule, MatHeaderRowDef, MatFooterRowDef, MatTableDataSource, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i1$6 from '@angular/material/paginator';
+import * as i1$7 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$7 from '@angular/cdk/scrolling';
+import * as i1$8 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
 import * as i1$9 from '@ngrx/store';
 import { createFeatureSelector, createSelector, StoreModule, Store } from '@ngrx/store';
@@ -898,6 +897,22 @@ const DefaultVirtualScrollOptions = {
     rowHeight: 48,
     headerHeight: 56,
 };
+function parseTbSizeToPixels(size) {
+    if (!size)
+        return undefined;
+    if (typeof size === 'number')
+        return size;
+    if (size.endsWith('px'))
+        return Number(size.replace('px', ''));
+    if (size.endsWith('rem')) {
+        const htmlElement = document.documentElement;
+        const remSize = window.getComputedStyle(htmlElement).getPropertyValue('font-size');
+        const remSizeNum = Number(remSize.replace('px', ''));
+        const num = Number(size.replace('rem', ''));
+        return num * remSizeNum;
+    }
+    return undefined;
+}
 
 class KeysToDelete {
     initializationState = null;
@@ -919,7 +934,7 @@ var InitializationState;
 (function (InitializationState) {
     InitializationState[InitializationState["Created"] = 0] = "Created";
     InitializationState[InitializationState["MetaDataLoaded"] = 1] = "MetaDataLoaded";
-    InitializationState[InitializationState["LoadedFromStore"] = 2] = "LoadedFromStore";
+    InitializationState[InitializationState["TableSettingsLoaded"] = 2] = "TableSettingsLoaded";
     InitializationState[InitializationState["Ready"] = 3] = "Ready";
 })(InitializationState || (InitializationState = {}));
 const defaultTableState = {
@@ -940,7 +955,8 @@ const defaultTableState = {
 };
 const defaultDataState = {
     virtualScrollOffset: 0,
-    dataLen: 0,
+    sortedFilteredDataLength: 0,
+    sortedFilteredGroupedDataLength: 0,
     virtualEnds: {
         start: 0, end: 20
     },
@@ -1100,7 +1116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }] });
 
-const FilterTypes = {
+const FilterType = {
     NumberEquals: 'Equals',
     NumberNotEqual: 'Does Not Equal',
     NumberGreaterThan: 'Greater Than',
@@ -1154,7 +1170,7 @@ class TableFilterDirective {
         }
         if (this.model) {
             subscriber(this.model.valueChanges, val => {
-                if (this.filterType === FilterTypes.StringContains && val === '') {
+                if (this.filterType === FilterType.StringContains && val === '') {
                     val = undefined;
                 }
                 this.filterValue = val;
@@ -1238,7 +1254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class TableFilterStringContainsDirective extends TableFilterDirective {
     constructor() {
         super();
-        this.filterType = FilterTypes.StringContains;
+        this.filterType = FilterType.StringContains;
         this.fieldType = FieldType.String;
     }
     reset() {
@@ -1306,7 +1322,7 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
             this.savable = true;
         }
         this.filter = {
-            filterType: FilterTypes.Custom,
+            filterType: FilterType.Custom,
             filterId: this.filterId,
             active: this._active,
             predicate: this._predicate,
@@ -1573,17 +1589,17 @@ const multipleStringValuesEqualsFunc = (filterInfo) => {
     return ((val) => filterVals.some((s) => prepareForStringCompare(val) === s));
 };
 const StringFilterFuncs = {
-    [FilterTypes.StringEquals]: stringEqualFunc,
-    [FilterTypes.StringContains]: stringContainsFunc,
-    [FilterTypes.StringDoesNotContain]: stringDoesNotContainFunc,
-    [FilterTypes.StringStartWith]: stringStartsWithFunc,
-    [FilterTypes.StringEndsWith]: stringEndsWithFunc,
-    [FilterTypes.IsNull]: isNull,
-    [FilterTypes.In]: multipleStringValuesEqualsFunc,
+    [FilterType.StringEquals]: stringEqualFunc,
+    [FilterType.StringContains]: stringContainsFunc,
+    [FilterType.StringDoesNotContain]: stringDoesNotContainFunc,
+    [FilterType.StringStartWith]: stringStartsWithFunc,
+    [FilterType.StringEndsWith]: stringEndsWithFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleStringValuesEqualsFunc,
 };
 const EnumFilterFuncs = {
-    [FilterTypes.IsNull]: isNull,
-    [FilterTypes.In]: multipleStringValuesEqualsFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleStringValuesEqualsFunc,
 };
 const prepareForStringCompare = (val) => (val?.toString().trim().toLowerCase());
 
@@ -1608,13 +1624,13 @@ const multipleNumberValuesEqualsFunc = (filterInfo) => {
     return ((val) => filterInfo.filterValue.some((value) => val === value));
 };
 const NumberFilterFuncs = {
-    [FilterTypes.NumberEquals]: numberEqalsFunc,
-    [FilterTypes.NumberNotEqual]: numberNotEqualFunc,
-    [FilterTypes.NumberGreaterThan]: numberGreaterThanFunc,
-    [FilterTypes.NumberLessThan]: numberLessThanFunc,
-    [FilterTypes.NumberBetween]: numberBetweenFunc,
-    [FilterTypes.IsNull]: isNull,
-    [FilterTypes.In]: multipleNumberValuesEqualsFunc,
+    [FilterType.NumberEquals]: numberEqalsFunc,
+    [FilterType.NumberNotEqual]: numberNotEqualFunc,
+    [FilterType.NumberGreaterThan]: numberGreaterThanFunc,
+    [FilterType.NumberLessThan]: numberLessThanFunc,
+    [FilterType.NumberBetween]: numberBetweenFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleNumberValuesEqualsFunc,
 };
 
 const dateIsOnFunc = (filterInfo) => {
@@ -1655,37 +1671,37 @@ const cleanDateTime = (filterInfo, val) => {
     return val;
 };
 const DateFilterFuncs = {
-    [FilterTypes.DateIsOn]: dateIsOnFunc,
-    [FilterTypes.DateIsNotOn]: dateIsNotOnFunc,
-    [FilterTypes.DateOnOrAfter]: dateIsOnOrAfterFunc,
-    [FilterTypes.DateOnOrBefore]: dateIsOnOrBeforeFunc,
-    [FilterTypes.DateBetween]: dateBetweenFunc,
-    [FilterTypes.IsNull]: isNull,
+    [FilterType.DateIsOn]: dateIsOnFunc,
+    [FilterType.DateIsNotOn]: dateIsNotOnFunc,
+    [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
+    [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
+    [FilterType.DateBetween]: dateBetweenFunc,
+    [FilterType.IsNull]: isNull,
 };
 const DateTimeFilterFuncs = {
     ...DateFilterFuncs,
-    [FilterTypes.DateTimeIsAt]: dateIsOnFunc,
-    [FilterTypes.DateTimeIsNotAt]: dateIsNotOnFunc,
-    [FilterTypes.DateTimeAtOrAfter]: dateIsOnOrAfterFunc,
-    [FilterTypes.DateTimeAtOrBefore]: dateIsOnOrBeforeFunc,
-    [FilterTypes.DateTimeBetween]: dateBetweenFunc,
-    [FilterTypes.IsNull]: isNull,
+    [FilterType.DateTimeIsAt]: dateIsOnFunc,
+    [FilterType.DateTimeIsNotAt]: dateIsNotOnFunc,
+    [FilterType.DateTimeAtOrAfter]: dateIsOnOrAfterFunc,
+    [FilterType.DateTimeAtOrBefore]: dateIsOnOrBeforeFunc,
+    [FilterType.DateTimeBetween]: dateBetweenFunc,
+    [FilterType.IsNull]: isNull,
 };
 
 const booleanEqualsFunc = (filterInfo) => (val) => {
     return filterInfo.filterValue === val;
 };
 const BooleanFilterFuncs = {
-    [FilterTypes.BooleanEquals]: booleanEqualsFunc,
-    [FilterTypes.IsNull]: isNull,
+    [FilterType.BooleanEquals]: booleanEqualsFunc,
+    [FilterType.IsNull]: isNull,
 };
 
 const filterFactoryMap = {
-    [FilterTypes.And]: (filter) => {
+    [FilterType.And]: (filter) => {
         const filters = createFilterFuncs(filter.filterValue);
         return (obj) => filters.every(f => f(obj));
     },
-    [FilterTypes.In]: (filter) => {
+    [FilterType.In]: (filter) => {
         const filters = createFilterFuncs(filter.filterValue);
         return (obj) => filters.some(f => f(obj));
     },
@@ -1705,10 +1721,10 @@ const filterTypeFuncMap = {
 };
 const filterTypeMap = Object.entries(filterTypeFuncMap).reduce((acc, [key, value]) => ({ ...acc, [key]: Object.keys(value) }), {});
 function isCustomFilter(filter) {
-    return filter && filter.filterType === FilterTypes.Custom;
+    return filter && filter.filterType === FilterType.Custom;
 }
 function isFilterInfo(filter) {
-    return filter && typeof filter.key === 'string' && filter.filterType !== FilterTypes.Custom;
+    return filter && typeof filter.key === 'string' && filter.filterType !== FilterType.Custom;
 }
 const defaultPredicate = () => true;
 function createFilterFuncs(filters) {
@@ -1742,10 +1758,10 @@ function createFilterFunc(filter) {
     };
 }
 const FalseyValueCanBeIncludedFilterTypes = [
-    FilterTypes.IsNull,
-    FilterTypes.NumberNotEqual,
-    FilterTypes.DateIsNotOn,
-    FilterTypes.StringDoesNotContain,
+    FilterType.IsNull,
+    FilterType.NumberNotEqual,
+    FilterType.DateIsNotOn,
+    FilterType.StringDoesNotContain,
 ];
 
 const replaceInArrayWithClone = (arr, findMeth, actionOnClone = ((t) => { })) => {
@@ -1882,13 +1898,14 @@ class TableStore extends ComponentStore {
     $hiddenKeys = this.selectSignal(state => state.hiddenKeys);
     $orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys, (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
     $getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
-    $tableSettingsMinWidth = this.selectSignal(state => state.notPersistedTableSettings.minColumnWidth);
+    $tableSettingsMinWidth = this.selectSignal(state => parseTbSizeToPixels(state.notPersistedTableSettings.minColumnWidth));
     $getUserDefinedWidth = (key) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
     $filters = this.selectSignal(state => state.filters);
     filters$ = this.select(state => state.filters);
     $getFilter = (filterId) => {
         return this.selectSignal(this.$filters, filters => filters[filterId]);
     };
+    $preSort = computed(() => createPreSort(this.$metaData()));
     $selectSorted = this.selectSignal(state => state.sorted, {
         equal: sortsAreSame
     });
@@ -1897,6 +1914,9 @@ class TableStore extends ComponentStore {
         .pipe(switchMap(() => this.selectSorted$));
     $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
     getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
+    $userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
+    $userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
+    $userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
     $footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
     $headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
     $groupBy = this.selectSignal(state => state.groupBy);
@@ -1920,6 +1940,7 @@ class TableStore extends ComponentStore {
         const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
         return ts;
     });
+    $notPersistedTableSettings = this.selectSignal(state => state.notPersistedTableSettings);
     tableSettings$ = toObservable(this.$tableSettings);
     $props = this.selectSignal(s => s.props);
     $getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
@@ -1928,7 +1949,7 @@ class TableStore extends ComponentStore {
         || state.userDefined?.showAll);
     $viewType = this.selectSignal(state => {
         const usePaginator = state.notPersistedTableSettings.usePaginator;
-        const showAll = state.showAll;
+        const showAll = state.showAll || state.userDefined?.showAll;
         const useVirtualScroll = state.notPersistedTableSettings.useVirtualScroll;
         if (showAll || (useVirtualScroll && !usePaginator)) {
             return 'virtual all';
@@ -1944,19 +1965,56 @@ class TableStore extends ComponentStore {
         }
     });
     resetState = this.updater((state) => {
-        const sorted = createPreSort(state.metaData);
+        const sorted = this.$preSort();
         return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
     });
+    resetPart = this.updater((state, part) => {
+        const newState = { ...state };
+        switch (part) {
+            case 'Sorting':
+                newState.sorted = this.$preSort();
+                return newState;
+            case 'Filters':
+                newState.filters = {};
+                return newState;
+            case 'Group By':
+                newState.groupBy = [];
+                return newState;
+            case 'Hidden Columns':
+                newState.hiddenKeys = [];
+                return newState;
+            case 'Column Widths':
+                newState.userDefined.widths = {};
+                newState.userDefined.table = {};
+                return newState;
+            case 'Column Order':
+                newState.userDefined.order = {};
+                return newState;
+            case 'Page Size':
+                delete newState.userDefined.pageSize;
+                return newState;
+            case 'Show All':
+                delete newState.userDefined.showAll;
+                return newState;
+            case 'Row Height':
+                delete newState.userDefined.rowHeight;
+                return newState;
+            case 'Header Height':
+                delete newState.userDefined.headerHeight;
+                return newState;
+        }
+        return newState;
+    });
     updateStateFromPersistedState = this.updater((state, persistedState) => {
         const incomingTableState = cleanPersistedState(state, persistedState);
         const newState = this.updateStateFunc(state, incomingTableState);
-        newState.initializationState = state.initializationState === InitializationState.MetaDataLoaded ? InitializationState.LoadedFromStore : state.initializationState;
+        newState.initializationState = state.initializationState <= InitializationState.MetaDataLoaded ? InitializationState.TableSettingsLoaded : state.initializationState;
         return newState;
     });
     updateStateFunc = (state, incomingTableState) => {
         const metaData = state.metaData;
         const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
-            : state.initializationState === InitializationState.Created ? createPreSort(metaData) : state.sorted;
+            : state.initializationState <= InitializationState.Created ? this.$preSort() : state.sorted;
         return { ...state, ...incomingTableState, metaData, sorted };
     };
     setTableSettings = this.updater((state, settings) => {
@@ -1964,7 +2022,7 @@ class TableStore extends ComponentStore {
             ...state,
             persistedTableSettings: state.persistedTableSettings.merge(settings),
             notPersistedTableSettings: state.notPersistedTableSettings.merge(settings),
-            initializationState: InitializationState.Ready
+            initializationState: InitializationState.TableSettingsLoaded
         };
         s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
         s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
@@ -1982,7 +2040,7 @@ class TableStore extends ComponentStore {
             return prev;
         }, {});
         const sortedInitialized = state.sorted.length > 0;
-        const sorted = sortedInitialized ? state.sorted : createPreSort(metaData);
+        const sorted = sortedInitialized ? state.sorted : this.$preSort();
         const order = initializeOrder(state, metaData);
         const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
         return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
@@ -2015,6 +2073,12 @@ class TableStore extends ComponentStore {
         }, {});
         return ({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } });
     });
+    setUserDefinedRowHeight = this.updater((state, rowHeight) => {
+        return ({ ...state, userDefined: { ...state.userDefined, rowHeight } });
+    });
+    setUserDefinedHeaderHeight = this.updater((state, headerHeight) => {
+        return ({ ...state, userDefined: { ...state.userDefined, headerHeight } });
+    });
     addFilter = this.updater((state, filter) => {
         return this.addFiltersToState(state, [filter]);
     });
@@ -2140,6 +2204,18 @@ class TableStore extends ComponentStore {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
+const resetable = [
+    'Sorting',
+    'Filters',
+    'Group By',
+    'Hidden Columns',
+    'Column Widths',
+    'Column Order',
+    'Row Height',
+    'Header Height',
+    'Page Size',
+    'Show All',
+];
 
 class MultiSortDirective extends MatSort {
     state = inject(TableStore);
@@ -2186,7 +2262,7 @@ function sortsAreSame(a, b) {
 }
 
 class DateFilterComponent {
-    FilterType = FilterTypes;
+    FilterType = FilterType;
     info;
     CurrentFilterType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2765,7 +2841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
         }], ctorParameters: () => [] });
 
 class NumberFilterComponent {
-    FilterType = FilterTypes;
+    FilterType = FilterType;
     FieldType = FieldType;
     $currentFilterType = input.required({ alias: 'CurrentFilterType' });
     $info = input.required({ alias: 'info' });
@@ -2780,7 +2856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
         }] });
 
 class DateTimeFilterComponent {
-    FilterType = FilterTypes;
+    FilterType = FilterType;
     info;
     CurrentFilterType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2887,7 +2963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class FilterComponent {
     state = inject(TableStore);
     filterTypes = filterTypeMap;
-    FilterType = FilterTypes;
+    FilterType = FilterType;
     FieldType = FieldType;
     $filter = input.required({
         alias: 'filter',
@@ -2939,7 +3015,7 @@ class GenColDisplayerComponent {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { 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: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { 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: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
@@ -2981,7 +3057,7 @@ class GenFilterDisplayerComponent {
         this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Add Filter'\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  @for (md of $filterCols(); track md.key) {\r\n    <button (click)=\"addFilter(md)\" mat-menu-item>\r\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;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{color:#6495ed;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$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Add Filter'\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  @for (md of $filterCols(); track md.key) {\r\n    <button (click)=\"addFilter(md)\" mat-menu-item>\r\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;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{color:#6495ed;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$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
             type: Component,
@@ -3004,7 +3080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 
 class FormatFilterTypePipe {
     transform(filterType, value) {
-        if (filterType === FilterTypes.IsNull) {
+        if (filterType === FilterType.IsNull) {
             return value ? filterType : 'Is Not Blank';
         }
         return filterType;
@@ -3031,16 +3107,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             args: [{ name: 'formatFilterValue' }]
         }] });
 const transform = (value, meta, filterType) => {
-    if (filterType === FilterTypes.IsNull) {
+    if (filterType === FilterType.IsNull) {
         return '';
     }
-    if (value && (filterType === FilterTypes.In)) {
+    if (value && (filterType === FilterType.In)) {
         if (meta.fieldType === FieldType.Enum) {
             return value.map((v) => spaceCase(meta.additional.enumMap[v])).join(', ') ?? value;
         }
         return value.join(', ') ?? value;
     }
-    if (filterType === FilterTypes.NumberBetween) {
+    if (filterType === FilterType.NumberBetween) {
         return value.Start + ' - ' + value.End;
     }
     if (meta.fieldType === FieldType.Date) {
@@ -3067,7 +3143,7 @@ class FilterChipsComponent {
     }
     $currentFilters = this.filterStore.$currentFilters;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\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        <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      <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    @if ($filters().length > 1) {\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{color:#6495ed;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{color:#6495ed;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$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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$3.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$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\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        <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      <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    @if ($filters().length > 1) {\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{color:#6495ed;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{color:#6495ed;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$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.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: "19.0.0", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
@@ -3191,7 +3267,7 @@ class RouterLinkColumnComponent {
   >
     {{value()}}
   </a>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
             type: Component,
@@ -3385,23 +3461,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class HeaderMenuComponent {
+class ColumnHeaderMenuComponent {
     tableState = inject(TableStore);
     FieldType = FieldType;
-    FilterType = FilterTypes;
-    myFilterType;
+    FilterType = FilterType;
     $metaData = input.required({ alias: 'metaData' });
     $trigger = viewChild(MatMenuTrigger);
     hideField(key) {
         this.tableState.hideColumn(key);
     }
-    ngOnInit() {
-        this.resetFilterType();
-    }
-    resetFilterType() {
+    $metaFilterType = computed(() => {
         if (this.$metaData().additional?.filterOptions?.filterableValues) {
-            this.myFilterType = FilterTypes.In;
-            return;
+            return FilterType.In;
         }
         switch (this.$metaData().fieldType) {
             case FieldType.String:
@@ -3409,34 +3480,29 @@ class HeaderMenuComponent {
             case FieldType.PhoneNumber:
             case FieldType.Array:
             case FieldType.Unknown:
-                this.myFilterType = FilterTypes.StringContains;
-                break;
+                return FilterType.StringContains;
             case FieldType.Currency:
             case FieldType.Number:
-                this.myFilterType = FilterTypes.NumberEquals;
-                break;
+                return FilterType.NumberEquals;
             case FieldType.Boolean:
-                this.myFilterType = FilterTypes.BooleanEquals;
-                break;
+                return FilterType.BooleanEquals;
             case FieldType.Date:
             case FieldType.DateTime:
-                this.myFilterType = FilterTypes.DateIsOn;
-                break;
+                return FilterType.DateIsOn;
             case FieldType.Enum:
-                this.myFilterType = FilterTypes.In;
-                break;
+                return FilterType.In;
+            default: return FilterType.StringContains;
         }
-    }
+    });
+    $currentFilterType = linkedSignal(() => this.$metaFilterType());
     setStringFilterType() {
-        this.myFilterType = this.myFilterType === FilterTypes.StringContains ? FilterTypes.StringDoesNotContain : FilterTypes.StringContains;
+        if (this.$currentFilterType() === FilterType.StringContains) {
+            this.$currentFilterType.set(FilterType.StringDoesNotContain);
+        }
+        this.$currentFilterType.set(FilterType.StringContains);
     }
     setFilterType(filterType) {
-        if (filterType === this.myFilterType) {
-            this.resetFilterType();
-        }
-        else {
-            this.myFilterType = filterType;
-        }
+        this.$currentFilterType.set(filterType);
     }
     onEnter(filter) {
         if (filter.filterValue != undefined && filter.filterType) {
@@ -3444,15 +3510,15 @@ class HeaderMenuComponent {
             this.$trigger().closeMenu();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: HeaderMenuComponent, 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\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 (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button 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 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\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>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n          <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n              <mat-icon [class]=\"{'chosen-icon': myFilterType === 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 (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\r\n          <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === 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\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [class]=\"{'chosen-icon': myFilterType === 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 (metaData.fieldType === FieldType.Boolean) {\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 stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\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\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n              <span  class=\"suffix-icons underline\"> =</span>\r\n            </button>\r\n          </span>\r\n          <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n            myFilterType === 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 [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-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;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: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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 , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.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: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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 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 (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button 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 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"currentFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\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\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\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 (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\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\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [class]=\"{'chosen-icon': currentFilterType === 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 (metaData.fieldType === FieldType.Boolean) {\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 stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\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\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === 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 [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-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;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.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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 , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.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: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HeaderMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", 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\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 (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button 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 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\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>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n          <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n              <mat-icon [class]=\"{'chosen-icon': myFilterType === 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 (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\r\n          <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === 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\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [class]=\"{'chosen-icon': myFilterType === 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 (metaData.fieldType === FieldType.Boolean) {\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 stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\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\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [class]=\"{'chosen-icon': myFilterType === 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\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n              <span  class=\"suffix-icons underline\"> =</span>\r\n            </button>\r\n          </span>\r\n          <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n            myFilterType === 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 [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-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;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"] }]
+                    ], template: "@let metaData = $metaData();\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 (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button 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 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"currentFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\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\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\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 (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\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\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [class]=\"{'chosen-icon': currentFilterType === 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 (metaData.fieldType === FieldType.Boolean) {\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 stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\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\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === 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\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === 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 [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-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;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 {
@@ -3615,7 +3681,7 @@ class ColumnBuilderComponent {
         return metaData.toolTip(element);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n  <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n    <!-- header -->\r\n    <ng-template matHeaderCellDef #myHeader>\r\n      <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n        [class]='metaData.additional?.columnPartClasses?.header'>\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!customCell?.columnDef?.headerCell)\r\n          {\r\n              @if(metaData.fieldType !== FieldType.NotMapped){\r\n                <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              } @else if(metaData.fieldType === FieldType.NotMapped){\r\n                <div style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @if($showFilters()){\r\n                <tb-header-menu #menu [metaData]='metaData' />\r\n              }\r\n          }\r\n          @else\r\n          {\r\n            <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} \">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      </mat-header-cell>\r\n    </ng-template>\r\n  \r\n    <!-- body -->\r\n    <ng-container *matCellDef=\"let element;\">\r\n      <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n    </ng-container>\r\n    <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; Injector: injector\" />\r\n      </mat-cell>\r\n    </ng-template>\r\n  \r\n    <!-- footer -->\r\n    <ng-template matFooterCellDef>\r\n      @if(customCell?.columnDef?.footerCell){\r\n        <ng-container\r\n        *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n      } @else {\r\n        @let data = $data();\r\n        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n          @if(!!data?.length && metaData.additional?.footer){\r\n            <span class=\"bold\">\r\n              @switch (metaData.fieldType) {\r\n                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n              }\r\n            </span>\r\n          }\r\n  \r\n        </mat-footer-cell>\r\n      }\r\n    </ng-template>\r\n  </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { 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: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n  <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n    <!-- header -->\r\n    <ng-template matHeaderCellDef #myHeader>\r\n      <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n        [class]='metaData.additional?.columnPartClasses?.header'>\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!customCell?.columnDef?.headerCell)\r\n          {\r\n              @if(metaData.fieldType !== FieldType.NotMapped){\r\n                <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              } @else if(metaData.fieldType === FieldType.NotMapped){\r\n                <div style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @if($showFilters()){\r\n                <tb-header-menu #menu [metaData]='metaData' />\r\n              }\r\n          }\r\n          @else\r\n          {\r\n            <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} \">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      </mat-header-cell>\r\n    </ng-template>\r\n  \r\n    <!-- body -->\r\n    <ng-container *matCellDef=\"let element;\">\r\n      <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n    </ng-container>\r\n    <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; Injector: injector\" />\r\n      </mat-cell>\r\n    </ng-template>\r\n  \r\n    <!-- footer -->\r\n    <ng-template matFooterCellDef>\r\n      @if(customCell?.columnDef?.footerCell){\r\n        <ng-container\r\n        *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n      } @else {\r\n        @let data = $data();\r\n        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n          @if(!!data?.length && metaData.additional?.footer){\r\n            <span class=\"bold\">\r\n              @switch (metaData.fieldType) {\r\n                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n              }\r\n            </span>\r\n          }\r\n  \r\n        </mat-footer-cell>\r\n      }\r\n    </ng-template>\r\n  </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { 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: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
             { provide: CDK_DROP_LIST, useExisting: CdkDropList },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3625,7 +3691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
                     ], imports: [
                         MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
-                        ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
+                        ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, ColumnHeaderMenuComponent,
                         MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
                     ], template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n  <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n    <!-- header -->\r\n    <ng-template matHeaderCellDef #myHeader>\r\n      <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n        [class]='metaData.additional?.columnPartClasses?.header'>\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!customCell?.columnDef?.headerCell)\r\n          {\r\n              @if(metaData.fieldType !== FieldType.NotMapped){\r\n                <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              } @else if(metaData.fieldType === FieldType.NotMapped){\r\n                <div style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @if($showFilters()){\r\n                <tb-header-menu #menu [metaData]='metaData' />\r\n              }\r\n          }\r\n          @else\r\n          {\r\n            <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} \">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      </mat-header-cell>\r\n    </ng-template>\r\n  \r\n    <!-- body -->\r\n    <ng-container *matCellDef=\"let element;\">\r\n      <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n    </ng-container>\r\n    <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; Injector: injector\" />\r\n      </mat-cell>\r\n    </ng-template>\r\n  \r\n    <!-- footer -->\r\n    <ng-template matFooterCellDef>\r\n      @if(customCell?.columnDef?.footerCell){\r\n        <ng-container\r\n        *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n      } @else {\r\n        @let data = $data();\r\n        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n          @if(!!data?.length && metaData.additional?.footer){\r\n            <span class=\"bold\">\r\n              @switch (metaData.fieldType) {\r\n                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n              }\r\n            </span>\r\n          }\r\n  \r\n        </mat-footer-cell>\r\n      }\r\n    </ng-template>\r\n  </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
         }] });
@@ -3914,33 +3980,42 @@ class GenericTableComponent {
             return val;
         }
     };
-    $rowHeight = this.state.selectSignal(s => {
-        if (this.state.$isVirtual() && s.notPersistedTableSettings.virtualSettings?.enforceRowHeight) {
-            const height = s.notPersistedTableSettings.virtualSettings.rowHeight;
-            return height + 'px';
+    $rowHeight = computed(() => {
+        if (this.state.$userDefinedRowHeight()) {
+            return this.state.$userDefinedRowHeight() + 'px';
         }
-        if (typeof s.notPersistedTableSettings.rowHeight === 'number') {
-            return s.notPersistedTableSettings.rowHeight + 'px';
+        const notPersistedTableSettings = this.state.$notPersistedTableSettings();
+        if (this.state.$isVirtual() && notPersistedTableSettings.virtualSettings?.enforceRowHeight) {
+            const height = notPersistedTableSettings.virtualSettings.rowHeight;
+            return parseTbSizeToPixels(height) + 'px';
         }
-        return s.notPersistedTableSettings.rowHeight;
+        if (notPersistedTableSettings.rowHeight) {
+            return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
+        }
+        return undefined;
     });
-    $headerHeight = this.state.selectSignal(s => {
-        if (this.state.$isVirtual() && s.notPersistedTableSettings.virtualSettings?.enforceHeaderHeight) {
-            const height = s.notPersistedTableSettings.virtualSettings.headerHeight;
-            return height + 'px';
+    $headerHeight = computed(() => {
+        if (this.state.$userDefinedHeaderHeight()) {
+            return this.state.$userDefinedHeaderHeight() + 'px';
         }
-        if (typeof s.notPersistedTableSettings.headerHeight === 'number') {
-            return s.notPersistedTableSettings.headerHeight + 'px';
+        const notPersistedTableSettings = this.state.$notPersistedTableSettings();
+        if (this.state.$isVirtual() && notPersistedTableSettings.virtualSettings?.enforceHeaderHeight) {
+            const height = notPersistedTableSettings.virtualSettings.headerHeight;
+            return parseTbSizeToPixels(height) + 'px';
         }
-        return s.notPersistedTableSettings.headerHeight;
+        if (notPersistedTableSettings.headerHeight) {
+            return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
+        }
+        return undefined;
     });
-    $groupHeaderHeight = this.state.selectSignal(s => {
-        if (s.notPersistedTableSettings.groupHeaderHeight) {
-            return s.notPersistedTableSettings.groupHeaderHeight + 'px';
+    $groupHeaderHeight = computed(() => {
+        const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
+        if (groupHeaderHeight) {
+            return parseTbSizeToPixels(groupHeaderHeight) + 'px';
         }
         return this.$rowHeight();
     });
-    $footerHeight = this.state.selectSignal(s => {
+    $footerHeight = computed(() => {
         const footerStyle = this.$footerRowStyle();
         switch (footerStyle) {
             case 'regular-footer':
@@ -3953,7 +4028,7 @@ class GenericTableComponent {
     });
     $stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -4241,161 +4316,361 @@ const defaultStorageState = {
     localProfiles: {}
 };
 
-class GroupByListComponent {
-    tableStore = inject(TableStore);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set>\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.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$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatChipsModule, MatIconModule, SpaceCasePipe
-                    ], template: "<mat-chip-set>\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
-        }] });
-
-class SortMenuComponentStore extends ComponentStore {
-    tableState = inject(TableStore);
-    setStoreStateEffect = effect(() => {
-        const metaData = this.tableState.$metaData();
-        if (!metaData)
-            return;
-        this.tableState.$selectSorted();
-        untracked(() => this.setStateFromTableStore());
-    });
-    setStateFromTableStore = () => {
-        const metaData = this.tableState.$metaData();
-        const sorted = [...this.tableState.$selectSorted()].map(s => ({
-            ...s,
-            displayName: metaData[s.active]?.displayName
-        }));
-        const notSorted = this.tableState.$metaDataArray()
-            .filter(md => md.fieldType !== FieldType.NotMapped && !md.noSort && !sorted.some(s => s.active === md.key))
-            .map(meta => ({ active: meta.key, displayName: meta.displayName }));
-        this.setState({ sorted, notSorted });
+//The idea of this is that if filters were only added, and none were removed or changed, then we only need to tag more rows to not be shown. We don't need to remove any 'dont show' tags.
+// So if filters were only added this method will return the added filters, if filters were removed or changed this method will return undefined.
+const updateFilterInfoState = (previousState, filterInfos) => {
+    filterInfos = filterNonActiveOrNotReadyFilters(filterInfos);
+    const currentState = {
+        allFilters: filterInfos,
+        onlyAddedFilters: filterInfoOnlyAdded(previousState.allFilters, filterInfos)
     };
-    constructor() {
-        super({ notSorted: [], sorted: [] });
-    }
-    setSorted = this.updater((state, sorted) => ({ ...state, sorted }));
-    setNotSorted = this.updater((state, notSorted) => ({ ...state, notSorted }));
-    $sorted = this.selectSignal(state => state.sorted);
-    $notSorted = this.selectSignal(state => state.notSorted);
-    setDirection = this.updater((state, sort) => {
-        const index = state.sorted.findIndex(s => s.active === sort.active);
-        const sorted = [...state.sorted];
-        sorted.splice(index, 1, sort);
-        return ({ ...state, sorted });
+    return currentState;
+};
+const mapFilterInfoStateToPredicateState = (s) => {
+    const mappedAddOnly = s.onlyAddedFilters
+        ?
+            Object.entries(s.onlyAddedFilters).filter(([, v]) => needsFilterCreation(v)).reduce((obj, [key, value]) => {
+                obj[key] = createFilterFunc(value);
+                return obj;
+            }, {})
+        : {};
+    const mappedAll = Object.entries(s.allFilters).filter(([, v]) => needsFilterCreation(v))
+        .filter(([, v]) => !isCustomFilter(v) || !!v.predicate)
+        .map(([key, value]) => {
+        return mappedAddOnly[key] || createFilterFunc(value);
     });
-    reset = () => {
-        this.setStateFromTableStore();
+    return ({
+        allFilters: mappedAll,
+        onlyAddedFilters: s.onlyAddedFilters ? Object.values(mappedAddOnly) : undefined
+    });
+};
+const updateFilterPredicateState = (previousState, filters) => {
+    const currentState = {
+        allFilters: filters,
+        onlyAddedFilters: predicatesOnlyAdded(previousState.allFilters, filters)
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore });
+    return currentState;
+};
+const updateFilterState = (filterInfos, predicates) => {
+    const infos = mapFilterInfoStateToPredicateState(filterInfos.value);
+    const filtersState = {
+        allFilters: [...infos.allFilters, ...predicates.value.allFilters]
+    };
+    if (filterInfos.timestamp > predicates.timestamp && !!filterInfos.value.onlyAddedFilters) {
+        filtersState.onlyAddedFilters = infos.onlyAddedFilters;
+    }
+    else {
+        filtersState.onlyAddedFilters = predicates.value.onlyAddedFilters;
+    }
+    return filtersState;
+};
+const filterNonActiveOrNotReadyFilters = (filtersDict) => Object.entries(filtersDict).reduce((obj, [key, value]) => {
+    if (value.active !== false && (!isCustomFilter(value) || !!value.predicate)) {
+        obj[key] = value;
+    }
+    ;
+    return obj;
+}, {});
+function filterInfoOnlyAdded(previousFilterInfos, currentFilterInfos) {
+    const previousKeys = Object.keys(previousFilterInfos);
+    const currentKeys = Object.keys(currentFilterInfos);
+    const keysInBoth = intersection(previousKeys, currentKeys);
+    const someRemoved = previousKeys.length > keysInBoth.length;
+    if (someRemoved || !previousKeys.length) {
+        return undefined;
+    }
+    if (filtersInfosUpdated(previousFilterInfos, currentFilterInfos)) {
+        return undefined;
+    }
+    const addedFilters = difference(currentKeys, keysInBoth).reduce((dict, key) => {
+        dict[key] = currentFilterInfos[key];
+        return dict;
+    }, {});
+    return addedFilters;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class SortMenuComponent {
-    SortDirection = SortDirection;
-    tableState = inject(TableStore);
-    store = inject(SortMenuComponentStore);
-    $sorted = computed(() => [...this.store.$sorted()]);
-    $notSorted = computed(() => [...this.store.$notSorted()]);
-    $dirty = signal(false);
-    reset() {
-        this.$dirty.set(false);
-        this.store.reset();
+function predicatesOnlyAdded(previousPredicates, currentPredicates) {
+    if (!previousPredicates.length) {
+        return undefined;
     }
-    dropIntoSorted(event) {
-        this.$dirty.set(true);
-        const sorted = [...event.container.data];
-        if (event.previousContainer === event.container) {
-            moveItemInArray(sorted, event.previousIndex, event.currentIndex);
-            this.store.setSorted(sorted);
-        }
-        else {
-            const notSorted = [...event.previousContainer.data];
-            transferArrayItem(notSorted, sorted, event.previousIndex, event.currentIndex);
-            sorted[event.currentIndex] = { ...sorted[event.currentIndex], direction: SortDirection.asc };
-            this.store.setSorted(sorted);
-            this.store.setNotSorted(notSorted);
-        }
+    const predicateFiltersRemoved = difference(previousPredicates, currentPredicates).length;
+    if (predicateFiltersRemoved) {
+        return undefined;
     }
-    dropIntoNotSorted(event) {
-        if (event.previousContainer === event.container) {
-            return;
-        }
-        else {
-            this.$dirty.set(true);
-            const sorted = [...event.previousContainer.data];
-            const notSorted = [...event.container.data];
-            transferArrayItem(sorted, notSorted, event.previousIndex, event.currentIndex);
-            notSorted[event.currentIndex] = { ...notSorted[event.currentIndex] };
-            this.store.setNotSorted(notSorted);
-            this.store.setSorted(sorted);
-        }
+    return difference(currentPredicates, previousPredicates);
+}
+function filtersInfosUpdated(previousFilterInfos, currentFilterInfos) {
+    return !Object.entries(previousFilterInfos).every(([key, val]) => {
+        return currentFilterInfos[key].filterType === val.filterType && currentFilterInfos[key].filterValue === val.filterValue;
+    });
+}
+function patchDirectiveFromState(directive, stateFilter) {
+    if (isFilterInfo(stateFilter)) {
+        const filterDirective = directive;
+        filterDirective.setFilterValue(stateFilter.filterValue);
+        filterDirective.update();
     }
-    apply = () => {
-        this.$dirty.set(false);
-        this.tableState.setAllSort(this.store.$sorted());
-    };
-    setDirection(sort) {
-        this.$dirty.set(true);
-        this.store.setDirection(sort);
+    if (isCustomFilter(stateFilter)) {
+        directive.active = stateFilter.active ?? false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n  </button>\r\n</span>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n  <div mat-menu-item class=\"menu-button\">\r\n    <div class=\"close-button-wrapper\">\r\n      <span matTooltip=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </span>\r\n      @if(dirty){\r\n        <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n          <mat-icon>undo</mat-icon>\r\n        </span>\r\n      }\r\n        \r\n    </div>\r\n  </div>\r\n\r\n  <!-- Apply Button -->\r\n  <div class=\"apply-button-wrapper\">\r\n    <button mat-button color=\"primary\" (click)=\"apply()\"\r\n      stop-propagation [class.apply-border]=\"dirty\"\r\n      [disabled]=\"!dirty\">\r\n        Apply @if (dirty) { Unsaved Changes }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Default Sorting Text -->\r\n  @if (!sorted.length) {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #sortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n    [cdkDropListData]=\"sorted\"\r\n    (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n    <!-- Menu Item Wrapper -->\r\n    @for (sort of sorted; track sort.active) {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1) {\r\n        <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n      }\r\n\r\n      <!-- Menu Item -->\r\n      <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n        <div class=\"sort-item\">\r\n          <span class=\"sorted-name\">\r\n            {{sort.displayName || (sort.active | spaceCase)}}\r\n            <span class=\"direction-text\">{{sort.direction}}</span>\r\n          </span>\r\n\r\n          <!-- Sort Direction Buttons -->\r\n          <div class=\"up-down-buttons-wrapper\">\r\n            <button  class=\"up-down-button up-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n              arrow_upward\r\n              </mat-icon>\r\n            </button>\r\n\r\n            <button class=\"up-down-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                arrow_downward\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <!-- Default Not Sorted Text -->\r\n  @if(!notSorted.length){\r\n    <div class=\"tip\" >\r\n      Not Sorted List\r\n    </div>\r\n  }\r\n\r\n  <!-- Not Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #notSortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n    [cdkDropListData]=\"notSorted\"\r\n    (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n    @for (sort of notSorted; track sort.active) {\r\n      <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n        <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-menu>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { 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: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
-                        SpaceCasePipe
-                    ], template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n  </button>\r\n</span>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n  <div mat-menu-item class=\"menu-button\">\r\n    <div class=\"close-button-wrapper\">\r\n      <span matTooltip=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </span>\r\n      @if(dirty){\r\n        <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n          <mat-icon>undo</mat-icon>\r\n        </span>\r\n      }\r\n        \r\n    </div>\r\n  </div>\r\n\r\n  <!-- Apply Button -->\r\n  <div class=\"apply-button-wrapper\">\r\n    <button mat-button color=\"primary\" (click)=\"apply()\"\r\n      stop-propagation [class.apply-border]=\"dirty\"\r\n      [disabled]=\"!dirty\">\r\n        Apply @if (dirty) { Unsaved Changes }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Default Sorting Text -->\r\n  @if (!sorted.length) {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #sortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n    [cdkDropListData]=\"sorted\"\r\n    (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n    <!-- Menu Item Wrapper -->\r\n    @for (sort of sorted; track sort.active) {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1) {\r\n        <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n      }\r\n\r\n      <!-- Menu Item -->\r\n      <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n        <div class=\"sort-item\">\r\n          <span class=\"sorted-name\">\r\n            {{sort.displayName || (sort.active | spaceCase)}}\r\n            <span class=\"direction-text\">{{sort.direction}}</span>\r\n          </span>\r\n\r\n          <!-- Sort Direction Buttons -->\r\n          <div class=\"up-down-buttons-wrapper\">\r\n            <button  class=\"up-down-button up-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n              arrow_upward\r\n              </mat-icon>\r\n            </button>\r\n\r\n            <button class=\"up-down-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                arrow_downward\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <!-- Default Not Sorted Text -->\r\n  @if(!notSorted.length){\r\n    <div class=\"tip\" >\r\n      Not Sorted List\r\n    </div>\r\n  }\r\n\r\n  <!-- Not Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #notSortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n    [cdkDropListData]=\"notSorted\"\r\n    (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n    @for (sort of notSorted; track sort.active) {\r\n      <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n        <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-menu>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
-        }] });
 
-class PaginatorComponent {
-    state = inject(TableStore);
-    data = inject(DataStore);
-    $paginator = viewChild(MatPaginator);
-    $dataLength = this.data.selectSignal(d => d.dataLen);
-    pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
-    $pageEvent = toSignal(this.pageEvent$);
-    $pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex);
-    $pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize);
-    $currentPageData = computed(() => {
-        const pageEvent = this.$pageEvent();
-        if (!pageEvent)
-            return;
-        const paginator = this.$paginator();
-        // Reset because initial page event does not have page length
-        pageEvent.pageIndex = paginator.pageIndex;
-        pageEvent.pageSize = paginator.pageSize;
-        pageEvent.length = paginator.length;
-        const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
-        const dataLength = this.$dataLength();
-        return ({ ...pageDetails, total: dataLength });
-    });
-    onPageIndexEffect = effect(() => {
-        const index = this.$pageIndexChangeEvent();
-        if (index === undefined)
-            return;
-        untracked(() => this.state.setCurrentPage(index));
-    });
-    onPageSizeEffect = effect(() => {
-        const size = this.$pageSizeChangeEvent();
-        const initialized = this.state.$initializationState() >= InitializationState.Ready;
-        if (!size || !initialized)
-            return;
-        untracked(() => this.state.setUserDefinedPageSize(size));
-    });
-    onMetaPageSizeEffect = effect(() => {
-        const paginator = this.$paginator();
-        if (!paginator)
-            return;
+function getGroupedData(data, groupByKeys) {
+    return tbGroupBy(data, groupByKeys);
+}
+const tbGroupBy = (data, groupByKeys, parentGroupName) => {
+    const currentKey = groupByKeys[0];
+    const res = groupBy(data, currentKey);
+    const remainingGroupByKeys = groupByKeys.slice(1);
+    const finalGroups = !remainingGroupByKeys.length;
+    if (remainingGroupByKeys.length) {
+        Object.keys(res).forEach(key => res[key] = tbGroupBy(res[key], remainingGroupByKeys, key));
+    }
+    return Object.keys(res).map((groupName, i) => {
+        const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
+        const groupHeaders = res[groupName]?.filter(row => row.isGroupHeader) ?? [];
+        return {
+            isGroupHeader: true,
+            groupHeaderDisplay: groupName,
+            hasTheData: finalGroups,
+            children: finalGroups ? res[groupName] : res[groupName].map(d => { d.padding += 20; return d; }),
+            groupName: `tb_group_${uniqName}`,
+            padding: 1,
+            key: currentKey,
+            length: groupHeaders.reduce((acc, curr) => curr.length + acc, 0) + ((res[groupName] ?? []).length - groupHeaders.length),
+            [initIndexSymbol]: uniqName,
+        };
+    });
+};
+function updateGroupByState({ groupedData }, [data, groups, expandedGroups], index) {
+    if (index === 0
+        || dataUpdated(data, groups, expandedGroups)
+        || groupsUpdated(groups, expandedGroups)) {
+        groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
+    }
+    const newDisplayData = expandedGroups.value.length === 0
+        ? groupedData
+        : groupedData.map(group => mapGroupHeader(group, expandedGroups.value)).flat();
+    return ({ displayData: newDisplayData, groupedData });
+}
+function mapGroupHeader(obj, data) {
+    const showChildren = data.find(a => a.expandedHeaders.includes(obj.groupName));
+    const children = !showChildren ? [] :
+        obj.hasTheData ? obj.children
+            : obj.children.map(a => mapGroupHeader(a, data));
+    return [obj, ...children].flat();
+}
+function dataUpdated(data, groups, expandedGroups) {
+    return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
+}
+function groupsUpdated(groups, expandedGroups) {
+    return groups.timestamp > expandedGroups.timestamp;
+}
+;
+const initialGroupByState = { displayData: [], groupedData: [] };
+const getAllGroupHeaderNames = (data) => {
+    const groups = getGroupHeaders(data, (d) => d.isGroupHeader);
+    return groupBy(groups, 'key');
+};
+const getAllGroupHeaderNamesByKeys = (data, keys) => {
+    const groups = getGroupHeaders(data, (d) => d.isGroupHeader && keys.includes(d.key));
+    return groupBy(groups, 'key');
+};
+const getGroupHeaders = (data, filterFunc, arr = []) => {
+    const headers = data.filter(filterFunc);
+    arr.push(...headers);
+    headers.forEach(h => { if (!!h.children.length)
+        getGroupHeaders(h.children, filterFunc, arr); });
+    return arr;
+};
+
+function sortData(data, sorted) {
+    const ordered = orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction));
+    return ordered;
+}
+function filterData(data, filters, resetAll = false) {
+    for (let index = 0; index < data.length; index++) {
+        const element = data[index];
+        const hide = !filters.every(filter => filter(element));
+        if (hide || resetAll) {
+            element[tbNoShowSymbol] = hide;
+        }
+    }
+    return data;
+}
+const tbNoShowSymbol = Symbol('tb_no_show');
+
+const sortAndFilterData = (data, sortState, filterState) => combineLatest([
+    data.pipe(timestamp()),
+    sortState.pipe(timestamp()),
+    filterState.pipe(timestamp())
+]).pipe(scan(({ mappedData: resultData }, [data, sort, f], index) => {
+    if (index === 0 || (data.timestamp > sort.timestamp && data.timestamp > f.timestamp)) {
+        return ({ mappedData: filterData(sortData(data.value, sort.value.sortsToRun), f.value.allFilters) });
+    }
+    if (sort.timestamp > f.timestamp) {
+        return ({ mappedData: sortData(resultData, sort.value.sortsToRun) });
+    }
+    return ({ mappedData: filterData(resultData, f.value.onlyAddedFilters || f.value.allFilters, !f.value.onlyAddedFilters) });
+}, { mappedData: [] })).pipe(map$1(({ mappedData: resultData }) => resultData.filter(item => !item[tbNoShowSymbol])), defaultShareReplay());
+const createDataCleaners = (metadatas, mutate = false) => {
+    const transforms = createCleaners(metadatas);
+    return (data) => {
+        if (!mutate) {
+            data = { ...data };
+        }
+        for (const transform of transforms) {
+            transform(data);
+        }
+        return data;
+    };
+};
+const createCleaners = (metadatas) => {
+    return metadatas.reduce((transforms, metaData) => {
+        const notNestedKey = metaData.key;
+        switch (metaData.fieldType) {
+            case FieldType.Currency:
+            case FieldType.Number: {
+                const nested = metaData.key.includes('.');
+                if (nested) {
+                    transforms.push((t) => {
+                        const val = get(t, metaData.key);
+                        const num = Number(val);
+                        set(t, metaData.key, isNaN(num) || val == null ? null : num);
+                    });
+                }
+                else {
+                    transforms.push((t) => {
+                        const val = t[notNestedKey];
+                        const num = Number(val);
+                        t[notNestedKey] = (isNaN(num) || val == null ? null : num);
+                    });
+                }
+                break;
+            }
+            case FieldType.Date: {
+                const nested = metaData.key.includes('.');
+                if (nested) {
+                    transforms.push((t) => {
+                        const val = get(t, metaData.key);
+                        const date = Date.parse(val);
+                        if (isNaN(date)) {
+                            set(t, metaData.key, null);
+                            return;
+                        }
+                        const d = new Date(date);
+                        d.setHours(0, 0, 0, 0);
+                        set(t, metaData.key, d);
+                    });
+                }
+                else {
+                    transforms.push((t) => {
+                        const val = t[notNestedKey];
+                        const date = Date.parse(val);
+                        if (isNaN(date)) {
+                            t[notNestedKey] = null;
+                            return;
+                        }
+                        const d = new Date(date);
+                        d.setHours(0, 0, 0, 0);
+                        t[notNestedKey] = d;
+                    });
+                }
+                break;
+            }
+            case FieldType.DateTime: {
+                const nested = metaData.key.includes('.');
+                if (nested) {
+                    transforms.push((t) => {
+                        const val = get(t, metaData.key);
+                        const dateTime = Date.parse(val);
+                        if (isNaN(dateTime)) {
+                            set(t, metaData.key, null);
+                            return;
+                        }
+                        const dt = new Date(dateTime);
+                        if (metaData.additional?.dateTimeOptions?.includeMilliseconds) {
+                            set(t, metaData.key, dt);
+                            return;
+                        }
+                        if (metaData.additional?.dateTimeOptions?.includeSeconds) {
+                            dt.setMilliseconds(0);
+                            set(t, metaData.key, dt);
+                            return;
+                        }
+                        dt.setSeconds(0, 0);
+                        set(t, metaData.key, dt);
+                    });
+                }
+                else {
+                    transforms.push((t) => {
+                        const val = t[notNestedKey];
+                        const dateTime = Date.parse(val);
+                        if (isNaN(dateTime)) {
+                            t[notNestedKey] = null;
+                            return;
+                        }
+                        const dt = new Date(dateTime);
+                        if (metaData.additional?.dateTimeOptions?.includeMilliseconds) {
+                            t[notNestedKey] = dt;
+                            return;
+                        }
+                        if (metaData.additional?.dateTimeOptions?.includeSeconds) {
+                            dt.setMilliseconds(0);
+                            t[notNestedKey] = dt;
+                            return;
+                        }
+                        dt.setSeconds(0, 0);
+                        t[notNestedKey] = dt;
+                    });
+                }
+            }
+        }
+        return transforms;
+    }, []);
+};
+
+class PaginatorComponent {
+    state = inject(TableStore);
+    data = inject(DataStore);
+    $paginator = viewChild(MatPaginator);
+    $dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
+    pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
+    $pageEvent = toSignal(this.pageEvent$);
+    $pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex);
+    $pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize);
+    $currentPageData = computed(() => {
+        const pageEvent = this.$pageEvent();
+        if (!pageEvent)
+            return;
+        const paginator = this.$paginator();
+        // Reset because initial page event does not have page length
+        pageEvent.pageIndex = paginator.pageIndex;
+        pageEvent.pageSize = paginator.pageSize;
+        pageEvent.length = paginator.length;
+        const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
+        const dataLength = this.$dataLength();
+        return ({ ...pageDetails, total: dataLength });
+    });
+    onPageIndexEffect = effect(() => {
+        const index = this.$pageIndexChangeEvent();
+        if (index === undefined)
+            return;
+        untracked(() => this.state.setCurrentPage(index));
+    });
+    onPageSizeEffect = effect(() => {
+        const size = this.$pageSizeChangeEvent();
+        const initialized = this.state.$initializationState() >= InitializationState.Ready;
+        if (!size || !initialized)
+            return;
+        untracked(() => this.state.setUserDefinedPageSize(size));
+    });
+    onMetaPageSizeEffect = effect(() => {
+        const paginator = this.$paginator();
+        if (!paginator)
+            return;
         const metaPageSize = this.state.$pageSize();
-        untracked(() => paginator._changePageSize(metaPageSize));
+        const initialized = this.state.$initializationState() >= InitializationState.Ready;
+        untracked(() => initialized && paginator._changePageSize(metaPageSize));
     });
     onDataLengthEffect = effect(() => {
         const paginator = this.$paginator();
@@ -4425,7 +4700,7 @@ class PaginatorComponent {
     </mat-paginator>
     @if ($showAllOption()) {<button mat-button (click)="showAll()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
   </div>
-  `, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -4449,251 +4724,96 @@ const mapPaginationEventToCurrentPageDetails = (pageData) => ({
     total: pageData.length
 });
 
-class TableVirtualScrollStrategy {
-    itemHeight;
-    headerHeight;
-    scrolledIndexChange;
-    dataLength = 0;
-    indexChange = new Subject();
-    viewport;
-    constructor(itemHeight, headerHeight) {
-        this.itemHeight = itemHeight;
-        this.headerHeight = headerHeight;
-        this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
-    }
-    attach(viewport) {
-        this.viewport = viewport;
-        this.onDataLengthChanged();
-    }
-    contentScrolled$ = new Subject();
-    sub = subscriber(this.contentScrolled$.pipe(observeOn(animationFrameScheduler)), () => {
-        this.updateContent();
+class TableBuilderDataSource extends MatTableDataSource {
+    subscription;
+    #$dataSrc = signal([]);
+    $dataSize = signal({ start: 0, end: 0 }, {
+        equal: (a, b) => a.start === b.start && a.end === b.end
     });
-    onContentScrolled() {
-        this.contentScrolled$.next();
-    }
-    onDataLengthChanged() {
-        if (this.viewport) {
-            this.viewport.setTotalContentSize(this.dataLength * this.itemHeight);
-            this.updateContent();
-        }
-    }
-    setDataLength(length) {
-        this.dataLength = length;
-        this.onDataLengthChanged();
-    }
-    detach() { }
-    onContentRendered() { }
-    onRenderedOffsetChanged() {
-    }
-    scrollToIndex(index, behavior) {
-    }
-    updateContent() {
-        if (!this.viewport) {
-            return;
-        }
-        const amountOfRows = Math.ceil((this.viewport.getViewportSize() - this.headerHeight) / this.itemHeight);
-        const offset = this.viewport.measureScrollOffset();
-        const buffer = 35;
-        const skip = Math.round(offset / this.itemHeight);
-        // always start at an even index so we don't change the color patterns for odd and even rows.
-        const index = skip % 2 === 0 ? skip : skip - 1;
-        const start = Math.max(0, index - buffer);
-        const end = Math.min(this.dataLength, index + amountOfRows + buffer);
-        this.viewport.setRenderedContentOffset(this.itemHeight * start);
-        this.viewport.setRenderedRange({ start, end });
-        this.indexChange.next(index);
-    }
-}
-
-class VirtualScrollContainer {
-    state = inject(TableStore);
-    dataStore = inject(DataStore);
-    viewport = viewChild(CdkVirtualScrollViewport);
-    genericTable = contentChild(GenericTableComponent);
-    tableContainer = inject(TableContainerComponent);
-    defaultOptions = new VirtualScrollOptions();
-    scrollStrategy = new TableVirtualScrollStrategy(this.computedRowHeight(), this.computedHeaderHeight());
-    $usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
-    $pageSize = this.state.$pageSize;
-    $currentPage = this.state.$currentPage;
-    $showAll = this.state.selectSignal(s => s.showAll);
-    $stateDataLength = this.dataStore.selectSignal(s => s.dataLen);
-    viewPort$ = toObservable(this.viewport).pipe(notNull());
-    $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
-    $renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
-    $virtualScrollOptions = computed(() => this.state.$tableSettings().virtualSettings);
-    $dataLength = computed(() => {
-        const paginated = this.$usePaginator() && !this.$showAll();
-        const pageSize = this.$pageSize();
-        const pageNumber = this.$currentPage();
-        const dataLen = this.$stateDataLength();
-        if (paginated)
-            return Math.min(dataLen - (pageNumber * pageSize), pageSize);
-        return dataLen;
+    _ = effect(() => {
+        const data = this.#$dataSrc();
+        const dataSize = this.$dataSize();
+        untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
     });
-    constructor() {
-        addEventListener('resize', this.resizeHandler);
+    setData(data) {
+        this.#$dataSrc.set(data);
     }
-    setViewportEffect = effect(() => {
-        const viewport = this.viewport();
-        untracked(() => {
-            if (!!viewport) {
-                this.setSize(this.viewport().elementRef);
+    constructor(state, data) {
+        super([]);
+        const $currentPage = state.$currentPage;
+        const $pageSize = state.$pageSize;
+        const $virtualEnds = data.selectSignal(d => d.virtualEnds);
+        const $dataLength = computed(() => this.#$dataSrc().length);
+        const $dataSize = computed(() => {
+            const viewType = state.$viewType();
+            const dataLength = $dataLength();
+            const currentPage = $currentPage();
+            const pageSize = $pageSize();
+            const virtualEnds = $virtualEnds();
+            const previousPageRecords = currentPage * pageSize;
+            if (viewType === 'virtual paginator') {
+                return ({ start: virtualEnds.start + previousPageRecords, end: Math.min(virtualEnds.end, pageSize) + previousPageRecords });
             }
-            ;
-        });
-    });
-    subscriber = subscriber();
-    onRenderedRangeEffect = effect(() => {
-        const renderedRange = this.$renderedRange();
-        if (!renderedRange)
-            return;
-        untracked(() => {
-            this.dataStore.patchState({
-                virtualEnds: {
-                    start: renderedRange.start,
-                    end: renderedRange.end + 25,
-                }
-            });
-            this.setSize(this.viewport().elementRef);
-        });
-    });
-    onDataLengthEffect = effect(() => {
-        const dataLength = this.$dataLength();
-        untracked(() => {
-            this.scrollStrategy.setDataLength(dataLength);
-        });
-    });
-    onOffsetEffect = effect(() => {
-        const offset = this.$offset();
-        untracked(() => {
-            this.dataStore.patchState({ virtualScrollOffset: offset });
+            if (viewType === 'paginator') {
+                return ({ start: previousPageRecords, end: previousPageRecords + pageSize });
+            }
+            if (viewType === 'all') {
+                return ({ start: 0, end: dataLength });
+            }
+            return ({ start: virtualEnds.start, end: virtualEnds.end });
         });
-    });
-    $offset = computed(() => {
-        const viewport = this.viewport();
-        const scrolledIndexChange = this.$scrolledIndexChange();
-        if (!scrolledIndexChange || !viewport)
-            return 0;
-        return viewport.getOffsetToRenderedContentStart() ?? 0;
-    });
-    ngOnDestroy() {
-        removeEventListener('resize', this.resizeHandler);
-    }
-    setSize(el) {
-        const virtualScrollOptions = this.$virtualScrollOptions();
-        if (virtualScrollOptions.dynamicHeight) {
-            this.calcDynamic(el);
-            return;
-        }
-        const rowHeight = this.computedRowHeight();
-        let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
-        amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
-        let height = (rowHeight * amountOfVisibleItems);
-        const footerHeight = this.computedFooterHeight();
-        const headerHeight = this.computedHeaderHeight();
-        height += (footerHeight + headerHeight);
-        if (virtualScrollOptions?.maxViewPortHeight && virtualScrollOptions.maxViewPortHeight < height)
-            height = virtualScrollOptions.maxViewPortHeight;
-        this.setHeight(height, el);
-    }
-    calcDynamic$ = new Subject();
-    $calcDynamic = toSignal(this.calcDynamic$.pipe(debounceTime(300)));
-    #onCalcDynamicEffect = effect(() => {
-        const el = this.$calcDynamic();
-        if (!el)
-            return;
-        this.calcDynamic(el);
-    });
-    calcDynamic(el) {
-        const virtualScrollOptions = this.$virtualScrollOptions();
-        const t = this.tableContainer.elementRef.nativeElement.querySelector(`#${TableContainerComponent.headerId}`);
-        const rect = t?.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const distanceFromBottom = viewportHeight - rect.bottom;
-        const rowHeight = this.computedRowHeight();
-        const footerHeight = this.computedFooterHeight();
-        const headerHeight = this.computedHeaderHeight();
-        let tableSize = distanceFromBottom;
-        if (virtualScrollOptions?.maxViewPortHeight && virtualScrollOptions.maxViewPortHeight < tableSize) {
-            tableSize = virtualScrollOptions.maxViewPortHeight;
-        }
-        const available = (distanceFromBottom - footerHeight) - headerHeight;
-        const amountOfRowsThatWillFit = Math.floor(available / rowHeight);
-        const minAmountOfRows = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
-        const amountOfVisibleItems = Math.min(Math.max(amountOfRowsThatWillFit, minAmountOfRows), this.$dataLength());
-        let height = (rowHeight * amountOfVisibleItems);
-        height += (footerHeight + headerHeight) - 10;
-        this.setHeight(height, el);
+        this.$dataSize = $dataSize;
     }
-    setHeight(height, el) {
-        const vsViewport = el.nativeElement;
-        vsViewport.setAttribute('style', `height: ${height}px !important;`);
-        this.viewport()?.checkViewportSize();
-        const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
-        this.dataStore.patchState({ virtualScrollOffset });
+    connect() {
+        return super.connect();
     }
-    resizeHandler = () => {
-        if (this.viewport() && this.$virtualScrollOptions().dynamicHeight) {
-            this.setSize(this.viewport().elementRef);
+    disconnect() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = undefined;
         }
-    };
-    computedRowHeight() {
-        const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
-        const rowHeight = virtualScrollOptions?.rowHeight || (typeof this.state.$tableSettings().rowHeight === 'number' && this.state.$tableSettings().rowHeight) || this.defaultOptions.rowHeight;
-        return rowHeight;
-    }
-    computedHeaderHeight() {
-        if (this.state.$tableSettings().hideHeader)
-            return 0;
-        const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
-        const headerHeight = virtualScrollOptions?.headerHeight || (typeof this.state.$tableSettings().headerHeight === 'number' && this.state.$tableSettings().headerHeight) || this.defaultOptions.headerHeight;
-        return headerHeight;
+        super.disconnect();
     }
-    computedFooterHeight() {
-        return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
+}
+
+function mergeCustomCellMetaData(metaData1, metaData2) {
+    if (!metaData2) {
+        metaData1.noExport = true;
+        return metaData1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <cdk-virtual-scroll-viewport>
-      <ng-content/>
-    </cdk-virtual-scroll-viewport>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i1$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], viewProviders: [
-            {
-                provide: VIRTUAL_SCROLL_STRATEGY,
-                useFactory: (c) => c.scrollStrategy,
-                deps: [forwardRef(() => VirtualScrollContainer)],
-            },
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    if (!metaData1.displayName)
+        metaData1.displayName = metaData2.displayName;
+    if (!metaData1.preSort)
+        metaData1.preSort = metaData2.preSort;
+    if (!metaData1.order)
+        metaData1.order = metaData2.order;
+    if (!metaData1.width)
+        metaData1.width = metaData2.width;
+    if (metaData2.fieldType)
+        metaData1.fieldType = metaData2.fieldType;
+    metaData1.noExport = metaData2.noExport;
+    return ({ ...metaData2, ...metaData1 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, decorators: [{
+
+class GroupByListComponent {
+    tableStore = inject(TableStore);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set>\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'tb-virtual-scroll-container',
-                    template: `
-    <cdk-virtual-scroll-viewport>
-      <ng-content/>
-    </cdk-virtual-scroll-viewport>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [ScrollingModule],
-                    viewProviders: [
-                        {
-                            provide: VIRTUAL_SCROLL_STRATEGY,
-                            useFactory: (c) => c.scrollStrategy,
-                            deps: [forwardRef(() => VirtualScrollContainer)],
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatChipsModule, MatIconModule, SpaceCasePipe
+                    ], template: "<mat-chip-set>\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
+        }] });
 
 class ProfilesMenuComponent {
     stateService = inject(TableBuilderStateStore);
     tableStore = inject(TableStore);
-    $tableId = input.required();
-    onSaveState = output();
+    $tableId = input.required({ alias: 'tableId' });
+    $isMatMenuChild = input(false, { alias: 'isMatMenuChild' });
     trigger = viewChild('trigger');
+    menu = viewChild.required(MatMenu);
     allProfilesPanelOpened = signal(false);
     newProfilePanelOpened = signal(false);
     $currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())());
@@ -4701,7 +4821,6 @@ class ProfilesMenuComponent {
     $keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())());
     saveState(key) {
         const tableState = this.tableStore.$savableState();
-        this.onSaveState.emit(null);
         this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
     }
     addState(key, asDefault) {
@@ -4727,411 +4846,507 @@ class ProfilesMenuComponent {
         return a;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: 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: 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: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: true, transformFunction: null }, $isMatMenuChild: { classPropertyName: "$isMatMenuChild", publicName: "isMatMenuChild", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!$isMatMenuChild())\r\n{\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n  </button>\r\n}\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: 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: 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: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
                         MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
-                    ], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
+                    ], template: "@if(!$isMatMenuChild())\r\n{\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n  </button>\r\n}\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
         }] });
 
-const containerImports = [
-    NgTemplateOutlet,
-    PaginatorComponent,
-    MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
-    SortMenuComponent, GenericTableComponent, StopPropagationDirective, ProfilesMenuComponent,
-    MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
-];
-
-//The idea of this is that if filters were only added, and none were removed or changed, then we only need to tag more rows to not be shown. We don't need to remove any 'dont show' tags.
-// So if filters were only added this method will return the added filters, if filters were removed or changed this method will return undefined.
-const updateFilterInfoState = (previousState, filterInfos) => {
-    filterInfos = filterNonActiveOrNotReadyFilters(filterInfos);
-    const currentState = {
-        allFilters: filterInfos,
-        onlyAddedFilters: filterInfoOnlyAdded(previousState.allFilters, filterInfos)
-    };
-    return currentState;
-};
-const mapFilterInfoStateToPredicateState = (s) => {
-    const mappedAddOnly = s.onlyAddedFilters
-        ?
-            Object.entries(s.onlyAddedFilters).filter(([, v]) => needsFilterCreation(v)).reduce((obj, [key, value]) => {
-                obj[key] = createFilterFunc(value);
-                return obj;
-            }, {})
-        : {};
-    const mappedAll = Object.entries(s.allFilters).filter(([, v]) => needsFilterCreation(v))
-        .filter(([, v]) => !isCustomFilter(v) || !!v.predicate)
-        .map(([key, value]) => {
-        return mappedAddOnly[key] || createFilterFunc(value);
-    });
-    return ({
-        allFilters: mappedAll,
-        onlyAddedFilters: s.onlyAddedFilters ? Object.values(mappedAddOnly) : undefined
+class SortMenuComponentStore extends ComponentStore {
+    tableState = inject(TableStore);
+    setStoreStateEffect = effect(() => {
+        const metaData = this.tableState.$metaData();
+        if (!metaData)
+            return;
+        this.tableState.$selectSorted();
+        untracked(() => this.setStateFromTableStore());
     });
-};
-const updateFilterPredicateState = (previousState, filters) => {
-    const currentState = {
-        allFilters: filters,
-        onlyAddedFilters: predicatesOnlyAdded(previousState.allFilters, filters)
-    };
-    return currentState;
-};
-const updateFilterState = (filterInfos, predicates) => {
-    const infos = mapFilterInfoStateToPredicateState(filterInfos.value);
-    const filtersState = {
-        allFilters: [...infos.allFilters, ...predicates.value.allFilters]
+    setStateFromTableStore = () => {
+        const metaData = this.tableState.$metaData();
+        const sorted = [...this.tableState.$selectSorted()].map(s => ({
+            ...s,
+            displayName: metaData[s.active]?.displayName
+        }));
+        const notSorted = this.tableState.$metaDataArray()
+            .filter(md => md.fieldType !== FieldType.NotMapped && !md.noSort && !sorted.some(s => s.active === md.key))
+            .map(meta => ({ active: meta.key, displayName: meta.displayName }));
+        this.setState({ sorted, notSorted });
     };
-    if (filterInfos.timestamp > predicates.timestamp && !!filterInfos.value.onlyAddedFilters) {
-        filtersState.onlyAddedFilters = infos.onlyAddedFilters;
-    }
-    else {
-        filtersState.onlyAddedFilters = predicates.value.onlyAddedFilters;
-    }
-    return filtersState;
-};
-const filterNonActiveOrNotReadyFilters = (filtersDict) => Object.entries(filtersDict).reduce((obj, [key, value]) => {
-    if (value.active !== false && (!isCustomFilter(value) || !!value.predicate)) {
-        obj[key] = value;
-    }
-    ;
-    return obj;
-}, {});
-function filterInfoOnlyAdded(previousFilterInfos, currentFilterInfos) {
-    const previousKeys = Object.keys(previousFilterInfos);
-    const currentKeys = Object.keys(currentFilterInfos);
-    const keysInBoth = intersection(previousKeys, currentKeys);
-    const someRemoved = previousKeys.length > keysInBoth.length;
-    if (someRemoved || !previousKeys.length) {
-        return undefined;
-    }
-    if (filtersInfosUpdated(previousFilterInfos, currentFilterInfos)) {
-        return undefined;
+    constructor() {
+        super({ notSorted: [], sorted: [] });
     }
-    const addedFilters = difference(currentKeys, keysInBoth).reduce((dict, key) => {
-        dict[key] = currentFilterInfos[key];
-        return dict;
-    }, {});
-    return addedFilters;
+    setSorted = this.updater((state, sorted) => ({ ...state, sorted }));
+    setNotSorted = this.updater((state, notSorted) => ({ ...state, notSorted }));
+    $sorted = this.selectSignal(state => state.sorted);
+    $notSorted = this.selectSignal(state => state.notSorted);
+    setDirection = this.updater((state, sort) => {
+        const index = state.sorted.findIndex(s => s.active === sort.active);
+        const sorted = [...state.sorted];
+        sorted.splice(index, 1, sort);
+        return ({ ...state, sorted });
+    });
+    reset = () => {
+        this.setStateFromTableStore();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore });
 }
-function predicatesOnlyAdded(previousPredicates, currentPredicates) {
-    if (!previousPredicates.length) {
-        return undefined;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class SortMenuComponent {
+    SortDirection = SortDirection;
+    tableState = inject(TableStore);
+    store = inject(SortMenuComponentStore);
+    $sorted = computed(() => [...this.store.$sorted()]);
+    $notSorted = computed(() => [...this.store.$notSorted()]);
+    $dirty = signal(false);
+    reset() {
+        this.$dirty.set(false);
+        this.store.reset();
     }
-    const predicateFiltersRemoved = difference(previousPredicates, currentPredicates).length;
-    if (predicateFiltersRemoved) {
-        return undefined;
+    dropIntoSorted(event) {
+        this.$dirty.set(true);
+        const sorted = [...event.container.data];
+        if (event.previousContainer === event.container) {
+            moveItemInArray(sorted, event.previousIndex, event.currentIndex);
+            this.store.setSorted(sorted);
+        }
+        else {
+            const notSorted = [...event.previousContainer.data];
+            transferArrayItem(notSorted, sorted, event.previousIndex, event.currentIndex);
+            sorted[event.currentIndex] = { ...sorted[event.currentIndex], direction: SortDirection.asc };
+            this.store.setSorted(sorted);
+            this.store.setNotSorted(notSorted);
+        }
     }
-    return difference(currentPredicates, previousPredicates);
-}
-function filtersInfosUpdated(previousFilterInfos, currentFilterInfos) {
-    return !Object.entries(previousFilterInfos).every(([key, val]) => {
-        return currentFilterInfos[key].filterType === val.filterType && currentFilterInfos[key].filterValue === val.filterValue;
-    });
-}
-function patchDirectiveFromState(directive, stateFilter) {
-    if (isFilterInfo(stateFilter)) {
-        const filterDirective = directive;
-        filterDirective.setFilterValue(stateFilter.filterValue);
-        filterDirective.update();
+    dropIntoNotSorted(event) {
+        if (event.previousContainer === event.container) {
+            return;
+        }
+        else {
+            this.$dirty.set(true);
+            const sorted = [...event.previousContainer.data];
+            const notSorted = [...event.container.data];
+            transferArrayItem(sorted, notSorted, event.previousIndex, event.currentIndex);
+            notSorted[event.currentIndex] = { ...notSorted[event.currentIndex] };
+            this.store.setNotSorted(notSorted);
+            this.store.setSorted(sorted);
+        }
     }
-    if (isCustomFilter(stateFilter)) {
-        directive.active = stateFilter.active ?? false;
+    apply = () => {
+        this.$dirty.set(false);
+        this.tableState.setAllSort(this.store.$sorted());
+    };
+    setDirection(sort) {
+        this.$dirty.set(true);
+        this.store.setDirection(sort);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n  </button>\r\n</span>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n  <div mat-menu-item class=\"menu-button\">\r\n    <div class=\"close-button-wrapper\">\r\n      <span matTooltip=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </span>\r\n      @if(dirty){\r\n        <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n          <mat-icon>undo</mat-icon>\r\n        </span>\r\n      }\r\n        \r\n    </div>\r\n  </div>\r\n\r\n  <!-- Apply Button -->\r\n  <div class=\"apply-button-wrapper\">\r\n    <button mat-button color=\"primary\" (click)=\"apply()\"\r\n      stop-propagation [class.apply-border]=\"dirty\"\r\n      [disabled]=\"!dirty\">\r\n        Apply @if (dirty) { Unsaved Changes }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Default Sorting Text -->\r\n  @if (!sorted.length) {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #sortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n    [cdkDropListData]=\"sorted\"\r\n    (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n    <!-- Menu Item Wrapper -->\r\n    @for (sort of sorted; track sort.active) {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1) {\r\n        <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n      }\r\n\r\n      <!-- Menu Item -->\r\n      <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n        <div class=\"sort-item\">\r\n          <span class=\"sorted-name\">\r\n            {{sort.displayName || (sort.active | spaceCase)}}\r\n            <span class=\"direction-text\">{{sort.direction}}</span>\r\n          </span>\r\n\r\n          <!-- Sort Direction Buttons -->\r\n          <div class=\"up-down-buttons-wrapper\">\r\n            <button  class=\"up-down-button up-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n              arrow_upward\r\n              </mat-icon>\r\n            </button>\r\n\r\n            <button class=\"up-down-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                arrow_downward\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <!-- Default Not Sorted Text -->\r\n  @if(!notSorted.length){\r\n    <div class=\"tip\" >\r\n      Not Sorted List\r\n    </div>\r\n  }\r\n\r\n  <!-- Not Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #notSortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n    [cdkDropListData]=\"notSorted\"\r\n    (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n    @for (sort of notSorted; track sort.active) {\r\n      <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n        <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-menu>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { 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: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
+                        SpaceCasePipe
+                    ], template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n  </button>\r\n</span>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n  <div mat-menu-item class=\"menu-button\">\r\n    <div class=\"close-button-wrapper\">\r\n      <span matTooltip=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </span>\r\n      @if(dirty){\r\n        <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n          <mat-icon>undo</mat-icon>\r\n        </span>\r\n      }\r\n        \r\n    </div>\r\n  </div>\r\n\r\n  <!-- Apply Button -->\r\n  <div class=\"apply-button-wrapper\">\r\n    <button mat-button color=\"primary\" (click)=\"apply()\"\r\n      stop-propagation [class.apply-border]=\"dirty\"\r\n      [disabled]=\"!dirty\">\r\n        Apply @if (dirty) { Unsaved Changes }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Default Sorting Text -->\r\n  @if (!sorted.length) {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #sortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n    [cdkDropListData]=\"sorted\"\r\n    (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n    <!-- Menu Item Wrapper -->\r\n    @for (sort of sorted; track sort.active) {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1) {\r\n        <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n      }\r\n\r\n      <!-- Menu Item -->\r\n      <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n        <div class=\"sort-item\">\r\n          <span class=\"sorted-name\">\r\n            {{sort.displayName || (sort.active | spaceCase)}}\r\n            <span class=\"direction-text\">{{sort.direction}}</span>\r\n          </span>\r\n\r\n          <!-- Sort Direction Buttons -->\r\n          <div class=\"up-down-buttons-wrapper\">\r\n            <button  class=\"up-down-button up-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n              arrow_upward\r\n              </mat-icon>\r\n            </button>\r\n\r\n            <button class=\"up-down-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                arrow_downward\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <!-- Default Not Sorted Text -->\r\n  @if(!notSorted.length){\r\n    <div class=\"tip\" >\r\n      Not Sorted List\r\n    </div>\r\n  }\r\n\r\n  <!-- Not Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #notSortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n    [cdkDropListData]=\"notSorted\"\r\n    (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n    @for (sort of notSorted; track sort.active) {\r\n      <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n        <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-menu>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
+        }] });
 
-function getGroupedData(data, groupByKeys) {
-    return tbGroupBy(data, groupByKeys);
-}
-const tbGroupBy = (data, groupByKeys, parentGroupName) => {
-    const currentKey = groupByKeys[0];
-    const res = groupBy(data, currentKey);
-    const remainingGroupByKeys = groupByKeys.slice(1);
-    const finalGroups = !remainingGroupByKeys.length;
-    if (remainingGroupByKeys.length) {
-        Object.keys(res).forEach(key => res[key] = tbGroupBy(res[key], remainingGroupByKeys, key));
+class ResetMenuComponent {
+    menu = viewChild.required(MatMenu);
+    tableContainer = inject(TableContainerComponent);
+    state = this.tableContainer.state;
+    onStateReset$ = output({ alias: 'onStateReset' });
+    resetState() {
+        this.tableContainer.$customFilterDirectives().forEach(cf => cf.reset());
+        this.tableContainer.$filterDirectives().forEach(cf => cf.reset());
+        this.state.resetState();
+        this.onStateReset$.emit(null);
     }
-    return Object.keys(res).map((groupName, i) => {
-        const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
-        const groupHeaders = res[groupName]?.filter(row => row.isGroupHeader) ?? [];
-        return {
-            isGroupHeader: true,
-            groupHeaderDisplay: groupName,
-            hasTheData: finalGroups,
-            children: finalGroups ? res[groupName] : res[groupName].map(d => { d.padding += 20; return d; }),
-            groupName: `tb_group_${uniqName}`,
-            padding: 1,
-            key: currentKey,
-            length: groupHeaders.reduce((acc, curr) => curr.length + acc, 0) + ((res[groupName] ?? []).length - groupHeaders.length),
-            [initIndexSymbol]: uniqName,
-        };
+    $filtersSet = computed(() => {
+        return Object.values(this.state.$filters())
+            .filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
+            .length;
     });
-};
-function updateGroupByState({ groupedData }, [data, groups, expandedGroups], index) {
-    if (index === 0
-        || dataUpdated(data, groups, expandedGroups)
-        || groupsUpdated(groups, expandedGroups)) {
-        groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
-    }
-    const newDisplayData = expandedGroups.value.length === 0
-        ? groupedData
-        : groupedData.map(group => mapGroupHeader(group, expandedGroups.value)).flat();
-    return ({ displayData: newDisplayData, groupedData });
-}
-function mapGroupHeader(obj, data) {
-    const showChildren = data.find(a => a.expandedHeaders.includes(obj.groupName));
-    const children = !showChildren ? [] :
-        obj.hasTheData ? obj.children
-            : obj.children.map(a => mapGroupHeader(a, data));
-    return [obj, ...children].flat();
-}
-function dataUpdated(data, groups, expandedGroups) {
-    return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
-}
-function groupsUpdated(groups, expandedGroups) {
-    return groups.timestamp > expandedGroups.timestamp;
-}
-;
-const initialGroupByState = { displayData: [], groupedData: [] };
-const getAllGroupHeaderNames = (data) => {
-    const groups = getGroupHeaders(data, (d) => d.isGroupHeader);
-    return groupBy(groups, 'key');
-};
-const getAllGroupHeaderNamesByKeys = (data, keys) => {
-    const groups = getGroupHeaders(data, (d) => d.isGroupHeader && keys.includes(d.key));
-    return groupBy(groups, 'key');
-};
-const getGroupHeaders = (data, filterFunc, arr = []) => {
-    const headers = data.filter(filterFunc);
-    arr.push(...headers);
-    headers.forEach(h => { if (!!h.children.length)
-        getGroupHeaders(h.children, filterFunc, arr); });
-    return arr;
-};
-
-function sortData(data, sorted) {
-    const ordered = orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction));
-    return ordered;
-}
-function filterData(data, filters, resetAll = false) {
-    for (let index = 0; index < data.length; index++) {
-        const element = data[index];
-        const hide = !filters.every(filter => filter(element));
-        if (hide || resetAll) {
-            element[tbNoShowSymbol] = hide;
+    $sortSet = computed(() => {
+        const sorts = this.state.$selectSorted();
+        if (!sorts.length)
+            return false;
+        const preSorts = this.state.$preSort();
+        if (!preSorts.length)
+            return true;
+        return !sortsAreSame(preSorts, sorts);
+    });
+    $groupBySet = computed(() => this.state.$groupByKeys().length);
+    $hiddenSet = computed(() => this.state.$hiddenKeys().length);
+    $orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length);
+    $widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length);
+    $rowHeightSet = this.state.$userDefinedRowHeight;
+    headerHeightSet = this.state.$userDefinedHeaderHeight;
+    pageSizeSet = this.state.$userDefinedPageSize;
+    showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
+    $set = computed(() => {
+        const arr = [];
+        if (this.$filtersSet()) {
+            arr.push('Filters');
+        }
+        if (this.$sortSet()) {
+            arr.push('Sorting');
+        }
+        if (this.$groupBySet()) {
+            arr.push('Group By');
+        }
+        if (this.$hiddenSet()) {
+            arr.push('Hidden Columns');
+        }
+        if (this.$orderSet()) {
+            arr.push('Column Order');
         }
+        if (this.$widthsSet()) {
+            arr.push('Column Widths');
+        }
+        if (this.$rowHeightSet()) {
+            arr.push('Row Height');
+        }
+        if (this.headerHeightSet()) {
+            arr.push('Header Height');
+        }
+        if (this.pageSizeSet()) {
+            arr.push('Page Size');
+        }
+        if (this.showAllSet()) {
+            arr.push('Show All');
+        }
+        return arr;
+    });
+    resetable = resetable;
+    reset(s) {
+        this.state.resetPart(s);
     }
-    return data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ResetMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ResetMenuComponent, isStandalone: true, selector: "lib-reset-menu", outputs: { onStateReset$: "onStateReset" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu #menu2=\"matMenu\">\r\n  @if($set().length > 1)\r\n  {\r\n    <button mat-menu-item (click)=\"state.resetState()\">All</button>\r\n  }\r\n  @for (item of $set(); track $index)\r\n  {\r\n    <button mat-menu-item (click)=\"state.resetPart(item)\">Reset {{item}}</button>\r\n  }\r\n</mat-menu>", styles: [":host{display:contents}\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: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-const tbNoShowSymbol = Symbol('tb_no_show');
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ResetMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-reset-menu', imports: [MatMenuModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menu2=\"matMenu\">\r\n  @if($set().length > 1)\r\n  {\r\n    <button mat-menu-item (click)=\"state.resetState()\">All</button>\r\n  }\r\n  @for (item of $set(); track $index)\r\n  {\r\n    <button mat-menu-item (click)=\"state.resetPart(item)\">Reset {{item}}</button>\r\n  }\r\n</mat-menu>", styles: [":host{display:contents}\n"] }]
+        }] });
 
-const sortAndFilterData = (data, sortState, filterState) => combineLatest([
-    data.pipe(timestamp()),
-    sortState.pipe(timestamp()),
-    filterState.pipe(timestamp())
-]).pipe(scan(({ mappedData: resultData }, [data, sort, f], index) => {
-    if (index === 0 || (data.timestamp > sort.timestamp && data.timestamp > f.timestamp)) {
-        return ({ mappedData: filterData(sortData(data.value, sort.value.sortsToRun), f.value.allFilters) });
+class TableHeaderMenuComponent {
+    menu = viewChild.required(MatMenu);
+    exportToCsvService = inject(ExportToCsvService);
+    tableContainer = inject(TableContainerComponent);
+    state = this.tableContainer.state;
+    $rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0));
+    $headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0));
+    exportToCsv() {
+        this.exportToCsvService.exportToCsv(this.tableContainer.$data());
+    }
+    updateHeight(v, element) {
+        if (+element.value < 10)
+            element.value = '10';
+        if (+element.value > 100)
+            element.value = '100';
+        if (v === 'row')
+            this.state.setUserDefinedRowHeight(+element.value);
+        if (v === 'header')
+            this.state.setUserDefinedHeaderHeight(+element.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableHeaderMenuComponent, isStandalone: true, selector: "lib-table-header-menu", viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n  <span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n    <button mat-menu-item [matMenuTriggerFor]=\"r.menu()\" #d=\"matMenuItem\" [disabled]=\"!r.$set().length\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset</span>\r\n    </button>\r\n  </span>\r\n  @if (!tableContainer.state.$tableSettings().hideExport) {\r\n    <button mat-menu-item (click)=\"exportToCsv()\">\r\n      <mat-icon color=\"primary\">file_download</mat-icon>\r\n      <span>Export Table</span>\r\n    </button>\r\n  }\r\n  @if (tableContainer.$tableId(); as tableId) {\r\n    <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n      <mat-icon color=\"primary\">people</mat-icon>\r\n      <span>Profiles</span>\r\n    </button>\r\n    <tb-profiles-menu class=\"profiles-menu\" #pm [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n  }\r\n\r\n\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Row Height</span>\r\n      <input #i class=\"input\" stop-propagation type=\"number\" [value]=\"$rowHeightNum()\" (change)=\"updateHeight('row', i)\" [min]=\"10\" [max]=\"100\" />\r\n    </div>\r\n  </div>\r\n  @if(!state.$tableSettings().hideHeader)\r\n  {\r\n    <div mat-menu-item>\r\n      <div class=\"height-input-wrapper\">\r\n        <span>Header Height</span>\r\n        <input #i2 class=\"input\" stop-propagation type=\"number\" [value]=\"$headerHeightNum()\" (change)=\"updateHeight('header', i2)\" [min]=\"10\" [max]=\"100\"/>\r\n      </div>\r\n    </div>\r\n  }\r\n</mat-menu>\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;border:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.height-input-wrapper{display:flex;gap:4px}\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.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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: ResetMenuComponent, selector: "lib-reset-menu", outputs: ["onStateReset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-table-header-menu', imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective], template: "<mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n  <span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n    <button mat-menu-item [matMenuTriggerFor]=\"r.menu()\" #d=\"matMenuItem\" [disabled]=\"!r.$set().length\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset</span>\r\n    </button>\r\n  </span>\r\n  @if (!tableContainer.state.$tableSettings().hideExport) {\r\n    <button mat-menu-item (click)=\"exportToCsv()\">\r\n      <mat-icon color=\"primary\">file_download</mat-icon>\r\n      <span>Export Table</span>\r\n    </button>\r\n  }\r\n  @if (tableContainer.$tableId(); as tableId) {\r\n    <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n      <mat-icon color=\"primary\">people</mat-icon>\r\n      <span>Profiles</span>\r\n    </button>\r\n    <tb-profiles-menu class=\"profiles-menu\" #pm [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n  }\r\n\r\n\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Row Height</span>\r\n      <input #i class=\"input\" stop-propagation type=\"number\" [value]=\"$rowHeightNum()\" (change)=\"updateHeight('row', i)\" [min]=\"10\" [max]=\"100\" />\r\n    </div>\r\n  </div>\r\n  @if(!state.$tableSettings().hideHeader)\r\n  {\r\n    <div mat-menu-item>\r\n      <div class=\"height-input-wrapper\">\r\n        <span>Header Height</span>\r\n        <input #i2 class=\"input\" stop-propagation type=\"number\" [value]=\"$headerHeightNum()\" (change)=\"updateHeight('header', i2)\" [min]=\"10\" [max]=\"100\"/>\r\n      </div>\r\n    </div>\r\n  }\r\n</mat-menu>\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;border:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.height-input-wrapper{display:flex;gap:4px}\n"] }]
+        }] });
+
+class TableVirtualScrollStrategy {
+    scrolledIndexChange;
+    dataLength = 0;
+    indexChange = new Subject();
+    viewport;
+    $rowHeight;
+    $rowHeightChange = linkedSignal({
+        source: () => this.$rowHeight(),
+        computation: (curr, previous) => ({ curr, previous: previous?.source || curr })
+    });
+    $headerHeight;
+    constructor(scrollContainer) {
+        this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
+        this.$rowHeight = scrollContainer.computedRowHeight;
+        this.$headerHeight = scrollContainer.computedHeaderHeight;
     }
-    if (sort.timestamp > f.timestamp) {
-        return ({ mappedData: sortData(resultData, sort.value.sortsToRun) });
+    attach(viewport) {
+        this.viewport = viewport;
+        this.onDataLengthChanged();
     }
-    return ({ mappedData: filterData(resultData, f.value.onlyAddedFilters || f.value.allFilters, !f.value.onlyAddedFilters) });
-}, { mappedData: [] })).pipe(map$1(({ mappedData: resultData }) => resultData.filter(item => !item[tbNoShowSymbol])), defaultShareReplay());
-const createDataCleaners = (metadatas, mutate = false) => {
-    const transforms = createCleaners(metadatas);
-    return (data) => {
-        if (!mutate) {
-            data = { ...data };
-        }
-        for (const transform of transforms) {
-            transform(data);
-        }
-        return data;
-    };
-};
-const createCleaners = (metadatas) => {
-    return metadatas.reduce((transforms, metaData) => {
-        const notNestedKey = metaData.key;
-        switch (metaData.fieldType) {
-            case FieldType.Currency:
-            case FieldType.Number: {
-                const nested = metaData.key.includes('.');
-                if (nested) {
-                    transforms.push((t) => {
-                        const val = get(t, metaData.key);
-                        const num = Number(val);
-                        set(t, metaData.key, isNaN(num) || val == null ? null : num);
-                    });
-                }
-                else {
-                    transforms.push((t) => {
-                        const val = t[notNestedKey];
-                        const num = Number(val);
-                        t[notNestedKey] = (isNaN(num) || val == null ? null : num);
-                    });
-                }
-                break;
-            }
-            case FieldType.Date: {
-                const nested = metaData.key.includes('.');
-                if (nested) {
-                    transforms.push((t) => {
-                        const val = get(t, metaData.key);
-                        const date = Date.parse(val);
-                        if (isNaN(date)) {
-                            set(t, metaData.key, null);
-                            return;
-                        }
-                        const d = new Date(date);
-                        d.setHours(0, 0, 0, 0);
-                        set(t, metaData.key, d);
-                    });
-                }
-                else {
-                    transforms.push((t) => {
-                        const val = t[notNestedKey];
-                        const date = Date.parse(val);
-                        if (isNaN(date)) {
-                            t[notNestedKey] = null;
-                            return;
-                        }
-                        const d = new Date(date);
-                        d.setHours(0, 0, 0, 0);
-                        t[notNestedKey] = d;
-                    });
-                }
-                break;
-            }
-            case FieldType.DateTime: {
-                const nested = metaData.key.includes('.');
-                if (nested) {
-                    transforms.push((t) => {
-                        const val = get(t, metaData.key);
-                        const dateTime = Date.parse(val);
-                        if (isNaN(dateTime)) {
-                            set(t, metaData.key, null);
-                            return;
-                        }
-                        const dt = new Date(dateTime);
-                        if (metaData.additional?.dateTimeOptions?.includeMilliseconds) {
-                            set(t, metaData.key, dt);
-                            return;
-                        }
-                        if (metaData.additional?.dateTimeOptions?.includeSeconds) {
-                            dt.setMilliseconds(0);
-                            set(t, metaData.key, dt);
-                            return;
-                        }
-                        dt.setSeconds(0, 0);
-                        set(t, metaData.key, dt);
-                    });
-                }
-                else {
-                    transforms.push((t) => {
-                        const val = t[notNestedKey];
-                        const dateTime = Date.parse(val);
-                        if (isNaN(dateTime)) {
-                            t[notNestedKey] = null;
-                            return;
-                        }
-                        const dt = new Date(dateTime);
-                        if (metaData.additional?.dateTimeOptions?.includeMilliseconds) {
-                            t[notNestedKey] = dt;
-                            return;
-                        }
-                        if (metaData.additional?.dateTimeOptions?.includeSeconds) {
-                            dt.setMilliseconds(0);
-                            t[notNestedKey] = dt;
-                            return;
-                        }
-                        dt.setSeconds(0, 0);
-                        t[notNestedKey] = dt;
-                    });
-                }
-            }
+    contentScrolled$ = new Subject();
+    sub = subscriber(this.contentScrolled$.pipe(observeOn(animationFrameScheduler), debounceTime(20)), () => {
+        this.updateContent('scroll');
+    });
+    onContentScrolled() {
+        this.contentScrolled$.next();
+    }
+    onDataLengthChanged() {
+    }
+    setDataLength(length) {
+        this.dataLength = length;
+        if (this.viewport && this.$rowHeight) {
+            this.viewport.setTotalContentSize(this.dataLength * this.$rowHeight());
+            // this.updateContent('data ' + dataTrigger);
         }
-        return transforms;
-    }, []);
-};
-
-class TableBuilderDataSource extends MatTableDataSource {
-    subscription;
-    #$dataSrc = signal([]);
-    $dataSize = signal({ start: 0, end: 0 }, {
-        equal: (a, b) => a.start === b.start && a.end === b.end
+        this.updateContent('data ');
+    }
+    detach() { }
+    onContentRendered() { }
+    onRenderedOffsetChanged() {
+    }
+    scrollToIndex(index, behavior) {
+    }
+    #onHeaderChange = effect(() => {
+        this.$headerHeight && this.$headerHeight();
+        this.updateContent('header height');
     });
-    _ = effect(() => {
-        const data = this.#$dataSrc();
-        const dataSize = this.$dataSize();
-        untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
+    #onRowChange = effect(() => {
+        this.$rowHeight && this.$rowHeight();
+        this.updateContent('row height');
     });
-    setData(data) {
-        this.#$dataSrc.set(data);
+    updateContent(trigger) {
+        if (!this.viewport || !this.$rowHeight) {
+            return;
+        }
+        const currentContentHeight = +this.viewport._totalContentHeight.replace('px', '');
+        const newContentHeight = this.dataLength * this.$rowHeight();
+        if (currentContentHeight !== newContentHeight) {
+            this.viewport.setTotalContentSize(newContentHeight);
+            setTimeout(() => {
+                this.update(trigger);
+            }, 0);
+            return;
+        }
+        this.update(trigger);
     }
-    constructor(state, data) {
-        super([]);
-        const $currentPage = state.$currentPage;
-        const $pageSize = state.$pageSize;
-        const $virtualEnds = data.selectSignal(d => d.virtualEnds);
-        const $dataLength = computed(() => this.#$dataSrc().length);
-        const $dataSize = computed(() => {
-            const viewType = state.$viewType();
-            const dataLength = $dataLength();
-            const currentPage = $currentPage();
-            const pageSize = $pageSize();
-            const virtualEnds = $virtualEnds();
-            const previousPageRecords = currentPage * pageSize;
-            if (viewType === 'virtual paginator') {
-                return ({ start: virtualEnds.start + previousPageRecords, end: Math.min(virtualEnds.end, pageSize) + previousPageRecords });
-            }
-            if (viewType === 'paginator') {
-                return ({ start: previousPageRecords, end: previousPageRecords + pageSize });
+    update(trigger) {
+        if (!this.viewport || !this.$rowHeight) {
+            return;
+        }
+        const rowHeightChangeEvent = this.$rowHeightChange();
+        const rowHeight = rowHeightChangeEvent.curr;
+        const rowHeightAdjustment = trigger === 'row height' ? rowHeightChangeEvent.curr / rowHeightChangeEvent.previous : 1;
+        const amountOfRows = Math.ceil((this.viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
+        const f = this.viewport.measureScrollOffset();
+        const offset = this.viewport.measureScrollOffset() * rowHeightAdjustment;
+        if (offset !== f) {
+            this.viewport.scrollToOffset(offset);
+        }
+        const buffer = 35;
+        const skip = Math.round(offset / rowHeight);
+        const index = skip % 2 === 0 ? skip : skip - 1;
+        const start = Math.max(0, index - buffer);
+        const end = Math.min(this.dataLength, index + amountOfRows + buffer);
+        this.viewport.setRenderedContentOffset(rowHeight * start);
+        this.viewport.setRenderedRange({ start, end });
+        this.indexChange.next(index);
+    }
+}
+
+class VirtualScrollContainer {
+    state = inject(TableStore);
+    dataStore = inject(DataStore);
+    viewport = viewChild.required(CdkVirtualScrollViewport);
+    genericTable = contentChild(GenericTableComponent);
+    tableContainer = inject(TableContainerComponent);
+    defaultOptions = new VirtualScrollOptions();
+    $usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
+    $pageSize = this.state.$pageSize;
+    $currentPage = this.state.$currentPage;
+    $showAll = this.state.$showAll;
+    $stateDataLength = this.dataStore.selectSignal(s => s.sortedFilteredGroupedDataLength);
+    viewPort$ = toObservable(this.viewport).pipe(notNull());
+    $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
+    $renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
+    $virtualScrollOptions = computed(() => this.state.$tableSettings().virtualSettings);
+    $dataLength = computed(() => {
+        const paginated = this.$usePaginator() && !this.$showAll();
+        const pageSize = this.$pageSize();
+        const pageNumber = this.$currentPage();
+        const dataLen = this.$stateDataLength();
+        if (paginated)
+            return Math.min(dataLen - (pageNumber * pageSize), pageSize);
+        return dataLen;
+    });
+    constructor() {
+        addEventListener('resize', this.resizeHandler);
+    }
+    setViewportEffect = effect(() => {
+        const viewport = this.viewport();
+        untracked(() => {
+            if (!!viewport) {
+                this.setSize(this.viewport().elementRef);
             }
-            if (viewType === 'all') {
-                return ({ start: 0, end: dataLength });
+            ;
+        });
+    });
+    subscriber = subscriber();
+    #onRenderedRangeEffect = effect(() => {
+        const renderedRange = this.$renderedRange();
+        if (!renderedRange)
+            return;
+        untracked(() => {
+            this.dataStore.patchState({
+                virtualEnds: {
+                    start: renderedRange.start,
+                    end: renderedRange.end + 25,
+                }
+            });
+            this.setSize(this.viewport().elementRef);
+        });
+    });
+    #onDataLengthEffect = effect(() => {
+        const dataLength = this.$dataLength();
+        untracked(() => {
+            const renderedRange = this.$renderedRange();
+            this.scrollStrategy.setDataLength(dataLength);
+            if ((renderedRange?.start || 0) > dataLength) {
+                this.viewport().scrollToOffset(0);
             }
-            return ({ start: virtualEnds.start, end: virtualEnds.end });
         });
-        this.$dataSize = $dataSize;
+    });
+    #onOffsetEffect = effect(() => {
+        const offset = this.$offset();
+        untracked(() => {
+            this.dataStore.patchState({ virtualScrollOffset: offset });
+        });
+    });
+    $offset = computed(() => {
+        const viewport = this.viewport();
+        const scrolledIndexChange = this.$scrolledIndexChange();
+        if (!scrolledIndexChange || !viewport)
+            return 0;
+        return viewport.getOffsetToRenderedContentStart() ?? 0;
+    });
+    ngOnDestroy() {
+        removeEventListener('resize', this.resizeHandler);
     }
-    connect() {
-        return super.connect();
+    setSize(el) {
+        const virtualScrollOptions = this.$virtualScrollOptions();
+        if (virtualScrollOptions.dynamicHeight) {
+            this.calcDynamic(el);
+            return;
+        }
+        const rowHeight = this.computedRowHeight();
+        let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+        amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
+        let height = (rowHeight * amountOfVisibleItems);
+        const footerHeight = this.computedFooterHeight();
+        const headerHeight = this.computedHeaderHeight();
+        height += (footerHeight + headerHeight);
+        const maxViewPortHeightPx = parseTbSizeToPixels(virtualScrollOptions.maxViewPortHeight) || 0;
+        if (virtualScrollOptions?.maxViewPortHeight && maxViewPortHeightPx)
+            height = maxViewPortHeightPx;
+        this.setHeight(height, el);
     }
-    disconnect() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-            this.subscription = undefined;
+    calcDynamic$ = new Subject();
+    $calcDynamic = toSignal(this.calcDynamic$.pipe(debounceTime$1(300)));
+    #onCalcDynamicEffect = effect(() => {
+        const el = this.$calcDynamic();
+        if (!el)
+            return;
+        untracked(() => {
+            this.calcDynamic(el);
+        });
+    });
+    calcDynamic(el) {
+        const virtualScrollOptions = this.$virtualScrollOptions();
+        const t = this.tableContainer.elementRef.nativeElement.querySelector(`#${TableContainerComponent.headerId}`);
+        const rect = t?.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const distanceFromBottom = viewportHeight - rect.bottom;
+        const rowHeight = this.computedRowHeight();
+        const footerHeight = this.computedFooterHeight();
+        const headerHeight = this.computedHeaderHeight();
+        const maxViewPortHeightPx = parseTbSizeToPixels(virtualScrollOptions.maxViewPortHeight) || 0;
+        let tableSize = distanceFromBottom;
+        if (virtualScrollOptions?.maxViewPortHeight && maxViewPortHeightPx < tableSize) {
+            tableSize = maxViewPortHeightPx;
         }
-        super.disconnect();
+        const available = (distanceFromBottom - footerHeight) - headerHeight - (this.$usePaginator() ? 20 : 0);
+        const amountOfRowsThatWillFit = Math.floor(available / rowHeight);
+        const minAmountOfRows = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+        const amountOfVisibleItems = Math.min(Math.max(amountOfRowsThatWillFit, minAmountOfRows), this.$dataLength());
+        let height = (rowHeight * amountOfVisibleItems);
+        height += (footerHeight + headerHeight) - 10;
+        this.setHeight(height, el);
     }
-}
-
-function mergeCustomCellMetaData(metaData1, metaData2) {
-    if (!metaData2) {
-        metaData1.noExport = true;
-        return metaData1;
+    setHeight(height, el) {
+        const vsViewport = el.nativeElement;
+        vsViewport.setAttribute('style', `height: ${height}px !important;`);
+        this.viewport()?.checkViewportSize();
+        const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
+        this.dataStore.patchState({ virtualScrollOffset });
     }
-    if (!metaData1.displayName)
-        metaData1.displayName = metaData2.displayName;
-    if (!metaData1.preSort)
-        metaData1.preSort = metaData2.preSort;
-    if (!metaData1.order)
-        metaData1.order = metaData2.order;
-    if (!metaData1.width)
-        metaData1.width = metaData2.width;
-    if (metaData2.fieldType)
-        metaData1.fieldType = metaData2.fieldType;
-    metaData1.noExport = metaData2.noExport;
-    return metaData1;
+    resizeHandler = () => {
+        if (this.viewport() && this.$virtualScrollOptions().dynamicHeight) {
+            this.setSize(this.viewport().elementRef);
+        }
+    };
+    computedRowHeight = computed(() => {
+        const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
+        const rowHeight = this.state.$userDefinedRowHeight() || virtualScrollOptions?.rowHeight || this.state.$tableSettings().rowHeight || this.defaultOptions.rowHeight;
+        return parseTbSizeToPixels(rowHeight) || 0;
+    });
+    computedHeaderHeight = computed(() => {
+        if (this.state.$tableSettings().hideHeader)
+            return 0;
+        const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
+        const headerHeight = this.state.$userDefinedHeaderHeight() || virtualScrollOptions?.headerHeight || this.state.$tableSettings().headerHeight || this.defaultOptions.headerHeight;
+        return parseTbSizeToPixels(headerHeight) || 0;
+    });
+    computedFooterHeight = computed(() => {
+        return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
+    });
+    scrollStrategy = new TableVirtualScrollStrategy(this);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <cdk-virtual-scroll-viewport>
+      <ng-content/>
+    </cdk-virtual-scroll-viewport>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i1$8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], viewProviders: [
+            {
+                provide: VIRTUAL_SCROLL_STRATEGY,
+                useFactory: (c) => c.scrollStrategy,
+                deps: [forwardRef(() => VirtualScrollContainer)],
+            },
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tb-virtual-scroll-container',
+                    template: `
+    <cdk-virtual-scroll-viewport>
+      <ng-content/>
+    </cdk-virtual-scroll-viewport>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [ScrollingModule],
+                    viewProviders: [
+                        {
+                            provide: VIRTUAL_SCROLL_STRATEGY,
+                            useFactory: (c) => c.scrollStrategy,
+                            deps: [forwardRef(() => VirtualScrollContainer)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
 
 class TableContainerComponent {
     state = inject(TableStore);
     dataStore = inject(DataStore);
-    exportToCsvService = inject((ExportToCsvService));
     wrapper = inject(TableWrapperDirective, { optional: true });
     stateService = inject(TableBuilderStateStore);
     injector = inject(Injector);
@@ -5144,6 +5359,11 @@ class TableContainerComponent {
     _$customRows = contentChildren((MatRowDef));
     $customRows = computed(() => [...this._$customRows()]);
     $customCells = contentChildren(CustomCellDirective);
+    $menu = viewChild.required(MatMenu);
+    menuInjector = Injector.create({
+        providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
+        parent: this.injector
+    });
     $tableBuilder = input.required({ alias: 'tableBuilder' });
     $tableId = input(undefined, { alias: 'tableId' });
     $trackBy = input(undefined, { alias: 'trackBy' });
@@ -5198,15 +5418,6 @@ class TableContainerComponent {
     $collapsedFooter = this.state.$footerCollapsed;
     $collapsedHeader = this.state.$headerCollapsed;
     $displayDataLength = computed(() => this.$displayData().length);
-    resetState() {
-        this.$customFilterDirectives().forEach(cf => cf.reset());
-        this.$filterDirectives().forEach(cf => cf.reset());
-        this.state.resetState();
-        this.onStateReset$.emit(null);
-    }
-    exportToCsv() {
-        this.exportToCsvService.exportToCsv(this.$data());
-    }
     #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
         const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
         if (!metaLoaded)
@@ -5218,18 +5429,19 @@ class TableContainerComponent {
                 persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
                 this.state.updateStateFromPersistedState(persistedState);
             }
-            this.state.setInitializationState(InitializationState.LoadedFromStore);
+            this.state.setInitializationState(InitializationState.Ready);
         });
     });
     #setPageSizeFromInputEffect = effect(() => {
         const pageSize = this.$pageSize();
-        if (pageSize) {
+        const userDefinedPageSize = this.state.$userDefinedPageSize();
+        if (pageSize && !userDefinedPageSize) {
             untracked(() => this.state.setPageSize(pageSize));
         }
     });
     #patchedFilters = [];
     #patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
-        const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+        const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
         const filterDirectives = this.$allFilterDirectives();
         if (!loaded || !filterDirectives.length)
             return;
@@ -5244,7 +5456,7 @@ class TableContainerComponent {
         });
     });
     #patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
-        const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+        const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
         const inputFilters = this.$filterInfoInputs();
         if (!loaded || !inputFilters.length)
             return;
@@ -5332,22 +5544,27 @@ class TableContainerComponent {
         const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp$1()), this.state.groupByKeys$.pipe(timestamp$1()), this.state.expandedGroups$.pipe(timestamp$1())]).pipe(scan$1(updateGroupByState, initialGroupByState), map(({ displayData }) => displayData), defaultShareReplay());
         this.state.on(sortedAndFilteredData$, (data) => {
             this._data$.next(data);
-            this.dataStore.patchState({ dataLen: data.length });
+            this.dataStore.patchState({ sortedFilteredDataLength: data.length });
         });
         this.state.on(flatGrouped$, (data) => {
             this.dataSource.setData(data);
             this.$displayData.set(data);
+            this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
         });
     }
     $isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
     static headerId = 'tb-header-wrapper';
     headerId = TableContainerComponent.headerId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumn: { classPropertyName: "$indexColumn", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumn: { classPropertyName: "$selectionColumn", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $isSticky: { classPropertyName: "$isSticky", publicName: "isSticky", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooter: { classPropertyName: "$stickyFooter", 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: { $inputFilters: "inputFiltersChange", 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 }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, 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        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\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'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\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        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\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      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\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 [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\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) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.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}\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: i1$8.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: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumn: { classPropertyName: "$indexColumn", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumn: { classPropertyName: "$selectionColumn", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $isSticky: { classPropertyName: "$isSticky", publicName: "isSticky", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooter: { classPropertyName: "$stickyFooter", 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: { $inputFilters: "inputFiltersChange", 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 }], 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        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"l.menu()\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n\r\n          <lib-table-header-menu #l/>\r\n\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\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 [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\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        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\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      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\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 [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\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) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.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}\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$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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: "19.0.0", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: containerImports, 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        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\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'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\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        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\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      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\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 [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\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) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.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}\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"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [NgTemplateOutlet,
+                        PaginatorComponent,
+                        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        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"l.menu()\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n\r\n          <lib-table-header-menu #l/>\r\n\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\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 [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\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        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\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      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\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 [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\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) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.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}\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"] }]
         }] });
 
 class TableBuilderModule {
@@ -5760,5 +5977,5 @@ const setUpStoreFactory = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterTypes, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PaginatorOptions, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PaginatorOptions, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, parseTbSizeToPixels, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map