@one-paragon/angular-utilities 0.3.6 → 0.3.7-beta.2

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, Injectable, Pipe, Optional, ContentChildren, InjectionToken, makeEnvironmentProviders, Inject, HostListener, Component, ChangeDetectionStrategy, EventEmitter, Output, inject, ViewChild, Injector, ElementRef, APP_INITIALIZER } from '@angular/core';
-import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, last, distinctUntilKeyChanged, delay as delay$1, distinct, distinctUntilChanged, first as first$1, withLatestFrom, mergeAll, scan as scan$1 } from 'rxjs/operators';
+import { Directive, Input, NgModule, Injectable, Pipe, Optional, InjectionToken, makeEnvironmentProviders, Inject, HostListener, Component, ChangeDetectionStrategy, EventEmitter, Output, ContentChildren, inject, ViewChild, Injector, ElementRef, APP_INITIALIZER } from '@angular/core';
+import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, distinctUntilChanged, last, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1, mergeAll, scan as scan$1, timestamp as timestamp$1, withLatestFrom } from 'rxjs/operators';
 import * as i3$1 from 'rxjs';
-import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, delay, merge as merge$1, concatMap as concatMap$1, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, from } from 'rxjs';
+import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, delay, merge as merge$1, concatMap as concatMap$1, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, timestamp, from } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
 import * as i1$3 from '@angular/common';
 import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgClass, DecimalPipe, CommonModule } from '@angular/common';
 import * as i1$4 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { v4 } from 'uuid';
-import { merge, flatten, get, sumBy, orderBy, cloneDeep, groupBy, flattenDeep, set } from 'lodash';
+import { merge, get, sumBy, difference, orderBy, intersection, groupBy, cloneDeep, set } from 'lodash';
 import * as i1 from '@angular/cdk/table';
 import * as i3 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -22,8 +22,7 @@ import { MatRadioModule } from '@angular/material/radio';
 import * as i7 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i8 from '@angular/material/button-toggle';
-import update from 'immutability-helper';
-import * as i6$1 from '@angular/cdk/drag-drop';
+import * as i5$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CDK_DROP_LIST, CdkDropList, transferArrayItem } from '@angular/cdk/drag-drop';
 import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -50,7 +49,7 @@ import * as i2$3 from '@ngrx/component';
 import { LetDirective } from '@ngrx/component';
 import * as i4$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i3$3 from '@angular/material/table';
+import * as i4$4 from '@angular/material/table';
 import { MatColumnDef, MatTableModule, MatTableDataSource, MatTable, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i2$2 from '@angular/material/paginator';
@@ -658,8 +657,7 @@ const defaultTableState = {
     notPersistedTableSettings: new NotPersistedTableSettings(),
     pageSize: 10,
     linkMaps: {},
-    groupByKeys: [],
-    groups: []
+    groupBy: [],
 };
 
 // here is how to use it
@@ -723,7 +721,8 @@ const onceWhen = (predicate) => (src) => {
 };
 const mapArray = (mapFunc) => (source) => source.pipe(map$1(src => src.map(mapFunc)));
 const filterArray = (filterFunc) => (source) => source.pipe(map$1(src => src.filter(filterFunc)));
-function onWait(val) {
+const onWait = startWithIfEmpty;
+function startWithIfEmpty(val, wait = 0) {
     return (source) => {
         return new Observable(subscriber => {
             let emitted = false;
@@ -731,17 +730,18 @@ function onWait(val) {
                 if (!emitted) {
                     subscriber.next(val);
                 }
-            }, 0);
-            source.subscribe({
+            }, wait);
+            const sub = source.subscribe({
                 next(x) { emitted = true; subscriber.next(x); },
                 error(err) { emitted = true; subscriber.error(err); },
                 complete() { emitted = true; subscriber.complete(); }
             });
+            return () => sub.unsubscribe();
         });
     };
 }
 const combineArrays = (sources) => {
-    return combineLatest(sources.map(src => src.pipe(onWait([])))).pipe(map$1(res => flatten(res)));
+    return combineLatest(sources.map(src => src.pipe(startWithIfEmpty([])))).pipe(map$1(res => res.flat()));
 };
 function switchOff(switchSource, defaultState = true) {
     return (source) => {
@@ -902,6 +902,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                 type: Input
             }] } });
 
+class TableWrapperDirective {
+    constructor() {
+        this.registrations = [];
+    }
+    register(filter) {
+        this.registrations.push(filter);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tbWrapper]',
+                    standalone: true,
+                }]
+        }] });
+
 var FilterType;
 (function (FilterType) {
     FilterType["NumberEquals"] = "Equals";
@@ -1053,7 +1071,7 @@ class TableFilterDirective extends ComponentStore {
                 fieldType: this.fieldType,
                 filterValue: this.filterValue,
                 active: this.active && this.filterValue !== undefined,
-                _isExternalyManaged: true,
+                _isExternallyManaged: true,
             });
         }
     }
@@ -1369,30 +1387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                     type: Optional
                 }] }] });
 
-class TableWrapperDirective {
-    constructor() {
-        this.registrations = [];
-    }
-    register(filter) {
-        this.registrations.push(filter);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableWrapperDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tbWrapper]',
-                    standalone: true,
-                }]
-        }], propDecorators: { customFilters: [{
-                type: ContentChildren,
-                args: [TableCustomFilterDirective, { descendants: true }]
-            }], filters: [{
-                type: ContentChildren,
-                args: [TableFilterDirective, { descendants: true }]
-            }] } });
-
 class PhoneNumberPipe {
     transform(phoneNum) {
         if (phoneNum) {
@@ -1629,12 +1623,27 @@ function createFilterFunc(filter) {
 }
 const FalseyValueCanBeIncludedFilterTypes = [FilterType.IsNull, FilterType.NumberNotEqual, FilterType.DateIsNotOn, FilterType.StringDoesNotContain];
 
+const replaceInArrayWithClone = (arr, findMeth, actionOnClone = ((t) => { })) => {
+    const index = arr.findIndex(findMeth);
+    const clonedArray = [...arr];
+    const t = clonedArray[index];
+    clonedArray[index] =
+        t != null && typeof t === 'object' ?
+            Array.isArray(t) ?
+                [...t]
+                : { ...t }
+            : t;
+    actionOnClone(clonedArray[index]);
+    return clonedArray;
+};
+
 function stateIs(initializationState) {
     return (state) => state.initializationState === initializationState;
 }
 class TableStore extends ComponentStore {
     constructor(config) {
         super({ ...defaultTableState, ...config.defaultTableState });
+        this.selectStateReady = this.select(state => state.initializationState).pipe(filter(i => i === InitializationState.Ready));
         this.on = (srcObservable, func) => {
             this.effect(() => srcObservable.pipe(tap(func)));
             return this;
@@ -1655,16 +1664,11 @@ class TableStore extends ComponentStore {
             hiddenKeys: [...state.hiddenKeys.filter(k => k !== key), key],
         }));
         this.resetState = this.updater((state) => {
-            const hiddenColumns = Object.values(state.metaData)
+            const hiddenKeys = Object.values(state.metaData)
                 .filter(md => md.fieldType === FieldType.Hidden)
                 .map(md => md.key);
             const sorted = this.createPreSort(state.metaData);
-            return update(state, {
-                hiddenKeys: { $set: [...hiddenColumns] },
-                filters: { $set: {} },
-                sorted: { $set: sorted },
-                userDefined: { $set: { widths: {}, order: {}, table: {} } },
-            });
+            return ({ ...state, hiddenKeys, sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
         });
         this.showColumn = this.updater((state, key) => ({
             ...state,
@@ -1675,7 +1679,7 @@ class TableStore extends ComponentStore {
                 ...displayCols.filter(col => !col.visible).map(col => col.key),
                 ...Object.values(state.metaData).filter(md => md.fieldType === FieldType.Hidden).map(md => md.key)
             ]);
-            return update(state, { hiddenKeys: { $set: [...hiddenKeysSet] } });
+            return ({ ...state, hiddenKeys: [...hiddenKeysSet] });
         });
         this.setUserDefinedWidth = this.updater((state, colWidths) => {
             const userDefinedWidths = { ...state.userDefined.widths };
@@ -1727,10 +1731,19 @@ class TableStore extends ComponentStore {
                 filters: { ...state.filters, ...filtersObj }
             };
         };
-        this.removeFilter = this.updater((state, filterId) => update(state, { filters: { $unset: [filterId] } }));
-        this.removeFilters = this.updater((state, filterIds) => update(state, { filters: { $unset: [...filterIds] } }));
+        this.removeFilter = this.updater((state, filterId) => {
+            const filtersCopy = { ...state.filters };
+            delete filtersCopy[filterId];
+            return ({ ...state, filters: filtersCopy });
+        });
+        this.removeFilters = this.updater((state, filterIds) => {
+            const filtersCopy = { ...state.filters };
+            filterIds.forEach(id => { delete filtersCopy[id]; });
+            return ({ ...state, filters: filtersCopy });
+        });
         this.clearFilters = this.updater((state) => ({ ...state, filters: {} }));
-        this.sorted$ = this.state$.pipe(filter(stateIs(InitializationState.Ready)), map(state => state.sorted));
+        this.selectSorted = this.select(state => state.sorted).pipe(distinctUntilChanged((f, s) => !isDifferent(f, s)));
+        this.sort$ = this.select(this.selectStateReady, this.selectSorted, (_, s) => s);
         this.createPreSort = (metaDatas) => {
             return Object.values(metaDatas).filter((metaData) => !!metaData.preSort)
                 .sort(({ preSort: ps1 }, { preSort: ps2 }) => (ps1.precedence || Number.MAX_VALUE) - (ps2.precedence || Number.MAX_VALUE))
@@ -1832,18 +1845,28 @@ class TableStore extends ComponentStore {
         });
         this.addGroupByKey = this.updater((state, groupByKey) => ({
             ...state,
-            groupByKeys: [...state.groupByKeys, groupByKey]
+            groupBy: [...state.groupBy, { key: groupByKey, expandedHeaders: [] }]
         }));
         this.removeGroupByKey = this.updater((state, groupByKey) => ({
             ...state,
-            groupByKeys: state.groupByKeys.filter(key => groupByKey != key)
+            groupBy: state.groupBy.filter(key => groupByKey !== key.key)
         }));
-        this.updateGroup = this.updater((state, group) => ({
-            ...state,
-            groups: [...state.groups.filter(g => g.groupName != group.groupName), group]
+        this.updateExpandedGroups = this.updater((state, data) => {
+            const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
+                gk.expandedHeaders = data.isExpanded ? [...gk.expandedHeaders, data.groupKey] : gk.expandedHeaders.filter(g => g !== data.groupKey);
+            });
+            return ({
+                ...state,
+                groupBy: gbk
+            });
+        });
+        this.groupByKeys$ = this.select(state => state.groupBy.map(gbk => gbk.key))
+            .pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)));
+        this.expandedGroups$ = this.select(state => state.groupBy).pipe(distinctUntilChanged((a, b) => {
+            const aa = a.flatMap(g => g.expandedHeaders);
+            const bb = b.flatMap(g => g.expandedHeaders);
+            return aa.length === bb.length && aa.every((k) => bb.includes(k));
         }));
-        this.groupByKeys$ = this.select(state => state.groupByKeys);
-        this.groups$ = this.select(state => state.groups);
         this.setTableSettings = this.updater((state, settings) => {
             const s = {
                 ...state,
@@ -1864,6 +1887,9 @@ class TableStore extends ComponentStore {
                 return state.linkMaps[md.key];
             });
         };
+        this.getIsExpanded = (columnKey, groupHeaderKey) => {
+            return this.select(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupHeaderKey)).length);
+        };
     }
     getSavableState() {
         return this.state$.pipe(map(s => {
@@ -1915,20 +1941,15 @@ class MultiSortDirective extends MatSort {
     constructor(state) {
         super();
         this.state = state;
-        this.rules = [];
-        this.state.setSort(this.sortChange.pipe(map(sc => ({ key: sc.active, direction: sc.direction }))));
-        this.state.on(this.state.sorted$, (rules) => {
-            const oldRules = this.rules;
-            this.rules = rules;
-            if (this.active && rules.length === 0) {
-                this.active = '';
-                this.direction = '';
-                this.sortChange.emit({ active: '', direction: '' });
-            }
-            else if (!!rules.length && isDifferent(oldRules, rules)) {
-                this.active = rules[0].active;
-                this.direction = rules[0].direction;
-                this.sortChange.emit(rules[0]);
+        this.state.setSort(this.sortChange.pipe(distinctUntilChanged((f, s) => f.active === s.active && f.direction === s.direction), map(sc => ({ key: sc.active, direction: sc.direction }))));
+        this.state.on(this.state.sort$, (rules) => {
+            const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' };
+            const topActiveChanged = topRule.active !== this.active || '';
+            const topDirectionChanged = topRule.direction !== this.direction || '';
+            if (topActiveChanged || topDirectionChanged) {
+                this.active = topRule.active;
+                this.direction = topRule.direction;
+                this.sortChange.emit(topRule);
             }
         });
     }
@@ -2227,18 +2248,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
 
 class StylerDirective {
     set styler(styles) {
-        if (styles) {
-            Object.keys(styles).forEach(style => {
-                this.el.nativeElement.style[style] = styles[style];
-            });
-        }
+        const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
+            if (typeof (val) === 'string') {
+                acc[key] = val;
+                this.el.nativeElement.style[key] = val;
+            }
+            else if (val?.condition === true || val?.condition(this.element)) {
+                const value = typeof (val.value) === 'string' ? val.value : val?.value(this.element);
+                acc[key] = value;
+                this.el.nativeElement.style[key] = value;
+            }
+            return acc;
+        }, {});
+        Object.keys(this.stylesApplied).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
+            this.renderer.removeStyle(this.el.nativeElement, key);
+        });
+        this.stylesApplied = toApply;
     }
     ;
-    constructor(el) {
+    constructor(el, renderer) {
         this.el = el;
+        this.renderer = renderer;
+        this.stylesApplied = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { styler: "styler" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { element: "element", styler: "styler" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: StylerDirective, decorators: [{
             type: Directive,
@@ -2246,7 +2280,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                     selector: '[styler]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { styler: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { element: [{
+                type: Input
+            }], styler: [{
                 type: Input
             }] } });
 
@@ -2726,7 +2762,7 @@ class GenColDisplayerComponent {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], 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: "17.0.3", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
@@ -2847,7 +2883,7 @@ class FilterChipsComponent {
     constructor() {
         this.tableState = inject(TableStore);
         this.filterStore = inject(WrapperFilterStore);
-        this.filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters).filter(f => isFilterInfo(f) && !f._isExternalyManaged)));
+        this.filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters).filter(f => isFilterInfo(f) && !f._isExternallyManaged)));
         this.currentFilters$ = this.filterStore.currentFilters$;
     }
     deleteByIndex(index) {
@@ -2948,7 +2984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
 
 class ColumnTotalPipe {
     transform(data, metaData) {
-        const dataToCalculate = data.filter(d => !d.isGroupHeader && !d.isGroupFooter);
+        const dataToCalculate = data.filter(d => !d.isGroupHeader);
         switch (metaData.additional.footer.type) {
             case 'sum':
                 return sumBy(dataToCalculate, metaData.key);
@@ -2976,7 +3012,7 @@ class TransformCreator {
         this.casePipe = casePipe;
         this.config = config;
     }
-    createTransformer(metaData) {
+    createTransformer(metaData, noIcons = false) {
         const defaultFunc = (value) => get(value, metaData.key);
         if (metaData.transform) {
             if (isPipe(metaData.transform)) {
@@ -2985,8 +3021,8 @@ class TransformCreator {
             return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value), value);
         }
         if (this.config.transformers && this.config.transformers[metaData.fieldType]) {
-            var tranformer = this.config.transformers[metaData.fieldType];
-            return (value) => tranformer(defaultFunc(value));
+            var transformer = this.config.transformers[metaData.fieldType];
+            return (value) => transformer(defaultFunc(value));
         }
         const defaultDateFormat = this.config.defaultSettings?.dateFormat ?? 'shortDate';
         const defaultDateTimeFormat = this.config.defaultSettings?.dateTimeFormat ?? 'short';
@@ -3004,6 +3040,9 @@ class TransformCreator {
             case FieldType.Enum:
                 return (value) => this.casePipe.transform(metaData.additional?.enumMap[defaultFunc(value)]);
             case FieldType.Boolean:
+                if (noIcons) {
+                    return defaultFunc;
+                }
                 let forTrue = 'check';
                 let forFalse = '';
                 if (metaData.additional?.boolean?.forTrue) {
@@ -3099,16 +3138,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
             }] } });
 
 class ArrayColumnComponent {
+    set metaData(metaData) {
+        const additional = this.metaData?.additional ?? this.config.arrayInfo;
+        if (additional) {
+            this.additional = additional;
+        }
+    }
+    set _array(array) {
+        this.array = (array ?? []).slice(0, this.additional.limit);
+    }
+    ;
     constructor(config) {
         this.config = config;
         this.ArrayStyle = ArrayStyle;
-    }
-    ngOnInit() {
-        this.additional = this.metaData?.additional ?? this.config.arrayInfo ?? { limit: 3, arrayStyle: ArrayStyle.NewLine };
-        this.array = (this.array ?? []).slice(0, this.additional.limit);
+        this.array = [];
+        this.additional = { limit: 3, arrayStyle: ArrayStyle.NewLine };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ArrayColumnComponent, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ArrayColumnComponent, isStandalone: true, selector: "tb-array-column", inputs: { array: "array", metaData: "metaData" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ArrayColumnComponent, isStandalone: true, selector: "tb-array-column", inputs: { metaData: "metaData", _array: ["array", "_array"] }, ngImport: i0, template: `
   @if(!array.length){
     -
   } @else {
@@ -3157,15 +3204,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [TableBuilderConfigToken]
-                }] }], propDecorators: { array: [{
-                type: Input
-            }], metaData: [{
+                }] }], propDecorators: { metaData: [{
                 type: Input
+            }], _array: [{
+                type: Input,
+                args: ['array']
             }] } });
 
 class InitializationComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: InitializationComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "currencyTemplate", first: true, predicate: ["currency"], descendants: true, static: true }, { propertyName: "arrayTemplate", first: true, predicate: ["array"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link  let-element='element' let-metaData='metaData' let-transform='transform'>\r\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\r\n  <span>\r\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #array let-element='element' let-metaData='metaData'>\r\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\r\n</ng-template>\r\n\r\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <span>{{ transform | func : element }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <mat-icon>{{ transform | func : element }}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["metaData", "element", "transform"] }, { kind: "component", type: ArrayColumnComponent, selector: "tb-array-column", inputs: ["array", "metaData"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: InitializationComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "currencyTemplate", first: true, predicate: ["currency"], descendants: true, static: true }, { propertyName: "arrayTemplate", first: true, predicate: ["array"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link  let-element='element' let-metaData='metaData' let-transform='transform'>\r\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\r\n  <span>\r\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #array let-element='element' let-metaData='metaData'>\r\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\r\n</ng-template>\r\n\r\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <span>{{ transform | func : element }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <mat-icon>{{ transform | func : element }}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["metaData", "element", "transform"] }, { kind: "component", type: ArrayColumnComponent, selector: "tb-array-column", inputs: ["metaData", "array"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: InitializationComponent, decorators: [{
             type: Component,
@@ -3254,6 +3302,12 @@ class ColumnBuilderComponent {
                 return previousUserDefinedWidth >= 0 && currentUserDefinedWidth == null;
             }
         };
+        this.getTooltip = (element) => {
+            if (typeof this.metaData.toolTip === 'string') {
+                return this.metaData.toolTip;
+            }
+            return this.metaData.toolTip(element);
+        };
     }
     getInnerTemplate() {
         if (this.metaData.template)
@@ -3299,8 +3353,8 @@ class ColumnBuilderComponent {
             this.metaData.click(element, key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$3.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    @if(customCell?.columnDef?.headerCell){\r\n      <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \"/>\r\n    } @else {\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref \r\n        [conditionalClasses]='metaData.additional?.columnPartClasses?.header' >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\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._internalNotUserDefined) {\r\n            <div style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          }\r\n          @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showFilters$ | async)){\r\n            <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n          }\r\n          \r\n        </div>\r\n      </mat-header-cell>\r\n    }\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 ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { metaData: metaData, element: element, transform: transform, $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      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\" [conditionalClasses]='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:white;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: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i1$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$4.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    @if(customCell?.columnDef?.headerCell){\r\n      <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \"/>\r\n    } @else {\r\n      <mat-header-cell  cdkDrag [style]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref \r\n        [class]='metaData.additional?.columnPartClasses?.header'>\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\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._internalNotUserDefined) {\r\n            <div style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          }\r\n          @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showFilters$ | async)){\r\n            <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n          }\r\n          \r\n        </div>\r\n      </mat-header-cell>\r\n    }\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: { metaData: metaData, element: element, transform: transform, $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      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [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:white;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: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.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$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i1$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { 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 }); }
 }
@@ -3309,11 +3363,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
                     ], standalone: true, imports: [
-                        MatTableModule, NgTemplateOutlet, StylerDirective, ResizeColumnDirective,
+                        MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
                         ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
                         AsyncPipe, MatTooltipModule, LetDirective, ColumnTotalPipe, CurrencyPipe, DecimalPipe
-                    ], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    @if(customCell?.columnDef?.headerCell){\r\n      <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \"/>\r\n    } @else {\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref \r\n        [conditionalClasses]='metaData.additional?.columnPartClasses?.header' >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\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._internalNotUserDefined) {\r\n            <div style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          }\r\n          @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showFilters$ | async)){\r\n            <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n          }\r\n          \r\n        </div>\r\n      </mat-header-cell>\r\n    }\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 ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { metaData: metaData, element: element, transform: transform, $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      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\" [conditionalClasses]='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:white;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"] }]
-        }], ctorParameters: () => [{ type: TransformCreator }, { type: i3$3.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { columnDef: [{
+                    ], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    @if(customCell?.columnDef?.headerCell){\r\n      <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \"/>\r\n    } @else {\r\n      <mat-header-cell  cdkDrag [style]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref \r\n        [class]='metaData.additional?.columnPartClasses?.header'>\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\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._internalNotUserDefined) {\r\n            <div style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          }\r\n          @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showFilters$ | async)){\r\n            <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n          }\r\n          \r\n        </div>\r\n      </mat-header-cell>\r\n    }\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: { metaData: metaData, element: element, transform: transform, $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      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [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:white;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"] }]
+        }], ctorParameters: () => [{ type: TransformCreator }, { type: i4$4.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { columnDef: [{
                 type: ViewChild,
                 args: [MatColumnDef]
             }], bodyTemplate: [{
@@ -3321,38 +3375,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                 args: ['body']
             }] } });
 
-class MatTableObservableDataSource extends MatTableDataSource {
-    constructor(dataSrc) {
-        super([]);
-        this.dataSrc = dataSrc;
-    }
-    connect() {
-        if (!this.subscription) {
-            this.subscription = this.dataSrc.subscribe(data => this.data = data);
-        }
-        return super.connect();
-    }
-    disconnect() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-            this.subscription = undefined;
-        }
-        super.disconnect();
-    }
-}
-
-function sortData(data, sorted) {
-    return orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction));
-}
-
-class GenericTableDataSource extends MatTableObservableDataSource {
-    constructor(dataSrc) {
-        super(dataSrc);
-        const baseSort = this.sortData;
-        this.sortData = ((data, sort) => sort instanceof MultiSortDirective ? sortData(data, sort.rules) : baseSort(data, sort));
-    }
-}
-
 class PaginatorComponent {
     constructor(state) {
         this.state = state;
@@ -3423,28 +3445,75 @@ const metaDataPageSizeChange = (state) => state.state$.pipe(map(state => state.u
 const setPaginatorPageSize = (paginator) => (pageSize) => paginator._changePageSize(pageSize);
 const onPaginatorPageSizeChange = (paginator) => paginator.page.pipe(map(e => e.pageSize), distinct());
 
+class MatTableObservableDataSource extends MatTableDataSource {
+    constructor(dataSrc) {
+        super([]);
+        this.dataSrc = dataSrc;
+    }
+    connect() {
+        if (!this.subscription) {
+            this.subscription = this.dataSrc.subscribe(data => this.data = data);
+        }
+        return super.connect();
+    }
+    disconnect() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = undefined;
+        }
+        super.disconnect();
+    }
+}
+
+// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
+// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
+// So we need to calculate the matching tail of the sort array. Then sortsToRun will be the non-matching head.
+// But if any sorts were removed the only way to 'unsort' is to start by the original data and run all the existing sorts again, so 'sorts to run' will be all
+// the sorts.
+// We always pass allSorts to the container because if the table data changes all the sorts will need to be run.
+function updateSortState(previousSorts, currentSorts) {
+    currentSorts = addInitSort(currentSorts);
+    if (sortsRemoved(previousSorts.allSorts, currentSorts)) {
+        return ({ sortsToRun: currentSorts, allSorts: currentSorts });
+    }
+    const sameTailLength = getSameTailLength(previousSorts.allSorts, currentSorts);
+    const sortsToRun = currentSorts.slice(0, currentSorts.length - sameTailLength);
+    return ({ sortsToRun, allSorts: currentSorts });
+}
+function addInitSort(sorts) {
+    return [...sorts, { active: initIndexSymbol, direction: 'asc' }];
+}
+function sortsRemoved(previousSorts, currentSorts) {
+    const previousSortedColumns = previousSorts.map(s => s.active);
+    const currentSortedColumns = currentSorts.map(s => s.active);
+    const sortsRemoved = !!difference(previousSortedColumns, currentSortedColumns).length;
+    return sortsRemoved;
+}
+function getSameTailLength(previousSorts, currentSorts) {
+    previousSorts = [...previousSorts].reverse();
+    currentSorts = [...currentSorts].reverse();
+    let indexOfChange = currentSorts.findIndex((s, i) => s.active !== previousSorts[i]?.active || s.direction !== previousSorts[i]?.direction);
+    if (indexOfChange === -1)
+        return indexOfChange = currentSorts.length;
+    return indexOfChange;
+}
+const initIndexSymbol = Symbol('tb_init_index');
+const initialSortState = { sortsToRun: [], allSorts: [] };
+
 class GenericTableComponent {
     drop(event) {
         this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
     }
-    set disableSort(val) {
-        this._disableSort = val;
-        if (val) {
-            if (this.dataSource?.sort) {
-                this.dataSource.sort = null;
-            }
-        }
-        else {
-            if (this.dataSource && !this.dataSource.sort) {
-                this.dataSource.sort = this.sort;
-            }
+    set trackBy(trackBy) {
+        if (trackBy) {
+            this.trackByFunction = (index, item) => item[trackBy];
         }
     }
-    get disableSort() { return this._disableSort; }
-    constructor(sort, state, viewContainer, injector) {
+    constructor(sort, state, viewContainer, transformCreator, injector) {
         this.sort = sort;
         this.state = state;
         this.viewContainer = viewContainer;
+        this.transformCreator = transformCreator;
         this.indexColumn = false;
         this.selectionColumn = false;
         this.isSticky = false;
@@ -3452,15 +3521,8 @@ class GenericTableComponent {
         this.rowDefArr = [];
         this.columns = [];
         this.myColumns = {};
-        this.trackByFunction = (index, item) => {
-            if (!item) {
-                return null;
-            }
-            if (this.trackBy) {
-                return item[this.trackBy];
-            }
-            return item;
-        };
+        this.defaultTrackBy = (index, item) => item[initIndexSymbol];
+        this.trackByFunction = this.defaultTrackBy;
         this.initializeRowDefs = (defs) => {
             this.rowDefArr.forEach(r => this.table.removeRowDef(r));
             this.rowDefArr = defs;
@@ -3488,6 +3550,16 @@ class GenericTableComponent {
             }
         }));
         this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
+        this.getTransform = (key, val) => {
+            if (val == undefined || val === 'null')
+                return '';
+            try {
+                return this.transformCreator.createTransformer(this.myColumns[key].metaData, true)({ [key]: val });
+            }
+            catch (error) {
+                return val;
+            }
+        };
         this.injector = Injector.create({
             providers: [
                 { provide: MatTable, useFactory: () => this.table },
@@ -3519,31 +3591,22 @@ class GenericTableComponent {
         });
         this.showHeader$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeader)));
         this.showFooterRow$ = combineLatest([
-            this.data$.pipe(map(d => !!d.length), distinctUntilChanged()),
+            this.displayData$.pipe(map(d => !!d.length), distinctUntilChanged()),
             this.state.metaDataArray$.pipe(map(metaData => metaData.some(md => !!md.additional?.footer)), distinctUntilChanged()),
             this.columnInfos.pipe(map(columnInfos => columnInfos.some(ci => !!ci.customCell?.columnDef?.footerCell)), distinctUntilChanged()),
         ]).pipe(map(([hasData, hasFooterDef, hasCustomFooter]) => {
-            const hasselectionColumn = this.selectionColumn;
-            return hasCustomFooter || (hasData && (hasFooterDef || hasselectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
+            const hasSelectionColumn = this.selectionColumn;
+            return hasCustomFooter || (hasData && (hasFooterDef || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
         }));
     }
     createDataSource() {
-        this.dataSource = new GenericTableDataSource(this.data$.pipe(tap((d) => this.selection.clear())));
-        if (!this.disableSort) {
-            this.dataSource.sort = this.sort;
-        }
+        this.dataSource = new MatTableObservableDataSource(this.displayData$.pipe(tap((d) => this.selection.clear())));
     }
     isGroupHeader(_, row) {
         return row.isGroupHeader;
     }
-    isGroupFooter(_, row) {
-        return row.isGroupFooter;
-    }
-    updateGroup(group) {
-        this.state.updateGroup({
-            ...group,
-            isExpanded: !group.isExpanded
-        });
+    setExpanded(key, groupKey, isExpanded) {
+        this.state.updateExpandedGroups({ key, isExpanded, groupKey });
     }
     addMetaData(column) {
         const columnBuilder = this.myColumns[column.metaData.key];
@@ -3572,23 +3635,25 @@ class GenericTableComponent {
             this.selection.clear() :
             this.selection.select(...this.dataSource.data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$4.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { data$: "data$", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", disableSort: "disableSort" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"dataSource\"\r\n  [trackBy]='trackByFunction'\r\n  [styler]=\"tableWidth | async\"\r\n>\r\n\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @if(!row.isGroupFooter){\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      }\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef>\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"index\">\r\n      <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n      <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n        <button mat-icon-button (click)=\"updateGroup(row);\">\r\n          @if(!row.isExpanded){\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        {{row.groupHeaderName}}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n  }\r\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\" />\r\n  <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n  <tb-paginator #tbPaginator\r\n    [dataSource]=\"dataSource\"\r\n    [tableElRef]=\"tableElRef\"\r\n    [data$]=\"data$\" />\r\n\r\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n  </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$4.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: TransformCreator }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$", indexColumn: "indexColumn", selectionColumn: "selectionColumn", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"dataSource\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\">\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>\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n      <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n      <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></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      <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\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=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n  }\r\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n  <tb-paginator #tbPaginator\r\n    [dataSource]=\"dataSource\"\r\n    [tableElRef]=\"tableElRef\"\r\n    [data$]=\"data$\" />\r\n\r\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n  </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatTableModule, DragDropModule, StylerDirective, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
-                        PaginatorComponent, MatTooltipModule, AsyncPipe
-                    ], 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"dataSource\"\r\n  [trackBy]='trackByFunction'\r\n  [styler]=\"tableWidth | async\"\r\n>\r\n\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @if(!row.isGroupFooter){\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      }\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef>\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"index\">\r\n      <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n      <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n        <button mat-icon-button (click)=\"updateGroup(row);\">\r\n          @if(!row.isExpanded){\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        {{row.groupHeaderName}}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n  }\r\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\" />\r\n  <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n  <tb-paginator #tbPaginator\r\n    [dataSource]=\"dataSource\"\r\n    [tableElRef]=\"tableElRef\"\r\n    [data$]=\"data$\" />\r\n\r\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n  </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
+                        MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
+                        PaginatorComponent, MatTooltipModule, AsyncPipe, LetDirective, FunctionPipe
+                    ], 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"dataSource\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\">\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>\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n      <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n      <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></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      <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\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=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n  }\r\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n  <tb-paginator #tbPaginator\r\n    [dataSource]=\"dataSource\"\r\n    [tableElRef]=\"tableElRef\"\r\n    [data$]=\"data$\" />\r\n\r\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n  </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: TransformCreator }, { type: i0.Injector }], propDecorators: { trackBy: [{
+                type: Input
+            }], displayData$: [{
+                type: Input
+            }], data$: [{
                 type: Input
             }], indexColumn: [{
                 type: Input
             }], selectionColumn: [{
                 type: Input
-            }], trackBy: [{
-                type: Input
             }], rows: [{
                 type: Input
             }], isSticky: [{
@@ -3599,8 +3664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                 type: Input
             }], groupHeaderTemplate: [{
                 type: Input
-            }], disableSort: [{
-                type: Input
             }], table: [{
                 type: ViewChild,
                 args: [MatTable, { static: true }]
@@ -3617,28 +3680,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                 type: Output
             }] } });
 
-class DataFilter {
-    constructor(filters$) {
-        this.filters$ = filters$;
-    }
-    filter(data, filters) {
-        return data.filter(r => filters.every(fltr => fltr(r)));
-    }
-    filterData(data$) {
-        return combineLatest([data$, this.filters$]).pipe(map(([data, filters]) => this.filter(data, filters)), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    appendFilters(filters$) {
-        return new DataFilter(combineArrays([
-            this.filters$ ?? of([]),
-            filters$.pipe(map(fltrs => fltrs
-                // we only want to remove it if it was specifically set to false
-                // as apposed to falsy
-                .filter(f => f.active !== false)
-                .map(filter => createFilterFunc(filter))))
-        ]));
-    }
-}
-
 function downloadData(data, filename, mimeType) {
     const url = URL.createObjectURL(new Blob([data], { type: mimeType }));
     const downloadLink = document.createElement('a');
@@ -3732,6 +3773,22 @@ const ArrayDefaults = {
     arrayStyle: ArrayStyle.CommaDelimited
 };
 
+function sortData(data, sorted) {
+    const ordered = orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction));
+    return ordered;
+}
+function filterData(data, filters, update = false) {
+    for (let index = 0; index < data.length; index++) {
+        const element = data[index];
+        const hide = !filters.every(filter => filter(element));
+        if (hide || update) {
+            element[tbNoShowSymbol] = hide;
+        }
+    }
+    return data;
+}
+const tbNoShowSymbol = Symbol('tb_no_show');
+
 function createLinkCreator(metaData) {
     const target = metaData.additional?.link?.target || metaData.additional?.target || '_blank';
     const useRouterLink = metaData.additional?.link?.useRouterLink || metaData.additional?.useRouterLink;
@@ -3773,6 +3830,116 @@ const key = (metaData) => metaData.additional.link?.urlKey ?
         (element) => get(element, metaData.key);
 const parseInterpolated = (interpolatedString, element) => interpolatedString.replace(/{([^}]+)}/g, (_, key) => get(element, key));
 
+class TableBuilderStateStore extends ComponentStore {
+    constructor() {
+        super(loadGlobalStorageState());
+        //selectors
+        this.selectLocalProfile = (key) => this.select(state => state.localProfiles[key]);
+        this.selectLocalProfileState = (key) => this.select(this.selectLocalProfile(key), (profile) => {
+            if (profile) {
+                return profile.states[profile.current ?? profile.default];
+            }
+            return null;
+        });
+        this.selectLocalProfileCurrentKey = (key) => this.select(this.selectLocalProfile(key), (profile) => {
+            if (profile) {
+                return profile.current ?? profile.default;
+            }
+            return 'default';
+        });
+        this.selectLocalProfileKeys = (key) => this.select(this.selectLocalProfile(key), (profile) => {
+            if (profile) {
+                return Object.keys(profile.states).filter(key => key);
+            }
+            return null;
+        });
+        // reducers
+        this.setLocalProfile = this.updater((state, props) => {
+            let profile = state.localProfiles[props.key];
+            if (!profile) {
+                profile = { default: 'default', current: 'default', states: {
+                        default: props.value
+                    } };
+            }
+            else {
+                profile = { ...profile, states: { ...profile.states, [profile.current ?? profile.default]: props.value } };
+            }
+            return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
+        });
+        this.setLocalProfilesState = this.updater((state, props) => {
+            let profile = state.localProfiles[props.key];
+            if (!profile) {
+                profile = { default: props.current, current: props.current, states: { [props.current]: null } };
+            }
+            else {
+                const state = profile.states[props.current] ?? profile.states[profile.current ?? profile.default];
+                profile = { ...profile, current: props.current, states: { ...profile.states, [props.current]: state } };
+            }
+            return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
+        });
+        this.deleteLocalProfilesState = this.updater((state, props) => {
+            let profile = state.localProfiles[props.key];
+            if (profile) {
+                const current = profile.current === props.stateKey ? profile.default : profile.current;
+                profile = { ...profile, current, states: { ...profile.states } };
+                delete profile.states[props.stateKey];
+                return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
+            }
+            else {
+                return state;
+            }
+        });
+        // effects
+        this.saveLocalProfile = this.effect((props$) => props$.pipe(filter$1(action => !!action.persist), concatLatestFrom((action) => this.selectLocalProfile(action.key)), tap$1(([action, profile]) => {
+            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
+            if (!profile) {
+                profile = { default: 'default', current: 'default', states: { default: action.value } };
+                globalSavedState.localProfiles[action.key] = profile;
+            }
+            {
+                if (!globalSavedState.localProfiles[action.key]) {
+                    globalSavedState.localProfiles[action.key] = { ...profile, states: { [profile.current ?? profile.default]: action.value } };
+                }
+                else {
+                    globalSavedState.localProfiles[action.key].states[profile.current ?? profile.default] = action.value;
+                }
+            }
+            localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
+            this.setLocalProfile(action);
+        })));
+        this.deleteLocalProfile = this.effect((props$) => props$.pipe(tap$1((props) => {
+            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
+            if (!globalSavedState.localProfiles[props.key]) {
+                return;
+            }
+            else {
+                delete globalSavedState.localProfiles[props.key].states[props.stateKey];
+            }
+            localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
+            this.deleteLocalProfilesState(props);
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableBuilderStateStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+function loadGlobalStorageState() {
+    const storage = localStorage.getItem('global-state-storage');
+    if (storage) {
+        return { ...defaultStorageState, ...JSON.parse(storage) };
+    }
+    return defaultStorageState;
+}
+const defaultStorageState = {
+    globalProfileKeys: ['Default'],
+    currentGlobalProfile: 'Default',
+    globalProfiles: {},
+    localProfiles: {}
+};
+
 class GroupByListComponent {
     constructor() {
         this.tableStore = inject(TableStore);
@@ -3803,10 +3970,10 @@ class SortMenuComponentStore extends ComponentStore {
             return ({ ...state, sorted });
         });
         this.reset = () => {
-            const sorted = this.tableState.sorted$.pipe(mergeMap(sort => this.tableState.metaData$.pipe(notNull(), map(meta => sort.map(s => {
+            const sorted = this.tableState.sort$.pipe(mergeMap(sort => this.tableState.metaData$.pipe(notNull(), map(meta => sort.map(s => {
                 return { ...s, displayName: meta[s.active]?.displayName };
             })))));
-            const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sorted$.pipe(map(s => metas
+            const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sort$.pipe(map(s => metas
                 .filter(meta => !s.some(s => s.active === meta.key) && !meta.noSort)
                 .map(meta => ({ active: meta.key, displayName: meta.displayName }))))));
             this.set(combineLatest([
@@ -3873,7 +4040,7 @@ class SortMenuComponent {
         this.store.setDirection(sort);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n  @if(sorted$ | async; as sorted){\r\n    @if (notSorted$ | async; as notSorted) {\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(null)\"\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 [ngClass]=\"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 [ngClass]=\"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    }\r\n  }\r\n</ng-container>\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:white}.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: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n  @if(sorted$ | async; as sorted){\r\n    @if (notSorted$ | async; as notSorted) {\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(null)\"\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 [ngClass]=\"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 [ngClass]=\"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    }\r\n  }\r\n</ng-container>\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:white}.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: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: SortMenuComponent, decorators: [{
             type: Component,
@@ -3883,7 +4050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                     ], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n  @if(sorted$ | async; as sorted){\r\n    @if (notSorted$ | async; as notSorted) {\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(null)\"\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 [ngClass]=\"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 [ngClass]=\"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    }\r\n  }\r\n</ng-container>\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:white}.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"] }]
         }], ctorParameters: () => [{ type: TableStore }, { type: SortMenuComponentStore }] });
 
-const i = [
+const containerImports = [
     AsyncPipe, NgTemplateOutlet,
     LetDirective,
     MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
@@ -3891,115 +4058,120 @@ const i = [
     MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, MatInputModule
 ];
 
-class TableBuilderStateStore extends ComponentStore {
-    constructor() {
-        super(loadGlobalStorageState());
-        //selectors
-        this.selectLocalProfile = (key) => this.select(state => state.localProfiles[key]);
-        this.selectLocalProfileState = (key) => this.select(this.selectLocalProfile(key), (profile) => {
-            if (profile) {
-                return profile.states[profile.current ?? profile.default];
-            }
-            return null;
-        });
-        this.selectLocalProfileCurrentKey = (key) => this.select(this.selectLocalProfile(key), (profile) => {
-            if (profile) {
-                return profile.current ?? profile.default;
-            }
-            return 'default';
-        });
-        this.selectLocalProfileKeys = (key) => this.select(this.selectLocalProfile(key), (profile) => {
-            if (profile) {
-                return Object.keys(profile.states).filter(key => key);
-            }
-            return null;
-        });
-        // reducers
-        this.setLocalProfile = this.updater((state, props) => {
-            let profile = state.localProfiles[props.key];
-            if (!profile) {
-                profile = { default: 'default', current: 'default', states: {
-                        default: props.value
-                    } };
-            }
-            else {
-                profile = { ...profile, states: { ...profile.states, [profile.current ?? profile.default]: props.value } };
-            }
-            return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
-        });
-        this.setLocalProfilesState = this.updater((state, props) => {
-            let profile = state.localProfiles[props.key];
-            if (!profile) {
-                profile = { default: props.current, current: props.current, states: { [props.current]: null } };
-            }
-            else {
-                const state = profile.states[props.current] ?? profile.states[profile.current ?? profile.default];
-                profile = { ...profile, current: props.current, states: { ...profile.states, [props.current]: state } };
-            }
-            return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
-        });
-        this.deleteLocalProfilesState = this.updater((state, props) => {
-            let profile = state.localProfiles[props.key];
-            if (profile) {
-                const current = profile.current === props.stateKey ? profile.default : profile.current;
-                profile = { ...profile, current, states: { ...profile.states } };
-                delete profile.states[props.stateKey];
-                return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
-            }
-            else {
-                return state;
-            }
-        });
-        // effects
-        this.saveLocalProfile = this.effect((props$) => props$.pipe(filter$1(action => !!action.persist), concatLatestFrom((action) => this.selectLocalProfile(action.key)), tap$1(([action, profile]) => {
-            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
-            if (!profile) {
-                profile = { default: 'default', current: 'default', states: { default: action.value } };
-                globalSavedState.localProfiles[action.key] = profile;
-            }
-            {
-                if (!globalSavedState.localProfiles[action.key]) {
-                    globalSavedState.localProfiles[action.key] = { ...profile, states: { [profile.current ?? profile.default]: action.value } };
-                }
-                else {
-                    globalSavedState.localProfiles[action.key].states[profile.current ?? profile.default] = action.value;
-                }
-            }
-            localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
-            this.setLocalProfile(action);
-        })));
-        this.deleteLocalProfile = this.effect((props$) => props$.pipe(tap$1((props) => {
-            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
-            if (!globalSavedState.localProfiles[props.key]) {
-                return;
-            }
-            else {
-                delete globalSavedState.localProfiles[props.key].states[props.stateKey];
-            }
-            localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
-            this.deleteLocalProfilesState(props);
-        })));
+const updateFilterState = (previousState, [filterInfoDict, predicateArr], index) => {
+    const currentFilterState = {
+        predicateArr: predicateArr.value,
+        filterInfoDict: filterInfoDict.value,
+        allFilters: [...predicateArr.value, ...Object.values(filterInfoDict.value).map(createFilterFunc)],
+        onlyAddedFilters: undefined
+    };
+    if (index === 0) {
+        return currentFilterState;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
+    if (filterInfoDict.timestamp > predicateArr.timestamp) {
+        currentFilterState.onlyAddedFilters = filterInfoOnlyAdded(previousState.filterInfoDict, filterInfoDict.value);
+    }
+    else {
+        currentFilterState.onlyAddedFilters = predicatesOnlyAdded(previousState.predicateArr, predicateArr.value);
+    }
+    return currentFilterState;
+};
+const predicateAndFilterInfos = (filterInfos, predicates) => {
+    return combineLatest([filterInfos.pipe(map$1(filterNonActiveFilters), timestamp()),
+        predicates.pipe(timestamp())]);
+};
+const filterNonActiveFilters = (filtersDict) => Object.entries(filtersDict).reduce((obj, [key, value]) => {
+    if (value.active !== false) {
+        obj[key] = value;
+    }
+    ;
+    return obj;
+}, {});
+//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.
+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) {
+        return undefined;
+    }
+    if (filtersUpdated(previousFilterInfos, currentFilterInfos)) {
+        return undefined;
+    }
+    const addedFilters = difference(currentKeys, keysInBoth).map(key => createFilterFunc(currentFilterInfos[key]));
+    return addedFilters;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableBuilderStateStore, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-function loadGlobalStorageState() {
-    const storage = localStorage.getItem('global-state-storage');
-    if (storage) {
-        return { ...defaultStorageState, ...JSON.parse(storage) };
+function predicatesOnlyAdded(previousPredicates, currentPredicates) {
+    const predicateFiltersRemoved = difference(previousPredicates, currentPredicates).length;
+    if (predicateFiltersRemoved) {
+        return undefined;
     }
-    return defaultStorageState;
+    return difference(currentPredicates, previousPredicates);
 }
-const defaultStorageState = {
-    globalProfileKeys: ['Default'],
-    currentGlobalProfile: 'Default',
-    globalProfiles: {},
-    localProfiles: {}
+function filtersUpdated(previousFilterInfos, currentFilterInfos) {
+    return !Object.entries(previousFilterInfos).every(([key, val]) => {
+        return currentFilterInfos[key].filterType === val.filterType && currentFilterInfos[key].filterValue === val.filterValue;
+    });
+}
+const initialFilterState = { allFilters: [], onlyAddedFilters: undefined, predicateArr: [], filterInfoDict: {} };
+
+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 initialDataState = { mappedData: [] };
 
 class TableContainerComponent {
     constructor() {
@@ -4007,6 +4179,8 @@ class TableContainerComponent {
         this.selectionColumn = false;
         this.isSticky = true;
         this.selection$ = new EventEmitter();
+        this.displayDataSubject = new ReplaySubject(1);
+        this.displayData = this.displayDataSubject.pipe(switchAll(), delay$1(0), defaultShareReplay());
         this.dataSubject = new ReplaySubject(1);
         this.data = this.dataSubject.pipe(switchAll(), defaultShareReplay());
         this.onStateReset = new EventEmitter();
@@ -4033,54 +4207,45 @@ class TableContainerComponent {
             return meta;
         };
         this.collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
-        this.tbGroupBy = (data, groupByKeys, parentGroupName) => {
-            let res = {};
-            res = groupBy(data, groupByKeys[0]);
-            const remainingGroupByKeys = groupByKeys.slice(1);
-            if (remainingGroupByKeys.length) {
-                Object.keys(res).forEach(key => res[key] = this.tbGroupBy(res[key], remainingGroupByKeys, key));
+        this.addFilterDirectives = (state) => {
+            let allFilterDirectives = [...this.filterDirectives, ...this.customFilterDirectives];
+            if (this.wrapper) {
+                allFilterDirectives = [...allFilterDirectives, ...this.wrapper.registrations];
             }
-            return flattenDeep(Object.keys(res).map(groupName => {
-                const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
-                return [
-                    {
-                        isGroupHeader: true,
-                        groupHeaderName: `${groupName} (${res[groupName]?.filter(row => !row.isGroupHeader)?.length})`,
-                        data: res[groupName],
-                        groupName: uniqName,
-                        padding: 0
-                    },
-                    res[groupName]?.map(d => ({ ...d, parentGroupName: d.parentGroupName || uniqName }))
-                ];
-            })).map(this.addIndentation);
-        };
-        this.addIndentation = (d) => {
-            if (d.isGroupHeader) {
-                if (d.padding) {
-                    d.padding += 20;
+            const customFilters = [];
+            allFilterDirectives.filter(f => !f.used).forEach(f => {
+                f.used = true;
+                if (f.savable) {
+                    var filter = state.filters[f.filterId];
+                    if (isFilterInfo(filter)) {
+                        const filterDirective = f;
+                        filterDirective.fieldType = filter.fieldType;
+                        filterDirective.filterType = filter.filterType;
+                        filterDirective.setFilterValue(filter.filterValue);
+                        filterDirective.key = filter.key;
+                        filterDirective.update();
+                    }
+                    if (isCustomFilter(filter)) {
+                        f.active = filter.active ?? false;
+                    }
+                    this.state.addFilter(f.filter$);
                 }
                 else {
-                    d.padding = 1;
+                    customFilters.push(f);
                 }
-            }
-            return d;
-        };
-        this.setDisplay = (data, groups) => data
-            .map(d => ({
-            ...d,
-            shouldDisplay: !d.parentGroupName || this.shouldDisplay(groups.find(g => g.groupName == d.parentGroupName), groups),
-            isExpanded: groups.find(g => g.groupName == d.groupName)?.isExpanded
-        }))
-            .filter(d => d.shouldDisplay);
-        this.shouldDisplay = (currentGroup, groups) => {
-            if (!currentGroup?.isExpanded) {
-                return false;
-            }
-            const parentGroup = groups?.find(g => g.groupName == currentGroup.parentGroupName);
-            if (parentGroup) {
-                return this.shouldDisplay(parentGroup, groups);
-            }
-            return true;
+            });
+            const customFilters$ = from(customFilters.map(cf => cf.filter$)).pipe(mergeAll(), scan$1((a, b) => {
+                if (b.active) {
+                    a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
+                }
+                else {
+                    delete a[b.filterId];
+                }
+                return a;
+            }, {}), map(f => Object.values(f)));
+            this.state.on(customFilters$, (f) => {
+                this.customFilters$.next(f);
+            });
         };
     }
     set pageSize(value) {
@@ -4093,8 +4258,8 @@ class TableContainerComponent {
         this.genericTableComponent?.paginatorComponent?.paginator?.lastPage();
     }
     resetState() {
-        this.customFilters.forEach(cf => cf.reset());
-        this.filters.forEach(cf => cf.reset());
+        this.customFilterDirectives.forEach(cf => cf.reset());
+        this.filterDirectives.forEach(cf => cf.reset());
         this.state.resetState();
         this.onStateReset.next(null);
     }
@@ -4115,14 +4280,26 @@ class TableContainerComponent {
         });
     }
     initializeData() {
-        var allFilters = this.inputFilters ?
-            combineArrays([this.customFilters$, this.inputFilters])
-            : this.customFilters$;
-        const filters$ = this.state.filters$.pipe(map(filters => Object.values(filters)));
-        const data = new DataFilter(allFilters)
-            .appendFilters(filters$)
-            .filterData(this.tableBuilder.getData$()).pipe(switchMap(data => this.state.groupByKeys$.pipe(map(groupBy => this.getData(data, groupBy))).pipe(switchMap(data => this.state.groups$.pipe(map(groups => this.setDisplay(data, groups)))))));
-        this.dataSubject.next(data);
+        const predicateFilters$ = combineLatest([this.inputFilters?.pipe(startWith([])) ?? of([]), this.customFilters$])
+            .pipe(map(([a, b]) => [...a, ...b]));
+        const filterState$ = predicateAndFilterInfos(this.state.filters$, predicateFilters$).pipe(scan$1(updateFilterState, initialFilterState));
+        const sortsState$ = this.state.sort$.pipe(scan$1(updateSortState, initialSortState));
+        const sortedAndFilteredData$ = combineLatest([
+            this.tableBuilder.getData$().pipe(timestamp$1()),
+            sortsState$.pipe(timestamp$1()),
+            filterState$.pipe(timestamp$1())
+        ]).pipe(scan$1(({ 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) });
+        }, initialDataState)).pipe(map(({ mappedData: resultData }) => resultData.filter(item => !item[tbNoShowSymbol])), defaultShareReplay());
+        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.displayDataSubject.next(flatGrouped$);
+        this.dataSubject.next(sortedAndFilteredData$);
     }
     ngOnInit() {
         this.initializeState();
@@ -4133,7 +4310,7 @@ class TableContainerComponent {
         }
     }
     exportToCsv() {
-        const sorted = this.data.pipe(withLatestFrom(this.state.sorted$), map(([data, sorted]) => sortData(data, sorted)));
+        const sorted = this.data.pipe(withLatestFrom(this.state.sort$), map(([data, sorted]) => sortData(data, sorted)));
         this.exportToCsvService.exportToCsv(sorted);
     }
     saveState() {
@@ -4152,44 +4329,7 @@ class TableContainerComponent {
     ngAfterContentInit() {
         this.initializeColumns();
         this.state.runOnceWhen(stateIs(InitializationState.LoadedFromStore), state => {
-            let allFilters = [...this.filters, ...this.customFilters];
-            if (this.wrapper) {
-                allFilters = [...allFilters, ...this.wrapper.customFilters, ...this.wrapper.filters, ...this.wrapper.registrations];
-            }
-            const customFilters = [];
-            allFilters.filter(f => !f.used).forEach(f => {
-                f.used = true;
-                if (f.savable) {
-                    var filter = state.filters[f.filterId];
-                    if (isFilterInfo(filter)) {
-                        const filterDirective = f;
-                        filterDirective.fieldType = filter.fieldType;
-                        filterDirective.filterType = filter.filterType;
-                        filterDirective.setFilterValue(filter.filterValue);
-                        filterDirective.key = filter.key;
-                        filterDirective.update();
-                    }
-                    if (isCustomFilter(filter)) {
-                        f.active = filter.active ?? false;
-                    }
-                    this.state.addFilter(f.filter$);
-                }
-                else {
-                    customFilters.push(f);
-                }
-            });
-            const filters$ = from(customFilters.map(cf => cf.filter$)).pipe(mergeAll(), scan$1((a, b) => {
-                if (b.active) {
-                    a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
-                }
-                else {
-                    delete a[b.filterId];
-                }
-                return a;
-            }, {}), map(f => Object.values(f)));
-            this.state.on(filters$, (f) => {
-                this.customFilters$.next(f);
-            });
+            this.addFilterDirectives(state);
             this.state.updateState({ initializationState: InitializationState.Ready });
         });
     }
@@ -4212,27 +4352,19 @@ class TableContainerComponent {
         })));
         this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })));
     }
-    getData(data, groupByKeys) {
-        if (!groupByKeys.length) {
-            this.disableSort = false;
-            return data;
-        }
-        this.disableSort = true;
-        return this.tbGroupBy(data, groupByKeys);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\" *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.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 (!(collapseHeader$ | async)) {\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]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <tb-generic-table [rows]='customRows' [data$]=\"data\" [indexColumn]='indexColumn'\r\n      [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n      [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n    </tb-generic-table>\r\n  </div>\r\n\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  </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 (currentStateKey$ | async; as currentKey) {\r\n      @if (tableId) {\r\n        <button mat-menu-item (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      }\r\n    }\r\n\r\n    <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n      <button mat-menu-item clickEmitter  #add='clickEmitter'>\r\n        <mat-icon>add</mat-icon>\r\n        <span>New</span>\r\n      </button>\r\n      @for (key of stateKeys$ | async; track key) {\r\n        <button mat-menu-item (click)='setProfileState(key)'>\r\n          <span>{{key}}</span>\r\n          <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <ng-container *opDialog='add'>\r\n      <mat-form-field>\r\n        <input class=\"add-key\" matInput #addedKey />\r\n      </mat-form-field>\r\n      <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n        Add\r\n      </button>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.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%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { 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: ["data$", "indexColumn", "selectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "disableSort"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i14.MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.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 (!(collapseHeader$ | async)) {\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]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\" [indexColumn]='indexColumn'\r\n      [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n      [isSticky]='isSticky' [columnInfos]='myColumns$' [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n    </tb-generic-table>\r\n  </div>\r\n\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  </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 (currentStateKey$ | async; as currentKey) {\r\n      @if (tableId) {\r\n        <button mat-menu-item (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      }\r\n    }\r\n\r\n    <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n      <button mat-menu-item clickEmitter  #add='clickEmitter'>\r\n        <mat-icon>add</mat-icon>\r\n        <span>New</span>\r\n      </button>\r\n      @for (key of stateKeys$ | async; track key) {\r\n        <button mat-menu-item (click)='setProfileState(key)'>\r\n          <span>{{key}}</span>\r\n          <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <ng-container *opDialog='add'>\r\n      <mat-form-field>\r\n        <input class=\"add-key\" matInput #addedKey />\r\n      </mat-form-field>\r\n      <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n        Add\r\n      </button>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.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%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { 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: ["trackBy", "displayData$", "data$", "indexColumn", "selectionColumn", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i14.MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: i, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\" *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.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 (!(collapseHeader$ | async)) {\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]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <tb-generic-table [rows]='customRows' [data$]=\"data\" [indexColumn]='indexColumn'\r\n      [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n      [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n    </tb-generic-table>\r\n  </div>\r\n\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  </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 (currentStateKey$ | async; as currentKey) {\r\n      @if (tableId) {\r\n        <button mat-menu-item (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      }\r\n    }\r\n\r\n    <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n      <button mat-menu-item clickEmitter  #add='clickEmitter'>\r\n        <mat-icon>add</mat-icon>\r\n        <span>New</span>\r\n      </button>\r\n      @for (key of stateKeys$ | async; track key) {\r\n        <button mat-menu-item (click)='setProfileState(key)'>\r\n          <span>{{key}}</span>\r\n          <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <ng-container *opDialog='add'>\r\n      <mat-form-field>\r\n        <input class=\"add-key\" matInput #addedKey />\r\n      </mat-form-field>\r\n      <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n        Add\r\n      </button>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.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%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.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 (!(collapseHeader$ | async)) {\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]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div>\r\n    <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\" [indexColumn]='indexColumn'\r\n      [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n      [isSticky]='isSticky' [columnInfos]='myColumns$' [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n    </tb-generic-table>\r\n  </div>\r\n\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  </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 (currentStateKey$ | async; as currentKey) {\r\n      @if (tableId) {\r\n        <button mat-menu-item (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      }\r\n    }\r\n\r\n    <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n      <button mat-menu-item clickEmitter  #add='clickEmitter'>\r\n        <mat-icon>add</mat-icon>\r\n        <span>New</span>\r\n      </button>\r\n      @for (key of stateKeys$ | async; track key) {\r\n        <button mat-menu-item (click)='setProfileState(key)'>\r\n          <span>{{key}}</span>\r\n          <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <ng-container *opDialog='add'>\r\n      <mat-form-field>\r\n        <input class=\"add-key\" matInput #addedKey />\r\n      </mat-form-field>\r\n      <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n        Add\r\n      </button>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.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%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
         }], propDecorators: { genericTableComponent: [{
                 type: ViewChild,
                 args: [GenericTableComponent]
-            }], customFilters: [{
+            }], customFilterDirectives: [{
                 type: ContentChildren,
                 args: [TableCustomFilterDirective, { descendants: true }]
-            }], filters: [{
+            }], filterDirectives: [{
                 type: ContentChildren,
                 args: [TableFilterDirective, { descendants: true }]
             }], customRows: [{
@@ -4393,7 +4525,11 @@ class TableBuilder {
         this.settings = s.pipe(map(sett => new GeneralTableSettings(sett)), defaultShareReplay());
     }
     getData$() {
-        return this.metaData$.pipe(switchMap(metaData => this.data$.pipe(mapArray(data => this.cleanRecord(data, metaData)))));
+        return this.metaData$.pipe(switchMap(metaData => this.data$.pipe(mapArray((data, i) => {
+            const cleanedRecord = this.cleanRecord(data, metaData);
+            cleanedRecord[initIndexSymbol] = i;
+            return cleanedRecord;
+        }))));
     }
     createMetaData(obj) {
         return Object.keys(obj ?? {})
@@ -4443,7 +4579,7 @@ class TableBuilder {
             }
             return prev;
         }, { ...record });
-        return { ...record, ...cleaned };
+        return cleaned;
     }
 }
 const CreateTableBuilder = (reportDef$) => {
@@ -4623,5 +4759,5 @@ function provideActionableSelector() {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, 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, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionableSelector, createFailure, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, 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, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionableSelector, createFailure, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isDifferent, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map