@one-paragon/angular-utilities 2.0.15 → 2.0.16

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

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, effect, ContentChildren, ChangeDetectorRef, output, viewChild, EnvironmentInjector, createComponent, 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, debounceTime, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
+import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, input, signal, Renderer2, ElementRef, booleanAttribute, Pipe, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, effect, ContentChildren, ChangeDetectorRef, output, viewChild, EnvironmentInjector, createComponent, linkedSignal, contentChild, forwardRef, contentChildren, runInInjectionContext, provideAppInitializer } from '@angular/core';
+import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import * as i1 from 'rxjs';
-import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp, animationFrameScheduler, debounceTime as debounceTime$1, BehaviorSubject } from 'rxjs';
+import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
 import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-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, isFunction as isFunction$1 } from 'lodash';
@@ -20,11 +19,10 @@ import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3 from '@angular/forms';
 import { NgControl, FormsModule, ControlContainer, NgForm, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i9 from '@angular/material/core';
-import { MatOption, MatNativeDateModule } from '@angular/material/core';
+import { MatOption } from '@angular/material/core';
+import { DatePipe, CurrencyPipe, KeyValuePipe, NgTemplateOutlet, formatDate, formatCurrency, DecimalPipe, CommonModule, AsyncPipe } from '@angular/common';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CDK_DROP_LIST, CdkDropList, transferArrayItem } from '@angular/cdk/drag-drop';
-import * as i1$5 from '@angular/router';
-import { RouterModule } from '@angular/router';
 import * as i1$1 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i4 from '@angular/material/datepicker';
@@ -32,7 +30,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i6 from '@angular/material/form-field';
 import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import { MatDialog, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MAT_DIALOG_DEFAULT_OPTIONS } 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';
@@ -48,6 +46,8 @@ import { MatChipsModule } from '@angular/material/chips';
 import * as i1$6 from '@angular/material/table';
 import { MatTable, MatColumnDef, MatTableModule, MatHeaderRowDef, MatFooterRowDef, MatTableDataSource, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
+import * as i1$5 from '@angular/router';
+import { RouterModule } from '@angular/router';
 import * as i1$7 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$8 from '@angular/cdk/scrolling';
@@ -686,34 +686,6 @@ function getDestroyRef(options) {
     return destroyRef;
 }
 
-class SpaceCasePipe {
-    transform(value) {
-        return spaceCase(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpaceCasePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'spaceCase' }]
-        }] });
-/**
- * Adds a space before uppercase letters that either
- * 1. follows a lowercase letter or digit
- * 2. or precedes a lowercase letter and follows an alpha-numeric character
- *
- * Uppercases the first digit
- *
- * Turns underscores into spaces
- */
-function spaceCase(value) {
-    const phrase = value?.replace(regex1, '$1$3 $2$4');
-    // uppercase the first character of every word
-    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) {
     FieldType[FieldType["Unknown"] = 0] = "Unknown";
@@ -771,8 +743,8 @@ class GeneralTableSettings {
     headerSettings = new TableWrapperHeaderSettings();
     footerSettings = new TableWrapperFooterSettings();
     columnHeaderSettings = new TableColumnHeaderSettings();
+    columnFooterSettings = new TableColumnFooterSettings();
     tableSettings = new TableSettings();
-    injector;
 }
 class TableWrapperHeaderSettings {
     hideExport = false;
@@ -788,10 +760,18 @@ class TableWrapperFooterSettings {
     collapse = false;
 }
 class TableColumnHeaderSettings {
+    stickyHeaderRow = true;
     noFilters = false;
     noHeader = false;
 }
+class TableColumnFooterSettings {
+    stickyFooterRow = false;
+}
 class TableSettings {
+    tableId = undefined;
+    trackBy = undefined;
+    includeIndexColumn = false;
+    includeSelectionColumn = false;
     usePaginator = undefined;
     useVirtualScroll = undefined;
     paginatorSettings = undefined;
@@ -799,6 +779,8 @@ class TableSettings {
     rowHeight = undefined;
     groupHeaderHeight = undefined;
     minColumnWidth;
+    rowClasses;
+    rowStyles;
 }
 class PersistedTableSettings {
     constructor(tableSettings) {
@@ -838,6 +820,8 @@ class NotPersistedTableSettings {
             newNpts.headerHeight = tableSettings.headerSettings?.headerHeight ?? newNpts.headerHeight;
             newNpts.groupHeaderHeight = tableSettings.tableSettings?.groupHeaderHeight ?? newNpts.groupHeaderHeight;
             newNpts.minColumnWidth = tableSettings.tableSettings?.minColumnWidth ?? newNpts.minColumnWidth;
+            newNpts.rowClasses = tableSettings.tableSettings?.rowClasses ?? newNpts.rowClasses;
+            newNpts.rowStyles = tableSettings.tableSettings?.rowStyles ?? newNpts.rowStyles;
             if (tableSettings.tableSettings?.virtualScrollSettings) {
                 const currVirt = tableSettings.tableSettings?.virtualScrollSettings || newNpts.virtualSettings;
                 if (!currVirt.headerHeight) {
@@ -876,6 +860,8 @@ class NotPersistedTableSettings {
     rowHeight;
     headerHeight = undefined;
     minColumnWidth;
+    rowClasses;
+    rowStyles;
 }
 class VirtualScrollOptions {
     rowHeight = 48;
@@ -1192,6 +1178,7 @@ class TableFilterDirective {
         this.filterValue = undefined;
     }
     filter$ = new ReplaySubject(1);
+    $filter = toSignal(this.filter$);
     filterType;
     key;
     fieldType;
@@ -1301,6 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
         }], ctorParameters: () => [] });
 class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
     filter$ = new ReplaySubject(1);
+    $filter = toSignal(this.filter$);
     filter;
     _predicate;
     set predicate(val) {
@@ -1532,13 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 
 class PhoneNumberPipe {
     transform(phoneNum) {
-        if (phoneNum) {
-            phoneNum = phoneNum.replace(/\D/g, '');
-            if (phoneNum[0] === '1') {
-                phoneNum = phoneNum.substring(1);
-            }
-            return '(' + phoneNum.slice(0, 3) + ') ' + phoneNum.slice(3, 6) + '-' + phoneNum.slice(6, 10) + ' ' + phoneNum.slice(10);
-        }
+        return phoneFormatter(phoneNum);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" });
@@ -1547,6 +1529,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             type: Pipe,
             args: [{ name: 'phone' }]
         }] });
+function phoneFormatter(phoneNum) {
+    if (phoneNum) {
+        phoneNum = phoneNum.replace(/\D/g, '');
+        if (phoneNum[0] === '1') {
+            phoneNum = phoneNum.substring(1);
+        }
+        return '(' + phoneNum.slice(0, 3) + ') ' + phoneNum.slice(3, 6) + '-' + phoneNum.slice(6, 10) + ' ' + phoneNum.slice(10);
+    }
+    return '';
+}
+
+class SpaceCasePipe {
+    transform(value) {
+        return spaceCase(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SpaceCasePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'spaceCase' }]
+        }] });
+/**
+ * Adds a space before uppercase letters that either
+ * 1. follows a lowercase letter or digit
+ * 2. or precedes a lowercase letter and follows an alpha-numeric character
+ *
+ * Uppercases the first digit
+ *
+ * Turns underscores into spaces
+ */
+function spaceCase(value) {
+    const phrase = value?.replace(regex1, '$1$3 $2$4');
+    // uppercase the first character of every word
+    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;
 
 const defaultConfig = {
     defaultTableSettings: {
@@ -1920,8 +1940,8 @@ class TableStore extends ComponentStore {
         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$));
+    $getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
+    sort$ = toObservable(this.$getSorts);
     $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
     getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
     $userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
@@ -1940,6 +1960,11 @@ class TableStore extends ComponentStore {
         const bb = b.flatMap(g => g.expandedHeaders);
         return aa.length === bb.length && aa.every((k) => bb.includes(k));
     }));
+    $expandGroups = this.selectSignal(state => state.groupBy, { equal: (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);
     };
@@ -3166,98 +3191,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 function isPipe(o) {
     return typeof (o.transform) === 'function';
 }
-class TransformCreator {
-    datePipe = inject(DatePipe);
-    currencyPipe = inject(CurrencyPipe);
-    phonePipe = inject(PhoneNumberPipe);
-    config = inject(TableBuilderConfigToken);
-    createTransformer(metaData, noIcons = false, forItem = false) {
-        const nested = metaData.key.includes('.');
-        const defaultFunc = nested ? (value) => get(value, metaData.key) : (value) => value[metaData.key];
-        if (metaData.map && !forItem) {
-            return (value) => {
-                return metaData.map(value);
-            };
-        }
-        if (metaData.mapItem) {
-            return (value) => {
-                return metaData.mapItem(defaultFunc(value));
-            };
-        }
-        if (metaData.transform) {
-            if (isPipe(metaData.transform)) {
-                return (value) => metaData.transform.transform(defaultFunc(value));
-            }
-            return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value), value);
-        }
-        if (this.config.transformers && this.config.transformers[metaData.fieldType]) {
-            var transformer = this.config.transformers[metaData.fieldType];
-            return (value) => transformer(defaultFunc(value));
-        }
-        const defaultDateFormat = this.config.dateFormats?.dateFormat ?? 'shortDate';
-        const defaultDateTimeFormat = this.config.dateFormats?.dateTimeFormat ?? 'short';
-        switch (metaData.fieldType) {
-            case FieldType.Date:
-                const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
-                return (value) => this.datePipe.transform(defaultFunc(value), dateFormat);
-            case FieldType.DateTime:
-                const dateTimeFormat = metaData.additional?.dateTimeOptions?.format ?? defaultDateTimeFormat;
-                return (value) => this.datePipe.transform(defaultFunc(value), dateTimeFormat);
-            case FieldType.Currency:
-                return (value) => this.currencyPipe.transform(defaultFunc(value));
-            case FieldType.PhoneNumber:
-                return (value) => this.phonePipe.transform(defaultFunc(value));
-            case FieldType.Enum:
-                return (value) => spaceCase(metaData.additional?.enumMap[defaultFunc(value)]);
-            case FieldType.Boolean:
-                if (noIcons) {
-                    return defaultFunc;
-                }
-                let forTrue = 'check';
-                let forFalse = '';
-                if (metaData.additional?.boolean?.forTrue) {
-                    forTrue = metaData?.additional.boolean.forTrue.icon;
-                }
-                if (metaData.additional?.boolean?.showForFalse === true) {
-                    forFalse = 'clear';
-                }
-                else if (metaData.additional?.boolean?.showForFalse?.icon) {
-                    forFalse = metaData.additional?.boolean?.showForFalse?.icon;
-                }
-                return (value) => defaultFunc(value) ? forTrue : forFalse;
-        }
-        return defaultFunc;
+function createTransformer(metaData, config, noIcons = false, forItem = false) {
+    const nested = metaData.key.includes('.');
+    const defaultFunc = nested ? (value) => get(value, metaData.key) : (value) => value[metaData.key];
+    if (metaData.map && !forItem) {
+        return (value) => {
+            return metaData.map(value);
+        };
     }
-    createItemTransformer = (metaData, noIcons = false, mutate = false) => {
-        const transform = this.createTransformer(metaData, noIcons);
-        return (t) => {
-            if (!mutate) {
-                t = { ...t };
-            }
-            t[metaData.key] = transform(t);
+    if (metaData.mapItem) {
+        return (value) => {
+            return metaData.mapItem(defaultFunc(value));
         };
-    };
-    createItemTransformers = (metaDatas, noIcons = false, mutate = false) => {
-        const transformers = metaDatas.map(meta => this.createItemTransformer(meta, noIcons, true));
-        return (t) => {
-            if (!t)
-                return t;
-            if (!mutate) {
-                t = { ...t };
+    }
+    if (metaData.transform) {
+        if (isPipe(metaData.transform)) {
+            return (value) => metaData.transform.transform(defaultFunc(value));
+        }
+        return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value), value);
+    }
+    if (config.transformers && config.transformers[metaData.fieldType]) {
+        var transformer = config.transformers[metaData.fieldType];
+        return (value) => transformer(defaultFunc(value));
+    }
+    const defaultDateFormat = config.dateFormats?.dateFormat ?? 'shortDate';
+    const defaultDateTimeFormat = config.dateFormats?.dateTimeFormat ?? 'short';
+    switch (metaData.fieldType) {
+        case FieldType.Date:
+            const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
+            return (value) => dateFormatter(defaultFunc(value), dateFormat);
+        case FieldType.DateTime:
+            const dateTimeFormat = metaData.additional?.dateTimeOptions?.format ?? defaultDateTimeFormat;
+            return (value) => dateFormatter(defaultFunc(value), dateTimeFormat);
+        case FieldType.Currency:
+            return (value) => currencyFormatter(defaultFunc(value));
+        case FieldType.PhoneNumber:
+            return (value) => phoneFormatter(defaultFunc(value));
+        case FieldType.Enum:
+            return (value) => spaceCase(metaData.additional?.enumMap[defaultFunc(value)]);
+        case FieldType.Boolean:
+            if (noIcons) {
+                return defaultFunc;
+            }
+            let forTrue = 'check';
+            let forFalse = '';
+            if (metaData.additional?.boolean?.forTrue) {
+                forTrue = metaData?.additional.boolean.forTrue.icon;
+            }
+            if (metaData.additional?.boolean?.showForFalse === true) {
+                forFalse = 'clear';
             }
-            transformers.forEach(m => m(t));
+            else if (metaData.additional?.boolean?.showForFalse?.icon) {
+                forFalse = metaData.additional?.boolean?.showForFalse?.icon;
+            }
+            return (value) => defaultFunc(value) ? forTrue : forFalse;
+    }
+    return defaultFunc;
+}
+function createItemTransformer(metaData, config, noIcons = false, mutate = false) {
+    const transform = createTransformer(metaData, config, noIcons);
+    return (t) => {
+        if (!mutate) {
+            t = { ...t };
+        }
+        t[metaData.key] = transform(t);
+    };
+}
+function createItemTransformers(metaDatas, config, noIcons = false, mutate = false) {
+    const transformers = metaDatas.map(meta => createItemTransformer(meta, config, noIcons, true));
+    return (t) => {
+        if (!t)
             return t;
-        };
+        if (!mutate) {
+            t = { ...t };
+        }
+        transformers.forEach(m => m(t));
+        return t;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TransformCreator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TransformCreator, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TransformCreator, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+function dateFormatter(date, format) {
+    if (!date)
+        return;
+    return formatDate(date, format, 'en-US');
+}
+function currencyFormatter(amt) {
+    return formatCurrency(amt, 'en-US', '$');
+}
 
 class RouterLinkColumnComponent {
     additional = input.required();
@@ -3488,14 +3507,14 @@ class ColumnHeaderMenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(metaData.fieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n        <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n        <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"currentFilterType\" />\r\n        <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n        \r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In){\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Boolean) {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(metaData.fieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n        <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n        <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"currentFilterType\" />\r\n        <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n        \r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In){\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Boolean) {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\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;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: ColumnHeaderMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
                         MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule
-                    ], template: "@let metaData = $metaData();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(metaData.fieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n        <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n        <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"currentFilterType\" />\r\n        <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n        \r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In){\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Boolean) {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px}:host{--mdc-filled-button-container-height: 24px}:host{--mdc-protected-button-container-height: 24px}:host{--mdc-outlined-button-container-height: 24px}:host{--mat-text-button-touch-target-display: none}:host{--mat-filled-button-touch-target-display: none}:host{--mat-protected-button-touch-target-display: none}:host{--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+                    ], template: "@let metaData = $metaData();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(metaData.fieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n        <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n        <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"currentFilterType\" />\r\n        <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n        <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n        \r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In){\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Boolean) {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(true);\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"boolField.control.setValue(false)\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\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;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }] });
 
 class ColumnTotalPipe {
@@ -3563,7 +3582,7 @@ const columnsStyles = (metaDatas, userDefinedWidths) => {
 
 class ColumnBuilderComponent {
     FieldType = FieldType;
-    transformCreator = inject(TransformCreator);
+    config = inject(TableBuilderConfigToken);
     table = inject(MatTable);
     state = inject(TableStore);
     templateService = inject(TableTemplateService);
@@ -3594,7 +3613,7 @@ class ColumnBuilderComponent {
         const metaData = this.$metaData();
         if (!metaData)
             return;
-        return this.transformCreator.createTransformer(metaData);
+        return createTransformer(metaData, this.config);
     });
     $innerTemplate = computed(() => {
         const metaData = this.$metaData();
@@ -3725,7 +3744,7 @@ class GenericTableComponent {
     state = inject(TableStore);
     dataStore = inject(DataStore);
     viewContainer = inject(ViewContainerRef);
-    transformCreator = inject(TransformCreator);
+    config = inject(TableBuilderConfigToken);
     _injector = inject(Injector);
     smallFooter = 10;
     $headerRow = viewChild(MatHeaderRowDef);
@@ -3836,8 +3855,9 @@ class GenericTableComponent {
     });
     $usePaginator = computed(() => this.state.$tableSettings().usePaginator);
     $useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
+    $virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
     $offsetIndex = computed(() => {
-        const virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start)();
+        const virtualStart = this.$virtualStart();
         const pageSize = this.state.$pageSize();
         const currentPage = this.state.$currentPage();
         if (this.$useVirtualScroll()) {
@@ -3953,7 +3973,7 @@ class GenericTableComponent {
         if (val == undefined || val === 'null')
             return '';
         try {
-            return this.transformCreator.createTransformer(this.state.$getMetaData(key)(), true, true)({ [`${key}`]: val });
+            return createTransformer(this.state.$getMetaData(key)(), this.config, true, true)({ [`${key}`]: val });
         }
         catch (error) {
             return val;
@@ -4006,15 +4026,17 @@ class GenericTableComponent {
         }
     });
     $stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
+    $rowStyles = computed(() => this.state.$tableSettings().rowStyles || {});
+    $rowClasses = computed(() => this.state.$tableSettings().rowClasses || {});
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  #table\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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; let t\" 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\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n  />\r\n\r\n  <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }], 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, imports: [
                         MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
-                        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"] }]
+                        MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective
+                    ], 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; let t\" 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\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n  />\r\n\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) {
@@ -4421,17 +4443,20 @@ const tbGroupBy = (data, groupByKeys, parentGroupName) => {
         };
     });
 };
-function updateGroupByState({ groupedData }, [data, groups, expandedGroups], index) {
-    if (index === 0
-        || dataUpdated(data, groups, expandedGroups)
-        || groupsUpdated(groups, expandedGroups)) {
+function updateGroupByState(groupedData, { data, groups, expanded }, firstRun) {
+    if (firstRun
+        || dataUpdated(data, groups, expanded)
+        || groupsUpdated(groups, expanded)) {
         groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
     }
-    const newDisplayData = expandedGroups.value.length === 0
+    const newDisplayData = expanded.value.length === 0
         ? groupedData
-        : groupedData.map(group => mapGroupHeader(group, expandedGroups.value)).flat();
+        : groupedData.map(group => mapGroupHeader(group, expanded.value)).flat();
     return ({ displayData: newDisplayData, groupedData });
 }
+function _updateGroupByState({ groupedData }, [data, groups, expanded], index) {
+    return updateGroupByState(groupedData, { data, groups, expanded }, index === 0);
+}
 function mapGroupHeader(obj, data) {
     const showChildren = data.find(a => a.expandedHeaders.includes(obj.groupName));
     const children = !showChildren ? [] :
@@ -4468,6 +4493,15 @@ function sortData(data, sorted) {
     return ordered;
 }
 function filterData(data, filters, resetAll = false) {
+    if (filters.length === 0) {
+        if (resetAll) {
+            for (let index = 0; index < data.length; index++) {
+                const element = data[index];
+                element[tbNoShowSymbol] = false;
+            }
+        }
+        return data;
+    }
     for (let index = 0; index < data.length; index++) {
         const element = data[index];
         const hide = !filters.every(filter => filter(element));
@@ -4479,19 +4513,33 @@ function filterData(data, filters, resetAll = false) {
 }
 const tbNoShowSymbol = Symbol('tb_no_show');
 
-const sortAndFilterData = (data, sortState, filterState) => combineLatest([
+const _sortAndFilterData = (data, sortState, filterState) => combineLatest([
     data.pipe(timestamp()),
     sortState.pipe(timestamp()),
     filterState.pipe(timestamp())
-]).pipe(scan(({ mappedData: resultData }, [data, sort, f], index) => {
-    if (index === 0 || (data.timestamp > sort.timestamp && data.timestamp > f.timestamp)) {
-        return ({ mappedData: filterData(sortData(data.value, sort.value.sortsToRun), f.value.allFilters) });
-    }
-    if (sort.timestamp > f.timestamp) {
-        return ({ mappedData: sortData(resultData, sort.value.sortsToRun) });
-    }
-    return ({ mappedData: filterData(resultData, f.value.onlyAddedFilters || f.value.allFilters, !f.value.onlyAddedFilters) });
-}, { mappedData: [] })).pipe(map$1(({ mappedData: resultData }) => resultData.filter(item => !item[tbNoShowSymbol])), defaultShareReplay());
+]).pipe(scan((mappedData, [data, sort, f], index) => {
+    return mapDataSortsAndFilters(data, f, sort, index === 0, mappedData);
+}, [])).pipe(map$1((resultData) => resultData.filter(item => !item[tbNoShowSymbol])), defaultShareReplay());
+const mapDataSortsAndFilters = (allData, filters, sort, firstRun, filteredData) => {
+    const fresh = firstRun || (allData.timestamp > sort.timestamp && allData.timestamp > filters.timestamp);
+    const sortChanged = !fresh && sort.timestamp > filters.timestamp;
+    const filterRemoved = !fresh && !sortChanged && !filters.value.onlyAddedFilters;
+    const runAllOnAllData = fresh || filterRemoved;
+    const resetFilters = !fresh && filterRemoved;
+    if (runAllOnAllData) {
+        const filteredData = filterData(sortData(allData.value, sort.value.sortsToRun), filters.value.allFilters, resetFilters);
+        return filteredData;
+    }
+    if (sortChanged) {
+        return (sortData(filteredData, sort.value.sortsToRun));
+    }
+    return (filterData(filteredData, filters.value.onlyAddedFilters || filters.value.allFilters, resetFilters));
+};
+const sortAndFilterData = (data, filters, sort, firstRun, resultData) => {
+    const markedAndSortedData = mapDataSortsAndFilters(data, filters, sort, firstRun, resultData);
+    const filteredData = markedAndSortedData.filter(item => !item[tbNoShowSymbol]);
+    return filteredData;
+};
 const createDataCleaners = (metadatas, mutate = false) => {
     const transforms = createCleaners(metadatas);
     return (data) => {
@@ -4724,7 +4772,7 @@ class TableBuilderDataSource extends MatTableDataSource {
         const $pageSize = state.$pageSize;
         const $virtualEnds = data.selectSignal(d => d.virtualEnds);
         const $dataLength = computed(() => this.#$dataSrc().length);
-        const $dataSize = computed(() => {
+        this.$dataSize = computed(() => {
             const viewType = state.$viewType();
             const dataLength = $dataLength();
             const currentPage = $currentPage();
@@ -4742,7 +4790,6 @@ class TableBuilderDataSource extends MatTableDataSource {
             }
             return ({ start: virtualEnds.start, end: virtualEnds.end });
         });
-        this.$dataSize = $dataSize;
     }
     connect() {
         return super.connect();
@@ -4778,13 +4825,13 @@ function mergeCustomCellMetaData(metaData1, metaData2) {
 class GroupByListComponent {
     tableStore = inject(TableStore);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set>\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey)\r\n  {\r\n    @if($index > 0)\r\n    {\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{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
             args: [{ selector: '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"] }]
+                    ], template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupByKey of tableStore.$groupByKeys(); track groupByKey)\r\n  {\r\n    @if($index > 0)\r\n    {\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{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}\n"] }]
         }] });
 
 class ProfilesMenuComponent {
@@ -4968,7 +5015,7 @@ class ResetMenuComponent {
     $widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length);
     $rowHeightSet = this.state.$userDefinedRowHeight;
     headerHeightSet = this.state.$userDefinedHeaderHeight;
-    pageSizeSet = this.state.$userDefinedPageSize;
+    pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)());
     showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
     $set = computed(() => {
         const arr = [];
@@ -5045,93 +5092,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
         }] });
 
 class TableVirtualScrollStrategy {
-    scrolledIndexChange;
-    dataLength = 0;
+    constructor(scrollContainer, dataStore) {
+        this.$rowHeight = scrollContainer.computedRowHeight;
+        this.$headerHeight = scrollContainer.computedHeaderHeight;
+        this.viewport = scrollContainer.viewport;
+        this.dataStore = dataStore;
+        this.$dataLength = scrollContainer.$dataLength;
+    }
+    dataStore;
     indexChange = new Subject();
+    scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
     viewport;
+    $dataLength;
+    $dataLengthChange = linkedSignal({
+        source: () => this.$dataLength(),
+        computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
+    });
     $rowHeight;
     $rowHeightChange = linkedSignal({
         source: () => this.$rowHeight(),
-        computation: (curr, previous) => ({ curr, previous: previous?.source || curr })
+        computation: (curr, previous) => {
+            return ({ curr, previous: previous == undefined ? curr : previous.source });
+        }
     });
     $headerHeight;
-    constructor(scrollContainer) {
-        this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
-        this.$rowHeight = scrollContainer.computedRowHeight;
-        this.$headerHeight = scrollContainer.computedHeaderHeight;
-    }
-    attach(viewport) {
-        this.viewport = viewport;
-        this.onDataLengthChanged();
-    }
+    $headerHeightChange = linkedSignal({
+        source: () => this.$headerHeight(),
+        computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
+    });
     contentScrolled$ = new Subject();
-    sub = subscriber(this.contentScrolled$.pipe(observeOn(animationFrameScheduler), debounceTime(20)), () => {
+    sub = subscriber(this.contentScrolled$.pipe(debounceTime(20), distinctUntilChanged()), offset => {
         this.updateContent('scroll');
     });
     onContentScrolled() {
-        this.contentScrolled$.next();
-    }
-    onDataLengthChanged() {
-    }
-    setDataLength(length) {
-        this.dataLength = length;
-        if (this.viewport && this.$rowHeight) {
-            this.viewport.setTotalContentSize(this.dataLength * this.$rowHeight());
-            // this.updateContent('data ' + dataTrigger);
-        }
-        this.updateContent('data ');
-    }
-    detach() { }
-    onContentRendered() { }
-    onRenderedOffsetChanged() {
-    }
-    scrollToIndex(index, behavior) {
+        this.contentScrolled$.next(this.viewport().measureScrollOffset());
     }
+    #onDataLengthChange = effect(() => {
+        const dataLengthChange = this.$dataLengthChange();
+        untracked(() => {
+            if (dataLengthChange.curr === dataLengthChange.previous)
+                return;
+            this.updateContent('data length');
+        });
+    });
     #onHeaderChange = effect(() => {
-        this.$headerHeight && this.$headerHeight();
-        this.updateContent('header height');
+        const headerHeightChange = this.$headerHeightChange();
+        untracked(() => {
+            if (headerHeightChange.curr === headerHeightChange.previous)
+                return;
+            this.updateContent('header height');
+        });
     });
     #onRowChange = effect(() => {
-        this.$rowHeight && this.$rowHeight();
-        this.updateContent('row height');
+        const rowHeightChange = this.$rowHeightChange();
+        untracked(() => {
+            if (rowHeightChange.curr === rowHeightChange.previous)
+                return;
+            this.updateContent('row height');
+        });
     });
+    $currentRange = signal({ start: 0, end: 0 });
     updateContent(trigger) {
-        if (!this.viewport || !this.$rowHeight) {
+        const viewport = this.viewport && this.viewport();
+        if (!viewport || !this.$rowHeight) {
             return;
         }
-        const currentContentHeight = +this.viewport._totalContentHeight.replace('px', '');
-        const newContentHeight = this.dataLength * this.$rowHeight();
+        const currentContentHeight = +viewport._totalContentHeight.replace('px', '');
+        const newContentHeight = this.$dataLength() * this.$rowHeight();
         if (currentContentHeight !== newContentHeight) {
-            this.viewport.setTotalContentSize(newContentHeight);
-            setTimeout(() => {
-                this.update(trigger);
-            }, 0);
+            viewport.setTotalContentSize(newContentHeight);
+            this.update(trigger, viewport, true);
             return;
         }
-        this.update(trigger);
+        this.update(trigger, viewport);
     }
-    update(trigger) {
-        if (!this.viewport || !this.$rowHeight) {
+    update(trigger, viewport, needsScroll = false) {
+        if (!viewport.getViewportSize())
             return;
-        }
         const rowHeightChangeEvent = this.$rowHeightChange();
         const rowHeight = rowHeightChangeEvent.curr;
         const rowHeightAdjustment = trigger === 'row height' ? rowHeightChangeEvent.curr / rowHeightChangeEvent.previous : 1;
-        const amountOfRows = Math.ceil((this.viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
-        const f = this.viewport.measureScrollOffset();
-        const offset = this.viewport.measureScrollOffset() * rowHeightAdjustment;
-        if (offset !== f) {
-            this.viewport.scrollToOffset(offset);
-        }
-        const buffer = 35;
+        const amountOfRows = Math.ceil((viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
+        const f = viewport.measureScrollOffset();
+        const offset = viewport.measureScrollOffset() * rowHeightAdjustment;
+        const buffer = 35 + Math.round((40 - rowHeight) / 10);
         const skip = Math.round(offset / rowHeight);
         const index = skip % 2 === 0 ? skip : skip - 1;
         const start = Math.max(0, index - buffer);
-        const end = Math.min(this.dataLength, index + amountOfRows + buffer);
-        this.viewport.setRenderedContentOffset(rowHeight * start);
-        this.viewport.setRenderedRange({ start, end });
+        const end = Math.min(this.$dataLength(), index + amountOfRows + buffer);
+        if (start > this.$dataLength()) {
+            this.viewport().scrollToOffset(0);
+        }
+        else if (f !== offset) {
+            if (offset < f)
+                viewport.scrollToOffset(offset);
+            else
+                setTimeout(() => {
+                    viewport.scrollToOffset(offset);
+                }, 0);
+        }
+        if (this.$currentRange().start === start && this.$currentRange().end === end) {
+            return;
+        }
+        this.$currentRange.set({ start, end });
+        viewport.setRenderedContentOffset(rowHeight * start);
+        this.dataStore.patchState({ virtualScrollOffset: offset });
+        viewport.setRenderedRange({ start, end });
         this.indexChange.next(index);
     }
+    attach(viewport) { }
+    onDataLengthChanged() { }
+    detach() { }
+    onContentRendered() { }
+    onRenderedOffsetChanged() { }
+    scrollToIndex(index, behavior) { }
 }
 
 class VirtualScrollContainer {
@@ -5149,7 +5223,13 @@ class VirtualScrollContainer {
     viewPort$ = toObservable(this.viewport).pipe(notNull());
     $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
     $renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
-    $virtualScrollOptions = computed(() => this.state.$tableSettings().virtualSettings);
+    $virtualScrollOptions = computed(() => {
+        if (this.state.$initializationState() >= InitializationState.Ready)
+            return this.state.$tableSettings().virtualSettings;
+        else
+            return undefined;
+    });
+    $optionsSet = computed(() => !!this.$virtualScrollOptions());
     $dataLength = computed(() => {
         const paginated = this.$usePaginator() && !this.$showAll();
         const pageSize = this.$pageSize();
@@ -5162,58 +5242,40 @@ class VirtualScrollContainer {
     constructor() {
         addEventListener('resize', this.resizeHandler);
     }
-    setViewportEffect = effect(() => {
+    #setViewportEffect = effect(() => {
         const viewport = this.viewport();
+        const options = this.$optionsSet();
         untracked(() => {
-            if (!!viewport) {
-                this.setSize(this.viewport().elementRef);
+            if (!!viewport && !!options) {
+                this.setSize(this.viewport().elementRef, 'initial');
             }
             ;
         });
     });
-    subscriber = subscriber();
     #onRenderedRangeEffect = effect(() => {
         const renderedRange = this.$renderedRange();
+        const viewport = this.viewport();
         if (!renderedRange)
             return;
         untracked(() => {
             this.dataStore.patchState({
                 virtualEnds: {
                     start: renderedRange.start,
-                    end: renderedRange.end + 25,
+                    end: renderedRange.end,
                 }
             });
-            this.setSize(this.viewport().elementRef);
-        });
-    });
-    #onDataLengthEffect = effect(() => {
-        const dataLength = this.$dataLength();
-        untracked(() => {
-            const renderedRange = this.$renderedRange();
-            this.scrollStrategy.setDataLength(dataLength);
-            if ((renderedRange?.start || 0) > dataLength) {
-                this.viewport().scrollToOffset(0);
-            }
-        });
-    });
-    #onOffsetEffect = effect(() => {
-        const offset = this.$offset();
-        untracked(() => {
-            this.dataStore.patchState({ virtualScrollOffset: offset });
+            if (!viewport)
+                return;
+            this.setSize(viewport.elementRef, 'rendered range');
         });
     });
-    $offset = computed(() => {
-        const viewport = this.viewport();
-        const scrolledIndexChange = this.$scrolledIndexChange();
-        if (!scrolledIndexChange || !viewport)
-            return 0;
-        return viewport.getOffsetToRenderedContentStart() ?? 0;
-    });
     ngOnDestroy() {
         removeEventListener('resize', this.resizeHandler);
     }
-    setSize(el) {
+    setSize(el, trigger) {
         const virtualScrollOptions = this.$virtualScrollOptions();
+        if (!virtualScrollOptions)
+            return;
         if (virtualScrollOptions.dynamicHeight) {
             this.calcDynamic(el);
             return;
@@ -5230,18 +5292,10 @@ class VirtualScrollContainer {
             height = maxViewPortHeightPx;
         this.setHeight(height, el);
     }
-    calcDynamic$ = new Subject();
-    $calcDynamic = toSignal(this.calcDynamic$.pipe(debounceTime$1(300)));
-    #onCalcDynamicEffect = effect(() => {
-        const el = this.$calcDynamic();
-        if (!el)
-            return;
-        untracked(() => {
-            this.calcDynamic(el);
-        });
-    });
     calcDynamic(el) {
         const virtualScrollOptions = this.$virtualScrollOptions();
+        if (!virtualScrollOptions)
+            return;
         const t = this.tableContainer.elementRef.nativeElement.querySelector(`#${TableContainerComponent.headerId}`);
         const rect = t?.getBoundingClientRect();
         const windowHeight = window.innerHeight;
@@ -5276,8 +5330,8 @@ class VirtualScrollContainer {
         this.dataStore.patchState({ virtualScrollOffset });
     }
     resizeHandler = () => {
-        if (this.viewport() && this.$virtualScrollOptions().dynamicHeight) {
-            this.setSize(this.viewport().elementRef);
+        if (this.viewport() && this.$virtualScrollOptions()?.dynamicHeight) {
+            this.setSize(this.viewport().elementRef, 'resize');
         }
     };
     computedRowHeight = computed(() => {
@@ -5301,7 +5355,7 @@ class VirtualScrollContainer {
             return 0;
         return parseTbSizeToPixels(virtualScrollOptions.dynamicalHeightBuffer) || 0;
     });
-    scrollStrategy = new TableVirtualScrollStrategy(this);
+    scrollStrategy = new TableVirtualScrollStrategy(this, this.dataStore);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
     <cdk-virtual-scroll-viewport>
@@ -5357,35 +5411,24 @@ class TableContainerComponent {
         parent: this.injector
     });
     $tableBuilder = input.required({ alias: 'tableBuilder' });
-    $tableId = input(undefined, { alias: 'tableId' });
-    $trackBy = input(undefined, { alias: 'trackBy' });
-    $inputFilters = model([], { alias: 'inputFilters' });
-    predicateInputFilters$ = toObservable(computed(() => this.$inputFilters().filter(isFunction$1)));
+    $tableIdInput = input(undefined, { alias: 'tableId' });
+    $trackByInput = input(undefined, { alias: 'trackBy' });
+    $inputFilters = input([], { alias: 'inputFilters' });
     $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' });
+    $indexColumnInput = input(false, { alias: 'indexColumn' });
+    $selectionColumnInput = input(false, { alias: 'selectionColumn' });
+    $stickyHeaderInput = input(true, { alias: 'stickyHeader' });
+    $stickyFooterInput = 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.$savableState);
-    state$ = outputFromObservable(this._state$, { alias: 'state' });
-    _data$ = new BehaviorSubject([]);
-    data$ = outputFromObservable(this._data$, { alias: 'data' });
-    $data = toSignal(this._data$, { initialValue: [] });
+    state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
+    $data = computed(() => this.$sortedAndFilteredData()?.value || []);
+    data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
+    $displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData);
     clearSelections() {
         this.$genericTable()?.$selection().clear(true);
     }
@@ -5409,14 +5452,44 @@ class TableContainerComponent {
     $useVirtual = this.state.$isVirtual;
     $collapsedFooter = this.state.$footerCollapsed;
     $collapsedHeader = this.state.$headerCollapsed;
-    $displayDataLength = computed(() => this.$displayData().length);
+    $displayDataLength = computed(() => this.$displayData()?.length || 0);
+    $tableBuilderSettings = computed(() => this.$tableBuilder().$settings());
+    $trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy);
+    $tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId);
+    $includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn);
+    $includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn);
+    $stickyHeader = computed(() => {
+        const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
+        if (settings != null) {
+            return settings;
+        }
+        return this.$stickyHeaderInput();
+    });
+    $stickyFooter = computed(() => this.$stickyFooterInput() || !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow);
+    $props = computed(() => {
+        const indexColumn = this.$includeIndexColumn();
+        const selectionColumn = this.$includeSelectionColumn();
+        const stickHeader = this.$stickyHeader();
+        const stickyFooter = this.$stickyFooter();
+        const groupHeaderTemplate = this.$groupHeaderTemplate();
+        const groupHeaderHeight = this.$groupHeaderHeight();
+        return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight });
+    });
+    #initTableBuilderIfNeeded = effect(() => {
+        const tb = this.$tableBuilder();
+        untracked(() => {
+            if (tb)
+                this.$tableBuilder()?.prep(this.injector);
+        });
+    });
     #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
         const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
         if (!metaLoaded)
             return;
         const persistedState = this.$persistedState();
+        const tbSettings = this.$tableBuilderSettings();
         untracked(() => {
-            this.state.setTableSettings(this.$tableBuilder().settings$);
+            this.state.setTableSettings(tbSettings);
             if (persistedState) {
                 persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
                 this.state.updateStateFromPersistedState(persistedState);
@@ -5481,14 +5554,32 @@ class TableContainerComponent {
             this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
         });
     });
-    #initializeDataEffect = effect(() => {
+    #setFilteredDataLengthEffect = effect(() => {
         const tableBuilder = this.$tableBuilder();
-        if (!tableBuilder)
+        const data = this.$sortedAndFilteredData();
+        if (!tableBuilder || !data)
             return;
         untracked(() => {
-            this.initializeData();
+            this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
         });
     });
+    #setDataSourceDataEffect = effect(() => {
+        const tableBuilder = this.$tableBuilder();
+        const flat = this.$filteredSortedAndGrouped();
+        if (!tableBuilder || !flat)
+            return;
+        untracked(() => {
+            const data = flat.displayData;
+            this.dataSource.setData(data);
+            this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
+        });
+    });
+    #destroyRef = inject(DestroyRef).onDestroy(() => {
+        const tableId = this.$tableId();
+        if (tableId) {
+            this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.$savableState() });
+        }
+    });
     $persistedState = computed(() => {
         const tableId = this.$tableId();
         if (tableId) {
@@ -5502,12 +5593,7 @@ class TableContainerComponent {
         }
         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$);
+    $tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData());
     $allMetaDatas = computed(() => {
         const tableBuilderMetaData = this.$tableBuilderMetaData();
         if (!tableBuilderMetaData)
@@ -5516,47 +5602,118 @@ class TableContainerComponent {
         const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
         return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
     });
-    $displayData = signal([]);
-    ngOnDestroy() {
-        const tableId = this.$tableId();
-        if (tableId) {
-            this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.$savableState() });
+    $preds = computed(() => {
+        const predicateInputFilters = this.$inputFilters().filter(isFunction$1);
+        const notSavableFilterDirectives = this.$allFilterDirectives()
+            .filter(d => !d.savable)
+            .map(d => d.$filter())
+            .filter(d => !!d && needsFilterCreation(d))
+            .map(d => createFilterFunc(d));
+        return [...predicateInputFilters, ...notSavableFilterDirectives];
+    });
+    $predicateFiltersState = linkedSignal({
+        source: this.$preds,
+        computation: (curr, previous) => {
+            if (!previous?.value)
+                return ({ value: updateFilterPredicateState({ allFilters: [] }, curr), timestamp: new Date().getTime() });
+            return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: new Date().getTime() });
         }
-    }
-    initializeData() {
-        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()),
-            predicateFilters$.pipe(scan$1(updateFilterPredicateState, { allFilters: [] }), timestamp$1())
-        ])
-            .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 flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp$1()), this.state.groupByKeys$.pipe(timestamp$1()), this.state.expandedGroups$.pipe(timestamp$1())]).pipe(scan$1(updateGroupByState, initialGroupByState), map(({ displayData }) => displayData), defaultShareReplay());
-        this.state.on(sortedAndFilteredData$, (data) => {
-            this._data$.next(data);
-            this.dataStore.patchState({ sortedFilteredDataLength: data.length });
+    });
+    $savableFiltersState = linkedSignal({
+        source: this.state.$filters,
+        computation: (curr, previous) => {
+            if (!previous?.value)
+                return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: new Date().getTime() });
+            return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: new Date().getTime() });
+        }
+    });
+    $allFilterStatesTimeStamped = computed(() => {
+        if (!this.$isInitializationState(InitializationState.Ready)())
+            return undefined;
+        return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: new Date().getTime() });
+    });
+    $sortStateTimeStamped = linkedSignal({
+        source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
+        computation: (curr, prev) => {
+            if (!curr)
+                return undefined;
+            if (!prev?.value)
+                return ({ value: updateSortState(initialSortState, curr), timestamp: new Date().getTime() });
+            return ({ value: updateSortState(prev.value.value, curr), timestamp: new Date().getTime() });
+        }
+    });
+    $allData = computed(() => this.$tableBuilder()?.$data() || []);
+    $allDataTimeStamped = computed(() => {
+        const data = this.$allData();
+        if (!data)
+            return undefined;
+        return ({
+            value: data,
+            timestamp: new Date().getTime()
         });
-        this.state.on(flatGrouped$, (data) => {
-            this.dataSource.setData(data);
-            this.$displayData.set(data);
-            this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
+    });
+    $allTimeStamped = computed(() => {
+        const data = this.$allDataTimeStamped();
+        const sort = this.$sortStateTimeStamped();
+        const filter = this.$allFilterStatesTimeStamped();
+        if (!data?.value || !sort?.value || !filter?.value)
+            return undefined;
+        return ({
+            data,
+            sort,
+            filter
         });
-    }
+    });
+    $sortedAndFilteredData = linkedSignal({
+        source: this.$allTimeStamped,
+        computation: (values, prev) => {
+            const init = this.$isInitializationState(InitializationState.Ready);
+            if (!values || !init)
+                return undefined;
+            const { data, filter, sort } = values;
+            const val = prev?.value?.value || data.value;
+            const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
+            return ({ value: filteredData, timestamp: new Date().getTime() });
+        }
+    });
+    $timestampedGroups = computed(() => ({ value: this.state.$groupByKeys(), timestamp: new Date().getTime() }));
+    $timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: new Date().getTime() }));
+    $dataAndGroupsTimestamped = computed(() => {
+        const data = this.$sortedAndFilteredData();
+        const groups = this.$timestampedGroups();
+        const expanded = this.$timestampedExpanded();
+        if (!data)
+            return undefined;
+        return ({
+            data,
+            groups,
+            expanded
+        });
+    });
+    $filteredSortedAndGrouped = linkedSignal({
+        source: this.$dataAndGroupsTimestamped,
+        computation: (curr, prev) => {
+            if (!curr)
+                return undefined;
+            const val = prev?.value?.groupedData || [];
+            return updateGroupByState(val, curr, !prev?.value);
+        }
+    });
     $isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
     static headerId = 'tb-header-wrapper';
     headerId = TableContainerComponent.headerId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumn: { classPropertyName: "$indexColumn", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumn: { classPropertyName: "$selectionColumn", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $isSticky: { classPropertyName: "$isSticky", publicName: "isSticky", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooter: { classPropertyName: "$stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $inputFilters: "inputFiltersChange", selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"l.menu()\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n\r\n          <lib-table-header-menu #l/>\r\n\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length){\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"l.menu()\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n\r\n          <lib-table-header-menu #l/>\r\n\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [NgTemplateOutlet,
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [
+                        NgTemplateOutlet,
                         PaginatorComponent,
                         MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
                         SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
-                        MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"l.menu()\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n\r\n          <lib-table-header-menu #l/>\r\n\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
+                        MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
+                    ], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length){\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapsedHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"l.menu()\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n\r\n          <lib-table-header-menu #l/>\r\n\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\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 {
@@ -5569,102 +5726,38 @@ class TableBuilderModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: TableBuilderModule, imports: [CommonModule,
-            MatDialogModule,
-            MatNativeDateModule,
-            RouterModule,
-            TableContainerComponent,
-            GenericTableComponent,
-            TableContainerComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: TableBuilderModule, imports: [TableContainerComponent,
             CustomCellDirective,
-            FilterComponent,
-            MatSlideToggleTbFilterDirective,
-            MatRadioButtonTbFilterDirective,
-            MatOptionTbFilterDirective,
-            MatCheckboxTbFilterDirective,
-            MatButtonToggleFilterDirective,
             TableFilterDirective,
             TableFilterStringContainsDirective,
-            TableWrapperDirective,
-            ResizeColumnDirective,
-            UtilitiesModule], exports: [GenericTableComponent,
-            TableContainerComponent,
+            TableWrapperDirective], exports: [TableContainerComponent,
             CustomCellDirective,
-            FilterComponent,
-            MatSlideToggleTbFilterDirective,
-            MatRadioButtonTbFilterDirective,
-            MatOptionTbFilterDirective,
-            MatCheckboxTbFilterDirective,
-            MatButtonToggleFilterDirective,
-            TableFilterDirective,
             TableFilterStringContainsDirective,
             TableWrapperDirective,
-            ResizeColumnDirective,
             UtilitiesModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableBuilderModule, providers: [
-            SpaceCasePipe,
-            DatePipe,
-            CurrencyPipe,
-            PhoneNumberPipe,
             MultiSortDirective,
-            TableBuilderStateStore,
-        ], imports: [CommonModule,
-            MatDialogModule,
-            MatNativeDateModule,
-            RouterModule,
-            TableContainerComponent,
-            GenericTableComponent,
-            TableContainerComponent,
-            FilterComponent,
-            UtilitiesModule, UtilitiesModule] });
+        ], imports: [TableContainerComponent, UtilitiesModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        MatDialogModule,
-                        MatNativeDateModule,
-                        RouterModule,
-                        TableContainerComponent,
-                        GenericTableComponent,
                         TableContainerComponent,
                         CustomCellDirective,
-                        FilterComponent,
-                        MatSlideToggleTbFilterDirective,
-                        MatRadioButtonTbFilterDirective,
-                        MatOptionTbFilterDirective,
-                        MatCheckboxTbFilterDirective,
-                        MatButtonToggleFilterDirective,
                         TableFilterDirective,
                         TableFilterStringContainsDirective,
                         TableWrapperDirective,
-                        ResizeColumnDirective,
-                        UtilitiesModule,
                     ],
                     exports: [
-                        GenericTableComponent,
                         TableContainerComponent,
                         CustomCellDirective,
-                        FilterComponent,
-                        MatSlideToggleTbFilterDirective,
-                        MatRadioButtonTbFilterDirective,
-                        MatOptionTbFilterDirective,
-                        MatCheckboxTbFilterDirective,
-                        MatButtonToggleFilterDirective,
-                        TableFilterDirective,
                         TableFilterStringContainsDirective,
                         TableWrapperDirective,
-                        ResizeColumnDirective,
                         UtilitiesModule,
                     ],
                     providers: [
-                        SpaceCasePipe,
-                        DatePipe,
-                        CurrencyPipe,
-                        PhoneNumberPipe,
                         MultiSortDirective,
-                        TableBuilderStateStore,
                     ]
                 }]
         }] });
@@ -5692,66 +5785,86 @@ class MatTableObservableDataSource extends MatTableDataSource {
 }
 
 class TableBuilder {
-    metaData$;
-    data$;
-    settings$;
+    data;
+    metaData;
+    settings;
+    #$metaData;
+    #$data;
+    #$settings;
+    $metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined);
+    $settings = computed(() => this.$initialized() ? this.#$settings() : undefined);
+    metaNeedsPrep = false;
+    dataIsObservable = false;
+    settingsIsObservable = false;
+    $initialized = signal(false);
     constructor(data, metaData, settings = new GeneralTableSettings()) {
-        this.settings$ = this.coerceSettingsToObservable(settings)
-            .pipe(defaultShareReplay());
-        this.data$ = this.coerceToObservable(data, this.settings$)
-            .pipe(notNull(), defaultShareReplay());
-        this.metaData$ = metaData ?
-            this.coerceToObservable(metaData, this.settings$).pipe(defaultShareReplay())
-            :
-                this.data$.pipe(first$1(), map(d => this.createMetaData(d[0])), defaultShareReplay());
-    }
-    getData$() {
-        return this.metaData$.pipe(map(md => createDataCleaners(md)), switchMap(cleaner => this.data$.pipe(map((datas, ii) => {
-            return datas.map((data, i) => {
-                const cleaned = cleaner(data);
-                cleaned[initIndexSymbol] = i * ((ii % 2) + 1);
-                return cleaned;
-            });
-        }))), defaultShareReplay());
-    }
-    createMetaData(obj) {
-        return Object.keys(obj ?? {})
-            .map(key => ({
-            key,
-            fieldType: FieldType.Unknown,
-            order: -1
-        }));
-    }
-    coerceToObservable(arg, settings) {
-        if (isObservable(arg)) {
-            return arg;
+        this.data = data;
+        this.metaData = metaData;
+        this.settings = settings;
+        if (isObservable(data)) {
+            this.dataIsObservable = true;
         }
-        else if (isSignal(arg)) {
-            return settings.pipe(switchMap(s => {
-                this.assertInjector(s);
-                return toObservable(arg, { injector: s.injector });
-            }));
+        else {
+            this.#$data = isSignal(data) ? data : signal(data);
+        }
+        if (isObservable(metaData) || !metaData) {
+            this.metaNeedsPrep = true;
         }
         else {
-            return of(arg);
+            this.#$metaData = isSignal(metaData) ? metaData : signal(metaData);
         }
-    }
-    coerceSettingsToObservable(settings) {
         if (isObservable(settings)) {
-            return settings;
-        }
-        else if (isSignal(settings)) {
-            this.assertInjector(settings());
-            return toObservable(settings, { injector: settings().injector });
+            this.settingsIsObservable = true;
         }
         else {
-            return of(settings);
+            this.#$settings = isSignal(settings) ? settings : signal(settings);
+        }
+        if (!this.dataIsObservable && !this.settingsIsObservable && !this.metaNeedsPrep) {
+            this.$initialized.set(true);
         }
     }
-    assertInjector(s) {
-        if (!s.injector) {
-            throw new Error('Injector must be provided when passing a signal to table builder');
+    prep(injector) {
+        if (this.settingsIsObservable) {
+            this.#$settings = toSignal(this.settings, { injector, requireSync: true });
+        }
+        if (this.dataIsObservable) {
+            this.#$data = toSignal(this.data, { injector, initialValue: [] });
         }
+        if (this.metaNeedsPrep) {
+            if (this.metaData) {
+                this.#$metaData = toSignal(this.metaData, { injector, initialValue: [] });
+            }
+            else {
+                this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]));
+            }
+        }
+        this.$initialized.set(true);
+    }
+    #dataCleaners = computed(() => {
+        const metaData = this.$metaData();
+        if (!metaData)
+            return undefined;
+        return createDataCleaners(metaData);
+    });
+    $data = computed(() => {
+        const data = this.#$data();
+        const cleaners = this.#dataCleaners();
+        if (!data || !cleaners)
+            return [];
+        const cleanedData = data.map((data, i) => {
+            const cleaned = cleaners(data);
+            cleaned[initIndexSymbol] = i;
+            return cleaned;
+        });
+        return cleanedData;
+    });
+    createMetaData(obj) {
+        return Object.keys(obj ?? {})
+            .map(key => ({
+            key,
+            fieldType: FieldType.Unknown,
+            order: -1
+        }));
     }
 }
 const CreateTableBuilder = (reportDef$) => {
@@ -5977,5 +6090,5 @@ function setUpStoreFactoryOld(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, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PaginatorOptions, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, parseTbSizeToPixels, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, setUpStoreFactoryOld, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PaginatorOptions, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnFooterSettings, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, parseTbSizeToPixels, phoneFormatter, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, setUpStoreFactoryOld, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map