@one-paragon/angular-utilities 1.3.1 → 2.0.0-beta.2

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, contentChild, forwardRef, contentChildren, runInInjectionContext, ContentChild, APP_INITIALIZER } from '@angular/core';
-import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, debounceTime, distinctUntilChanged, first as first$1, observeOn, scan as scan$1, timestamp as timestamp$1, mergeAll } from 'rxjs/operators';
+import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, linkedSignal, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
+import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, observeOn, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
 import * as i1 from 'rxjs';
-import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, BehaviorSubject, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, animationFrameScheduler, timestamp } from 'rxjs';
+import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, animationFrameScheduler, timestamp, BehaviorSubject } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as i1$8 from '@angular/common';
-import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgClass, DecimalPipe, CommonModule } from '@angular/common';
+import { DatePipe, CurrencyPipe, KeyValuePipe, NgTemplateOutlet, DecimalPipe, CommonModule, AsyncPipe } from '@angular/common';
 import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import { merge as merge$1, get, sumBy, difference, intersection, groupBy, orderBy, set, cloneDeep } from 'lodash';
+import { merge as merge$1, get, sumBy, difference, intersection, groupBy, orderBy, set, isFunction as isFunction$1 } from 'lodash';
 import { CdkColumnDef } from '@angular/cdk/table';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i10 from '@angular/material/radio';
@@ -29,10 +29,10 @@ import * as i1$1 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/form-field';
 import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import * as i3$1 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
 import * as i4$1 from '@angular/material/tooltip';
@@ -43,8 +43,6 @@ import * as i8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i4$2 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import * as i3$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 i1$5 from '@angular/material/table';
@@ -152,7 +150,7 @@ class HttpRequestStateDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HttpRequestStateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[httpRequestState]', standalone: true }]
+            args: [{ selector: '[httpRequestState]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { stateStore: [{
                 type: Input,
                 args: ['httpRequestState']
@@ -201,7 +199,7 @@ class HttpErrorStateDirective extends HttpStateDirectiveBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HttpErrorStateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[httpErrorState]', standalone: true }]
+            args: [{ selector: '[httpErrorState]', }]
         }] });
 
 class HttpInProgressStateDirective extends HttpStateDirectiveBase {
@@ -220,7 +218,7 @@ class HttpInProgressStateDirective extends HttpStateDirectiveBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HttpInProgressStateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[httpInProgressState]', standalone: true }]
+            args: [{ selector: '[httpInProgressState]', }]
         }] });
 
 class HttpNotStartedStateDirective extends HttpStateDirectiveBase {
@@ -239,7 +237,7 @@ class HttpNotStartedStateDirective extends HttpStateDirectiveBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HttpNotStartedStateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[httpNotStartedState]', standalone: true }]
+            args: [{ selector: '[httpNotStartedState]', }]
         }] });
 
 class HttpSuccessStateDirective extends HttpStateDirectiveBase {
@@ -262,7 +260,7 @@ class HttpSuccessStateDirective extends HttpStateDirectiveBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HttpSuccessStateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[httpSuccessState]', standalone: true }]
+            args: [{ selector: '[httpSuccessState]', }]
         }], propDecorators: { httpSuccessStateTypeSafety: [{
                 type: Input
             }] } });
@@ -694,7 +692,7 @@ class SpaceCasePipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpaceCasePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'spaceCase', standalone: true }]
+            args: [{ name: 'spaceCase' }]
         }] });
 /**
  * Adds a space before uppercase letters that either
@@ -706,10 +704,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * Turns underscores into spaces
  */
 function spaceCase(value) {
-    const phrase = value?.replace(/([a-z0-9])([A-Z])|([a-zA-Z0-9])([A-Z])(?=[a-z])|_/g, '$1$3 $2$4');
+    const phrase = value?.replace(regex1, '$1$3 $2$4');
     // uppercase the first character of every word
-    return phrase?.replace(/(^| )(\w)/g, x => x.toUpperCase());
+    return phrase?.replace(regex2, x => x.toUpperCase());
 }
+const regex1 = /([a-z0-9])([A-Z])|([a-zA-Z0-9])([A-Z])(?=[a-z])|_/g;
+const regex2 = /(^| )(\w)/g;
 
 var FieldType;
 (function (FieldType) {
@@ -923,6 +923,11 @@ const defaultDataState = {
     },
 };
 
+const ArrayDefaults = {
+    limit: 3,
+    arrayStyle: ArrayStyle.CommaDelimited
+};
+
 // here is how to use it
 // <generic-table [report]="report">
 //     <p *customCell="'column1'; let element = element" [class.makeMeRed]="element?.port">If Port, i will be red</p>
@@ -931,65 +936,47 @@ const defaultDataState = {
 class CustomCellDirective {
     templateRef = inject(TemplateRef, { optional: true });
     columnDef = inject(CdkColumnDef, { optional: true });
-    customCell;
-    displayName;
-    preSort;
-    TemplateRef;
-    customCellOrder;
-    customCellWidth;
-    customCellTableRef;
+    $customCell = input.required({ alias: 'customCell' });
+    $displayName = input(undefined, { alias: 'displayName' });
+    $preSort = input(undefined, { alias: 'preSort' });
+    $templateRef = input(this.templateRef || undefined, { alias: 'templateRef' });
+    $customCellOrder = input(undefined, { alias: 'customCellOrder' });
+    $customCellWidth = input(undefined, { alias: 'customCellWidth' });
+    /**
+     * for type safety, this is a reference to the table builder instance.
+     */
+    $customCellTableRef = input(undefined, { alias: 'customCellTableRef' });
     /**
      * true if column not mapped to a property in the data source. Default is false.
      */
-    customCellNotMapped = false;
-    constructor() {
-        if (this.templateRef !== null)
-            this.TemplateRef = this.templateRef;
-    }
-    ngOnInit() {
-        this.$metaData.next(this.getMetaData());
-    }
-    $metaData = new ReplaySubject();
-    getMetaData = () => {
-        return {
-            key: this.customCell,
-            displayName: this.displayName,
-            preSort: this.preSort,
-            fieldType: this.customCellNotMapped ? FieldType.NotMapped : FieldType.Unknown,
-            order: this.customCellOrder,
-            width: this.customCellWidth,
+    $customCellNotMapped = input(false, { alias: 'customCellNotMapped' });
+    $metaData = computed(() => {
+        const c = this.$customCell();
+        if (!c)
+            return;
+        return ({
+            key: this.$customCell(),
+            displayName: this.$displayName(),
+            preSort: this.$preSort(),
+            fieldType: this.$customCellNotMapped() ? FieldType.NotMapped : FieldType.Unknown,
+            order: this.$customCellOrder(),
+            width: this.$customCellWidth(),
             customCell: true,
-        };
-    };
+            noExport: true,
+        });
+    });
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CustomCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth", customCellTableRef: "customCellTableRef", customCellNotMapped: "customCellNotMapped" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { $customCell: { classPropertyName: "$customCell", publicName: "customCell", isSignal: true, isRequired: true, transformFunction: null }, $displayName: { classPropertyName: "$displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, $preSort: { classPropertyName: "$preSort", publicName: "preSort", isSignal: true, isRequired: false, transformFunction: null }, $templateRef: { classPropertyName: "$templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellOrder: { classPropertyName: "$customCellOrder", publicName: "customCellOrder", isSignal: true, isRequired: false, transformFunction: null }, $customCellWidth: { classPropertyName: "$customCellWidth", publicName: "customCellWidth", isSignal: true, isRequired: false, transformFunction: null }, $customCellTableRef: { classPropertyName: "$customCellTableRef", publicName: "customCellTableRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellNotMapped: { classPropertyName: "$customCellNotMapped", publicName: "customCellNotMapped", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CustomCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[customCell]',
-                    standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { customCell: [{
-                type: Input
-            }], displayName: [{
-                type: Input
-            }], preSort: [{
-                type: Input
-            }], TemplateRef: [{
-                type: Input
-            }], customCellOrder: [{
-                type: Input
-            }], customCellWidth: [{
-                type: Input
-            }], customCellTableRef: [{
-                type: Input
-            }], customCellNotMapped: [{
-                type: Input
-            }] } });
+        }] });
 
 class ResizeColumnDirective {
     renderer = inject(Renderer2);
@@ -1063,7 +1050,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: "[resizeColumn]",
-                    standalone: true
                 }]
         }], propDecorators: { resizable: [{
                 type: Input,
@@ -1084,7 +1070,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[tbWrapper]',
-                    standalone: true,
                 }]
         }] });
 
@@ -1124,14 +1109,13 @@ const inputs = [
 class TableCustomFilterDirective {
     filterId;
     savable = false;
-    used = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: TableCustomFilterDirective, isStandalone: true, selector: " ", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: TableCustomFilterDirective, isStandalone: true, selector: "tb-abstract", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: ' '
+                    selector: 'tb-abstract'
                 }]
         }] });
 class TableFilterDirective {
@@ -1143,6 +1127,9 @@ class TableFilterDirective {
         }
         if (this.model) {
             subscriber(this.model.valueChanges, val => {
+                if (this.filterType === FilterTypes.StringContains && val === '') {
+                    val = undefined;
+                }
                 this.filterValue = val;
                 this.update();
             });
@@ -1151,7 +1138,7 @@ class TableFilterDirective {
     reset() {
         this.filterValue = undefined;
     }
-    filter$ = new Subject;
+    filter$ = new ReplaySubject(1);
     filterType;
     key;
     fieldType;
@@ -1168,7 +1155,6 @@ class TableFilterDirective {
             this.filterValue = value;
         }
     }
-    used = false;
     savable = false;
     ready = false;
     _userActive = true;
@@ -1208,7 +1194,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: "[tbFilter]",
-                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { filterType: [{
                 type: Input
@@ -1259,11 +1244,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         'filterId: filterId',
                         'active: active',
                     ],
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
-    filter$;
+    filter$ = new ReplaySubject(1);
     filter;
     _predicate;
     set predicate(val) {
@@ -1301,7 +1285,7 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
             predicate: this._predicate,
         };
         this.ready = true;
-        this.filter$ = new BehaviorSubject(this.filter);
+        this.filter$.next(this.filter);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: TableCustomFilterDirectiveBase, isStandalone: true, selector: "[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 });
@@ -1372,7 +1356,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         ...inputs
                     ],
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }],
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
@@ -1400,7 +1383,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         ...inputs
                     ],
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }],
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 // Radio button
@@ -1427,7 +1409,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     selector: 'mat-radio-button[tbCustomFilter]',
                     inputs: ['predicate: tbCustomFilter'],
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }],
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 // Option (select)
@@ -1465,7 +1446,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         ...inputs
                     ],
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }],
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 // Button toggle
@@ -1494,7 +1474,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         ...inputs
                     ],
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }],
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 
@@ -1513,9 +1492,15 @@ class PhoneNumberPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PhoneNumberPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'phone', standalone: true }]
+            args: [{ name: 'phone' }]
         }] });
 
+const defaultConfig = {
+    defaultTableSettings: {
+        pageSize: 10
+    },
+    arrayDefaults: ArrayDefaults
+};
 const TableBuilderConfigToken = new InjectionToken('TableBuilderConfig');
 function provideTableBuilder(config) {
     return makeEnvironmentProviders([
@@ -1524,7 +1509,7 @@ function provideTableBuilder(config) {
         DatePipe,
         CurrencyPipe,
         PhoneNumberPipe,
-        { provide: TableBuilderConfigToken, useValue: config || defaultTableState }
+        { provide: TableBuilderConfigToken, useValue: config || defaultConfig }
     ]);
 }
 
@@ -1537,8 +1522,8 @@ const isNull = (filterInfo) => {
 };
 
 const stringEqualFunc = (filterInfo) => {
-    const equelsVal = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => prepareForStringCompare(val) === equelsVal);
+    const equalsVal = prepareForStringCompare(filterInfo.filterValue);
+    return ((val) => prepareForStringCompare(val) === equalsVal);
 };
 const stringContainsFunc = (filterInfo) => {
     const containsVal = prepareForStringCompare(filterInfo.filterValue);
@@ -1573,7 +1558,7 @@ const EnumFilterFuncs = {
     [FilterTypes.IsNull]: isNull,
     [FilterTypes.In]: multipleStringValuesEqualsFunc,
 };
-const prepareForStringCompare = (val) => val?.toString().trim().toLowerCase();
+const prepareForStringCompare = (val) => (val?.toString().trim().toLowerCase());
 
 const numberEqalsFunc = (filterInfo) => (val) => {
     return val === filterInfo.filterValue;
@@ -1670,11 +1655,11 @@ const BooleanFilterFuncs = {
 
 const filterFactoryMap = {
     [FilterTypes.And]: (filter) => {
-        const filters = filter.filterValue.map(createFilterFunc);
+        const filters = createFilterFuncs(filter.filterValue);
         return (obj) => filters.every(f => f(obj));
     },
     [FilterTypes.In]: (filter) => {
-        const filters = filter.filterValue.map(createFilterFunc);
+        const filters = createFilterFuncs(filter.filterValue);
         return (obj) => filters.some(f => f(obj));
     },
 };
@@ -1699,11 +1684,20 @@ function isFilterInfo(filter) {
     return filter && typeof filter.key === 'string' && filter.filterType !== FilterTypes.Custom;
 }
 const defaultPredicate = () => true;
+function createFilterFuncs(filters) {
+    return filters.filter(needsFilterCreation).map(createFilterFunc);
+}
+function needsFilterCreation(filter) {
+    if (isCustomFilter(filter)) {
+        return filter.active !== false;
+    }
+    return filter.filterValue != undefined && filter.active !== false;
+}
 function createFilterFunc(filter) {
     if (isCustomFilter(filter)) {
         return filter.active ? filter.predicate : defaultPredicate;
     }
-    if (filter.filterValue === undefined) {
+    if (filter.filterValue == undefined) {
         return defaultPredicate;
     }
     const func = filterTypeFuncMap[filter.fieldType][filter.filterType](filter);
@@ -1720,7 +1714,12 @@ function createFilterFunc(filter) {
             : func(value);
     };
 }
-const FalseyValueCanBeIncludedFilterTypes = [FilterTypes.IsNull, FilterTypes.NumberNotEqual, FilterTypes.DateIsNotOn, FilterTypes.StringDoesNotContain];
+const FalseyValueCanBeIncludedFilterTypes = [
+    FilterTypes.IsNull,
+    FilterTypes.NumberNotEqual,
+    FilterTypes.DateIsNotOn,
+    FilterTypes.StringDoesNotContain,
+];
 
 const replaceInArrayWithClone = (arr, findMeth, actionOnClone = ((t) => { })) => {
     const index = arr.findIndex(findMeth);
@@ -1736,9 +1735,93 @@ const replaceInArrayWithClone = (arr, findMeth, actionOnClone = ((t) => { })) =>
     return clonedArray;
 };
 
-function stateIs(initializationState) {
-    return (state) => state.initializationState === initializationState;
+const orderedStateVisibleMetaData = (state) => {
+    const ordered = orderStateMetaData(state);
+    const orderedVisible = ordered
+        .filter(metaData => !state.hiddenKeys.includes(metaData.key) && state.metaData[metaData.key].fieldType !== FieldType.Hidden);
+    return orderedVisible;
+};
+const orderedCodeVisibleMetaData = (state) => orderStateMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
+const orderStateMetaData = (state) => {
+    return orderMetaData(state.metaData, state.userDefined.order);
+};
+const orderMetaData = (metaData, userDefined) => {
+    const userOrderArr = Object.entries(userDefined);
+    return userOrderArr.length ?
+        Object.values(metaData).sort((a, b) => {
+            const orderA = userDefined[a.key];
+            const orderB = userDefined[b.key];
+            return order(orderA, orderB);
+        })
+        :
+            Object.values(metaData).sort((a, b) => {
+                const orderA = a.order;
+                const orderB = b.order;
+                return order(orderA, orderB);
+            });
+};
+function order(orderA, orderB) {
+    if (orderA == null && orderB == null) {
+        return 0;
+    }
+    if (orderA == null) {
+        return 1;
+    }
+    if (orderB == null) {
+        return -1;
+    }
+    return orderA - orderB;
+}
+function cleanPersistedState(state, pState) {
+    const metas = Object.values(state.metaData);
+    const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
+        obj[filter.filterId] = pState.filters[filter.filterId];
+        return obj;
+    }, {});
+    const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
+    return ({ ...pState, filters, sorted });
 }
+const mapSaveableState = (s) => {
+    const savableState = { ...s };
+    keysToDelete.forEach(key => delete savableState[key]);
+    return savableState;
+};
+const 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))
+        .map(({ key, preSort: { direction } }) => ({ active: key, direction }));
+};
+const mergeMeta = (orig, merge) => {
+    return {
+        key: orig.key,
+        displayName: merge.displayName ?? orig.displayName,
+        fieldType: merge.fieldType || orig.fieldType,
+        additional: { ...orig.additional, ...merge.additional },
+        order: merge.order ?? orig.order,
+        preSort: merge.preSort ?? orig.preSort,
+        width: merge.width ?? orig.width,
+        noExport: merge.noExport || orig.noExport,
+        noFilter: merge.noFilter || orig.noFilter,
+        customCell: merge.customCell ?? orig.customCell,
+        transform: merge.transform ?? orig.transform,
+        map: merge.map ?? orig.map,
+        click: merge.click ?? orig.click,
+        classes: merge.classes ?? orig.classes,
+        noSort: merge.noSort ?? orig.noSort,
+        template: merge.template ?? orig.template,
+        toolTip: merge.toolTip ?? orig.toolTip,
+        useIcon: merge.useIcon ?? orig.useIcon,
+    };
+};
+const initializeOrder = (state, mds) => {
+    const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
+    let userDefinedOrder = state.userDefined.order;
+    if (viewableMetaDataArr.some(meta => userDefinedOrder[meta.key] == null)) {
+        return {};
+    }
+    return userDefinedOrder;
+};
+
 class TableStore extends ComponentStore {
     constructor() {
         const config = inject(TableBuilderConfigToken);
@@ -1751,41 +1834,122 @@ class TableStore extends ComponentStore {
         }
         super({ ...defaultTableState, ...settingsFromConfig });
     }
-    selectStateReady = this.select(state => state.initializationState).pipe(filter(i => i === InitializationState.Ready));
-    getSavableState() {
-        return this.state$.pipe(debounceTime(300), map(s => {
-            return this.mapSaveableState(s);
-        }));
-    }
     getSavableStateSignal = computed(() => {
         const state = this.state();
-        return this.mapSaveableState(state);
+        return mapSaveableState(state);
     });
-    mapSaveableState = (s) => {
-        const savableState = { ...s };
-        keysToDelete.forEach(key => delete savableState[key]);
-        return savableState;
-    };
-    on = (srcObservable, func) => {
-        this.effect(() => srcObservable.pipe(tap(func)));
-        return this;
-    };
+    $userDefinedOrder = this.selectSignal(state => state.userDefined.order);
     metaData$ = this.select(state => state.metaData);
     $metaData = this.selectSignal(state => state.metaData);
-    $userDefinedOrder = this.selectSignal(state => state.userDefined.order);
-    $hiddenKeys = this.selectSignal(state => state.hiddenKeys);
     $metaDataArray = this.selectSignal(this.$metaData, this.$userDefinedOrder, orderMetaData);
-    getMetaData$ = (key) => {
-        return this.select(state => state.metaData[key]).pipe(tap(meta => { if (!meta)
-            console.warn(`Meta data with key ${key} not found`); }), notNull());
-    };
-    $getUserDefinedWidth = (key) => this.selectSignal(state => state.userDefined.widths[key]);
+    $orderedCodeVisibleMetaDatas = this.selectSignal(this.$metaDataArray, (mds) => mds.filter(m => m.fieldType !== FieldType.Hidden), { equal: (a, b) => b.length === a.length && b.every((s, i) => a[i].key === s.key) });
+    $getMetaData = (key) => computed(() => {
+        const metaData = this.state().metaData[key];
+        if (!metaData)
+            console.warn(`Meta data with key ${key} not found`);
+        return metaData;
+    });
+    $hiddenKeys = this.selectSignal(state => state.hiddenKeys);
+    $orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys, (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
     $getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
-    tableSettingsMinWidth = this.selectSignal(state => state.notPersistedTableSettings.minColumnWidth);
+    $tableSettingsMinWidth = this.selectSignal(state => state.notPersistedTableSettings.minColumnWidth);
+    $getUserDefinedWidth = (key) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
+    $filters = this.selectSignal(state => state.filters);
+    filters$ = this.select(state => state.filters);
+    $getFilter = (filterId) => {
+        return this.selectSignal(this.$filters, filters => filters[filterId]);
+    };
+    $selectSorted = this.selectSignal(state => state.sorted, {
+        equal: sortsAreSame
+    });
+    selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
+    sort$ = this.select(state => state.initializationState).pipe(filter(i => i === InitializationState.Ready))
+        .pipe(switchMap(() => this.selectSorted$));
+    $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
+    getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
+    $getPageSize = this.selectSignal(state => state.userDefined.pageSize || state.pageSize);
+    $footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
+    $headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
+    $groupBy = this.selectSignal(state => state.groupBy);
+    $groupByKeys = this.selectSignal(this.$groupBy, gb => gb.map(gbk => gbk.key), {
+        equal: (prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)
+    });
+    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)));
+    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));
+    }));
+    $getIsExpanded = (columnKey, groupHeaderKey) => {
+        return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupHeaderKey)).length);
+    };
+    $currentPage = this.selectSignal(state => state.currentPage);
+    $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
+    $tableSettings = this.selectSignal(state => {
+        const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
+        return ts;
+    });
+    tableSettings$ = toObservable(this.$tableSettings);
+    $props = this.selectSignal(s => s.props);
+    $getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
+    $isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll === true || state.notPersistedTableSettings.useVirtualScroll?.virtualAsDefault || state.showAll);
+    $viewType = this.selectSignal(state => {
+        const usePaginator = state.notPersistedTableSettings.usePaginator;
+        if (state.showAll || (this.$isVirtual() && !usePaginator)) {
+            return 'virtual all';
+        }
+        else if (this.$isVirtual() && usePaginator) {
+            return 'virtual paginator';
+        }
+        else if (usePaginator) {
+            return 'paginator';
+        }
+        else {
+            return 'all';
+        }
+    });
     resetState = this.updater((state) => {
-        const sorted = this.createPreSort(state.metaData);
+        const sorted = createPreSort(state.metaData);
         return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
     });
+    updateStateFromPersistedState = this.updater((state, persistedState) => {
+        const incomingTableState = cleanPersistedState(state, persistedState);
+        const newState = this.updateStateFunc(state, incomingTableState);
+        newState.initializationState = state.initializationState === InitializationState.MetaDataLoaded ? InitializationState.LoadedFromStore : state.initializationState;
+        return newState;
+    });
+    updateStateFunc = (state, incomingTableState) => {
+        const metaData = state.metaData;
+        const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
+            : state.initializationState === InitializationState.Created ? createPreSort(metaData) : state.sorted;
+        return { ...state, ...incomingTableState, metaData, sorted };
+    };
+    setTableSettings = this.updater((state, settings) => {
+        const s = {
+            ...state,
+            persistedTableSettings: state.persistedTableSettings.merge(settings),
+            notPersistedTableSettings: state.notPersistedTableSettings.merge(settings)
+        };
+        return s;
+    });
+    setMetaData = this.updater((state, md) => {
+        const metaData = md
+            .reduce((prev, curr) => {
+            if (prev[curr.key]) {
+                prev[curr.key] = mergeMeta(prev[curr.key], curr);
+            }
+            else {
+                prev[curr.key] = curr;
+            }
+            return prev;
+        }, {});
+        const sortedInitialized = state.sorted.length > 0;
+        const sorted = sortedInitialized ? state.sorted : createPreSort(metaData);
+        const order = initializeOrder(state, metaData);
+        const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
+        return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
+    });
     showColumn = this.updater((state, key) => ({
         ...state,
         hiddenKeys: state.hiddenKeys.filter(k => k !== key),
@@ -1814,17 +1978,29 @@ class TableStore extends ComponentStore {
         }, {});
         return ({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } });
     });
-    $filters = this.selectSignal(state => state.filters);
-    filters$ = this.select(state => state.filters);
-    getFilter$ = (filterId) => {
-        return this.select(state => state.filters[filterId]);
-    };
     addFilter = this.updater((state, filter) => {
         return this.addFiltersToState(state, [filter]);
     });
+    // readonly patchPredicate = this.updater((state, {filterId, predicate}: {filterId: string, predicate: (data: any) => boolean}) => {
+    //   const filtersCopy = { ...state.filters };
+    //   const filter = filtersCopy[filterId] as CustomFilter;
+    //   filter.predicate = predicate;
+    //   return ({...state, filters: filtersCopy });
+    // });
     addFilters = this.updater((state, filters) => {
         return this.addFiltersToState(state, filters);
     });
+    removeFilter = this.updater((state, filterId) => {
+        const filtersCopy = { ...state.filters };
+        delete filtersCopy[filterId];
+        return ({ ...state, filters: filtersCopy });
+    });
+    removeFilters = this.updater((state, filterIds) => {
+        const filtersCopy = { ...state.filters };
+        filterIds.forEach(id => { delete filtersCopy[id]; });
+        return ({ ...state, filters: filtersCopy });
+    });
+    clearFilters = this.updater((state) => ({ ...state, filters: {} }));
     addFiltersToState = (state, filters) => {
         var customFilters = filters.filter(isCustomFilter);
         var filterInfos = filters.filter(isFilterInfo);
@@ -1848,24 +2024,6 @@ class TableStore extends ComponentStore {
             filters: { ...state.filters, ...filtersObj }
         };
     };
-    removeFilter = this.updater((state, filterId) => {
-        const filtersCopy = { ...state.filters };
-        delete filtersCopy[filterId];
-        return ({ ...state, filters: filtersCopy });
-    });
-    removeFilters = this.updater((state, filterIds) => {
-        const filtersCopy = { ...state.filters };
-        filterIds.forEach(id => { delete filtersCopy[id]; });
-        return ({ ...state, filters: filtersCopy });
-    });
-    clearFilters = this.updater((state) => ({ ...state, filters: {} }));
-    selectSorted = this.select(state => state.sorted).pipe(distinctUntilChanged((f, s) => !isDifferent(f, s)));
-    sort$ = this.select(this.selectStateReady, this.selectSorted, (_, s) => s);
-    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))
-            .map(({ key, preSort: { direction } }) => ({ active: key, direction }));
-    };
     setSort = this.updater((state, { key, direction }) => {
         const sortArray = state.sorted.filter(s => s.active !== key);
         if (direction) {
@@ -1882,85 +2040,15 @@ class TableStore extends ComponentStore {
             sorted: sortArray,
         };
     });
-    updateStateFunc = (state, incomingTableState) => {
-        const metaData = state.metaData;
-        const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
-            : state.initializationState === InitializationState.Created ? this.createPreSort(metaData) : state.sorted;
-        return { ...state, ...incomingTableState, metaData, sorted };
-    };
+    setCurrentPage = this.updater((state, currentPage) => ({ ...state, currentPage }));
     setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize, userDefined: { ...state.userDefined, pageSize } }));
-    getPageSize = this.select(state => state.userDefined.pageSize || state.pageSize);
-    updateState = this.updater(this.updateStateFunc);
-    updateStateFromPersistedState = this.updater((state, persistedState) => {
-        const incomingTableState = cleanPersistedState(state, persistedState);
-        const newState = this.updateStateFunc(state, incomingTableState);
-        newState.initializationState = state.initializationState === InitializationState.MetaDataLoaded ? InitializationState.LoadedFromStore : state.initializationState;
-        return newState;
+    setProps = this.updater((state, props) => {
+        return ({ ...state, props });
     });
-    getUserDefinedTableSize = this.selectSignal(state => state.userDefined.table.width);
-    getUserDefinedTableSize$ = this.select(state => state.userDefined.table.width);
     setTableWidth = this.updater((state, widthInPixels) => ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
-    mergeMeta = (orig, merge) => {
-        return {
-            key: orig.key,
-            displayName: merge.displayName ?? orig.displayName,
-            fieldType: merge.fieldType || orig.fieldType,
-            additional: { ...orig.additional, ...merge.additional },
-            order: merge.order ?? orig.order,
-            preSort: merge.preSort ?? orig.preSort,
-            width: merge.width ?? orig.width,
-            noExport: merge.noExport || orig.noExport,
-            noFilter: merge.noFilter || orig.noFilter,
-            customCell: merge.customCell ?? orig.customCell,
-            transform: merge.transform ?? orig.transform,
-            map: merge.map ?? orig.map,
-            click: merge.click ?? orig.click,
-            classes: merge.classes ?? orig.classes,
-            noSort: merge.noSort ?? orig.noSort,
-            template: merge.template ?? orig.template,
-            toolTip: merge.toolTip ?? orig.toolTip,
-            useIcon: merge.useIcon ?? orig.useIcon,
-        };
-    };
     setInitializationState = this.updater((state, initializationState) => {
         return { ...state, initializationState };
     });
-    runOnceWhen(predicate, func) {
-        const obs = this.state$.pipe(onceWhen(predicate));
-        this.on(obs, (state) => {
-            func(state);
-        });
-    }
-    onReady(func) {
-        this.runOnceWhen(stateIs(InitializationState.Ready), func);
-    }
-    setMetaData = this.updater((state, md) => {
-        const metaData = md
-            .reduce((prev, curr) => {
-            if (prev[curr.key]) {
-                prev[curr.key] = this.mergeMeta(prev[curr.key], curr);
-            }
-            else {
-                prev[curr.key] = curr;
-            }
-            return prev;
-        }, {});
-        let sorted = state.sorted;
-        if (sorted.length === 0) {
-            sorted = this.createPreSort(metaData);
-        }
-        const order = this.initializeOrder(state, metaData);
-        const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
-        return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
-    });
-    initializeOrder = (state, mds) => {
-        const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
-        let userDefinedOrder = state.userDefined.order;
-        if (viewableMetaDataArr.some(meta => userDefinedOrder[meta.key] == null)) {
-            return {};
-        }
-        return userDefinedOrder;
-    };
     toggleCollapseHeader = this.updater((state) => {
         const tableSettings = { ...state.persistedTableSettings };
         tableSettings.collapseHeader = !tableSettings.collapseHeader;
@@ -1971,8 +2059,6 @@ class TableStore extends ComponentStore {
         tableSettings.collapseFooter = !tableSettings.collapseFooter;
         return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
     });
-    $collapseFooter = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
-    $collapseHeader = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
     addGroupByKey = this.updater((state, metaDataKey) => ({
         ...state,
         groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [] }]
@@ -2008,106 +2094,19 @@ class TableStore extends ComponentStore {
             expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders
         }))
     }));
-    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)));
-    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));
-    }));
-    setTableSettings = this.updater((state, settings) => {
-        const s = {
-            ...state,
-            persistedTableSettings: state.persistedTableSettings.merge(settings),
-            notPersistedTableSettings: state.notPersistedTableSettings.merge(settings)
-        };
-        return s;
-    });
-    tableSettings = this.selectSignal(state => {
-        const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
-        return ts;
-    });
-    tableSettings$ = toObservable(this.tableSettings);
-    props = this.selectSignal(s => s.props);
     setLinkMaps = this.updater((state, maps) => {
-        return { ...state, linkMaps: maps };
+        return ({ ...state, linkMaps: maps });
     });
-    getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
-    getIsExpanded = (columnKey, groupHeaderKey) => {
-        return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupHeaderKey)).length);
+    on = (srcObservable, func) => {
+        this.effect(() => srcObservable.pipe(tap(func)));
+        return this;
     };
-    $isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll === true || state.notPersistedTableSettings.useVirtualScroll?.virtualAsDefault || state.showAll);
-    $viewType = this.selectSignal(state => {
-        const usePaginator = state.notPersistedTableSettings.usePaginator;
-        if (state.showAll || (this.$isVirtual() && !usePaginator)) {
-            return 'virtual all';
-        }
-        else if (this.$isVirtual() && usePaginator) {
-            return 'virtual paginator';
-        }
-        else if (usePaginator) {
-            return 'paginator';
-        }
-        else {
-            return 'all';
-        }
-    });
-    $orderedCodeVisibleMetaDatas = this.selectSignal(this.$metaDataArray, (mds) => mds.filter(m => m.fieldType !== FieldType.Hidden), { equal: (a, b) => b.length === a.length && b.every((s, i) => a[i].key === s.key) });
-    $orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys, (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
-    $currentPage = this.selectSignal(state => state.currentPage);
-    $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableStore });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
-const orderedStateVisibleMetaData = (state) => {
-    const ordered = orderStateMetaData(state);
-    const orderedVisible = ordered
-        .filter(metaData => !state.hiddenKeys.includes(metaData.key) && state.metaData[metaData.key].fieldType !== FieldType.Hidden);
-    return orderedVisible;
-};
-const orderedCodeVisibleMetaData = (state) => orderStateMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
-const orderStateMetaData = (state) => {
-    return orderMetaData(state.metaData, state.userDefined.order);
-};
-const orderMetaData = (metaData, userDefined) => {
-    const userOrderArr = Object.entries(userDefined);
-    return userOrderArr.length ?
-        Object.values(metaData).sort((a, b) => {
-            const orderA = userDefined[a.key];
-            const orderB = userDefined[b.key];
-            return order(orderA, orderB);
-        })
-        :
-            Object.values(metaData).sort((a, b) => {
-                const orderA = a.order;
-                const orderB = b.order;
-                return order(orderA, orderB);
-            });
-};
-function order(orderA, orderB) {
-    if (orderA == null && orderB == null) {
-        return 0;
-    }
-    if (orderA == null) {
-        return 1;
-    }
-    if (orderB == null) {
-        return -1;
-    }
-    return orderA - orderB;
-}
-function cleanPersistedState(state, pState) {
-    const metas = Object.values(state.metaData);
-    const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
-        obj[filter.filterId] = pState.filters[filter.filterId];
-        return obj;
-    }, {});
-    const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
-    return ({ ...pState, filters, sorted });
-}
 
 class MultiSortDirective extends MatSort {
     state = inject(TableStore);
@@ -2139,21 +2138,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     providers: [
                         { provide: MatSort, useExisting: MultiSortDirective }
                     ],
-                    standalone: true
                 }]
         }], ctorParameters: () => [] });
-function isDifferent(a, b) {
+function sortsAreSame(a, b) {
     if (a.length !== b.length) {
-        return true;
+        return false;
     }
     for (let i = 0; i < a.length; i++) {
         if (a[i].active !== b[i].active || a[i].direction !== b[i].direction) {
-            return true;
+            return false;
         }
     }
-    return false;
+    return true;
 }
 
+class DateFilterComponent {
+    FilterType = FilterTypes;
+    info;
+    CurrentFilterType;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        MatInputModule, FormsModule, MatDatepickerModule
+                    ], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+        }], propDecorators: { info: [{
+                type: Input
+            }], CurrentFilterType: [{
+                type: Input
+            }] } });
+
 class PreventEnterDirective {
     onKeyDown() {
         return false;
@@ -2165,7 +2181,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: 'preventEnter',
-                    standalone: true
                 }]
         }], propDecorators: { onKeyDown: [{
                 type: HostListener,
@@ -2186,7 +2201,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: "[stop-propagation]",
-                    standalone: true
                 }]
         }], propDecorators: { onClick: [{
                 type: HostListener,
@@ -2213,7 +2227,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[autoFocus]',
-                    standalone: true,
                 }]
         }], propDecorators: { autoFocus: [{
                 type: Input
@@ -2238,7 +2251,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     host: {
                         '(click)': 'next(this._val)'
                     },
-                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { clickSubject: [{
                 type: Input,
@@ -2260,7 +2272,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     host: {
                         '(click)': 'next(true)'
                     },
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 
@@ -2311,7 +2322,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             args: [{
                     selector: 'dialog-wrapper',
                     template: ``,
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
@@ -2406,7 +2416,7 @@ class DialogDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DialogDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[opDialog]', standalone: true }]
+            args: [{ selector: '[opDialog]', }]
         }], propDecorators: { opDialogClosed: [{
                 type: Output
             }], opDialogAddDialogClass: [{
@@ -2452,7 +2462,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[styler]',
-                    standalone: true
                 }]
         }], propDecorators: { element: [{
                 type: Input
@@ -2504,7 +2513,6 @@ class MatSlideToggleGroupDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[opMatSlideToggleGroup]',
-                    standalone: true
                 }]
         }], propDecorators: { allowMultiple: [{
                 type: Input
@@ -2534,7 +2542,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: 'input[trimWhitespace]',
-                    standalone: true
                 }]
         }], propDecorators: { onBlur: [{
                 type: HostListener,
@@ -2557,7 +2564,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Pipe,
             args: [{
                     name: 'func',
-                    standalone: true
                 }]
         }] });
 
@@ -2586,7 +2592,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[conditionalClasses]',
-                    standalone: true
                 }]
         }], propDecorators: { element: [{
                 type: Input
@@ -2669,28 +2674,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }] });
 
-class DateFilterComponent {
-    FilterType = FilterTypes;
-    info;
-    CurrentFilterType;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DateFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
-                        MatInputModule, FormsModule, MatDatepickerModule, PreventEnterDirective
-                    ], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
-        }], propDecorators: { info: [{
-                type: Input
-            }], CurrentFilterType: [{
-                type: Input
-            }] } });
-
 class InFilterComponent {
     ref = inject(ChangeDetectorRef);
     FieldType = FieldType;
-    type;
+    $type = input.required({ alias: 'type' });
     value = [undefined];
     constructor() {
         this.value = [undefined];
@@ -2727,11 +2714,11 @@ class InFilterComponent {
         this.onChange(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { $type: { classPropertyName: "$type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InFilterComponent,
                 multi: true
-            }], ngImport: i0, template: "<div class=inline>\r\n  @for (val of value; track $index) {\r\n    <div>\r\n      @if(type === FieldType.Number || type === FieldType.Currency){\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n      }\r\n      @else {\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"$index === value.length - 1\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1) {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n    \r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], ngImport: i0, template: "<div class=inline>\r\n  @for (val of value; track $index) {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency){\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n      }\r\n      @else {\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"$index === value.length - 1\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1) {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
@@ -2739,31 +2726,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: InFilterComponent,
                             multi: true
-                        }], standalone: true, imports: [
+                        }], imports: [
                         FormsModule, AutoFocusDirective
-                    ], template: "<div class=inline>\r\n  @for (val of value; track $index) {\r\n    <div>\r\n      @if(type === FieldType.Number || type === FieldType.Currency){\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n      }\r\n      @else {\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"$index === value.length - 1\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1) {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n    \r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{
-                type: Input
-            }] } });
+                    ], template: "<div class=inline>\r\n  @for (val of value; track $index) {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency){\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n      }\r\n      @else {\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"$index === value.length - 1\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1) {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
+        }], ctorParameters: () => [] });
 
 class NumberFilterComponent {
     FilterType = FilterTypes;
     FieldType = FieldType;
-    CurrentFilterType;
-    info;
+    $currentFilterType = input.required({ alias: 'CurrentFilterType' });
+    $info = input.required({ alias: 'info' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "CurrentFilterType", isSignal: true, isRequired: true, transformFunction: null }, $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let CurrentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NumberFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
+            args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
                         MatInputModule, FormsModule, InFilterComponent
-                    ], template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
-        }], propDecorators: { CurrentFilterType: [{
-                type: Input
-            }], info: [{
-                type: Input
-            }] } });
+                    ], template: "@let CurrentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
+        }] });
 
 class DateTimeFilterComponent {
     FilterType = FilterTypes;
@@ -2774,8 +2755,8 @@ class DateTimeFilterComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
-                        FormsModule, PreventEnterDirective
+            args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        FormsModule
                     ], template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\r\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\r\n  </ng-container>\r\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }], propDecorators: { info: [{
                 type: Input
@@ -2791,7 +2772,7 @@ class InListFilterComponent {
     writeValue(obj) {
         this.value = obj;
         if (this.value) {
-            this.selectedKeys = this.value.map(f => f);
+            this.$selectedKeys.set(this.value.map(f => f));
         }
         this.ref.markForCheck();
     }
@@ -2803,58 +2784,56 @@ class InListFilterComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    key;
-    keyValues$;
-    selectedKeys = [];
-    metaData;
-    ngOnInit() {
-        this.keyValues$ = this.tableState.getMetaData$(this.key).pipe(tap(metaData => this.metaData = metaData), map(metaData => {
-            if (metaData.additional?.filterOptions?.filterableValues) {
-                return metaData.additional.filterOptions.filterableValues.reduce((prev, cur) => { prev[cur] = cur; return prev; }, {});
-            }
-            else {
-                if (metaData.fieldType === FieldType.Enum) {
-                    return metaData.additional.enumMap;
-                }
+    $key = input.required({ alias: 'key' });
+    $selectedKeys = signal([]);
+    $metaData = computed(() => this.tableState.$getMetaData(this.$key())());
+    $keyValues = computed(() => {
+        const metaData = this.$metaData();
+        if (metaData?.additional?.filterOptions?.filterableValues) {
+            return metaData.additional.filterOptions.filterableValues.reduce((prev, cur) => { prev[cur] = cur; return prev; }, {});
+        }
+        else {
+            if (metaData?.fieldType === FieldType.Enum) {
+                return metaData.additional.enumMap;
             }
-            return {};
-        }));
-    }
+        }
+        return {};
+    });
     selectFilterChanged($event, val) {
         if ($event.checked) {
-            this.selectedKeys = [...this.selectedKeys, val];
+            this.$selectedKeys.update(keys => [...keys, val]);
         }
         else {
-            this.selectedKeys = this.selectedKeys.filter(item => item !== val);
+            this.$selectedKeys.update(keys => keys.filter(item => item !== val));
         }
-        this.value = this.selectedKeys;
+        this.value = this.$selectedKeys();
         this.onChange(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InListFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: InListFilterComponent, isStandalone: true, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: InListFilterComponent, isStandalone: true, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { $key: { classPropertyName: "$key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InListFilterComponent,
                 multi: true
             }], ngImport: i0, template: `
-  @for (item of keyValues$ | async| keyvalue; track item.key) {
+  @for (item of $keyValues() | keyvalue; track item.key) {
     <div>
-      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
-        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{$metaData().fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
       </mat-checkbox>
     </div>
   }
 
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-in-list-filter , [tb-in-list-filter]',
                     template: `
-  @for (item of keyValues$ | async| keyvalue; track item.key) {
+  @for (item of $keyValues() | keyvalue; track item.key) {
     <div>
-      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
-        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{$metaData().fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
       </mat-checkbox>
     </div>
   }
@@ -2866,14 +2845,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                             useExisting: InListFilterComponent,
                             multi: true
                         }],
-                    standalone: true,
                     imports: [
-                        AsyncPipe, KeyValuePipe, MatCheckboxModule, StopPropagationDirective, SpaceCasePipe
+                        KeyValuePipe, MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe
                     ]
                 }]
-        }], propDecorators: { key: [{
-                type: Input
-            }] } });
+        }] });
 
 class FilterComponent {
     state = inject(TableStore);
@@ -2900,7 +2876,7 @@ class FilterComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
                         MatInputModule, MatSelectModule, NumberFilterComponent,
                         DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
@@ -2934,8 +2910,8 @@ class GenColDisplayerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
+            args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
                         DragDropModule, SpaceCasePipe
                     ], template: "@if($columns(); as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
         }] });
@@ -2950,7 +2926,7 @@ class WrapperFilterStore extends ComponentStore {
         arr.splice(index, 1);
         return { filterInfo: arr };
     });
-    currentFilters$ = this.state$.pipe(map(state => state.filterInfo));
+    $currentFilters = this.selectSignal(state => state.filterInfo);
     addFilter = this.updater((state, filter) => {
         return ({ ...state, filterInfo: [...state.filterInfo, filter] });
     });
@@ -2976,7 +2952,7 @@ class GenFilterDisplayerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
                         SpaceCasePipe
                     ], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Add Filter'\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  @for (md of $filterCols(); track md.key) {\r\n    <button (click)=\"addFilter(md)\" mat-menu-item>\r\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
@@ -2984,15 +2960,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 
 class KeyDisplayPipe {
     tableState = inject(TableStore);
-    transform(key) {
-        return this.tableState.getMetaData$(key).pipe(map(metaData => metaData.displayName || spaceCase(key)));
-    }
+    transform = (key) => computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: KeyDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: KeyDisplayPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'keyDisplay', standalone: true }]
+            args: [{ name: 'keyDisplay' }]
         }] });
 
 class FormatFilterTypePipe {
@@ -3007,42 +2981,43 @@ class FormatFilterTypePipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'formatFilterType', standalone: true }]
+            args: [{ name: 'formatFilterType' }]
         }] });
 
 class FormatFilterValuePipe {
     tableState = inject(TableStore);
     datePipe = inject(DatePipe);
     transform(value, key, filterType) {
-        return this.tableState.getMetaData$(key).pipe(map(md => {
-            if (filterType === FilterTypes.IsNull) {
-                return '';
-            }
-            if (value && (filterType === FilterTypes.In)) {
-                if (md.fieldType === FieldType.Enum) {
-                    return value.map((v) => spaceCase(md.additional.enumMap[v])).join(', ') ?? value;
-                }
-                return value.join(', ') ?? value;
-            }
-            if (filterType === FilterTypes.NumberBetween) {
-                return value.Start + ' - ' + value.End;
-            }
-            if (md.fieldType === FieldType.Date) {
-                return this.datePipe.transform(value, 'MM/dd/yy');
-            }
-            if (md.fieldType === FieldType.DateTime) {
-                return !!DateTimeFilterFuncs[filterType] ? this.datePipe.transform(value, 'short') : this.datePipe.transform(value, 'MM/dd/yy');
-            }
-            return value;
-        }));
+        return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'formatFilterValue', standalone: true }]
+            args: [{ name: 'formatFilterValue' }]
         }] });
+const transform = (value, meta, filterType) => {
+    if (filterType === FilterTypes.IsNull) {
+        return '';
+    }
+    if (value && (filterType === FilterTypes.In)) {
+        if (meta.fieldType === FieldType.Enum) {
+            return value.map((v) => spaceCase(meta.additional.enumMap[v])).join(', ') ?? value;
+        }
+        return value.join(', ') ?? value;
+    }
+    if (filterType === FilterTypes.NumberBetween) {
+        return value.Start + ' - ' + value.End;
+    }
+    if (meta.fieldType === FieldType.Date) {
+        return new DatePipe('en-US').transform(value, 'MM/dd/yy') || '';
+    }
+    if (meta.fieldType === FieldType.DateTime) {
+        return (!!DateTimeFilterFuncs[filterType] ? new DatePipe('en-US').transform(value, 'short') : new DatePipe('en-US').transform(value, 'MM/dd/yy')) || '';
+    }
+    return value;
+};
 
 class FilterChipsComponent {
     tableState = inject(TableStore);
@@ -3057,16 +3032,16 @@ class FilterChipsComponent {
     clearAll() {
         this.filterStore.clearAll();
     }
-    currentFilters$ = this.filterStore.currentFilters$;
+    $currentFilters = this.filterStore.$currentFilters;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  @if (currentFilters.length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of currentFilters; track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key) {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key) {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
-                        MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
-                    ], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  @if (currentFilters.length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of currentFilters; track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key) {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
+                        MatChipsModule, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
+                    ], template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key) {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }] });
 
 function isPipe(o) {
@@ -3076,7 +3051,6 @@ class TransformCreator {
     datePipe = inject(DatePipe);
     currencyPipe = inject(CurrencyPipe);
     phonePipe = inject(PhoneNumberPipe);
-    casePipe = inject(SpaceCasePipe);
     config = inject(TableBuilderConfigToken);
     createTransformer(metaData, noIcons = false) {
         const nested = metaData.key.includes('.');
@@ -3110,7 +3084,7 @@ class TransformCreator {
             case FieldType.PhoneNumber:
                 return (value) => this.phonePipe.transform(defaultFunc(value));
             case FieldType.Enum:
-                return (value) => this.casePipe.transform(metaData.additional?.enumMap[defaultFunc(value)]);
+                return (value) => spaceCase(metaData.additional?.enumMap[defaultFunc(value)]);
             case FieldType.Boolean:
                 if (noIcons) {
                     return defaultFunc;
@@ -3185,7 +3159,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Component,
             args: [{
                     selector: "tb-router-link-column",
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         RouterModule
@@ -3220,7 +3193,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Component,
             args: [{
                     selector: "tb-link-column",
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
   <a target="{{additional().target}}"
@@ -3246,7 +3218,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Component,
             args: [{
                     selector: 'tb-comma-array-column',
-                    standalone: true,
                     template: `
   @for(val of displayArray(); track $index){
           {{val + (!$last ? ',' : '')}}
@@ -3271,7 +3242,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Component,
             args: [{
                     selector: 'tb-new-line-array-column',
-                    standalone: true,
                     template: `
   @for(val of displayArray(); track $index){
           {{val}}
@@ -3295,8 +3265,8 @@ class InitializationComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InitializationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'initialization', standalone: true, imports: [
-                        LinkColumnComponent, ArrayCommaColumnComponent, MatIconModule, FunctionPipe,
+            args: [{ selector: 'initialization', imports: [
+                        LinkColumnComponent, ArrayCommaColumnComponent, MatIconModule,
                         RouterLinkColumnComponent, ArrayNewLineColumnComponent
                     ], template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value'>\r\n  <span>{{ value }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value'>\r\n  <mat-icon>{{ value}}</mat-icon>\r\n</ng-template>\r\n" }]
         }], propDecorators: { linkTemplate: [{
@@ -3345,10 +3315,11 @@ class TableTemplateService {
         this.templates[FieldType.Enum] = this.instance.defaultTemplate;
     }
     getTemplate(metaData) {
+        const arrayStyle = metaData.additional?.arrayStyle ?? this.tableConfig?.arrayDefaults?.arrayStyle;
         let tmp = metaData.fieldType === FieldType.Link && metaData.additional?.link?.useRouterLink
             ? this.templates[FieldType.Link + .5]
             :
-                metaData.fieldType === FieldType.Array && (metaData.additional?.arrayStyle === ArrayStyle.CommaDelimited || this.tableConfig?.arrayDefaults?.arrayStyle === ArrayStyle.CommaDelimited)
+                metaData.fieldType === FieldType.Array && arrayStyle === ArrayStyle.CommaDelimited
                     ? this.templates[FieldType.Array + .5]
                     :
                         this.templates[metaData.fieldType];
@@ -3381,23 +3352,20 @@ class HeaderMenuComponent {
     FieldType = FieldType;
     FilterType = FilterTypes;
     myFilterType;
-    myFilterValue;
-    filter;
-    metaData;
-    trigger;
+    $metaData = input.required({ alias: 'metaData' });
+    $trigger = viewChild(MatMenuTrigger);
     hideField(key) {
         this.tableState.hideColumn(key);
     }
     ngOnInit() {
-        this.filter = { key: this.metaData.key, fieldType: this.metaData.fieldType };
         this.resetFilterType();
     }
     resetFilterType() {
-        if (this.metaData.additional?.filterOptions?.filterableValues) {
+        if (this.$metaData().additional?.filterOptions?.filterableValues) {
             this.myFilterType = FilterTypes.In;
             return;
         }
-        switch (this.metaData.fieldType) {
+        switch (this.$metaData().fieldType) {
             case FieldType.String:
             case FieldType.Link:
             case FieldType.PhoneNumber:
@@ -3435,24 +3403,19 @@ class HeaderMenuComponent {
     onEnter(filter) {
         if (filter.filterValue != undefined && filter.filterType) {
             this.tableState.addFilter(filter);
-            this.trigger.closeMenu();
+            this.$trigger().closeMenu();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: HeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n        <mat-form-field stop-propagation class=\"font auto-width\">\r\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n          <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n              <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                block\r\n              </mat-icon>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\r\n          <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n          <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n              <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n              <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n              <span class=\"suffix-icons\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Boolean) {\r\n        <div>\r\n          <label>\r\n            <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n          </label>\r\n          <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n        <mat-form-field class=\"font auto-width\" stop-propagation >\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n              <span  class=\"suffix-icons underline\"> =</span>\r\n            </button>\r\n          </span>\r\n          <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n            myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n            (click)=\"calendar.open()\"/>\r\n          <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n  \r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: HeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n        <mat-form-field stop-propagation class=\"font auto-width\">\r\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n          <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n          <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n              <mat-icon [class]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                block\r\n              </mat-icon>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\r\n          <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n          <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n              <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n              <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [class]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n              <span class=\"suffix-icons\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Boolean) {\r\n        <div>\r\n          <label>\r\n            <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n          </label>\r\n          <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n        <mat-form-field class=\"font auto-width\" stop-propagation >\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n              <span  class=\"suffix-icons underline\"> =</span>\r\n            </button>\r\n          </span>\r\n          <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n            myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n            (click)=\"calendar.open()\"/>\r\n          <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
-                        MatInputModule, MatTooltipModule, NgClass, StopPropagationDirective, MatRadioModule, MatDatepickerModule
-                    ], template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n        <mat-form-field stop-propagation class=\"font auto-width\">\r\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n          <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n              <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                block\r\n              </mat-icon>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\r\n          <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n          <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n              <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n              <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n              <span class=\"suffix-icons\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Boolean) {\r\n        <div>\r\n          <label>\r\n            <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n          </label>\r\n          <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n        <mat-form-field class=\"font auto-width\" stop-propagation >\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n              <span  class=\"suffix-icons underline\"> =</span>\r\n            </button>\r\n          </span>\r\n          <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n            myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n            (click)=\"calendar.open()\"/>\r\n          <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n  \r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
-        }], propDecorators: { metaData: [{
-                type: Input
-            }], trigger: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
-            }] } });
+                        MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule
+                    ], template: "@let metaData = $metaData();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n      \r\n      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n      }\r\n      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n        <mat-form-field stop-propagation class=\"font auto-width\">\r\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n          <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n          <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n              <mat-icon [class]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                block\r\n              </mat-icon>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\r\n          <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n          <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n              <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n            [class]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n              <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n            [class]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n              <span class=\"suffix-icons\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Boolean) {\r\n        <div>\r\n          <label>\r\n            <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n          </label>\r\n          <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n            <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n        <mat-form-field class=\"font auto-width\" stop-propagation >\r\n          <span matPrefix class=\"tb-header-prefix\">\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n              <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n            </button>\r\n            <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n              [class]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n              <span  class=\"suffix-icons underline\"> =</span>\r\n            </button>\r\n          </span>\r\n          <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n            myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n          <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n            (click)=\"calendar.open()\"/>\r\n          <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n          <mat-datepicker #calendar></mat-datepicker>\r\n        </mat-form-field>\r\n      }\r\n      <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n        Apply\r\n      </button>\r\n    </ng-form>\r\n  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+        }] });
 
 class ColumnTotalPipe {
     transform(data, metaData) {
@@ -3469,7 +3432,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Pipe,
             args: [{
                     name: 'columnTotal',
-                    standalone: true
                 }]
         }] });
 
@@ -3518,57 +3480,76 @@ const columnsStyles = (metaDatas, userDefinedWidths) => {
 };
 
 class ColumnBuilderComponent {
+    FieldType = FieldType;
     transformCreator = inject(TransformCreator);
     table = inject(MatTable);
     state = inject(TableStore);
     templateService = inject(TableTemplateService);
-    injector = inject(Injector);
-    columnDef;
-    bodyTemplate;
     tableConfig = inject(TableBuilderConfigToken);
-    FieldType = FieldType;
-    filter;
-    _metaData;
-    get metaData() {
-        return this._metaData;
-    }
-    set metaData(md) {
-        if (this.metaData && this.metaData.fieldType !== md.fieldType) {
-            this._metaData = md;
-            this.initialSetUp();
-            this.furtherSetUp();
+    injector = inject(Injector);
+    $columnDef = viewChild(MatColumnDef);
+    $bodyTemplate = viewChild('body');
+    $metaData = signal(undefined);
+    $additional = computed(() => {
+        const metaData = this.$metaData();
+        if (!metaData)
+            return;
+        if (metaData.fieldType === FieldType.Link) {
+            return this.state.$getLinkInfo(metaData)();
         }
-        else {
-            this._metaData = md;
+        if (metaData.fieldType === FieldType.Array) {
+            return metaData.additional?.limit || this.tableConfig?.arrayDefaults?.limit;
         }
-    }
-    customCell = undefined;
-    data$;
-    outerTemplate;
-    innerTemplate;
-    transform;
-    getInnerTemplate() {
-        if (this.metaData.template)
-            return this.metaData.template;
-        if (this.customCell?.TemplateRef)
-            return this.customCell.TemplateRef;
-        return this.templateService.getTemplate(this.metaData);
-    }
-    showFilters$;
-    getOuterTemplate() {
-        return this.customCell?.columnDef?.cell?.template ?? this.bodyTemplate;
-    }
-    classes;
-    styles = computed(() => {
-        return columnStyles(this.metaData, this.state.$getUserDefinedWidth(this.metaData.key)(), this.state.tableSettingsMinWidth());
+        return undefined;
+    });
+    setMetaData(md) {
+        this.$metaData.set(md);
+    }
+    $customCell = signal(undefined);
+    $data;
+    $transform = computed(() => {
+        const metaData = this.$metaData();
+        if (!metaData)
+            return;
+        return this.transformCreator.createTransformer(metaData);
+    });
+    $innerTemplate = computed(() => {
+        const metaData = this.$metaData();
+        if (!metaData)
+            return;
+        return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
+    });
+    $showFilters = computed(() => {
+        const metaData = this.$metaData();
+        if (!metaData)
+            return;
+        const settings = this.state.$tableSettings();
+        return !(settings.hideColumnHeaderFilters || metaData.noFilter);
+    });
+    $outerTemplate = computed(() => {
+        return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
+    });
+    $classes = computed(() => {
+        const metaData = this.$metaData();
+        if (!metaData)
+            return;
+        if (metaData.fieldType === FieldType.Currency) {
+            return ({
+                ['negative-currency']: (element) => element[metaData.key] < 0,
+                ...metaData.classes
+            });
+        }
+        return metaData.classes;
+    });
+    $styles = computed(() => {
+        const metaData = this.$metaData();
+        if (!metaData)
+            return;
+        return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
     });
-    ngOnInit() {
-        this.initialSetUp();
-    }
     viewInited = false;
     ngAfterViewInit() {
-        this.furtherSetUp();
-        this.table.addColumnDef(this.columnDef);
+        this.table.addColumnDef(this.$columnDef());
         this.onViewInit();
         this.viewInited = true;
     }
@@ -3580,44 +3561,23 @@ class ColumnBuilderComponent {
         }
         this.onViewInit = callback;
     };
-    initialSetUp() {
-        if (this.metaData.fieldType === FieldType.Currency) {
-            this.classes = {
-                ['negative-currency']: (element) => element[this.metaData.key] < 0,
-                ...this.metaData.classes
-            };
-        }
-        else {
-            this.classes = this.metaData.classes;
-        }
-        this.filter = { key: this.metaData.key, fieldType: this.metaData.fieldType };
-        this.showFilters$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeaderFilters || this.metaData.noFilter)));
-        this.additional = this.metaData.fieldType === FieldType.Link
-            ? this.state.getLinkInfo(this.metaData)()
-            :
-                this.metaData.fieldType === FieldType.Array
-                    ? this.metaData.additional?.limit || this.tableConfig?.arrayDefaults?.arrayStyle
-                    : undefined;
-    }
-    furtherSetUp() {
-        this.outerTemplate = this.getOuterTemplate();
-        this.innerTemplate = this.getInnerTemplate();
-        this.transform = this.transformCreator.createTransformer(this.metaData);
-    }
     cellClicked(element, key) {
-        if (this.metaData.click) {
-            this.metaData.click(element, key);
+        const metaData = this.$metaData();
+        if (metaData?.click) {
+            metaData.click(element, key);
         }
     }
     getTooltip = (element) => {
-        if (typeof this.metaData.toolTip === 'string') {
-            return this.metaData.toolTip;
+        const metaData = this.$metaData();
+        if (!metaData?.toolTip)
+            return;
+        if (typeof metaData.toolTip === 'string') {
+            return metaData.toolTip;
         }
-        return this.metaData.toolTip(element);
+        return metaData.toolTip(element);
     };
-    additional;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { 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    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n      [class]='metaData.additional?.columnPartClasses?.header'>\r\n      <div class=\"header-container\" cdkDragHandle>\r\n        @if(!customCell?.columnDef?.headerCell)\r\n        {\r\n            @if(metaData.fieldType !== FieldType.NotMapped){\r\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            } @else if(metaData.fieldType === FieldType.NotMapped){\r\n              <div style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            }\r\n            @if((showFilters$ | async)){\r\n              <tb-header-menu #menu [metaData]='metaData' />\r\n            }\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    </mat-header-cell>\r\n  </ng-template>\r\n\r\n  <!-- body -->\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n  </ng-container>\r\n  <ng-template #body let-element='element' >\r\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\r\n    </mat-cell>\r\n  </ng-template>\r\n\r\n  <!-- footer -->\r\n  <ng-template matFooterCellDef>\r\n    @if(customCell?.columnDef?.footerCell){\r\n      <ng-container\r\n      *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n    } @else {\r\n      <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:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n  <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n    <!-- header -->\r\n    <ng-template matHeaderCellDef #myHeader>\r\n      <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n        [class]='metaData.additional?.columnPartClasses?.header'>\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!customCell?.columnDef?.headerCell)\r\n          {\r\n              @if(metaData.fieldType !== FieldType.NotMapped){\r\n                <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              } @else if(metaData.fieldType === FieldType.NotMapped){\r\n                <div style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @if($showFilters()){\r\n                <tb-header-menu #menu [metaData]='metaData' />\r\n              }\r\n          }\r\n          @else\r\n          {\r\n            <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} \">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      </mat-header-cell>\r\n    </ng-template>\r\n  \r\n    <!-- body -->\r\n    <ng-container *matCellDef=\"let element;\">\r\n      <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n    </ng-container>\r\n    <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; Injector: injector\" />\r\n      </mat-cell>\r\n    </ng-template>\r\n  \r\n    <!-- footer -->\r\n    <ng-template matFooterCellDef>\r\n      @if(customCell?.columnDef?.footerCell){\r\n        <ng-container\r\n        *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n      } @else {\r\n        @let data = $data();\r\n        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n          @if(!!data?.length && metaData.additional?.footer){\r\n            <span class=\"bold\">\r\n              @switch (metaData.fieldType) {\r\n                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n              }\r\n            </span>\r\n          }\r\n  \r\n        </mat-footer-cell>\r\n      }\r\n    </ng-template>\r\n  </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
             { provide: CDK_DROP_LIST, useExisting: CdkDropList },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3625,18 +3585,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
-                    ], standalone: true, imports: [
+                    ], imports: [
                         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    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n      [class]='metaData.additional?.columnPartClasses?.header'>\r\n      <div class=\"header-container\" cdkDragHandle>\r\n        @if(!customCell?.columnDef?.headerCell)\r\n        {\r\n            @if(metaData.fieldType !== FieldType.NotMapped){\r\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            } @else if(metaData.fieldType === FieldType.NotMapped){\r\n              <div style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            }\r\n            @if((showFilters$ | async)){\r\n              <tb-header-menu #menu [metaData]='metaData' />\r\n            }\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    </mat-header-cell>\r\n  </ng-template>\r\n\r\n  <!-- body -->\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n  </ng-container>\r\n  <ng-template #body let-element='element' >\r\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\r\n    </mat-cell>\r\n  </ng-template>\r\n\r\n  <!-- footer -->\r\n  <ng-template matFooterCellDef>\r\n    @if(customCell?.columnDef?.footerCell){\r\n      <ng-container\r\n      *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n    } @else {\r\n      <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:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
-        }], propDecorators: { columnDef: [{
-                type: ViewChild,
-                args: [MatColumnDef]
-            }], bodyTemplate: [{
-                type: ViewChild,
-                args: ['body']
-            }] } });
+                        MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
+                    ], template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n  <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n    <!-- header -->\r\n    <ng-template matHeaderCellDef #myHeader>\r\n      <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n        [class]='metaData.additional?.columnPartClasses?.header'>\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          @if(!customCell?.columnDef?.headerCell)\r\n          {\r\n              @if(metaData.fieldType !== FieldType.NotMapped){\r\n                <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              } @else if(metaData.fieldType === FieldType.NotMapped){\r\n                <div style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @if($showFilters()){\r\n                <tb-header-menu #menu [metaData]='metaData' />\r\n              }\r\n          }\r\n          @else\r\n          {\r\n            <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} \">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      </mat-header-cell>\r\n    </ng-template>\r\n  \r\n    <!-- body -->\r\n    <ng-container *matCellDef=\"let element;\">\r\n      <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n    </ng-container>\r\n    <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; Injector: injector\" />\r\n      </mat-cell>\r\n    </ng-template>\r\n  \r\n    <!-- footer -->\r\n    <ng-template matFooterCellDef>\r\n      @if(customCell?.columnDef?.footerCell){\r\n        <ng-container\r\n        *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n      } @else {\r\n        @let data = $data();\r\n        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n          @if(!!data?.length && metaData.additional?.footer){\r\n            <span class=\"bold\">\r\n              @switch (metaData.fieldType) {\r\n                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n              }\r\n            </span>\r\n          }\r\n  \r\n        </mat-footer-cell>\r\n      }\r\n    </ng-template>\r\n  </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
+        }] });
 
 // 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.
@@ -3689,132 +3643,115 @@ class GenericTableComponent {
     dataStore = inject(DataStore);
     viewContainer = inject(ViewContainerRef);
     transformCreator = inject(TransformCreator);
+    _injector = inject(Injector);
     smallFooter = 10;
     $headerRow = viewChild(MatHeaderRowDef);
     $footerRow = viewChild(MatFooterRowDef);
     $table = viewChild(MatTable);
-    drop(event) {
-        this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
-    }
-    _trackBy;
-    set trackBy(trackBy) {
-        if (trackBy) {
-            this._trackBy = trackBy;
-            this.trackByFunction = (index, item) => item[trackBy];
-        }
-        this.setUpSelections(trackBy);
-    }
-    get trackBy() { return this._trackBy; }
-    $displayData = input.required({ alias: 'displayData' });
-    $displayDataLength = computed(() => this.$displayData()?.length || 0);
-    $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer));
+    $dropList = viewChild(CdkDropList);
+    selection$ = output({ alias: 'selection' });
+    $displayDataLength = input.required({ alias: 'displayDataLength' });
     $data = input.required({ alias: 'data' });
-    data$ = toObservable(this.$data);
     $rows = input([], { alias: 'rows' });
     $columnInfos = input.required({ alias: 'columnInfos' });
+    $dataSource = input.required({ alias: 'dataSource' });
+    $keys = computed(() => {
+        const displayed = this.state.$orderedVisibleColumns();
+        const built = this.$columns();
+        const keys = displayed.filter(d => !!built[d]);
+        if (this.$hasSelectColumn()) {
+            keys.unshift('select');
+        }
+        if (this.$hasIndexColumn()) {
+            keys.unshift('index');
+        }
+        return keys;
+    });
+    keys$ = toObservable(this.$keys);
+    $trackBy = input(undefined, { alias: 'trackBy' });
+    $trackByFunction = computed(() => {
+        const trackBy = this.$trackBy();
+        if (!trackBy)
+            return (index, item) => item[initIndexSymbol];
+        return ((index, item) => item[trackBy]);
+    });
+    $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer));
     $hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell));
-    dropList;
     $footerRowStyle = computed(() => {
         const hasData = !!this.$displayDataLength();
         const metaFooter = this.$hasFooterMeta();
         const customFooter = this.$hasCustomFooter();
-        const hasSelectionColumn = this.state.props().selectionColumn;
+        const hasSelectionColumn = this.state.$props().selectionColumn;
         return customFooter || (hasData && (metaFooter || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
     });
     $showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
-    _injector = inject(Injector);
     injector = Injector.create({
         providers: [
             { provide: MatTable, useFactory: () => this.$table() },
-            { provide: CdkDropList, useFactory: () => this.dropList },
+            { provide: CdkDropList, useFactory: () => this.$dropList() },
         ],
         parent: this._injector
     });
-    $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
     $hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
     $columns = signal({});
-    $showHeader = computed(() => !this.state.tableSettings().hideColumnHeader);
-    offset$ = this.dataStore.select(s => s.virtualScrollOffset);
-    constructor() {
-        this.setUpSelections();
-        effect(() => {
-            const columnInfos = this.$columnInfos() || [];
-            const table = this.$table();
-            if (!table)
-                return;
-            untracked(() => {
-                Object.entries(this.$columns()).forEach(([key, value]) => {
-                    const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
-                    if (!columnInfo || columnInfo.customCell !== value.customCell) {
-                        delete this.$columns()[key];
-                        table?.removeColumnDef(value.columnDef);
-                    }
-                });
-                columnInfos.forEach(ci => this.buildColumn(ci));
-            });
-        });
-        effect(() => {
-            const table = this.$table();
-            const rows = this.$rows();
-            const keys = this.$keys();
-            if (!table)
-                return;
-            untracked(() => {
-                rows.forEach(row => {
-                    table.removeRowDef(row);
-                    row.columns = keys;
-                    table.addRowDef(row);
-                });
+    $showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader);
+    $offset = this.dataStore.selectSignal(s => s.virtualScrollOffset);
+    drop(event) {
+        this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
+    }
+    #buildColumnsEffect = effect(() => {
+        const columnInfos = this.$columnInfos() || [];
+        const table = this.$table();
+        if (!table)
+            return;
+        untracked(() => {
+            Object.entries(this.$columns()).forEach(([key, value]) => {
+                const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
+                if (!columnInfo || columnInfo.customCell !== value.$customCell()) {
+                    delete this.$columns()[key];
+                    table?.removeColumnDef(value.$columnDef());
+                }
             });
+            columnInfos.forEach(ci => this.buildColumn(ci));
         });
-        effect(() => {
-            const headerRow = this.$headerRow();
-            const showHeader = this.$showHeader();
-            const table = this.$table();
-            untracked(() => {
-                if (headerRow && showHeader && table)
-                    table.addHeaderRowDef(headerRow);
-                else if (headerRow && table)
-                    table.removeHeaderRowDef(headerRow);
+    });
+    #buildRowsEffect = effect(() => {
+        const table = this.$table();
+        const rows = this.$rows();
+        const keys = this.$keys();
+        if (!table)
+            return;
+        untracked(() => {
+            rows.forEach(row => {
+                table.removeRowDef(row);
+                row.columns = keys;
+                table.addRowDef(row);
             });
         });
-        effect(() => {
-            const footerRow = this.$footerRow();
-            const showFooter = this.$showFooterRow();
-            const table = this.$table();
-            untracked(() => {
-                if (footerRow && showFooter && table)
-                    table.addFooterRowDef(footerRow);
-                else if (footerRow && table)
-                    table.removeFooterRowDef(footerRow);
-            });
+    });
+    #buildHeaderRowEffect = effect(() => {
+        const headerRow = this.$headerRow();
+        const showHeader = this.$showHeader();
+        const table = this.$table();
+        untracked(() => {
+            if (headerRow && showHeader && table)
+                table.addHeaderRowDef(headerRow);
+            else if (headerRow && table)
+                table.removeHeaderRowDef(headerRow);
         });
-    }
-    defaultTrackBy = (index, item) => item[initIndexSymbol];
-    trackByFunction = this.defaultTrackBy;
-    $keys = computed(() => {
-        const displayed = this.state.$orderedVisibleColumns();
-        const built = this.$columns();
-        const keys = displayed.filter(d => !!built[d]);
-        if (this.$hasSelectColumn()) {
-            keys.unshift('select');
-        }
-        if (this.$hasIndexColumn()) {
-            keys.unshift('index');
-        }
-        return keys;
     });
-    keys$ = toObservable(this.$keys);
-    ngOnInit() {
-        this.state.on(this.selectableData$, (data) => {
-            if (this.selection.selected.length) {
-                const trackByFunction = this.trackBy ? (s) => data.every(d => d[this.trackBy] !== s[this.trackBy]) : s => !data.includes(s);
-                const removed = this.selection.selected.filter(trackByFunction);
-                this.selection.deselect(...removed);
-            }
+    #buildFooterEffect = effect(() => {
+        const footerRow = this.$footerRow();
+        const showFooter = this.$showFooterRow();
+        const table = this.$table();
+        untracked(() => {
+            if (footerRow && showFooter && table)
+                table.addFooterRowDef(footerRow);
+            else if (footerRow && table)
+                table.removeFooterRowDef(footerRow);
         });
-    }
-    $usePaginator = computed(() => this.state.tableSettings().usePaginator);
+    });
+    $usePaginator = computed(() => this.state.$tableSettings().usePaginator);
     $useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
     $offsetIndex = computed(() => {
         const virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start)();
@@ -3837,16 +3774,16 @@ class GenericTableComponent {
     buildColumn(column) {
         const alreadyBuiltColumn = this.$columns()[column.metaData.key];
         if (alreadyBuiltColumn) {
-            alreadyBuiltColumn.metaData = column.metaData;
+            alreadyBuiltColumn.setMetaData(column.metaData);
         }
         else {
             const component = this.viewContainer.createComponent(ColumnBuilderComponent, {
                 index: 0,
                 injector: this.injector
             });
-            component.instance.customCell = column.customCell;
-            component.instance.metaData = column.metaData;
-            component.instance.data$ = this.data$;
+            component.instance.$customCell.set(column.customCell);
+            component.instance.setMetaData(column.metaData);
+            component.instance.$data = this.$data;
             component.instance.whenViewInited(() => {
                 this.$columns.update(columnsDict => ({
                     ...columnsDict,
@@ -3855,14 +3792,34 @@ class GenericTableComponent {
             });
         }
     }
-    selection;
-    selection$ = new EventEmitter();
-    masterToggleChecked$ = this.selection$.pipe(map(() => this.selection.hasValue() && this.isAllSelected()));
-    masterToggleIndeterminate$ = this.selection$.pipe(map(() => this.selection.hasValue() && !this.isAllSelected()));
-    setUpSelections(trackBy) {
-        this.selection = trackBy ? new SelectionModel(true, [], true, (a, b) => a[trackBy] === b[trackBy]) : new SelectionModel(true, []);
-        this.state.on(this.selection.changed, c => this.selection$.emit(c));
-    }
+    $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
+    $selection = computed(() => {
+        const trackBy = this.$trackBy();
+        if (trackBy) {
+            return new SelectionModel(true, [], true, (a, b) => a[trackBy] === b[trackBy]);
+        }
+        return new SelectionModel(true, []);
+    });
+    selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
+    $selectionChange = toSignal(this.selectionChange$);
+    onSelectionChangeEffect = effect(() => {
+        const selectionChange = this.$selectionChange();
+        if (!selectionChange)
+            return;
+        untracked(() => this.selection$.emit(selectionChange));
+    });
+    $isAllSelected = computed(() => {
+        this.$selectionChange();
+        const selected = this.$selection()?.selected;
+        if (!selected)
+            return false;
+        return this.$selectableData()?.length === selected.length;
+    });
+    $masterToggleChecked = this.$isAllSelected;
+    $masterToggleIndeterminate = computed(() => {
+        this.$selectionChange();
+        return !!this.$selection()?.selected.length && !this.$masterToggleChecked();
+    });
     $selectableData = computed(() => {
         if (this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator') {
             const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
@@ -3873,33 +3830,42 @@ class GenericTableComponent {
         }
         return [];
     });
-    selectableData$ = toObservable(this.$selectableData);
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.$selectableData()?.length || 0;
-        return numSelected === numRows;
-    }
+    #onSelectableDataChangeEffect = effect(() => {
+        const selectableData = this.$selectableData();
+        untracked(() => {
+            const selected = this.$selection()?.selected;
+            if (!selected.length)
+                return;
+            const trackBy = this.$trackBy();
+            const trackByFunc = trackBy ? (s) => selectableData.every(d => d[trackBy] !== s[trackBy]) : s => !selectableData.includes(s);
+            const removed = selected.filter(trackByFunc);
+            this.$selection().deselect(removed);
+        });
+    });
     /** Selects all rows if they are not all selected; otherwise clear selection. */
     masterToggle() {
-        if (this.isAllSelected()) {
-            this.selection.clear();
+        if (this.$isAllSelected()) {
+            this.$selection().clear();
         }
         else {
-            this.selection.select(...this.$selectableData());
+            this.$selection().select(...this.$selectableData());
         }
     }
-    tableWidth = this.state.getUserDefinedTableSize$.pipe(previousAndCurrent(0), map(([previousUserDefinedWidth, currentUserDefinedWidth]) => {
-        if (currentUserDefinedWidth) {
-            return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
-        }
-        if (wasReset()) {
-            return ({ width: 'initial' });
-        }
-        return ({});
-        function wasReset() {
-            return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
+    $tableWidth = linkedSignal({
+        source: this.state.$getUserDefinedTableWidth,
+        computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
+            if (currentUserDefinedWidth) {
+                return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
+            }
+            if (wasReset()) {
+                return ({ width: 'initial' });
+            }
+            return {};
+            function wasReset() {
+                return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
+            }
         }
-    }));
+    });
     getTransform = (key, val) => {
         if (val == undefined || val === 'null')
             return '';
@@ -3947,24 +3913,17 @@ class GenericTableComponent {
                 return '0px';
         }
     });
-    $stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
+    $stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"state.props().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=\"select-column\">\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\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
-                        MatTooltipModule, AsyncPipe, 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  #table\r\n  [dataSource]=\"state.props().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=\"select-column\">\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\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { trackBy: [{
-                type: Input
-            }], dropList: [{
-                type: ViewChild,
-                args: [CdkDropList, { static: true }]
-            }], selection$: [{
-                type: Output
-            }] } });
+                        MatTooltipModule, 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  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
+        }] });
 
 function downloadData(data, filename, mimeType) {
     const url = URL.createObjectURL(new Blob([data], { type: mimeType }));
@@ -4018,8 +3977,9 @@ class ExportToCsvService {
                 val = prepend + val;
                 break;
             case FieldType.Array:
-                const additional = meta.additional;
-                val = val.slice(0, additional.limit).join(additional.arrayStyle === ArrayStyle.NewLine ? '\n' : ', ');
+                const style = meta.additional.arrayStyle ?? this.config.arrayDefaults?.arrayStyle;
+                const limit = meta.additional.limit ?? this.config.arrayDefaults?.limit;
+                val = val.slice(0, limit).join(style === ArrayStyle.NewLine ? '\n' : ', ');
                 break;
             case FieldType.Expression:
                 val = meta.transform(row);
@@ -4044,11 +4004,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Injectable
         }] });
 
-const ArrayDefaults = {
-    limit: 3,
-    arrayStyle: ArrayStyle.CommaDelimited
-};
-
 function createLinkCreatorDict(metaDatas) {
     return metaDatas.reduce((acc, md) => {
         if (md.fieldType === FieldType.Link) {
@@ -4251,42 +4206,50 @@ const defaultStorageState = {
 class GroupByListComponent {
     tableStore = inject(TableStore);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of groupByKeys; track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set>\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'group-by-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatChipsModule, LetDirective, MatIconModule, SpaceCasePipe
-                    ], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of groupByKeys; track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
+            args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatChipsModule, MatIconModule, SpaceCasePipe
+                    ], template: "<mat-chip-set>\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
         }] });
 
 class SortMenuComponentStore extends ComponentStore {
     tableState = inject(TableStore);
+    setStoreStateEffect = effect(() => {
+        const metaData = this.tableState.$metaData();
+        if (!metaData)
+            return;
+        this.tableState.$selectSorted();
+        untracked(() => this.setStateFromTableStore());
+    });
+    setStateFromTableStore = () => {
+        const metaData = this.tableState.$metaData();
+        const sorted = [...this.tableState.$selectSorted()].map(s => ({
+            ...s,
+            displayName: metaData[s.active]?.displayName
+        }));
+        const notSorted = this.tableState.$metaDataArray()
+            .filter(md => md.fieldType !== FieldType.NotMapped && !md.noSort && !sorted.some(s => s.active === md.key))
+            .map(meta => ({ active: meta.key, displayName: meta.displayName }));
+        this.setState({ sorted, notSorted });
+    };
     constructor() {
         super({ notSorted: [], sorted: [] });
     }
-    set = this.updater((state, data) => ({ ...data }));
     setSorted = this.updater((state, sorted) => ({ ...state, sorted }));
     setNotSorted = this.updater((state, notSorted) => ({ ...state, notSorted }));
-    sorted$ = this.select(state => state.sorted);
-    notSorted$ = this.select(state => state.notSorted);
+    $sorted = this.selectSignal(state => state.sorted);
+    $notSorted = this.selectSignal(state => state.notSorted);
     setDirection = this.updater((state, sort) => {
         const index = state.sorted.findIndex(s => s.active === sort.active);
         const sorted = [...state.sorted];
         sorted.splice(index, 1, sort);
         return ({ ...state, sorted });
     });
-    metaDataArr$ = toObservable(this.tableState.$metaDataArray);
     reset = () => {
-        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.metaDataArr$.pipe(mergeMap(metas => this.tableState.sort$.pipe(map(s => metas
-            .filter(meta => !s.some(s => s.active === meta.key) && meta.fieldType !== FieldType.NotMapped && !meta.noSort)
-            .map(meta => ({ active: meta.key, displayName: meta.displayName }))))));
-        this.set(combineLatest([
-            sorted.pipe(distinctSortArray), notSorted.pipe(distinctSortArray)
-        ]).pipe(map(([sorted, notSorted]) => ({ sorted, notSorted }))));
+        this.setStateFromTableStore();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore });
@@ -4294,38 +4257,31 @@ class SortMenuComponentStore extends ComponentStore {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
-const equalSortArray = (arr1, arr2) => arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
-const distinctSortArray = distinctUntilChanged(equalSortArray);
 
 class SortMenuComponent {
+    SortDirection = SortDirection;
     tableState = inject(TableStore);
     store = inject(SortMenuComponentStore);
-    sorted$;
-    notSorted$;
-    SortDirection = SortDirection;
-    dirty$ = new BehaviorSubject(false);
-    constructor() {
-        this.sorted$ = this.store.sorted$.pipe(map(data => [...data]));
-        this.notSorted$ = this.store.notSorted$.pipe(map(data => [...data]));
-    }
+    $sorted = computed(() => [...this.store.$sorted()]);
+    $notSorted = computed(() => [...this.store.$notSorted()]);
+    $dirty = signal(false);
     reset() {
-        this.dirty$.next(false);
-        this.store.reset();
-    }
-    ngOnInit() {
+        this.$dirty.set(false);
         this.store.reset();
     }
     dropIntoSorted(event) {
-        this.dirty$.next(true);
+        this.$dirty.set(true);
+        const sorted = [...event.container.data];
         if (event.previousContainer === event.container) {
-            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            this.store.setSorted(event.container.data);
+            moveItemInArray(sorted, event.previousIndex, event.currentIndex);
+            this.store.setSorted(sorted);
         }
         else {
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-            event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex], direction: SortDirection.asc };
-            this.store.setSorted(event.container.data);
-            this.store.setNotSorted(event.previousContainer.data);
+            const notSorted = [...event.previousContainer.data];
+            transferArrayItem(notSorted, sorted, event.previousIndex, event.currentIndex);
+            sorted[event.currentIndex] = { ...sorted[event.currentIndex], direction: SortDirection.asc };
+            this.store.setSorted(sorted);
+            this.store.setNotSorted(notSorted);
         }
     }
     dropIntoNotSorted(event) {
@@ -4333,37 +4289,38 @@ class SortMenuComponent {
             return;
         }
         else {
-            this.dirty$.next(true);
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-            event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex] };
-            this.store.setNotSorted(event.container.data);
-            this.store.setSorted(event.previousContainer.data);
-        }
-    }
-    apply = this.store.effect((obs) => obs.pipe(tap(() => {
-        this.dirty$.next(false);
-        this.tableState.setAllSort(this.store.sorted$.pipe(first$1()));
-    })));
+            this.$dirty.set(true);
+            const sorted = [...event.previousContainer.data];
+            const notSorted = [...event.container.data];
+            transferArrayItem(sorted, notSorted, event.previousIndex, event.currentIndex);
+            notSorted[event.currentIndex] = { ...notSorted[event.currentIndex] };
+            this.store.setNotSorted(notSorted);
+            this.store.setSorted(sorted);
+        }
+    }
+    apply = () => {
+        this.$dirty.set(false);
+        this.tableState.setAllSort(this.store.$sorted());
+    };
     setDirection(sort) {
-        this.dirty$.next(true);
+        this.$dirty.set(true);
         this.store.setDirection(sort);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<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:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n  </button>\r\n</span>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n  <div mat-menu-item class=\"menu-button\">\r\n    <div class=\"close-button-wrapper\">\r\n      <span matTooltip=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </span>\r\n      @if(dirty){\r\n        <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n          <mat-icon>undo</mat-icon>\r\n        </span>\r\n      }\r\n        \r\n    </div>\r\n  </div>\r\n\r\n  <!-- Apply Button -->\r\n  <div class=\"apply-button-wrapper\">\r\n    <button mat-button color=\"primary\" (click)=\"apply()\"\r\n      stop-propagation [class.apply-border]=\"dirty\"\r\n      [disabled]=\"!dirty\">\r\n        Apply @if (dirty) { Unsaved Changes }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Default Sorting Text -->\r\n  @if (!sorted.length) {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #sortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n    [cdkDropListData]=\"sorted\"\r\n    (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n    <!-- Menu Item Wrapper -->\r\n    @for (sort of sorted; track sort.active) {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1) {\r\n        <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n      }\r\n\r\n      <!-- Menu Item -->\r\n      <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n        <div class=\"sort-item\">\r\n          <span class=\"sorted-name\">\r\n            {{sort.displayName || (sort.active | spaceCase)}}\r\n            <span class=\"direction-text\">{{sort.direction}}</span>\r\n          </span>\r\n\r\n          <!-- Sort Direction Buttons -->\r\n          <div class=\"up-down-buttons-wrapper\">\r\n            <button  class=\"up-down-button up-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n              arrow_upward\r\n              </mat-icon>\r\n            </button>\r\n\r\n            <button class=\"up-down-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                arrow_downward\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <!-- Default Not Sorted Text -->\r\n  @if(!notSorted.length){\r\n    <div class=\"tip\" >\r\n      Not Sorted List\r\n    </div>\r\n  }\r\n\r\n  <!-- Not Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #notSortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n    [cdkDropListData]=\"notSorted\"\r\n    (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n    @for (sort of notSorted; track sort.active) {\r\n      <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n        <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-menu>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SortMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        LetDirective, MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
-                        SpaceCasePipe, NgClass, AsyncPipe
-                    ], 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:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
+                        SpaceCasePipe
+                    ], template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n  </button>\r\n</span>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n  <div mat-menu-item class=\"menu-button\">\r\n    <div class=\"close-button-wrapper\">\r\n      <span matTooltip=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </span>\r\n      @if(dirty){\r\n        <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n          <mat-icon>undo</mat-icon>\r\n        </span>\r\n      }\r\n        \r\n    </div>\r\n  </div>\r\n\r\n  <!-- Apply Button -->\r\n  <div class=\"apply-button-wrapper\">\r\n    <button mat-button color=\"primary\" (click)=\"apply()\"\r\n      stop-propagation [class.apply-border]=\"dirty\"\r\n      [disabled]=\"!dirty\">\r\n        Apply @if (dirty) { Unsaved Changes }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Default Sorting Text -->\r\n  @if (!sorted.length) {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #sortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n    [cdkDropListData]=\"sorted\"\r\n    (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n    <!-- Menu Item Wrapper -->\r\n    @for (sort of sorted; track sort.active) {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1) {\r\n        <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n      }\r\n\r\n      <!-- Menu Item -->\r\n      <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n        <div class=\"sort-item\">\r\n          <span class=\"sorted-name\">\r\n            {{sort.displayName || (sort.active | spaceCase)}}\r\n            <span class=\"direction-text\">{{sort.direction}}</span>\r\n          </span>\r\n\r\n          <!-- Sort Direction Buttons -->\r\n          <div class=\"up-down-buttons-wrapper\">\r\n            <button  class=\"up-down-button up-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n              arrow_upward\r\n              </mat-icon>\r\n            </button>\r\n\r\n            <button class=\"up-down-button\" stop-propagation\r\n            (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n              <mat-icon [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                arrow_downward\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <!-- Default Not Sorted Text -->\r\n  @if(!notSorted.length){\r\n    <div class=\"tip\" >\r\n      Not Sorted List\r\n    </div>\r\n  }\r\n\r\n  <!-- Not Sorted Menu List -->\r\n  <div class=\"list\"\r\n    cdkDropList\r\n    #notSortedGroup=\"cdkDropList\"\r\n    [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n    [cdkDropListData]=\"notSorted\"\r\n    (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n    @for (sort of notSorted; track sort.active) {\r\n      <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n        <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-menu>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
+        }] });
 
 class PaginatorComponent {
     state = inject(TableStore);
     data = inject(DataStore);
     $paginator = viewChild(MatPaginator);
-    $tableElRef = input.required({ alias: 'tableElRef' });
     $dataLength = this.data.selectSignal(d => d.dataLen);
     pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
     $pageEvent = toSignal(this.pageEvent$);
@@ -4384,7 +4341,9 @@ class PaginatorComponent {
     });
     onPageIndexEffect = effect(() => {
         const index = this.$pageIndexChangeEvent();
-        untracked(() => this.state.updateState({ currentPage: index }));
+        if (index === undefined)
+            return;
+        untracked(() => this.state.setCurrentPage(index));
     });
     onPageSizeEffect = effect(() => {
         const size = this.$pageSizeChangeEvent();
@@ -4416,7 +4375,7 @@ class PaginatorComponent {
         this.updatePaginator();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { $tableElRef: { classPropertyName: "$tableElRef", publicName: "tableElRef", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", viewQueries: [{ propertyName: "$paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
   <div class="paginator-row">
     @if($currentPageData(); as pageData){
       <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
@@ -4432,7 +4391,7 @@ class PaginatorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-paginator', standalone: true, imports: [MatPaginatorModule, MatButtonModule], template: `
+            args: [{ selector: 'tb-paginator', imports: [MatPaginatorModule, MatButtonModule], template: `
   <div class="paginator-row">
     @if($currentPageData(); as pageData){
       <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
@@ -4584,14 +4543,14 @@ class VirtualScrollContainer {
     }
     setSize(el) {
         const vsViewport = el.nativeElement;
-        const virtualScrollOptions = this.state.tableSettings().useVirtualScroll;
+        const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll;
         const rowHeight = this.computedRowHeight();
         let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
         virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
         amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
         let height = (rowHeight * amountOfVisibleItems);
         height += parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
-        if (!this.state.tableSettings().hideHeader) {
+        if (!this.state.$tableSettings().hideHeader) {
             const headerHeight = this.computedHeaderHeight();
             height += headerHeight;
         }
@@ -4608,13 +4567,13 @@ class VirtualScrollContainer {
         }
     };
     computedRowHeight() {
-        const virtualScrollOptions = this.state.tableSettings().useVirtualScroll;
-        const rowHeight = virtualScrollOptions?.rowHeight || (typeof this.state.tableSettings().rowHeight === 'number' && this.state.tableSettings().rowHeight) || this.defaultOptions.rowHeight;
+        const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll;
+        const rowHeight = virtualScrollOptions?.rowHeight || (typeof this.state.$tableSettings().rowHeight === 'number' && this.state.$tableSettings().rowHeight) || this.defaultOptions.rowHeight;
         return rowHeight;
     }
     computedHeaderHeight() {
-        const virtualScrollOptions = this.state.tableSettings().useVirtualScroll;
-        const headerHeight = virtualScrollOptions?.headerHeight || (typeof this.state.tableSettings().headerHeight === 'number' && this.state.tableSettings().headerHeight) || this.defaultOptions.headerHeight;
+        const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll;
+        const headerHeight = virtualScrollOptions?.headerHeight || (typeof this.state.$tableSettings().headerHeight === 'number' && this.state.$tableSettings().headerHeight) || this.defaultOptions.headerHeight;
         return headerHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4640,7 +4599,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
     </cdk-virtual-scroll-viewport>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
                     imports: [ScrollingModule],
                     viewProviders: [
                         {
@@ -4691,19 +4649,18 @@ class ProfilesMenuComponent {
         return a;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #line let-key>\r\n\r\n\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-profiles-menu', standalone: true, imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput, DialogDirective, ClickEmitterDirective, NgTemplateOutlet,
-                        MatCheckbox, StopPropagationDirective, FunctionPipe, MatInputModule, AsyncPipe, FormsModule
-                    ], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #line let-key>\r\n\r\n\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
+            args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
+                        MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
+                    ], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span [class]=\"(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'\" class=\"arrow\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
         }] });
 
 const containerImports = [
-    AsyncPipe, NgTemplateOutlet,
+    NgTemplateOutlet,
     PaginatorComponent,
-    LetDirective,
     MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
     SortMenuComponent, GenericTableComponent, StopPropagationDirective, ProfilesMenuComponent,
     MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
@@ -4712,7 +4669,7 @@ const containerImports = [
 //The idea of this is that if filters were only added, and none were removed or changed, then we only need to tag more rows to not be shown. We don't need to remove any 'dont show' tags.
 // So if filters were only added this method will return the added filters, if filters were removed or changed this method will return undefined.
 const updateFilterInfoState = (previousState, filterInfos) => {
-    filterInfos = filterNonActiveFilters(filterInfos);
+    filterInfos = filterNonActiveOrNotReadyFilters(filterInfos);
     const currentState = {
         allFilters: filterInfos,
         onlyAddedFilters: filterInfoOnlyAdded(previousState.allFilters, filterInfos)
@@ -4720,11 +4677,18 @@ const updateFilterInfoState = (previousState, filterInfos) => {
     return currentState;
 };
 const mapFilterInfoStateToPredicateState = (s) => {
-    const mappedAddOnly = s.onlyAddedFilters ? Object.entries(s.onlyAddedFilters).reduce((obj, [key, value]) => {
-        obj[key] = createFilterFunc(value);
-        return obj;
-    }, {}) : {};
-    const mappedAll = Object.entries(s.allFilters).map(([key, value]) => mappedAddOnly[key] || createFilterFunc(value));
+    const mappedAddOnly = s.onlyAddedFilters
+        ?
+            Object.entries(s.onlyAddedFilters).filter(([, v]) => needsFilterCreation(v)).reduce((obj, [key, value]) => {
+                obj[key] = createFilterFunc(value);
+                return obj;
+            }, {})
+        : {};
+    const mappedAll = Object.entries(s.allFilters).filter(([, v]) => needsFilterCreation(v))
+        .filter(([, v]) => !isCustomFilter(v) || !!v.predicate)
+        .map(([key, value]) => {
+        return mappedAddOnly[key] || createFilterFunc(value);
+    });
     return ({
         allFilters: mappedAll,
         onlyAddedFilters: s.onlyAddedFilters ? Object.values(mappedAddOnly) : undefined
@@ -4750,8 +4714,8 @@ const updateFilterState = (filterInfos, predicates) => {
     }
     return filtersState;
 };
-const filterNonActiveFilters = (filtersDict) => Object.entries(filtersDict).reduce((obj, [key, value]) => {
-    if (value.active !== false) {
+const filterNonActiveOrNotReadyFilters = (filtersDict) => Object.entries(filtersDict).reduce((obj, [key, value]) => {
+    if (value.active !== false && (!isCustomFilter(value) || !!value.predicate)) {
         obj[key] = value;
     }
     ;
@@ -4789,6 +4753,16 @@ function filtersInfosUpdated(previousFilterInfos, currentFilterInfos) {
         return currentFilterInfos[key].filterType === val.filterType && currentFilterInfos[key].filterValue === val.filterValue;
     });
 }
+function patchDirectiveFromState(directive, stateFilter) {
+    if (isFilterInfo(stateFilter)) {
+        const filterDirective = directive;
+        filterDirective.setFilterValue(stateFilter.filterValue);
+        filterDirective.update();
+    }
+    if (isCustomFilter(stateFilter)) {
+        directive.active = stateFilter.active ?? false;
+    }
+}
 
 function getGroupedData(data, groupByKeys) {
     return tbGroupBy(data, groupByKeys);
@@ -5005,24 +4979,26 @@ const createCleaners = (metadatas) => {
     }, []);
 };
 
-const defaultProps = {
-    indexColumn: false,
-    selectionColumn: false,
-    isSticky: true,
-    stickyFooter: false,
-    groupHeaderHeight: undefined,
-};
-
 class TableBuilderDataSource extends MatTableDataSource {
-    dataSrc;
     subscription;
-    constructor(dataSrc, state, data) {
+    #$dataSrc = signal([]);
+    $dataSize = signal({ start: 0, end: 0 }, {
+        equal: (a, b) => a.start === b.start && a.end === b.end
+    });
+    _ = effect(() => {
+        const data = this.#$dataSrc();
+        const dataSize = this.$dataSize();
+        untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
+    });
+    setData(data) {
+        this.#$dataSrc.set(data);
+    }
+    constructor(state, data) {
         super([]);
-        this.dataSrc = dataSrc;
         const $currentPage = state.$currentPage;
         const $pageSize = state.$pageSize;
         const $virtualEnds = data.selectSignal(d => d.virtualEnds);
-        const $dataLength = computed(() => dataSrc().length);
+        const $dataLength = computed(() => this.#$dataSrc().length);
         const $dataSize = computed(() => {
             const viewType = state.$viewType();
             const dataLength = $dataLength();
@@ -5041,11 +5017,7 @@ class TableBuilderDataSource extends MatTableDataSource {
             }
             return ({ start: virtualEnds.start, end: virtualEnds.end });
         });
-        const $dataToShow = computed(() => dataSrc().slice($dataSize().start, $dataSize().end));
-        effect(() => {
-            const dataToShow = $dataToShow();
-            untracked(() => this.data = dataToShow);
-        });
+        this.$dataSize = $dataSize;
     }
     connect() {
         return super.connect();
@@ -5059,9 +5031,26 @@ class TableBuilderDataSource extends MatTableDataSource {
     }
 }
 
+function mergeCustomCellMetaData(metaData1, metaData2) {
+    if (!metaData2) {
+        metaData1.noExport = true;
+        return metaData1;
+    }
+    if (!metaData1.displayName)
+        metaData1.displayName = metaData2.displayName;
+    if (!metaData1.preSort)
+        metaData1.preSort = metaData2.preSort;
+    if (!metaData1.order)
+        metaData1.order = metaData2.order;
+    if (!metaData1.width)
+        metaData1.width = metaData2.width;
+    if (metaData2.fieldType)
+        metaData1.fieldType = metaData2.fieldType;
+    metaData1.noExport = metaData2.noExport;
+    return metaData1;
+}
+
 class TableContainerComponent {
-    props = { ...defaultProps };
-    data = new BehaviorSubject([]);
     state = inject(TableStore);
     dataStore = inject(DataStore);
     config = inject(TableBuilderConfigToken);
@@ -5069,108 +5058,152 @@ class TableContainerComponent {
     wrapper = inject(TableWrapperDirective, { optional: true });
     stateService = inject(TableBuilderStateStore);
     injector = inject(Injector);
-    filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
-    customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
-    $allFilterDirectives = computed(() => {
-        if (this.wrapper) {
-            return [...this.filterDirectives(), ...this.customFilterDirectives(), ...this.wrapper.$registrations()];
-        }
-        {
-            return [...this.filterDirectives(), ...this.customFilterDirectives()];
-        }
-    });
-    $isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
-    allFilterDirectivesEffect = effect(() => {
-        const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
-        const stateFilters = this.state.$filters();
-        const filterDirectives = this.$allFilterDirectives();
-        untracked(() => {
-            if (loaded) {
-                filterDirectives.filter(f => !f.used).forEach(f => {
-                    f.used = true;
-                    if (f.savable) {
-                        var filter = stateFilters[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$);
-                    }
-                });
-            }
-        });
-    });
-    paginatorComponent;
-    genericTable;
+    dataSource = new TableBuilderDataSource(this.state, this.dataStore);
+    $filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
+    $customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
+    $paginatorComponent = viewChild(PaginatorComponent);
+    $genericTable = viewChild(GenericTableComponent);
     _$customRows = contentChildren((MatRowDef));
     $customRows = computed(() => [...this._$customRows()]);
     $customCells = contentChildren(CustomCellDirective);
-    $myColumns = computed(() => {
-        return this.state.$metaDataArray().map(metaData => ({ metaData, customCell: this.$customCells().find(cc => cc.customCell === metaData.key) }));
-    });
-    tableElRef;
-    tableBuilder;
+    $tableBuilder = input.required({ alias: 'tableBuilder' });
     $tableId = input(undefined, { alias: 'tableId' });
-    set indexColumn(val) {
-        this.props.indexColumn = val;
-    }
-    set selectionColumn(val) {
-        this.props.selectionColumn = val;
-    }
-    set isSticky(val) {
-        this.props.isSticky = val;
-    }
-    set stickyFooter(val) {
-        this.props.stickyFooter = val;
-    }
-    set pageSize(value) {
-        this.state.setPageSize(value);
-    }
-    set groupHeaderTemplate(template) {
-        this.props.groupHeaderTemplate = template;
-    }
-    set groupHeaderHeight(value) {
-        this.props.groupHeaderHeight = value;
-    }
-    trackBy;
-    inputFilters;
-    selection$ = new EventEmitter();
-    $data = toSignal(this.data, { initialValue: [] });
-    onStateReset = new EventEmitter();
-    onSaveState = new EventEmitter();
-    state$ = this.state.getSavableState().pipe(map(state => cloneDeep(state)), defaultShareReplay());
+    $trackBy = input(undefined, { alias: 'trackBy' });
+    $inputFilters = model([], { alias: 'inputFilters' });
+    predicateInputFilters$ = toObservable(computed(() => this.$inputFilters().filter(isFunction$1)));
+    $filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction$1(i)));
+    $indexColumn = input(false, { alias: 'indexColumn' });
+    $selectionColumn = input(false, { alias: 'selectionColumn' });
+    $isSticky = input(true, { alias: 'isSticky' });
+    $stickyFooter = input(false, { alias: 'stickyFooter' });
+    $groupHeaderTemplate = input(undefined, { alias: 'groupHeaderTemplate' });
+    $groupHeaderHeight = input(undefined, { alias: 'groupHeaderHeight' });
+    $pageSize = input(undefined, { alias: 'pageSize' });
+    $props = computed(() => {
+        const indexColumn = this.$indexColumn();
+        const selectionColumn = this.$selectionColumn();
+        const isSticky = this.$isSticky();
+        const stickyFooter = this.$stickyFooter();
+        const groupHeaderTemplate = this.$groupHeaderTemplate();
+        const groupHeaderHeight = this.$groupHeaderHeight();
+        return ({ indexColumn, selectionColumn, isSticky, stickyFooter, groupHeaderTemplate, groupHeaderHeight });
+    });
+    selection$ = output({ alias: 'selection' });
+    onStateReset$ = output({ alias: 'onStateReset' });
+    onSaveState$ = output({ alias: 'onSaveState' });
+    _state$ = toObservable(this.state.getSavableStateSignal);
+    state$ = outputFromObservable(this._state$, { alias: 'state' });
+    data$ = new BehaviorSubject([]);
+    _data$ = outputFromObservable(this.data$, { alias: 'data' });
+    $data = toSignal(this.data$, { initialValue: [] });
     clearSelections() {
-        this.genericTable?.selection.clear(true);
-    }
-    displayData = new ReplaySubject(1);
-    $displayData = toSignal(this.displayData, { initialValue: [] });
-    $collapseFooter = this.state.$collapseFooter;
-    $collapseHeader = this.state.$collapseHeader;
-    ngOnDestroy() {
-        const tableId = this.$tableId();
-        if (tableId) {
-            this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.getSavableStateSignal() });
-        }
+        this.$genericTable()?.$selection().clear(true);
     }
     firstPage() {
-        this.paginatorComponent?.$paginator()?.firstPage();
+        this.$paginatorComponent()?.$paginator()?.firstPage();
     }
     lastPage() {
-        this.paginatorComponent?.$paginator()?.lastPage();
+        this.$paginatorComponent()?.$paginator()?.lastPage();
     }
+    expandAllGroups = () => {
+        const groupHeaders = getAllGroupHeaderNames(this.$displayData());
+        this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
+    };
+    collapseAllGroups = () => this.state.collapseAll();
+    $myColumns = computed(() => {
+        return this.state.$metaDataArray().map(metaData => ({ metaData, customCell: this.$customCells().find(cc => cc.$customCell() === metaData.key) }));
+    });
+    $useVirtual = this.state.$isVirtual;
+    $collapsedFooter = this.state.$footerCollapsed;
+    $collapsedHeader = this.state.$headerCollapsed;
+    $displayDataLength = computed(() => this.$displayData().length);
     resetState() {
-        this.customFilterDirectives().forEach(cf => cf.reset());
-        this.filterDirectives().forEach(cf => cf.reset());
+        this.$customFilterDirectives().forEach(cf => cf.reset());
+        this.$filterDirectives().forEach(cf => cf.reset());
         this.state.resetState();
-        this.onStateReset.next(null);
+        this.onStateReset$.emit(null);
     }
+    exportToCsv() {
+        this.exportToCsvService.exportToCsv(this.$data());
+    }
+    #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
+        const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
+        if (!metaLoaded)
+            return;
+        const persistedState = this.$persistedState();
+        untracked(() => {
+            this.state.setTableSettings(this.$tableBuilder().settings$);
+            if (persistedState) {
+                persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
+                this.state.updateStateFromPersistedState(persistedState);
+            }
+            this.state.setInitializationState(InitializationState.Ready);
+        });
+    });
+    #setPageSizeFromInputEffect = effect(() => {
+        const pageSize = this.$pageSize();
+        if (pageSize) {
+            untracked(() => this.state.setPageSize(pageSize));
+        }
+    });
+    #patchedFilters = [];
+    #patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
+        const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+        const filterDirectives = this.$allFilterDirectives();
+        if (!loaded || !filterDirectives.length)
+            return;
+        const stateFilters = this.state.$filters();
+        untracked(() => {
+            filterDirectives.filter(f => f.savable && !this.#patchedFilters.includes(f.filterId)).forEach(f => {
+                this.#patchedFilters.push(f.filterId);
+                const filter = stateFilters[f.filterId];
+                patchDirectiveFromState(f, filter);
+                this.state.addFilter(f.filter$);
+            });
+        });
+    });
+    #patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
+        const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+        const inputFilters = this.$filterInfoInputs();
+        if (!loaded || !inputFilters.length)
+            return;
+        untracked(() => {
+            const stateFilters = this.state.$filters();
+            inputFilters.filter(f => f.filterId).forEach(f => {
+                const patched = this.#patchedFilters.includes(f.filterId);
+                const stateFilter = stateFilters[f.filterId];
+                if (patched || !stateFilter) {
+                    this.state.addFilter(f);
+                }
+                else if (isCustomFilter(f)) {
+                    stateFilter.predicate = f.predicate;
+                    this.state.addFilter(stateFilter);
+                }
+                this.#patchedFilters.push(f.filterId);
+            });
+        });
+    });
+    #addPropsToStoreFromInputsEffect = effect(() => {
+        const props = this.$props();
+        untracked(() => this.state.setProps(props));
+    });
+    #addMetaDataToStoreEffect = effect(() => {
+        const allMetaDatas = this.$allMetaDatas();
+        if (!allMetaDatas)
+            return;
+        untracked(() => {
+            this.state.setMetaData(allMetaDatas);
+            this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
+        });
+    });
+    #initializeDataEffect = effect(() => {
+        const tableBuilder = this.$tableBuilder();
+        if (!tableBuilder)
+            return;
+        untracked(() => {
+            this.initializeData();
+        });
+    });
     $persistedState = computed(() => {
         const tableId = this.$tableId();
         if (tableId) {
@@ -5178,27 +5211,35 @@ class TableContainerComponent {
         }
         return undefined;
     });
-    initializeStateEffect = effect(() => {
-        const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
-        const tableId = this.$tableId();
-        const persistedState = this.$persistedState();
-        untracked(() => {
-            if (metaLoaded) {
-                this.state.setTableSettings(this.tableBuilder.settings);
-                if (tableId) {
-                    if (persistedState) {
-                        persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
-                        this.state.updateStateFromPersistedState(persistedState);
-                        return;
-                    }
-                }
-                this.state.setInitializationState(InitializationState.LoadedFromStore);
-            }
-        });
+    $allFilterDirectives = computed(() => {
+        if (this.wrapper) {
+            return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
+        }
+        return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
+    });
+    allNotSavableFilterDirectivesFilters$ = toObservable(this.$allFilterDirectives).pipe(filterArray(d => !d.savable), switchMap(d => {
+        const a = d.map(d => d.filter$);
+        return combineLatest(a).pipe(startWith([]));
+    }), map(createFilterFuncs));
+    tableBuilderMetaData$ = toObservable(this.$tableBuilder).pipe(notNull(), switchMap(tb => tb.metaData$));
+    $tableBuilderMetaData = toSignal(this.tableBuilderMetaData$);
+    $allMetaDatas = computed(() => {
+        const tableBuilderMetaData = this.$tableBuilderMetaData();
+        if (!tableBuilderMetaData)
+            return;
+        const customCellMetaDatas = this.$customCells().map(cc => cc.$metaData()).filter(d => !!d);
+        const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
+        return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
     });
-    customFilters$ = new BehaviorSubject([]);
+    $displayData = signal([]);
+    ngOnDestroy() {
+        const tableId = this.$tableId();
+        if (tableId) {
+            this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.getSavableStateSignal() });
+        }
+    }
     initializeData() {
-        const predicateFilters$ = combineLatest([this.inputFilters?.pipe(startWith([])) ?? of([]), this.customFilters$])
+        const predicateFilters$ = combineLatest([this.predicateInputFilters$.pipe(), this.allNotSavableFilterDirectivesFilters$])
             .pipe(map(([a, b]) => [...a, ...b]));
         const filters$ = combineLatest([
             this.state.filters$.pipe(scan$1(updateFilterInfoState, { allFilters: {} }), timestamp$1()),
@@ -5206,144 +5247,25 @@ class TableContainerComponent {
         ])
             .pipe(map(([filterInfo, pred]) => updateFilterState(filterInfo, pred)));
         const sortsState$ = this.state.sort$.pipe(scan$1(updateSortState, initialSortState));
-        const sortedAndFilteredData$ = sortAndFilterData(this.tableBuilder.getData$(), sortsState$, filters$);
+        const sortedAndFilteredData$ = sortAndFilterData(this.$tableBuilder().getData$(), sortsState$, filters$);
         const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp$1()), this.state.groupByKeys$.pipe(timestamp$1()), this.state.expandedGroups$.pipe(timestamp$1())]).pipe(scan$1(updateGroupByState, initialGroupByState), map(({ displayData }) => displayData), defaultShareReplay());
         this.state.on(sortedAndFilteredData$, (data) => {
-            this.data.next(data);
+            this.data$.next(data);
             this.dataStore.patchState({ dataLen: data.length });
         });
         this.state.on(flatGrouped$, (data) => {
-            this.displayData.next(data);
+            this.dataSource.setData(data);
+            this.$displayData.set(data);
         });
     }
-    ngOnInit() {
-        const customCells$ = toObservable(this.$customCells, { injector: this.injector });
-        this.state.setLinkMaps(this.tableBuilder.metaData$.pipe(map(createLinkCreatorDict)));
-        const customCellMeta = customCells$.pipe(switchMap(c => c.length ? combineLatest(c.map(c => c.$metaData)) : of([])));
-        const metaForState = combineLatest([this.tableBuilder.metaData$, customCellMeta]).pipe(map(([mds, customCells]) => {
-            mds = mds.map(this.mapArrayFieldsMetaDatas);
-            return [
-                ...mds,
-                ...customCells.map(md => this.mergeMetaData(md, mds.find(item => item.key === md.key)))
-            ];
-        }));
-        this.state.setMetaData(metaForState);
-        runInInjectionContext(this.injector, () => {
-            const ds = new TableBuilderDataSource(this.$displayData, this.state, this.dataStore);
-            this.state.updateState({
-                props: {
-                    dataSource: ds,
-                    ...this.props
-                }
-            });
-        });
-        this.initializeData();
-    }
-    mergeMetaData(metaData1, metaData2) {
-        if (!metaData2) {
-            metaData1.noExport = true;
-            return metaData1;
-        }
-        if (!metaData1.displayName)
-            metaData1.displayName = metaData2.displayName;
-        if (!metaData1.preSort)
-            metaData1.preSort = metaData2.preSort;
-        if (!metaData1.order)
-            metaData1.order = metaData2.order;
-        if (!metaData1.width)
-            metaData1.width = metaData2.width;
-        if (metaData2.fieldType)
-            metaData1.fieldType = metaData2.fieldType;
-        metaData1.noExport = !metaData2;
-        return metaData1;
-    }
-    exportToCsv() {
-        this.exportToCsvService.exportToCsv(this.$data());
-    }
-    expandAllGroups = () => {
-        const groupHeaders = getAllGroupHeaderNames(this.$displayData());
-        this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
-    };
-    collapseAllGroups = () => this.state.collapseAll();
-    ngAfterContentInit() {
-        this.state.runOnceWhen(stateIs(InitializationState.LoadedFromStore), state => {
-            this.addFilterDirectives(state);
-            this.state.updateState({ initializationState: InitializationState.Ready });
-        });
-    }
-    mapArrayFieldsMetaDatas = (meta) => {
-        if (meta.fieldType === FieldType.Array) {
-            const additional = { ...meta.additional };
-            additional.arrayStyle = additional?.arrayStyle ?? ArrayDefaults.arrayStyle;
-            additional.limit = additional.limit ?? this.config.arrayDefaults?.limit ?? ArrayDefaults.limit;
-            return { ...meta, additional };
-        }
-        return meta;
-    };
-    addFilterDirectives = (state) => {
-        const customFilters$ = toObservable(this.$allFilterDirectives, { injector: this.injector }).pipe(mergeMap(customerFilters => customerFilters
-            .filter(filter => !filter.savable)
-            .map(filter => filter.filter$)), 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);
-        });
-    };
-    $useVirtual = this.state.$isVirtual;
+    $isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: { classPropertyName: "tableBuilder", publicName: "tableBuilder", isSignal: false, isRequired: true, transformFunction: null }, $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, indexColumn: { classPropertyName: "indexColumn", publicName: "indexColumn", isSignal: false, isRequired: false, transformFunction: null }, selectionColumn: { classPropertyName: "selectionColumn", publicName: "selectionColumn", isSignal: false, isRequired: false, transformFunction: null }, isSticky: { classPropertyName: "isSticky", publicName: "isSticky", isSignal: false, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, groupHeaderTemplate: { classPropertyName: "groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, groupHeaderHeight: { classPropertyName: "groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: false, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, inputFilters: { classPropertyName: "inputFilters", publicName: "inputFilters", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { data: "data", selection$: "selection$", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n\r\n<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()) || 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()) {\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() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n      (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"$collapseFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapseFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["tableElRef"] }, { kind: "directive", type: i3$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", "rows", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumn: { classPropertyName: "$indexColumn", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumn: { classPropertyName: "$selectionColumn", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $isSticky: { classPropertyName: "$isSticky", publicName: "isSticky", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooter: { classPropertyName: "$stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $inputFilters: "inputFiltersChange", selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", _data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, template: "@let tableId = $tableId();\r\n\r\n<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()) || 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()) {\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() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n      (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"$collapseFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapseFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
-        }], propDecorators: { data: [{
-                type: Output
-            }], paginatorComponent: [{
-                type: ViewChild,
-                args: [PaginatorComponent]
-            }], genericTable: [{
-                type: ViewChild,
-                args: [GenericTableComponent]
-            }], tableElRef: [{
-                type: ContentChild,
-                args: ['table', { read: ElementRef }]
-            }], tableBuilder: [{
-                type: Input,
-                args: [{ required: true }]
-            }], indexColumn: [{
-                type: Input
-            }], selectionColumn: [{
-                type: Input
-            }], isSticky: [{
-                type: Input
-            }], stickyFooter: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], groupHeaderTemplate: [{
-                type: Input
-            }], groupHeaderHeight: [{
-                type: Input
-            }], trackBy: [{
-                type: Input
-            }], inputFilters: [{
-                type: Input
-            }], selection$: [{
-                type: Output
-            }], onStateReset: [{
-                type: Output
-            }], onSaveState: [{
-                type: Output
-            }], state$: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: containerImports, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState$.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
+        }] });
 
 class TableBuilderModule {
     static forRoot(config) {
@@ -5480,14 +5402,14 @@ class MatTableObservableDataSource extends MatTableDataSource {
 class TableBuilder {
     metaData$;
     data$;
-    settings;
+    settings$;
     constructor(data, metaData, settings = new GeneralTableSettings()) {
-        this.settings = this.coerceSettingsToObservable(settings)
+        this.settings$ = this.coerceSettingsToObservable(settings)
             .pipe(defaultShareReplay());
-        this.data$ = this.coerceToObservable(data, this.settings)
+        this.data$ = this.coerceToObservable(data, this.settings$)
             .pipe(notNull(), defaultShareReplay());
         this.metaData$ = metaData ?
-            this.coerceToObservable(metaData, this.settings).pipe(defaultShareReplay())
+            this.coerceToObservable(metaData, this.settings$).pipe(defaultShareReplay())
             :
                 this.data$.pipe(first$1(), map(d => this.createMetaData(d[0])), defaultShareReplay());
     }
@@ -5618,7 +5540,7 @@ class ActionStateSpinnerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'lib-action-state-spinner', imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { status$: [{
                 type: Input
             }] } });
@@ -5736,17 +5658,16 @@ const setEnvironmentInjector = (ei) => {
 };
 function provideActionableSelector() {
     return makeEnvironmentProviders([
-        { provide: APP_INITIALIZER, useFactory: setUpStoreFactory, multi: true, deps: [Store, EnvironmentInjector] },
+        provideAppInitializer(setUpStoreFactory)
     ]);
 }
-function setUpStoreFactory(store, env) {
+const setUpStoreFactory = () => {
+    const store = inject(Store);
+    const env = inject(EnvironmentInjector);
     _cache ??= new AppStoreCache();
-    return () => new Promise((resolve, reject) => {
-        setStore(store);
-        setEnvironmentInjector(env);
-        resolve(null);
-    });
-}
+    setStore(store);
+    setEnvironmentInjector(env);
+};
 
 /*
  * Public API Surface of http-request-state
@@ -5756,5 +5677,5 @@ function setUpStoreFactory(store, env) {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterTypes, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isDifferent, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterTypes, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map