@one-paragon/angular-utilities 2.3.11 → 2.3.13

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, signal, computed, isSignal, effect, untracked, InjectionToken, Injectable, runInInjectionContext, input, Renderer2, ElementRef, booleanAttribute, Pipe, makeEnvironmentProviders, ChangeDetectionStrategy, Component, HostListener, EventEmitter, Output, ContentChildren, ChangeDetectorRef, output, viewChild, EnvironmentInjector, createComponent, linkedSignal, contentChild, forwardRef, contentChildren, provideAppInitializer } from '@angular/core';
+import { Input, Directive, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, signal, computed, isSignal, effect, untracked, InjectionToken, Injectable, runInInjectionContext, input, Renderer2, ElementRef, booleanAttribute, Pipe, makeEnvironmentProviders, HostListener, ChangeDetectionStrategy, Component, EventEmitter, Output, ContentChildren, ChangeDetectorRef, output, viewChild, EnvironmentInjector, createComponent, linkedSignal, contentChild, forwardRef, contentChildren, provideAppInitializer } from '@angular/core';
 import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import * as i1 from 'rxjs';
 import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, pipe, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp } from 'rxjs';
@@ -18,7 +18,8 @@ import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@angular/forms';
 import { NgControl, NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatOption } from '@angular/material/core';
-import { DatePipe, CurrencyPipe, NgTemplateOutlet, formatDate, formatCurrency, DecimalPipe, formatNumber, CommonModule, AsyncPipe } from '@angular/common';
+import { DatePipe, CurrencyPipe, formatDate, formatCurrency, NgTemplateOutlet, DecimalPipe, formatNumber, CommonModule, AsyncPipe } from '@angular/common';
+import { MatDialog, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { ComponentStore } from '@ngrx/component-store';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDropList, CDK_DROP_LIST, transferArrayItem } from '@angular/cdk/drag-drop';
@@ -28,7 +29,6 @@ import * as i3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-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 from '@angular/material/tooltip';
@@ -857,6 +857,7 @@ class TableWrapperHeaderSettings {
         this.hideSort = false;
         this.collapse = false;
         this.showTitleWhenCollapsed = true;
+        this.title = undefined;
         this.headerHeight = undefined;
     }
 }
@@ -918,6 +919,7 @@ class NotPersistedTableSettings {
         this.hideColumnSettings = false;
         this.hideSort = false;
         this.showTitleWhenHeaderCollapsed = true;
+        this.title = undefined;
         this.hideHeader = false;
         this.hideColumnHeaderFilters = false;
         this.hideColumnHeader = false;
@@ -938,6 +940,7 @@ class NotPersistedTableSettings {
             newNpts.hideFilter = tableSettings.headerSettings?.hideFilter ?? newNpts.hideFilter;
             newNpts.hideSort = tableSettings.headerSettings?.hideSort ?? newNpts.hideSort;
             newNpts.showTitleWhenHeaderCollapsed = tableSettings.headerSettings?.showTitleWhenCollapsed ?? newNpts.showTitleWhenHeaderCollapsed;
+            newNpts.title = tableSettings.headerSettings?.title ?? newNpts.title;
             newNpts.hideHeader = tableSettings.headerSettings?.hideHeader ?? newNpts.hideHeader;
             newNpts.hideColumnHeaderFilters = tableSettings.columnHeaderSettings?.noFilters ?? newNpts.hideColumnHeaderFilters;
             newNpts.hideColumnHeader = tableSettings.columnHeaderSettings?.noHeader ?? newNpts.hideColumnHeader;
@@ -1709,1366 +1712,1536 @@ function provideTableBuilder(config) {
     ]);
 }
 
-const isNull = (filterInfo) => {
-    const func = filterInfo.filterValue ?
-        (val) => val == null || val === ''
-        :
-            (val) => val != null && val !== '';
-    return func;
-};
-
-const stringEqualFunc = (filterInfo) => {
-    const equalsVal = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => prepareForStringCompare(val) === equalsVal);
-};
-const stringContainsFunc = (filterInfo) => {
-    const containsVal = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => prepareForStringCompare(val).includes(containsVal));
-};
-const stringDoesNotContainFunc = (filterInfo) => {
-    const doesNotContainVal = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => !prepareForStringCompare(val)?.includes(doesNotContainVal));
-};
-const stringStartsWithFunc = (filterInfo) => {
-    const startsWith = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => prepareForStringCompare(val).startsWith(startsWith));
-};
-const stringEndsWithFunc = (filterInfo) => {
-    const startsWith = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => prepareForStringCompare(val).endsWith(startsWith));
-};
-const multipleStringValuesEqualsFunc = (filterInfo) => {
-    const filterVals = filterInfo.filterValue.map((v) => prepareForStringCompare(v));
-    return ((val) => {
-        const v = prepareForStringCompare(val);
-        return filterVals.some((s) => v === s);
-    });
-};
-const StringFilterFuncs = {
-    [FilterType.StringEquals]: stringEqualFunc,
-    [FilterType.StringContains]: stringContainsFunc,
-    [FilterType.StringDoesNotContain]: stringDoesNotContainFunc,
-    [FilterType.StringStartWith]: stringStartsWithFunc,
-    [FilterType.StringEndsWith]: stringEndsWithFunc,
-    [FilterType.IsNull]: isNull,
-    [FilterType.In]: multipleStringValuesEqualsFunc,
-};
-const EnumFilterFuncs = {
-    [FilterType.IsNull]: isNull,
-    [FilterType.In]: multipleStringValuesEqualsFunc,
-};
-const prepareForStringCompare = (val) => (val?.toString().trim().toLowerCase());
-
-const numberEqalsFunc = (filterInfo) => (val) => {
-    return val === filterInfo.filterValue;
-};
-const numberNotEqualFunc = (filterInfo) => (val) => {
-    return val !== filterInfo.filterValue;
-};
-const numberGreaterThanFunc = (filterInfo) => (val) => {
-    return val > filterInfo.filterValue;
-};
-const numberLessThanFunc = (filterInfo) => (val) => {
-    return val < filterInfo.filterValue;
-};
-const numberBetweenFunc = (filterInfo) => {
-    const startVal = Number(filterInfo.filterValue.Start);
-    const endVal = Number(filterInfo.filterValue.End);
-    return ((val) => (val > startVal) && (val < endVal));
-};
-const multipleNumberValuesEqualsFunc = (filterInfo) => {
-    return ((val) => filterInfo.filterValue.some((value) => val === value));
-};
-const NumberFilterFuncs = {
-    [FilterType.NumberEquals]: numberEqalsFunc,
-    [FilterType.NumberNotEqual]: numberNotEqualFunc,
-    [FilterType.NumberGreaterThan]: numberGreaterThanFunc,
-    [FilterType.NumberLessThan]: numberLessThanFunc,
-    [FilterType.NumberBetween]: numberBetweenFunc,
-    [FilterType.IsNull]: isNull,
-    [FilterType.In]: multipleNumberValuesEqualsFunc,
-};
-
-const dateIsOnFunc = (filterInfo) => {
-    const isOnVal = new Date(filterInfo.filterValue).getTime();
-    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
-    return ((val) => clean(filterInfo, val).getTime() === isOnVal);
-};
-const dateIsNotOnFunc = (filterInfo) => {
-    const isNotOnVal = new Date(filterInfo.filterValue).getTime();
-    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
-    return ((val) => clean(filterInfo, val).getTime() !== isNotOnVal);
-};
-const dateIsOnOrAfterFunc = (filterInfo) => {
-    const afterVal = new Date(filterInfo.filterValue).getTime();
-    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
-    return ((val) => clean(filterInfo, val).getTime() >= afterVal);
-};
-const dateIsOnOrBeforeFunc = (filterInfo) => {
-    const beforeVal = new Date(filterInfo.filterValue).getTime();
-    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
-    return ((val) => clean(filterInfo, val).getTime() <= beforeVal);
-};
-const dateIsInFunc = (filterInfo) => {
-    const filterVals = filterInfo.filterValue.map(v => new Date(v).getTime());
-    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
-    return ((val) => {
-        const d = clean(filterInfo, val).getTime();
-        return filterVals.some((f) => f === d);
-    });
-};
-const dateBetweenFunc = (filterInfo) => {
-    const startVal = new Date(filterInfo.filterValue.Start);
-    const endVal = new Date(filterInfo.filterValue.End);
-    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
-    return ((val) => {
-        const cleanedVal = clean(filterInfo, val);
-        return cleanedVal >= startVal && cleanedVal <= endVal;
-    });
-};
-const cleanDateTime = (filterInfo, val) => {
-    if (!!DateFilterFuncs[filterInfo.filterType]) {
-        const d = new Date(val);
-        d.setHours(0, 0, 0, 0);
-        return d;
+class PreventEnterDirective {
+    onKeyDown() {
+        return false;
     }
-    return val;
-};
-const DateFilterFuncs = {
-    [FilterType.DateIsOn]: dateIsOnFunc,
-    [FilterType.DateIsNotOn]: dateIsNotOnFunc,
-    [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
-    [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
-    [FilterType.DateBetween]: dateBetweenFunc,
-    [FilterType.In]: dateIsInFunc,
-    [FilterType.IsNull]: isNull,
-};
-const DateTimeFilterFuncs = {
-    ...DateFilterFuncs,
-    [FilterType.DateTimeIsAt]: dateIsOnFunc,
-    [FilterType.DateTimeIsNotAt]: dateIsNotOnFunc,
-    [FilterType.DateTimeAtOrAfter]: dateIsOnOrAfterFunc,
-    [FilterType.DateTimeAtOrBefore]: dateIsOnOrBeforeFunc,
-    [FilterType.DateTimeBetween]: dateBetweenFunc,
-    [FilterType.In]: dateIsInFunc,
-    [FilterType.IsNull]: isNull,
-};
-
-const booleanEqualsFunc = (filterInfo) => (val) => {
-    return filterInfo.filterValue === val;
-};
-const BooleanFilterFuncs = {
-    [FilterType.BooleanEquals]: booleanEqualsFunc,
-    [FilterType.IsNull]: isNull,
-};
-
-function sortData(data, sorted) {
-    return data.sort(compareT(sorted));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
-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;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PreventEnterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'preventEnter',
+                }]
+        }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
+
+class StopPropagationDirective {
+    onClick(event) {
+        event.stopPropagation();
     }
-    for (let index = 0; index < data.length; index++) {
-        const element = data[index];
-        const hide = !filters.every(filter => filter(element));
-        if (hide || resetAll) {
-            element[tbNoShowSymbol] = hide;
-        }
+    onMousedown(event) {
+        event.stopPropagation();
     }
-    return data;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: StopPropagationDirective, isStandalone: true, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
 }
-const tbNoShowSymbol = Symbol('tb_no_show');
-function compareT(criteria) {
-    const transforms = criteria.reduce((acc, c) => {
-        acc[c.active] = {
-            transform: c.sortBy ? c.sortBy : getFactory(c.active), nulls: c.nulls === 'first' ? -1 : 1
-        };
-        return acc;
-    }, {});
-    return function (a, b) {
-        for (let index = 0; index < criteria.length; index++) {
-            const c = criteria[index];
-            const d = transforms[c.active];
-            const nullValue = d.nulls;
-            if (a == null) {
-                if (b == null)
-                    return 0;
-                return nullValue;
-            }
-            if (b == null)
-                return -nullValue;
-            const transform = d.transform;
-            const aVal = transform(a);
-            const bVal = transform(b);
-            if (aVal == null) {
-                if (bVal == null)
-                    return 0;
-                return nullValue;
-            }
-            if (bVal == null)
-                return -nullValue;
-            if (aVal < bVal)
-                return c.direction === 'asc' ? -1 : 1;
-            if (aVal > bVal)
-                return c.direction === 'asc' ? 1 : -1;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StopPropagationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[stop-propagation]",
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }], onMousedown: [{
+                type: HostListener,
+                args: ["mousedown", ["$event"]]
+            }] } });
+
+class AutoFocusDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.autoFocus = true;
+    }
+    ngAfterViewInit() {
+        if (this.autoFocus) {
+            setTimeout(() => {
+                this.elementRef.nativeElement.focus();
+            });
         }
-        return 0;
-    };
-}
-function getFactory(b) {
-    if (typeof b !== 'string')
-        return (a) => a[b];
-    if (!b.includes('.'))
-        return (a) => {
-            if (!a)
-                return a;
-            return a[b];
-        };
-    const arr = b.split('.');
-    return (a) => {
-        let val = a;
-        if (!a)
-            return a;
-        for (let index = 0; index < arr.length; index++) {
-            val = val[arr[index]];
-            if (val == undefined)
-                return undefined;
-            if (typeof val !== 'object' && index + 1 < arr.length)
-                return undefined;
-        }
-        return val;
-    };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[autoFocus]',
+                }]
+        }], propDecorators: { autoFocus: [{
+                type: Input
+            }] } });
 
-const filterFactoryMap = {
-    [FilterType.And]: (filter) => {
-        const filters = createFilterFuncs(filter.filterValue);
-        return (obj) => filters.every(f => f(obj));
-    },
-    [FilterType.In]: (filter) => {
-        const filters = createFilterFuncs(filter.filterValue);
-        return (obj) => filters.some(f => f(obj));
-    },
-};
-const filterTypeFuncMap = {
-    [FieldType.Array]: StringFilterFuncs,
-    [FieldType.Boolean]: BooleanFilterFuncs,
-    [FieldType.Currency]: NumberFilterFuncs,
-    [FieldType.Date]: DateFilterFuncs,
-    [FieldType.DateTime]: DateTimeFilterFuncs,
-    [FieldType.Enum]: EnumFilterFuncs,
-    [FieldType.Link]: StringFilterFuncs,
-    [FieldType.Number]: NumberFilterFuncs,
-    [FieldType.PhoneNumber]: StringFilterFuncs,
-    [FieldType.String]: StringFilterFuncs,
-    [FieldType.Unknown]: StringFilterFuncs,
-};
-const filterTypeMap = Object.entries(filterTypeFuncMap).reduce((acc, [key, value]) => ({ ...acc, [key]: Object.keys(value) }), {});
-function isCustomFilter(filter) {
-    return filter && filter.filterType === FilterType.Custom;
-}
-function isFilterInfo(filter) {
-    return filter && typeof filter.key === 'string' && filter.filterType !== FilterType.Custom;
-}
-const defaultPredicate = () => true;
-function createFilterFuncs(filters) {
-    return filters.filter(needsFilterCreation).map(createFilterFunc);
-}
-function needsFilterCreation(filter) {
-    if (isCustomFilter(filter)) {
-        return filter.active !== false;
-    }
-    return filter.filterValue != undefined && filter.active !== false;
-}
-function createFilterFunc(filter) {
-    if (isCustomFilter(filter)) {
-        return filter.active ? filter.predicate : defaultPredicate;
-    }
-    if (filter.filterValue == undefined) {
-        return defaultPredicate;
+class ClickSubjectDirective extends Subject {
+    constructor() {
+        super();
     }
-    const func = filterTypeFuncMap[filter.fieldType][filter.filterType](filter);
-    if (!func) {
-        if (filterFactoryMap[filter.filterType]) {
-            return filterFactoryMap[filter.filterType](filter);
-        }
+    set clickSubject(val) {
+        this._val = val;
     }
-    const cannotBeTrueForNull = !FalseyValueCanBeIncludedFilterTypes.includes(filter.filterType);
-    const getter = filter.filterBy || getFactory(filter.key);
-    return (rowObj) => {
-        const value = getter(rowObj);
-        return ((value == undefined) && cannotBeTrueForNull)
-            ? false
-            : func(value);
-    };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ClickSubjectDirective, isStandalone: true, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
 }
-const FalseyValueCanBeIncludedFilterTypes = [
-    FilterType.IsNull,
-    FilterType.NumberNotEqual,
-    FilterType.DateIsNotOn,
-    FilterType.StringDoesNotContain,
-];
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickSubjectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickSubject]',
+                    exportAs: 'clickSubject',
+                    host: {
+                        '(click)': 'next(this._val)'
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { clickSubject: [{
+                type: Input,
+                args: ['clickSubject']
+            }] } });
 
-const replaceInArrayWithClone = (arr, findMeth, actionOnClone = ((t) => { })) => {
-    const index = arr.findIndex(findMeth);
-    const clonedArray = [...arr];
-    const t = clonedArray[index];
-    clonedArray[index] =
-        t != null && typeof t === 'object' ?
-            Array.isArray(t) ?
-                [...t]
-                : { ...t }
-            : t;
-    actionOnClone(clonedArray[index]);
-    return clonedArray;
-};
+class ClickEmitterDirective extends Subject {
+    constructor() {
+        super();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ClickEmitterDirective, isStandalone: true, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickEmitterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickEmitter]',
+                    exportAs: 'clickEmitter',
+                    host: {
+                        '(click)': 'next(true)'
+                    },
+                }]
+        }], ctorParameters: () => [] });
 
-const orderedStateVisibleMetaData = (state) => {
-    const ordered = orderStateMetaData(state);
-    const orderedVisible = ordered
-        .filter(metaData => !state.hiddenKeys.includes(metaData.key) && state.metaData[metaData.key].fieldType !== FieldType.Hidden);
-    return orderedVisible;
-};
-const orderedCodeVisibleMetaData = (state) => orderStateMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
-const orderStateMetaData = (state) => {
-    return orderMetaData(state.metaData, state.userDefined.order);
-};
-const orderMetaData = (metaData, userDefined) => {
-    const userOrderArr = Object.entries(userDefined);
-    return userOrderArr.length ?
-        Object.values(metaData).sort((a, b) => {
-            const orderA = userDefined[a.key];
-            const orderB = userDefined[b.key];
-            return order(orderA, orderB);
-        })
-        :
-            Object.values(metaData).sort((a, b) => {
-                const orderA = a.order;
-                const orderB = b.order;
-                return order(orderA, orderB);
-            });
-};
-function order(orderA, orderB) {
-    if (orderA == null && orderB == null) {
-        return 0;
+class DialogService {
+    constructor() {
+        this.allOpenOpDialogs = [];
     }
-    if (orderA == null) {
-        return 1;
+    addDialogRef(ref) {
+        this.allOpenOpDialogs.push(ref);
     }
-    if (orderB == null) {
-        return -1;
+    removeDialogRef(ref) {
+        this.allOpenOpDialogs = this.allOpenOpDialogs.filter(rf => ref.id !== rf.id);
     }
-    return orderA - orderB;
-}
-function cleanPersistedState(state, pState) {
-    const metas = Object.values(state.metaData);
-    const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
-        obj[filter.filterId] = pState.filters[filter.filterId];
-        return obj;
-    }, {});
-    const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
-    return ({ ...pState, filters, sorted });
-}
-const mapSaveableState = (s) => {
-    const savableState = { ...s };
-    keysToDelete.forEach(key => delete savableState[key]);
-    return savableState;
-};
-const createPreSort = (metaDatas) => {
-    return Object.values(metaDatas).filter((metaData) => !!metaData.preSort)
-        .sort(({ preSort: ps1 }, { preSort: ps2 }) => (ps1.precedence || Number.MAX_VALUE) - (ps2.precedence || Number.MAX_VALUE))
-        .map(({ key, preSort: { direction } }) => ({ active: key, direction }));
-};
-const mergeMeta = (orig, merge) => {
-    return {
-        key: orig.key,
-        displayName: merge.displayName ?? orig.displayName,
-        fieldType: merge.fieldType || orig.fieldType,
-        additional: { ...orig.additional, ...merge.additional },
-        order: merge.order ?? orig.order,
-        preSort: merge.preSort ?? orig.preSort,
-        width: merge.width ?? orig.width,
-        noExport: merge.noExport || orig.noExport,
-        noFilter: merge.noFilter || orig.noFilter,
-        customCell: merge.customCell ?? orig.customCell,
-        transform: merge.transform ?? orig.transform,
-        map: merge.map ?? orig.map,
-        click: merge.click ?? orig.click,
-        classes: merge.classes ?? orig.classes,
-        noSort: merge.noSort ?? orig.noSort,
-        template: merge.template ?? orig.template,
-        toolTip: merge.toolTip ?? orig.toolTip,
-        useIcon: merge.useIcon ?? orig.useIcon,
-        filterLogic: merge.filterLogic ?? orig.filterLogic,
-        sortLogic: merge.sortLogic ?? orig.sortLogic,
-        groupByLogic: merge.groupByLogic ?? orig.groupByLogic,
-    };
-};
-const initializeOrder = (state, mds) => {
-    const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
-    let userDefinedOrder = state.userDefined.order;
-    if (viewableMetaDataArr.some(meta => userDefinedOrder[meta.key] == null)) {
-        return {};
+    closeAllOpDialogs() {
+        this.allOpenOpDialogs.forEach(ref => ref.close());
     }
-    return userDefinedOrder;
-};
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class TableStore extends ComponentStore {
+class DialogWrapper {
     constructor() {
-        const config = inject(TableBuilderConfigToken);
-        const settingsFromConfig = {
-            persistedTableSettings: new PersistedTableSettings().merge(config.defaultTableSettings),
-            notPersistedTableSettings: new NotPersistedTableSettings().merge(config.defaultTableSettings),
+        this.vcr = inject(ViewContainerRef);
+        this.viewEmbedded = false;
+        this.viewContext = {
+            close: () => { },
         };
-        if (config.defaultTableSettings?.pageSize) {
-            settingsFromConfig.notPersistedTableSettings.paginatorSettings.pageSize = config.defaultTableSettings?.pageSize;
+    }
+    set template(tmpl) {
+        if (this.viewEmbedded) {
+            this.vcr.clear();
         }
-        const pageSize = settingsFromConfig.notPersistedTableSettings.paginatorSettings.pageSize || defaultTableState.pageSize;
-        const showAll = settingsFromConfig.notPersistedTableSettings.paginatorSettings.defaultAll || defaultTableState.showAll;
-        super({ ...defaultTableState, ...settingsFromConfig, pageSize, showAll });
-        this.$initializationState = this.selectSignal(state => state.initializationState);
-        this.$savableState = computed(() => {
-            const state = this.state();
-            return mapSaveableState(state);
-        });
-        this.$userDefinedOrder = this.selectSignal(state => state.userDefined.order);
-        this.metaData$ = this.select(state => state.metaData);
-        this.$metaData = this.selectSignal(state => state.metaData);
-        this.$metaDataArray = this.selectSignal(this.$metaData, this.$userDefinedOrder, orderMetaData);
-        this.$orderedCodeVisibleMetaDatas = this.selectSignal(this.$metaDataArray, (mds) => mds.filter(m => m.fieldType !== FieldType.Hidden), { equal: (a, b) => b.length === a.length && b.every((s, i) => a[i].key === s.key) });
-        this.$getMetaData = (key) => computed(() => {
-            const metaData = this.state().metaData[key];
-            if (!metaData)
-                console.warn(`Meta data with key ${key} not found`);
-            return metaData;
-        });
-        this.$hiddenKeys = this.selectSignal(state => state.hiddenKeys);
-        this.$orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys, (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
-        this.$getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
-        this.$tableSettingsMinWidth = this.selectSignal(state => parseTbSizeToPixels(state.notPersistedTableSettings.minColumnWidth));
-        this.$getUserDefinedWidth = (key) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
-        this.$filters = this.selectSignal(state => state.filters);
-        this.filters$ = this.select(state => state.filters);
-        this.$getFilter = (filterId) => {
-            return this.selectSignal(this.$filters, filters => filters[filterId]);
+        this.viewEmbedded = true;
+        this.vcr.createEmbeddedView(tmpl, this.viewContext);
+    }
+    set close(closeMethod) {
+        this.viewContext.close = closeMethod;
+    }
+    set data(value) {
+        this.viewContext.$implicit = value;
+        this.viewContext.opDialog = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogWrapper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dialog-wrapper',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+const defaultDialogConfig = {
+    maxHeight: '95vh',
+};
+class DialogDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.dialog = inject(MatDialog);
+        this.dialogConfig = inject(MAT_DIALOG_DEFAULT_OPTIONS, { optional: true }) || {};
+        this.service = inject(DialogService);
+        this.opDialogClosed = new EventEmitter();
+        this._dialogConfig = { ...this.dialogConfig, ...defaultDialogConfig };
+        this.opDialogAddDialogClass = true;
+        this.injector = inject(Injector);
+        this.subscriber = subscriber(this.injector);
+        this._data = new Subject();
+        this.setDataAndState = (data) => {
+            if (data) {
+                this.opDialogConfig.data = data;
+                this.setDialogState(true);
+            }
+            else {
+                this.setDialogState(false);
+            }
         };
-        this.$preSort = computed(() => createPreSort(this.$metaData()));
-        this._$selectSorted = this.selectSignal(state => state.sorted, {
-            equal: sortsAreSame
-        });
-        this.$selectSorted = computed(() => {
-            const metaDict = this.$metaData();
-            return this._$selectSorted().map(s => {
-                const meta = metaDict[s.active];
-                const sortLogic = meta.sortLogic;
-                const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
-                return ({ ...s, ...sortLogic, sortBy });
-            });
-        });
-        this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
-        this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
-        this.sort$ = toObservable(this.$getSorts);
-        this.$getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
-        this.getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
-        this.$userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
-        this.$userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
-        this.$userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
-        this.$footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
-        this.$headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
-        this.$groupBy = this.selectSignal(state => state.groupBy);
-        this.$groupByKeys = this.selectSignal(this.$groupBy, this.$metaDataArray, (gb, mds) => gb.map(gbk => gbk.key).filter(bg => mds.some(md => md.key === bg)), {
-            equal: (prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)
+    }
+    set opDialogConfig(config) {
+        this._dialogConfig = { ...this.dialogConfig, ...defaultDialogConfig, ...config };
+    }
+    get opDialogConfig() {
+        return this._dialogConfig;
+    }
+    set setControl(i) {
+        let o;
+        if (isSignal(i)) {
+            o = toObservable(i, { injector: this.injector });
+        }
+        else {
+            o = i;
+        }
+        untracked(() => {
+            this.subscriber.on(o, this.setDataAndState);
         });
-        this.groupByKeys$ = this.select(state => state.groupBy.map(gbk => gbk.key))
-            .pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)));
-        this.expandedGroups$ = this.select(state => state.groupBy).pipe(distinctUntilChanged((a, b) => {
-            const aa = a.flatMap(g => g.expandedHeaders);
-            const bb = b.flatMap(g => g.expandedHeaders);
-            return aa.length === bb.length && aa.every((k) => bb.includes(k));
-        }));
-        this.$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));
-            } });
-        this.$getIsExpanded = (columnKey, groupUniqueName) => {
-            return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupUniqueName)).length);
-        };
-        this.$currentPage = this.selectSignal(state => state.currentPage);
-        this.$pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
-        this.$showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
-        this.$tableSettings = this.selectSignal(state => {
-            const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
-            return ts;
+    }
+    close() {
+        this.dialogRef?.close();
+    }
+    initDialog() {
+        if (this.nativeElement) {
+            const rect = this.nativeElement.getBoundingClientRect();
+            const position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
+            this.opDialogConfig = { ...this.opDialogConfig, position };
+        }
+        if (this.opDialogAddDialogClass) {
+            this.opDialogConfig.panelClass = [...(Array.isArray(this.opDialogConfig.panelClass) ? this.opDialogConfig.panelClass : this.opDialogConfig.panelClass ? [this.opDialogConfig.panelClass] : []), 'opDialog'];
+        }
+        this.dialogRef = this.dialog.open(DialogWrapper, this.opDialogConfig);
+        this.componentWrapper = this.dialogRef.componentInstance;
+        this.componentWrapper.close = () => this.dialogRef?.close();
+        this.componentWrapper.data = this.opDialogConfig.data;
+        this.componentWrapper.template = this.templateRef;
+        if (!this.opDialogConfig.disableClose) {
+            this.service.addDialogRef(this.dialogRef);
+        }
+        const sub = this.dialogRef.afterClosed().subscribe(() => {
+            this.opDialogClosed.emit(true);
+            this.service.removeDialogRef(this.dialogRef);
+            this.dialogRef = undefined;
+            sub.unsubscribe();
         });
-        this.$notPersistedTableSettings = this.selectSignal(state => state.notPersistedTableSettings);
-        this.tableSettings$ = toObservable(this.$tableSettings);
-        this.$props = this.selectSignal(s => s.props);
-        this.$getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
-        this.$isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll
-            || state.showAll
-            || state.userDefined?.showAll);
-        this.$viewType = this.selectSignal(state => {
-            const usePaginator = state.notPersistedTableSettings.usePaginator;
-            const showAll = state.showAll || state.userDefined?.showAll;
-            const useVirtualScroll = state.notPersistedTableSettings.useVirtualScroll;
-            if (showAll || (useVirtualScroll && !usePaginator)) {
-                return 'virtual all';
-            }
-            else if (useVirtualScroll && usePaginator) {
-                return 'virtual paginator';
-            }
-            else if (usePaginator) {
-                return 'paginator';
+    }
+    setDialogState(open) {
+        if (open) {
+            if (!this.dialogRef) {
+                this.initDialog();
             }
             else {
-                return 'all';
+                this.componentWrapper.data = this.opDialogConfig.data;
             }
+        }
+        else if (!open && this.dialogRef) {
+            this.dialogRef.close();
+        }
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { opDialogAddDialogClass: "opDialogAddDialogClass", opDialogConfig: "opDialogConfig", setControl: ["opDialog", "setControl"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[opDialog]', }]
+        }], propDecorators: { opDialogClosed: [{
+                type: Output
+            }], opDialogAddDialogClass: [{
+                type: Input
+            }], opDialogConfig: [{
+                type: Input
+            }], setControl: [{
+                type: Input,
+                args: ['opDialog']
+            }], nativeElement: [{
+                type: Input,
+                args: ['opDialogOrigin']
+            }] } });
+
+class StylerDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.$stylesApplied = signal({});
+        this.$element = input.required({ alias: 'element' });
+        this.$styler = input.required({ alias: 'styler' });
+        this.#stylerEffect = effect(() => {
+            const styles = this.$styler();
+            untracked(() => {
+                const element = this.$element();
+                const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
+                    if (!val)
+                        return acc;
+                    if (typeof (val) === 'string') {
+                        acc[key] = val;
+                        this.el.nativeElement.style[key] = val;
+                    }
+                    else if (!val?.condition || val?.condition === true || val?.condition(element)) {
+                        const value = typeof (val.value) === 'string' ? val.value : val?.value(element);
+                        acc[key] = value;
+                        this.el.nativeElement.style[key] = value;
+                    }
+                    return acc;
+                }, {});
+                Object.keys(this.$stylesApplied()).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
+                    this.renderer.removeStyle(this.el.nativeElement, key);
+                });
+                this.$stylesApplied.set(toApply);
+            });
         });
-        this.resetState = this.updater((state) => {
-            const sorted = this.$preSort();
-            return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
-        });
-        this.resetPart = this.updater((state, part) => {
-            const newState = { ...state };
-            switch (part) {
-                case 'Sorting':
-                    newState.sorted = this.$preSort();
-                    return newState;
-                case 'Filters':
-                    newState.filters = {};
-                    return newState;
-                case 'Group By':
-                    newState.groupBy = [];
-                    return newState;
-                case 'Hidden Columns':
-                    newState.hiddenKeys = [];
-                    return newState;
-                case 'Column Widths':
-                    newState.userDefined.widths = {};
-                    newState.userDefined.table = {};
-                    return newState;
-                case 'Column Order':
-                    newState.userDefined.order = {};
-                    return newState;
-                case 'Page Size':
-                    delete newState.userDefined.pageSize;
-                    return newState;
-                case 'Show All':
-                    delete newState.userDefined.showAll;
-                    return newState;
-                case 'Row Height':
-                    delete newState.userDefined.rowHeight;
-                    return newState;
-                case 'Header Height':
-                    delete newState.userDefined.headerHeight;
-                    return newState;
+    }
+    #stylerEffect;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $styler: { classPropertyName: "$styler", publicName: "styler", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StylerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[styler]' }]
+        }] });
+
+class MatSlideToggleGroupDirective {
+    constructor() {
+        this.allowMultiple = false;
+        this._ready = new ReplaySubject(1);
+    }
+    set toggles(val) {
+        this._toggles = val;
+        this._ready.next(true);
+    }
+    get valueEmitter() {
+        return this._ready.pipe(switchMap$1(_ => this.getObs()));
+    }
+    getInitValue() {
+        const startValue = this._toggles.reduce((prev, cur) => {
+            if (!cur.name) {
+                throw new Error('toggle must have the name attribute set');
             }
-        });
-        this.updateStateFromPersistedState = this.updater((state, persistedState) => {
-            const incomingTableState = cleanPersistedState(state, persistedState);
-            const newState = this.updateStateFunc(state, incomingTableState);
-            newState.initializationState = state.initializationState <= InitializationState.MetaDataLoaded ? InitializationState.TableSettingsLoaded : state.initializationState;
-            return newState;
-        });
-        this.updateStateFunc = (state, incomingTableState) => {
-            const metaData = state.metaData;
-            const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
-                : state.initializationState <= InitializationState.Created ? createPreSort(metaData) : state.sorted;
-            return { ...state, ...incomingTableState, metaData, sorted };
-        };
-        this.setTableSettings = this.updater((state, settings) => {
-            const s = {
-                ...state,
-                persistedTableSettings: state.persistedTableSettings.merge(settings),
-                notPersistedTableSettings: state.notPersistedTableSettings.merge(settings),
-                initializationState: InitializationState.TableSettingsLoaded
-            };
-            s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
-            s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
-            return s;
-        });
-        this.setMetaData = this.updater((state, md) => {
-            const metaData = md
-                .reduce((prev, curr) => {
-                if (prev[curr.key]) {
-                    prev[curr.key] = mergeMeta(prev[curr.key], curr);
-                }
-                else {
-                    prev[curr.key] = curr;
+            prev[cur.name] = cur.checked;
+            return prev;
+        }, {});
+        return startValue;
+    }
+    getObs() {
+        var toggleChanges = merge(...this._toggles.map(toggle => toggle.change));
+        const startValue = this.getInitValue();
+        return toggleChanges.pipe(scan((prev, cur) => {
+            const toggleName = cur.source.name;
+            const newVal = { ...prev, [toggleName]: cur.checked };
+            if (cur.checked && !this.allowMultiple) {
+                Object.keys(prev)
+                    .filter(key => key !== toggleName && prev[key])
+                    .forEach(key => {
+                    newVal[key] = false;
+                    this._toggles.find(toggle => toggle.name === key).toggle();
+                });
+            }
+            return newVal;
+        }, startValue), startWith$1(startValue));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: MatSlideToggleGroupDirective, isStandalone: true, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[opMatSlideToggleGroup]',
+                }]
+        }], propDecorators: { allowMultiple: [{
+                type: Input
+            }], toggles: [{
+                type: ContentChildren,
+                args: [MatSlideToggle]
+            }], valueEmitter: [{
+                type: Output
+            }] } });
+
+class TrimWhitespaceDirective {
+    constructor() {
+        this.elem = inject(ElementRef);
+    }
+    onBlur() {
+        const inputString = this.elem.nativeElement.value;
+        if (inputString) {
+            const newValue = inputString.trim().replace(/\t/g, '');
+            if (inputString !== newValue) {
+                this.elem.nativeElement.value = newValue;
+                this.elem.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TrimWhitespaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[trimWhitespace]',
+                }]
+        }], propDecorators: { onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class FunctionPipe {
+    transform(func, ...args) {
+        if (typeof func === 'string') {
+            const [instance, ...tail] = args;
+            const method = instance[func].bind(instance);
+            return method(...tail);
+        }
+        return func(...args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FunctionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'func',
+                }]
+        }] });
+
+class ConditionalClassesDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.$element = input.required({ alias: 'element' });
+        this.$classes = input(undefined, { alias: 'conditionalClasses' });
+        this.classesApplied = [];
+        this.#onClasses = effect(() => {
+            const classes = this.$classes();
+            untracked(() => {
+                const element = this.$element();
+                let toApply = [];
+                if (classes) {
+                    toApply = Object.keys(classes)
+                        .filter(key => (classes[key] === true) || classes[key](element));
                 }
-                return prev;
-            }, {});
-            const sortedInitialized = state.sorted.length > 0;
-            const sorted = sortedInitialized ? state.sorted : createPreSort(metaData);
-            const order = initializeOrder(state, metaData);
-            const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
-            return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
-        });
-        this.showColumn = this.updater((state, key) => ({
-            ...state,
-            hiddenKeys: state.hiddenKeys.filter(k => k !== key),
-        }));
-        this.hideColumn = this.updater((state, key) => ({
-            ...state,
-            hiddenKeys: [...state.hiddenKeys.filter(k => k !== key), key],
-        }));
-        this.setHiddenColumns = this.updater((state, displayCols) => {
-            return ({ ...state, hiddenKeys: displayCols.filter(d => !d.visible).map(d => d.key) });
-        });
-        this.setUserDefinedWidth = this.updater((state, colWidths) => {
-            const userDefinedWidths = { ...state.userDefined.widths };
-            colWidths.forEach(cw => {
-                userDefinedWidths[cw.key] = cw.widthInPixel;
+                var classesNotYetApplied = toApply.filter(c => !this.classesApplied.includes(c));
+                var classesToRemove = this.classesApplied.filter(c => !toApply.includes(c));
+                classesToRemove.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
+                classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
+                this.classesApplied = toApply;
             });
-            return { ...state, userDefined: { ...state.userDefined, widths: userDefinedWidths } };
-        });
-        this.setUserDefinedOrder = this.updater((state, moved) => {
-            const { newOrder, oldOrder } = moved;
-            const mdsArr = orderedStateVisibleMetaData(state);
-            moveItemInArray(mdsArr, oldOrder, newOrder);
-            const userDefinedOrder = mdsArr.reduce((aggregate, current, index) => {
-                aggregate[current.key] = index;
-                return aggregate;
-            }, {});
-            return ({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } });
-        });
-        this.setUserDefinedRowHeight = this.updater((state, rowHeight) => {
-            return ({ ...state, userDefined: { ...state.userDefined, rowHeight } });
-        });
-        this.setUserDefinedHeaderHeight = this.updater((state, headerHeight) => {
-            return ({ ...state, userDefined: { ...state.userDefined, headerHeight } });
-        });
-        this.addFilter = this.updater((state, filter) => {
-            return this.addFiltersToState(state, [filter]);
-        });
-        this.addFilters = this.updater((state, filters) => {
-            return this.addFiltersToState(state, filters);
-        });
-        this.removeFilter = this.updater((state, filterId) => {
-            const filtersCopy = { ...state.filters };
-            delete filtersCopy[filterId];
-            return ({ ...state, filters: filtersCopy });
-        });
-        this.removeFilters = this.updater((state, filterIds) => {
-            const filtersCopy = { ...state.filters };
-            filterIds.forEach(id => { delete filtersCopy[id]; });
-            return ({ ...state, filters: filtersCopy });
         });
-        this.clearFilters = this.updater((state) => ({ ...state, filters: {} }));
-        this.addFiltersToState = (state, filters) => {
-            var customFilters = filters.filter(isCustomFilter);
-            var filterInfos = filters.filter(isFilterInfo);
-            const filtersObj = filterInfos
-                .filter(fltr => Object.keys(state.metaData).some(key => key === fltr.key) || console.warn(`Meta data with key ${fltr.key} not found`))
-                .reduce((filtersObj, filter) => {
-                if (!filter.filterId) {
-                    filter.filterId = crypto.randomUUID();
-                }
-                filtersObj[filter.filterId] = filter;
-                return filtersObj;
-            }, {});
-            customFilters.forEach(fltr => {
-                if (!fltr.filterId) {
-                    fltr.filterId = crypto.randomUUID();
-                }
-                filtersObj[fltr.filterId] = fltr;
-            });
-            return {
-                ...state,
-                filters: { ...state.filters, ...filtersObj }
-            };
+    }
+    #onClasses;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $classes: { classPropertyName: "$classes", publicName: "conditionalClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[conditionalClasses]',
+                }]
+        }] });
+
+class UtilitiesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
+            PhoneNumberPipe,
+            FunctionPipe,
+            StopPropagationDirective,
+            StylerDirective,
+            PreventEnterDirective,
+            AutoFocusDirective,
+            TrimWhitespaceDirective,
+            ClickSubjectDirective,
+            ClickEmitterDirective,
+            DialogDirective,
+            MatSlideToggleGroupDirective,
+            ConditionalClassesDirective], exports: [StopPropagationDirective,
+            PreventEnterDirective,
+            SpaceCasePipe,
+            PhoneNumberPipe,
+            FunctionPipe,
+            TrimWhitespaceDirective,
+            StylerDirective,
+            AutoFocusDirective,
+            ClickSubjectDirective,
+            ClickEmitterDirective,
+            DialogDirective,
+            MatSlideToggleGroupDirective,
+            ConditionalClassesDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, providers: [
+            DialogService
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        StopPropagationDirective,
+                        PreventEnterDirective,
+                        SpaceCasePipe,
+                        PhoneNumberPipe,
+                        FunctionPipe,
+                        TrimWhitespaceDirective,
+                        StylerDirective,
+                        AutoFocusDirective,
+                        ClickSubjectDirective,
+                        ClickEmitterDirective,
+                        DialogDirective,
+                        MatSlideToggleGroupDirective,
+                        ConditionalClassesDirective,
+                    ],
+                    imports: [
+                        SpaceCasePipe,
+                        PhoneNumberPipe,
+                        FunctionPipe,
+                        StopPropagationDirective,
+                        StylerDirective,
+                        PreventEnterDirective,
+                        AutoFocusDirective,
+                        TrimWhitespaceDirective,
+                        ClickSubjectDirective,
+                        ClickEmitterDirective,
+                        DialogDirective,
+                        MatSlideToggleGroupDirective,
+                        ConditionalClassesDirective,
+                    ],
+                    providers: [
+                        DialogService
+                    ]
+                }]
+        }] });
+
+function sortData(data, sorted) {
+    return data.sort(compareT(sorted));
+}
+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));
+        if (hide || resetAll) {
+            element[tbNoShowSymbol] = hide;
+        }
+    }
+    return data;
+}
+const tbNoShowSymbol = Symbol('tb_no_show');
+function compareT(criteria) {
+    const transforms = criteria.reduce((acc, c) => {
+        acc[c.active] = {
+            transform: c.sortBy ? c.sortBy : getFactory(c.active), nulls: c.nulls === 'first' ? -1 : 1
         };
-        this.setSort = this.updater((state, { key, direction }) => {
-            const sortArray = state.sorted.filter(s => s.active !== key);
-            if (direction) {
-                sortArray.unshift({ active: key, direction });
+        return acc;
+    }, {});
+    return function (a, b) {
+        for (let index = 0; index < criteria.length; index++) {
+            const c = criteria[index];
+            const d = transforms[c.active];
+            const nullValue = d.nulls;
+            if (a == null) {
+                if (b == null)
+                    return 0;
+                return nullValue;
             }
-            return {
-                ...state,
-                sorted: sortArray,
-            };
-        });
-        this.setAllSort = this.updater((state, sortArray) => {
-            return {
-                ...state,
-                sorted: sortArray,
-            };
-        });
-        this.setCurrentPage = this.updater((state, currentPage) => ({ ...state, currentPage }));
-        this.setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize }));
-        this.setUserDefinedPageSize = this.updater((state, pageSize) => ({ ...state, userDefined: { ...state.userDefined, pageSize } }));
-        this.setUserDefinedShowAll = this.updater((state, showAll) => ({ ...state, showAll, userDefined: { ...state.userDefined, showAll } }));
-        this.setProps = this.updater((state, props) => {
-            return ({ ...state, props });
-        });
-        this.setTableWidth = this.updater((state, widthInPixels) => ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
-        this.setInitializationState = this.updater((state, initializationState) => {
-            return { ...state, initializationState };
-        });
-        this.toggleCollapseHeader = this.updater((state) => {
-            const tableSettings = { ...state.persistedTableSettings };
-            tableSettings.collapseHeader = !tableSettings.collapseHeader;
-            return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
-        });
-        this.toggleCollapseFooter = this.updater((state, options) => {
-            const tableSettings = { ...state.persistedTableSettings };
-            tableSettings.collapseFooter = options?.collapseFooter ?? !tableSettings.collapseFooter;
-            return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
-        });
-        this.addGroupByKey = this.updater((state, metaDataKey) => ({
-            ...state,
-            groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [] }]
-        }));
-        this.removeGroupByKey = this.updater((state, groupByKey) => ({
-            ...state,
-            groupBy: state.groupBy.filter(key => groupByKey !== key.key)
-        }));
-        this.updateExpandedGroups = this.updater((state, data) => {
-            const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
-                gk.expandedHeaders = data.isExpanded ? [...gk.expandedHeaders, data.groupUniqueName] : gk.expandedHeaders.filter(g => g !== data.groupUniqueName);
-            });
-            return ({
-                ...state,
-                groupBy: gbk
-            });
-        });
-        this.expandAllOfGroup = this.updater((state, data) => {
-            const newGroupedData = state.groupBy.map(gb => ({
-                key: gb.key,
-                expandedHeaders: data.groupHeadersByKey[gb.key]?.map(g => g.uniqueName) ?? gb.expandedHeaders
-            }));
-            return ({ ...state, groupBy: newGroupedData });
-        });
-        this.collapseAll = this.updater((state) => ({
-            ...state,
-            groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [] }))
-        }));
-        this.collapseAllOfKey = this.updater((state, data) => ({
-            ...state,
-            groupBy: state.groupBy.map(gb => ({
-                key: gb.key,
-                expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders
-            }))
-        }));
-        this.setLinkMaps = this.updater((state, maps) => {
-            return ({ ...state, linkMaps: maps });
-        });
-        this.updateRowProps = this.updater((state, updates) => {
-            const notPersistedTableSettings = merge$1(new NotPersistedTableSettings(), (state.notPersistedTableSettings));
-            if (updates.rowClasses)
-                notPersistedTableSettings.rowClasses = updates.rowClasses;
-            if (updates.rowClick)
-                notPersistedTableSettings.rowClick = updates.rowClick;
-            if (updates.rowStyles)
-                notPersistedTableSettings.rowStyles = updates.rowStyles;
-            return ({ ...state, notPersistedTableSettings });
-        });
-        this.on = (srcObservable, func) => {
-            this.effect(() => srcObservable.pipe(tap(func)));
-            return this;
+            if (b == null)
+                return -nullValue;
+            const transform = d.transform;
+            const aVal = transform(a);
+            const bVal = transform(b);
+            if (aVal == null) {
+                if (bVal == null)
+                    return 0;
+                return nullValue;
+            }
+            if (bVal == null)
+                return -nullValue;
+            if (aVal < bVal)
+                return c.direction === 'asc' ? -1 : 1;
+            if (aVal > bVal)
+                return c.direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+    };
+}
+function getFactory(b) {
+    if (typeof b !== 'string')
+        return (a) => a[b];
+    if (!b.includes('.'))
+        return (a) => {
+            if (!a)
+                return a;
+            return a[b];
         };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore }); }
+    const arr = b.split('.');
+    return (a) => {
+        let val = a;
+        if (!a)
+            return a;
+        for (let index = 0; index < arr.length; index++) {
+            val = val[arr[index]];
+            if (val == undefined)
+                return undefined;
+            if (typeof val !== 'object' && index + 1 < arr.length)
+                return undefined;
+        }
+        return val;
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-const resetable = [
-    'Sorting',
-    'Filters',
-    'Group By',
-    'Hidden Columns',
-    'Column Widths',
-    'Column Order',
-    'Row Height',
-    'Header Height',
-    'Page Size',
-    'Show All',
-];
 
-class MultiSortDirective extends MatSort {
-    constructor() {
-        super();
-        this.state = inject(TableStore);
-        this.state.setSort(this.sortChange.pipe(distinctUntilChanged((f, s) => f.active === s.active && f.direction === s.direction), map(sc => ({ key: sc.active, direction: sc.direction }))));
-        this.state.on(this.state.sort$, (rules) => {
-            const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' };
-            const topActiveChanged = topRule.active !== this.active || '';
-            const topDirectionChanged = topRule.direction !== this.direction || '';
-            if (topActiveChanged || topDirectionChanged) {
-                this.active = topRule.active;
-                this.direction = topRule.direction;
-                this.sortChange.emit(topRule);
+function isPipe(o) {
+    return typeof (o.transform) === 'function';
+}
+function createTransformer(metaData, config, noIcons = false, forItem = false) {
+    const defaultFunc = getFactory(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 (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';
+            }
+            else if (metaData.additional?.boolean?.showForFalse?.icon) {
+                forFalse = metaData.additional?.boolean?.showForFalse?.icon;
+            }
+            return (value) => defaultFunc(value) ? forTrue : forFalse;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
-            { provide: MatSort, useExisting: MultiSortDirective }
-        ], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
+    return defaultFunc;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MultiSortDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[multiSort]',
-                    exportAs: 'multiSort',
-                    inputs: ['disabled: matSortDisabled'],
-                    providers: [
-                        { provide: MatSort, useExisting: MultiSortDirective }
-                    ],
-                }]
-        }], ctorParameters: () => [] });
-function sortsAreSame(a, b) {
-    if (a.length !== b.length) {
-        return false;
+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;
+    };
+}
+function dateFormatter(date, format) {
+    if (!date)
+        return;
+    return formatDate(date, format, 'en-US');
+}
+function currencyFormatter(amt) {
+    return formatCurrency(amt, 'en-US', '$');
+}
+
+function buildInAllValuesFilter(config, previousMeta, currentMeta, data, metaTimestamp, dataTimestamp, currentAllFilters) {
+    const currentAll = currentMeta.filter(m => {
+        const filterable = m.additional?.filterOptions?.filterableValues;
+        return filterable === 'all values' || filterable?.allValues === true;
+    });
+    if (dataTimestamp > metaTimestamp) {
+        return currentAll.reduce((dict, md) => {
+            dict[md.key] = buildFilter(data, md, config);
+            return dict;
+        }, {});
     }
-    for (let i = 0; i < a.length; i++) {
-        if (a[i].active !== b[i].active || a[i].direction !== b[i].direction) {
-            return false;
+    const previousAll = previousMeta.filter(m => {
+        const filterable = m.additional?.filterOptions?.filterableValues;
+        return filterable === 'all values' || filterable?.allValues === true;
+    });
+    const newCurrent = currentAll.filter(c => previousAll.every(p => c.key !== p.key));
+    if (newCurrent.length) {
+        const c = { ...currentAllFilters };
+        newCurrent.forEach(md => c[md.key] = buildFilter(data, md, config));
+        return c;
+    }
+    return currentAllFilters;
+}
+const blankValueFilter = '__tb_sp_blank';
+const blankValueAndEmptyStringFilter = '__tb_sp_BLANK';
+function buildFilter(data, metaData, config) {
+    const map = createTransformer(metaData, config, true, true);
+    const mapped = data.map(v => {
+        const mappedV = map(v);
+        return [mappedV?.toString(), mappedV];
+    });
+    const blankAsOption = metaData?.additional?.filterOptions?.filterableValues?.doNotIncludeBlanks !== true;
+    const stringsAsBlanks = metaData?.additional?.filterOptions?.filterableValues?.doNotTreatEmptyStringsAsBlanks !== true;
+    const blankAsOptionAndHasBlanks = blankAsOption && mapped.some(([, v]) => v == undefined || (stringsAsBlanks && v === ''));
+    if (blankAsOptionAndHasBlanks) {
+        if (stringsAsBlanks) {
+            mapped.push(['BLANK', blankValueAndEmptyStringFilter]);
+        }
+        else {
+            mapped.push(['BLANK', blankValueFilter]);
         }
     }
-    return true;
+    return [...new Map(mapped).values()].filter(v => v != undefined && (!blankAsOption || !stringsAsBlanks || v !== '')).sort((a, b) => {
+        const isSymbolA = typeof a === 'symbol';
+        const isSymbolB = typeof b === 'symbol';
+        if (isSymbolA || isSymbolB)
+            return 0; // keep symbols in place
+        return String(a).localeCompare(String(b)); // normal string sort
+    });
+}
+const splitOutBlankFilter = (arr) => {
+    const result = Object.groupBy(arr, v => isBlankValueFilter(v) ? 'blank' : 'values');
+    const blank = result.blank?.at(0);
+    const blankFilter = blank === blankValueFilter ?
+        (val) => val == undefined
+        : blank === blankValueAndEmptyStringFilter ? (val) => {
+            return (val === '' || val == null);
+        }
+            : undefined;
+    return ({
+        blankFilter,
+        values: result.values || [],
+    });
+};
+function isBlankValueFilter(val) {
+    return val === blankValueFilter || val === blankValueAndEmptyStringFilter;
+}
+function isNotBlankValueFilter(val) {
+    return !isBlankValueFilter(val);
 }
 
-class DateFilterComponent {
-    constructor() {
-        this.FilterType = FilterType;
+const isNull = (filterInfo) => {
+    const func = filterInfo.filterValue ?
+        (val) => val == null || val === ''
+        :
+            (val) => val != null && val !== '';
+    return func;
+};
+
+const stringEqualFunc = (filterInfo) => {
+    const equalsVal = prepareForStringCompare(filterInfo.filterValue);
+    return ((val) => prepareForStringCompare(val) === equalsVal);
+};
+const stringContainsFunc = (filterInfo) => {
+    const containsVal = prepareForStringCompare(filterInfo.filterValue);
+    return ((val) => prepareForStringCompare(val).includes(containsVal));
+};
+const stringDoesNotContainFunc = (filterInfo) => {
+    const doesNotContainVal = prepareForStringCompare(filterInfo.filterValue);
+    return ((val) => !prepareForStringCompare(val)?.includes(doesNotContainVal));
+};
+const stringStartsWithFunc = (filterInfo) => {
+    const startsWith = prepareForStringCompare(filterInfo.filterValue);
+    return ((val) => prepareForStringCompare(val).startsWith(startsWith));
+};
+const stringEndsWithFunc = (filterInfo) => {
+    const startsWith = prepareForStringCompare(filterInfo.filterValue);
+    return ((val) => prepareForStringCompare(val).endsWith(startsWith));
+};
+const multipleStringValuesEqualsFunc = (filterInfo) => {
+    const { blankFilter, values } = splitOutBlankFilter(filterInfo.filterValue);
+    const filterVals = values.map((v) => prepareForStringCompare(v));
+    const basicFunc = (val) => filterVals.some((s) => val === s);
+    const func = blankFilter ? ((val) => blankFilter(val) || basicFunc(val)) : basicFunc;
+    return ((val) => {
+        const v = prepareForStringCompare(val);
+        return func(v);
+    });
+};
+const StringFilterFuncs = {
+    [FilterType.StringEquals]: stringEqualFunc,
+    [FilterType.StringContains]: stringContainsFunc,
+    [FilterType.StringDoesNotContain]: stringDoesNotContainFunc,
+    [FilterType.StringStartWith]: stringStartsWithFunc,
+    [FilterType.StringEndsWith]: stringEndsWithFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleStringValuesEqualsFunc,
+};
+const EnumFilterFuncs = {
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleStringValuesEqualsFunc,
+};
+const prepareForStringCompare = (val) => (val?.toString().trim().toLowerCase());
+
+const numberEqalsFunc = (filterInfo) => (val) => {
+    return val === filterInfo.filterValue;
+};
+const numberNotEqualFunc = (filterInfo) => (val) => {
+    return val !== filterInfo.filterValue;
+};
+const numberGreaterThanFunc = (filterInfo) => (val) => {
+    return val > filterInfo.filterValue;
+};
+const numberLessThanFunc = (filterInfo) => (val) => {
+    return val < filterInfo.filterValue;
+};
+const numberBetweenFunc = (filterInfo) => {
+    const startVal = Number(filterInfo.filterValue.Start);
+    const endVal = Number(filterInfo.filterValue.End);
+    return ((val) => (val > startVal) && (val < endVal));
+};
+const multipleNumberValuesEqualsFunc = (filterInfo) => {
+    const { blankFilter, values } = splitOutBlankFilter(filterInfo.filterValue);
+    const basicFunc = (val) => values.some((s) => val === s);
+    const func = blankFilter ? ((val) => blankFilter(val) || basicFunc(val)) : basicFunc;
+    return func;
+};
+const NumberFilterFuncs = {
+    [FilterType.NumberEquals]: numberEqalsFunc,
+    [FilterType.NumberNotEqual]: numberNotEqualFunc,
+    [FilterType.NumberGreaterThan]: numberGreaterThanFunc,
+    [FilterType.NumberLessThan]: numberLessThanFunc,
+    [FilterType.NumberBetween]: numberBetweenFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleNumberValuesEqualsFunc,
+};
+
+const dateIsOnFunc = (filterInfo) => {
+    const isOnVal = new Date(filterInfo.filterValue).getTime();
+    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
+    return ((val) => clean(filterInfo, val).getTime() === isOnVal);
+};
+const dateIsNotOnFunc = (filterInfo) => {
+    const isNotOnVal = new Date(filterInfo.filterValue).getTime();
+    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
+    return ((val) => clean(filterInfo, val).getTime() !== isNotOnVal);
+};
+const dateIsOnOrAfterFunc = (filterInfo) => {
+    const afterVal = new Date(filterInfo.filterValue).getTime();
+    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
+    return ((val) => clean(filterInfo, val).getTime() >= afterVal);
+};
+const dateIsOnOrBeforeFunc = (filterInfo) => {
+    const beforeVal = new Date(filterInfo.filterValue).getTime();
+    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
+    return ((val) => clean(filterInfo, val).getTime() <= beforeVal);
+};
+const dateIsInFunc = (filterInfo) => {
+    const { blankFilter, values } = splitOutBlankFilter(filterInfo.filterValue);
+    const filterVals = values.map(v => new Date(v).getTime());
+    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
+    const basicFunc = (val) => filterVals.some((f) => f === val);
+    const func = blankFilter ? ((val) => blankFilter(val) || basicFunc(val)) : basicFunc;
+    return ((val) => {
+        const d = clean(filterInfo, val)?.getTime();
+        return func(d);
+    });
+};
+const dateBetweenFunc = (filterInfo) => {
+    const startVal = new Date(filterInfo.filterValue.Start);
+    const endVal = new Date(filterInfo.filterValue.End);
+    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
+    return ((val) => {
+        const cleanedVal = clean(filterInfo, val);
+        return cleanedVal >= startVal && cleanedVal <= endVal;
+    });
+};
+const cleanDateTime = (filterInfo, val) => {
+    if (!!DateFilterFuncs[filterInfo.filterType]) {
+        const d = new Date(val);
+        d.setHours(0, 0, 0, 0);
+        return d;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull)\r\n{\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: 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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
-                        MatInputModule, FormsModule, MatDatepickerModule
-                    ], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull)\r\n{\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
-        }], propDecorators: { info: [{
-                type: Input
-            }], CurrentFilterType: [{
-                type: Input
-            }] } });
+    return val;
+};
+const DateFilterFuncs = {
+    [FilterType.DateIsOn]: dateIsOnFunc,
+    [FilterType.DateIsNotOn]: dateIsNotOnFunc,
+    [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
+    [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
+    [FilterType.DateBetween]: dateBetweenFunc,
+    [FilterType.In]: dateIsInFunc,
+    [FilterType.IsNull]: isNull,
+};
+const DateTimeFilterFuncs = {
+    ...DateFilterFuncs,
+    [FilterType.DateTimeIsAt]: dateIsOnFunc,
+    [FilterType.DateTimeIsNotAt]: dateIsNotOnFunc,
+    [FilterType.DateTimeAtOrAfter]: dateIsOnOrAfterFunc,
+    [FilterType.DateTimeAtOrBefore]: dateIsOnOrBeforeFunc,
+    [FilterType.DateTimeBetween]: dateBetweenFunc,
+    [FilterType.In]: dateIsInFunc,
+    [FilterType.IsNull]: isNull,
+};
 
-class PreventEnterDirective {
-    onKeyDown() {
-        return false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PreventEnterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'preventEnter',
-                }]
-        }], propDecorators: { onKeyDown: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }] } });
+const booleanEqualsFunc = (filterInfo) => (val) => {
+    return filterInfo.filterValue === val;
+};
+const BooleanFilterFuncs = {
+    [FilterType.BooleanEquals]: booleanEqualsFunc,
+    [FilterType.IsNull]: isNull,
+};
 
-class StopPropagationDirective {
-    onClick(event) {
-        event.stopPropagation();
-    }
-    onMousedown(event) {
-        event.stopPropagation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: StopPropagationDirective, isStandalone: true, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
+const filterFactoryMap = {
+    [FilterType.And]: (filter) => {
+        const filters = createFilterFuncs(filter.filterValue);
+        return (obj) => filters.every(f => f(obj));
+    },
+    [FilterType.In]: (filter) => {
+        const filters = createFilterFuncs(filter.filterValue);
+        return (obj) => filters.some(f => f(obj));
+    },
+};
+const filterTypeFuncMap = {
+    [FieldType.Array]: StringFilterFuncs,
+    [FieldType.Boolean]: BooleanFilterFuncs,
+    [FieldType.Currency]: NumberFilterFuncs,
+    [FieldType.Date]: DateFilterFuncs,
+    [FieldType.DateTime]: DateTimeFilterFuncs,
+    [FieldType.Enum]: EnumFilterFuncs,
+    [FieldType.Link]: StringFilterFuncs,
+    [FieldType.Number]: NumberFilterFuncs,
+    [FieldType.PhoneNumber]: StringFilterFuncs,
+    [FieldType.String]: StringFilterFuncs,
+    [FieldType.Unknown]: StringFilterFuncs,
+};
+const filterTypeMap = Object.entries(filterTypeFuncMap).reduce((acc, [key, value]) => ({ ...acc, [key]: Object.keys(value) }), {});
+function isCustomFilter(filter) {
+    return filter && filter.filterType === FilterType.Custom;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StopPropagationDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[stop-propagation]",
-                }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ["click", ["$event"]]
-            }], onMousedown: [{
-                type: HostListener,
-                args: ["mousedown", ["$event"]]
-            }] } });
-
-class AutoFocusDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.autoFocus = true;
-    }
-    ngAfterViewInit() {
-        if (this.autoFocus) {
-            setTimeout(() => {
-                this.elementRef.nativeElement.focus();
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
+function isFilterInfo(filter) {
+    return filter && typeof filter.key === 'string' && filter.filterType !== FilterType.Custom;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AutoFocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[autoFocus]',
-                }]
-        }], propDecorators: { autoFocus: [{
-                type: Input
-            }] } });
-
-class ClickSubjectDirective extends Subject {
-    constructor() {
-        super();
-    }
-    set clickSubject(val) {
-        this._val = val;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ClickSubjectDirective, isStandalone: true, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
+const defaultPredicate = () => true;
+function createFilterFuncs(filters) {
+    return filters.filter(needsFilterCreation).map(createFilterFunc);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickSubjectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickSubject]',
-                    exportAs: 'clickSubject',
-                    host: {
-                        '(click)': 'next(this._val)'
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { clickSubject: [{
-                type: Input,
-                args: ['clickSubject']
-            }] } });
-
-class ClickEmitterDirective extends Subject {
-    constructor() {
-        super();
+function needsFilterCreation(filter) {
+    if (isCustomFilter(filter)) {
+        return filter.active !== false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ClickEmitterDirective, isStandalone: true, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
+    return filter.filterValue != undefined && filter.active !== false;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClickEmitterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickEmitter]',
-                    exportAs: 'clickEmitter',
-                    host: {
-                        '(click)': 'next(true)'
-                    },
-                }]
-        }], ctorParameters: () => [] });
-
-class DialogService {
-    constructor() {
-        this.allOpenOpDialogs = [];
-    }
-    addDialogRef(ref) {
-        this.allOpenOpDialogs.push(ref);
-    }
-    removeDialogRef(ref) {
-        this.allOpenOpDialogs = this.allOpenOpDialogs.filter(rf => ref.id !== rf.id);
+function createFilterFunc(filter) {
+    if (isCustomFilter(filter)) {
+        return filter.active ? filter.predicate : defaultPredicate;
     }
-    closeAllOpDialogs() {
-        this.allOpenOpDialogs.forEach(ref => ref.close());
+    if (filter.filterValue == undefined) {
+        return defaultPredicate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+    const func = filterTypeFuncMap[filter.fieldType][filter.filterType](filter);
+    if (!func) {
+        if (filterFactoryMap[filter.filterType]) {
+            return filterFactoryMap[filter.filterType](filter);
+        }
+    }
+    const canBeTrueForNull = FalseyValueCanBeIncludedFilterTypes.includes(filter.filterType)
+        || (filter.filterType === FilterType.In && filter.filterValue?.some(isBlankValueFilter));
+    const getter = filter.filterBy || getFactory(filter.key);
+    return (rowObj) => {
+        const value = getter(rowObj);
+        return ((value == undefined) && !canBeTrueForNull)
+            ? false
+            : func(value);
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+const FalseyValueCanBeIncludedFilterTypes = [
+    FilterType.IsNull,
+    FilterType.NumberNotEqual,
+    FilterType.DateIsNotOn,
+    FilterType.StringDoesNotContain,
+];
 
-class DialogWrapper {
-    constructor() {
-        this.vcr = inject(ViewContainerRef);
-        this.viewEmbedded = false;
-        this.viewContext = {
-            close: () => { },
-        };
-    }
-    set template(tmpl) {
-        if (this.viewEmbedded) {
-            this.vcr.clear();
-        }
-        this.viewEmbedded = true;
-        this.vcr.createEmbeddedView(tmpl, this.viewContext);
+const replaceInArrayWithClone = (arr, findMeth, actionOnClone = ((t) => { })) => {
+    const index = arr.findIndex(findMeth);
+    const clonedArray = [...arr];
+    const t = clonedArray[index];
+    clonedArray[index] =
+        t != null && typeof t === 'object' ?
+            Array.isArray(t) ?
+                [...t]
+                : { ...t }
+            : t;
+    actionOnClone(clonedArray[index]);
+    return clonedArray;
+};
+
+const orderedStateVisibleMetaData = (state) => {
+    const ordered = orderStateMetaData(state);
+    const orderedVisible = ordered
+        .filter(metaData => !state.hiddenKeys.includes(metaData.key) && state.metaData[metaData.key].fieldType !== FieldType.Hidden);
+    return orderedVisible;
+};
+const orderedCodeVisibleMetaData = (state) => orderStateMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
+const orderStateMetaData = (state) => {
+    return orderMetaData(state.metaData, state.userDefined.order);
+};
+const orderMetaData = (metaData, userDefined) => {
+    const userOrderArr = Object.entries(userDefined);
+    return userOrderArr.length ?
+        Object.values(metaData).sort((a, b) => {
+            const orderA = userDefined[a.key];
+            const orderB = userDefined[b.key];
+            return order(orderA, orderB);
+        })
+        :
+            Object.values(metaData).sort((a, b) => {
+                const orderA = a.order;
+                const orderB = b.order;
+                return order(orderA, orderB);
+            });
+};
+function order(orderA, orderB) {
+    if (orderA == null && orderB == null) {
+        return 0;
     }
-    set close(closeMethod) {
-        this.viewContext.close = closeMethod;
+    if (orderA == null) {
+        return 1;
     }
-    set data(value) {
-        this.viewContext.$implicit = value;
-        this.viewContext.opDialog = value;
+    if (orderB == null) {
+        return -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    return orderA - orderB;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogWrapper, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dialog-wrapper',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-const defaultDialogConfig = {
-    maxHeight: '95vh',
+function cleanPersistedState(state, pState) {
+    const metas = Object.values(state.metaData);
+    const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
+        obj[filter.filterId] = pState.filters[filter.filterId];
+        return obj;
+    }, {});
+    const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
+    return ({ ...pState, filters, sorted });
+}
+const mapSaveableState = (s) => {
+    const savableState = { ...s };
+    keysToDelete.forEach(key => delete savableState[key]);
+    return savableState;
 };
-class DialogDirective {
+const createPreSort = (metaDatas) => {
+    return Object.values(metaDatas).filter((metaData) => !!metaData.preSort)
+        .sort(({ preSort: ps1 }, { preSort: ps2 }) => (ps1.precedence || Number.MAX_VALUE) - (ps2.precedence || Number.MAX_VALUE))
+        .map(({ key, preSort: { direction } }) => ({ active: key, direction }));
+};
+const mergeMeta = (orig, merge) => {
+    return {
+        key: orig.key,
+        displayName: merge.displayName ?? orig.displayName,
+        fieldType: merge.fieldType || orig.fieldType,
+        additional: { ...orig.additional, ...merge.additional },
+        order: merge.order ?? orig.order,
+        preSort: merge.preSort ?? orig.preSort,
+        width: merge.width ?? orig.width,
+        noExport: merge.noExport || orig.noExport,
+        noFilter: merge.noFilter || orig.noFilter,
+        customCell: merge.customCell ?? orig.customCell,
+        transform: merge.transform ?? orig.transform,
+        map: merge.map ?? orig.map,
+        click: merge.click ?? orig.click,
+        classes: merge.classes ?? orig.classes,
+        noSort: merge.noSort ?? orig.noSort,
+        template: merge.template ?? orig.template,
+        toolTip: merge.toolTip ?? orig.toolTip,
+        useIcon: merge.useIcon ?? orig.useIcon,
+        filterLogic: merge.filterLogic ?? orig.filterLogic,
+        sortLogic: merge.sortLogic ?? orig.sortLogic,
+        groupByLogic: merge.groupByLogic ?? orig.groupByLogic,
+    };
+};
+const initializeOrder = (state, mds) => {
+    const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
+    let userDefinedOrder = state.userDefined.order;
+    if (viewableMetaDataArr.some(meta => userDefinedOrder[meta.key] == null)) {
+        return {};
+    }
+    return userDefinedOrder;
+};
+
+class TableStore extends ComponentStore {
     constructor() {
-        this.templateRef = inject(TemplateRef);
-        this.dialog = inject(MatDialog);
-        this.dialogConfig = inject(MAT_DIALOG_DEFAULT_OPTIONS, { optional: true }) || {};
-        this.service = inject(DialogService);
-        this.opDialogClosed = new EventEmitter();
-        this._dialogConfig = { ...this.dialogConfig, ...defaultDialogConfig };
-        this.opDialogAddDialogClass = true;
-        this.injector = inject(Injector);
-        this.subscriber = subscriber(this.injector);
-        this._data = new Subject();
-        this.setDataAndState = (data) => {
-            if (data) {
-                this.opDialogConfig.data = data;
-                this.setDialogState(true);
+        const config = inject(TableBuilderConfigToken);
+        const settingsFromConfig = {
+            persistedTableSettings: new PersistedTableSettings().merge(config.defaultTableSettings),
+            notPersistedTableSettings: new NotPersistedTableSettings().merge(config.defaultTableSettings),
+        };
+        if (config.defaultTableSettings?.pageSize) {
+            settingsFromConfig.notPersistedTableSettings.paginatorSettings.pageSize = config.defaultTableSettings?.pageSize;
+        }
+        const pageSize = settingsFromConfig.notPersistedTableSettings.paginatorSettings.pageSize || defaultTableState.pageSize;
+        const showAll = settingsFromConfig.notPersistedTableSettings.paginatorSettings.defaultAll || defaultTableState.showAll;
+        super({ ...defaultTableState, ...settingsFromConfig, pageSize, showAll });
+        this.$initializationState = this.selectSignal(state => state.initializationState);
+        this.$savableState = computed(() => {
+            const state = this.state();
+            return mapSaveableState(state);
+        });
+        this.$userDefinedOrder = this.selectSignal(state => state.userDefined.order);
+        this.metaData$ = this.select(state => state.metaData);
+        this.$metaData = this.selectSignal(state => state.metaData);
+        this.$metaDataArray = this.selectSignal(this.$metaData, this.$userDefinedOrder, orderMetaData);
+        this.$orderedCodeVisibleMetaDatas = this.selectSignal(this.$metaDataArray, (mds) => mds.filter(m => m.fieldType !== FieldType.Hidden), { equal: (a, b) => b.length === a.length && b.every((s, i) => a[i].key === s.key) });
+        this.$getMetaData = (key) => computed(() => {
+            const metaData = this.state().metaData[key];
+            if (!metaData)
+                console.warn(`Meta data with key ${key} not found`);
+            return metaData;
+        });
+        this.$hiddenKeys = this.selectSignal(state => state.hiddenKeys);
+        this.$orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys, (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
+        this.$getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
+        this.$tableSettingsMinWidth = this.selectSignal(state => parseTbSizeToPixels(state.notPersistedTableSettings.minColumnWidth));
+        this.$getUserDefinedWidth = (key) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
+        this.$filters = this.selectSignal(state => state.filters);
+        this.filters$ = this.select(state => state.filters);
+        this.$getFilter = (filterId) => {
+            return this.selectSignal(this.$filters, filters => filters[filterId]);
+        };
+        this.$preSort = computed(() => createPreSort(this.$metaData()));
+        this._$selectSorted = this.selectSignal(state => state.sorted, {
+            equal: sortsAreSame
+        });
+        this.$selectSorted = computed(() => {
+            const metaDict = this.$metaData();
+            return this._$selectSorted().map(s => {
+                const meta = metaDict[s.active];
+                const sortLogic = meta.sortLogic;
+                const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
+                return ({ ...s, ...sortLogic, sortBy });
+            });
+        });
+        this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
+        this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
+        this.sort$ = toObservable(this.$getSorts);
+        this.$getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
+        this.getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
+        this.$userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
+        this.$userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
+        this.$userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
+        this.$footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
+        this.$headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
+        this.$groupBy = this.selectSignal(state => state.groupBy);
+        this.$groupByKeys = this.selectSignal(this.$groupBy, this.$metaDataArray, (gb, mds) => gb.map(gbk => gbk.key).filter(bg => mds.some(md => md.key === bg)), {
+            equal: (prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)
+        });
+        this.groupByKeys$ = this.select(state => state.groupBy.map(gbk => gbk.key))
+            .pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)));
+        this.expandedGroups$ = this.select(state => state.groupBy).pipe(distinctUntilChanged((a, b) => {
+            const aa = a.flatMap(g => g.expandedHeaders);
+            const bb = b.flatMap(g => g.expandedHeaders);
+            return aa.length === bb.length && aa.every((k) => bb.includes(k));
+        }));
+        this.$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));
+            } });
+        this.$getIsExpanded = (columnKey, groupUniqueName) => {
+            return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupUniqueName)).length);
+        };
+        this.$currentPage = this.selectSignal(state => state.currentPage);
+        this.$pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
+        this.$showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
+        this.$tableSettings = this.selectSignal(state => {
+            const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
+            return ts;
+        });
+        this.$notPersistedTableSettings = this.selectSignal(state => state.notPersistedTableSettings);
+        this.tableSettings$ = toObservable(this.$tableSettings);
+        this.$props = this.selectSignal(s => s.props);
+        this.$getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
+        this.$isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll
+            || state.showAll
+            || state.userDefined?.showAll);
+        this.$viewType = this.selectSignal(state => {
+            const usePaginator = state.notPersistedTableSettings.usePaginator;
+            const showAll = state.showAll || state.userDefined?.showAll;
+            const useVirtualScroll = state.notPersistedTableSettings.useVirtualScroll;
+            if (showAll || (useVirtualScroll && !usePaginator)) {
+                return 'virtual all';
+            }
+            else if (useVirtualScroll && usePaginator) {
+                return 'virtual paginator';
+            }
+            else if (usePaginator) {
+                return 'paginator';
             }
             else {
-                this.setDialogState(false);
+                return 'all';
             }
-        };
-    }
-    set opDialogConfig(config) {
-        this._dialogConfig = { ...this.dialogConfig, ...defaultDialogConfig, ...config };
-    }
-    get opDialogConfig() {
-        return this._dialogConfig;
-    }
-    set setControl(i) {
-        let o;
-        if (isSignal(i)) {
-            o = toObservable(i, { injector: this.injector });
-        }
-        else {
-            o = i;
-        }
-        untracked(() => {
-            this.subscriber.on(o, this.setDataAndState);
         });
-    }
-    close() {
-        this.dialogRef?.close();
-    }
-    initDialog() {
-        if (this.nativeElement) {
-            const rect = this.nativeElement.getBoundingClientRect();
-            const position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
-            this.opDialogConfig = { ...this.opDialogConfig, position };
-        }
-        if (this.opDialogAddDialogClass) {
-            this.opDialogConfig.panelClass = [...(Array.isArray(this.opDialogConfig.panelClass) ? this.opDialogConfig.panelClass : this.opDialogConfig.panelClass ? [this.opDialogConfig.panelClass] : []), 'opDialog'];
-        }
-        this.dialogRef = this.dialog.open(DialogWrapper, this.opDialogConfig);
-        this.componentWrapper = this.dialogRef.componentInstance;
-        this.componentWrapper.close = () => this.dialogRef?.close();
-        this.componentWrapper.data = this.opDialogConfig.data;
-        this.componentWrapper.template = this.templateRef;
-        if (!this.opDialogConfig.disableClose) {
-            this.service.addDialogRef(this.dialogRef);
-        }
-        const sub = this.dialogRef.afterClosed().subscribe(() => {
-            this.opDialogClosed.emit(true);
-            this.service.removeDialogRef(this.dialogRef);
-            this.dialogRef = undefined;
-            sub.unsubscribe();
+        this.resetState = this.updater((state) => {
+            const sorted = this.$preSort();
+            return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
         });
-    }
-    setDialogState(open) {
-        if (open) {
-            if (!this.dialogRef) {
-                this.initDialog();
-            }
-            else {
-                this.componentWrapper.data = this.opDialogConfig.data;
+        this.resetPart = this.updater((state, part) => {
+            const newState = { ...state };
+            switch (part) {
+                case 'Sorting':
+                    newState.sorted = this.$preSort();
+                    return newState;
+                case 'Filters':
+                    newState.filters = {};
+                    return newState;
+                case 'Group By':
+                    newState.groupBy = [];
+                    return newState;
+                case 'Hidden Columns':
+                    newState.hiddenKeys = [];
+                    return newState;
+                case 'Column Widths':
+                    newState.userDefined.widths = {};
+                    newState.userDefined.table = {};
+                    return newState;
+                case 'Column Order':
+                    newState.userDefined.order = {};
+                    return newState;
+                case 'Page Size':
+                    delete newState.userDefined.pageSize;
+                    return newState;
+                case 'Show All':
+                    delete newState.userDefined.showAll;
+                    return newState;
+                case 'Row Height':
+                    delete newState.userDefined.rowHeight;
+                    return newState;
+                case 'Header Height':
+                    delete newState.userDefined.headerHeight;
+                    return newState;
             }
-        }
-        else if (!open && this.dialogRef) {
-            this.dialogRef.close();
-        }
-    }
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { opDialogAddDialogClass: "opDialogAddDialogClass", opDialogConfig: "opDialogConfig", setControl: ["opDialog", "setControl"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[opDialog]', }]
-        }], propDecorators: { opDialogClosed: [{
-                type: Output
-            }], opDialogAddDialogClass: [{
-                type: Input
-            }], opDialogConfig: [{
-                type: Input
-            }], setControl: [{
-                type: Input,
-                args: ['opDialog']
-            }], nativeElement: [{
-                type: Input,
-                args: ['opDialogOrigin']
-            }] } });
-
-class StylerDirective {
-    constructor() {
-        this.el = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.$stylesApplied = signal({});
-        this.$element = input.required({ alias: 'element' });
-        this.$styler = input.required({ alias: 'styler' });
-        this.#stylerEffect = effect(() => {
-            const styles = this.$styler();
-            untracked(() => {
-                const element = this.$element();
-                const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
-                    if (!val)
-                        return acc;
-                    if (typeof (val) === 'string') {
-                        acc[key] = val;
-                        this.el.nativeElement.style[key] = val;
-                    }
-                    else if (!val?.condition || val?.condition === true || val?.condition(element)) {
-                        const value = typeof (val.value) === 'string' ? val.value : val?.value(element);
-                        acc[key] = value;
-                        this.el.nativeElement.style[key] = value;
-                    }
-                    return acc;
-                }, {});
-                Object.keys(this.$stylesApplied()).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
-                    this.renderer.removeStyle(this.el.nativeElement, key);
-                });
-                this.$stylesApplied.set(toApply);
+        });
+        this.updateStateFromPersistedState = this.updater((state, persistedState) => {
+            const incomingTableState = cleanPersistedState(state, persistedState);
+            const newState = this.updateStateFunc(state, incomingTableState);
+            newState.initializationState = state.initializationState <= InitializationState.MetaDataLoaded ? InitializationState.TableSettingsLoaded : state.initializationState;
+            return newState;
+        });
+        this.updateStateFunc = (state, incomingTableState) => {
+            const metaData = state.metaData;
+            const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
+                : state.initializationState <= InitializationState.Created ? createPreSort(metaData) : state.sorted;
+            return { ...state, ...incomingTableState, metaData, sorted };
+        };
+        this.setTableSettings = this.updater((state, settings) => {
+            const s = {
+                ...state,
+                persistedTableSettings: state.persistedTableSettings.merge(settings),
+                notPersistedTableSettings: state.notPersistedTableSettings.merge(settings),
+                initializationState: InitializationState.TableSettingsLoaded
+            };
+            s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
+            s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
+            return s;
+        });
+        this.setMetaData = this.updater((state, md) => {
+            const metaData = md
+                .reduce((prev, curr) => {
+                if (prev[curr.key]) {
+                    prev[curr.key] = mergeMeta(prev[curr.key], curr);
+                }
+                else {
+                    prev[curr.key] = curr;
+                }
+                return prev;
+            }, {});
+            const sortedInitialized = state.sorted.length > 0;
+            const sorted = sortedInitialized ? state.sorted : createPreSort(metaData);
+            const order = initializeOrder(state, metaData);
+            const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
+            return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
+        });
+        this.showColumn = this.updater((state, key) => ({
+            ...state,
+            hiddenKeys: state.hiddenKeys.filter(k => k !== key),
+        }));
+        this.hideColumn = this.updater((state, key) => ({
+            ...state,
+            hiddenKeys: [...state.hiddenKeys.filter(k => k !== key), key],
+        }));
+        this.setHiddenColumns = this.updater((state, displayCols) => {
+            return ({ ...state, hiddenKeys: displayCols.filter(d => !d.visible).map(d => d.key) });
+        });
+        this.setUserDefinedWidth = this.updater((state, colWidths) => {
+            const userDefinedWidths = { ...state.userDefined.widths };
+            colWidths.forEach(cw => {
+                userDefinedWidths[cw.key] = cw.widthInPixel;
             });
+            return { ...state, userDefined: { ...state.userDefined, widths: userDefinedWidths } };
+        });
+        this.setUserDefinedOrder = this.updater((state, moved) => {
+            const { newOrder, oldOrder } = moved;
+            const mdsArr = orderedStateVisibleMetaData(state);
+            moveItemInArray(mdsArr, oldOrder, newOrder);
+            const userDefinedOrder = mdsArr.reduce((aggregate, current, index) => {
+                aggregate[current.key] = index;
+                return aggregate;
+            }, {});
+            return ({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } });
+        });
+        this.setUserDefinedRowHeight = this.updater((state, rowHeight) => {
+            return ({ ...state, userDefined: { ...state.userDefined, rowHeight } });
+        });
+        this.setUserDefinedHeaderHeight = this.updater((state, headerHeight) => {
+            return ({ ...state, userDefined: { ...state.userDefined, headerHeight } });
+        });
+        this.addFilter = this.updater((state, filter) => {
+            return this.addFiltersToState(state, [filter]);
+        });
+        this.addFilters = this.updater((state, filters) => {
+            return this.addFiltersToState(state, filters);
+        });
+        this.removeFilter = this.updater((state, filterId) => {
+            const filtersCopy = { ...state.filters };
+            delete filtersCopy[filterId];
+            return ({ ...state, filters: filtersCopy });
+        });
+        this.removeFilters = this.updater((state, filterIds) => {
+            const filtersCopy = { ...state.filters };
+            filterIds.forEach(id => { delete filtersCopy[id]; });
+            return ({ ...state, filters: filtersCopy });
         });
-    }
-    #stylerEffect;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $styler: { classPropertyName: "$styler", publicName: "styler", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StylerDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[styler]' }]
-        }] });
-
-class MatSlideToggleGroupDirective {
-    constructor() {
-        this.allowMultiple = false;
-        this._ready = new ReplaySubject(1);
-    }
-    set toggles(val) {
-        this._toggles = val;
-        this._ready.next(true);
-    }
-    get valueEmitter() {
-        return this._ready.pipe(switchMap$1(_ => this.getObs()));
-    }
-    getInitValue() {
-        const startValue = this._toggles.reduce((prev, cur) => {
-            if (!cur.name) {
-                throw new Error('toggle must have the name attribute set');
-            }
-            prev[cur.name] = cur.checked;
-            return prev;
-        }, {});
-        return startValue;
-    }
-    getObs() {
-        var toggleChanges = merge(...this._toggles.map(toggle => toggle.change));
-        const startValue = this.getInitValue();
-        return toggleChanges.pipe(scan((prev, cur) => {
-            const toggleName = cur.source.name;
-            const newVal = { ...prev, [toggleName]: cur.checked };
-            if (cur.checked && !this.allowMultiple) {
-                Object.keys(prev)
-                    .filter(key => key !== toggleName && prev[key])
-                    .forEach(key => {
-                    newVal[key] = false;
-                    this._toggles.find(toggle => toggle.name === key).toggle();
-                });
-            }
-            return newVal;
-        }, startValue), startWith$1(startValue));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: MatSlideToggleGroupDirective, isStandalone: true, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[opMatSlideToggleGroup]',
-                }]
-        }], propDecorators: { allowMultiple: [{
-                type: Input
-            }], toggles: [{
-                type: ContentChildren,
-                args: [MatSlideToggle]
-            }], valueEmitter: [{
-                type: Output
-            }] } });
-
-class TrimWhitespaceDirective {
-    constructor() {
-        this.elem = inject(ElementRef);
-    }
-    onBlur() {
-        const inputString = this.elem.nativeElement.value;
-        if (inputString) {
-            const newValue = inputString.trim().replace(/\t/g, '');
-            if (inputString !== newValue) {
-                this.elem.nativeElement.value = newValue;
-                this.elem.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
+        this.clearFilters = this.updater((state) => ({ ...state, filters: {} }));
+        this.addFiltersToState = (state, filters) => {
+            var customFilters = filters.filter(isCustomFilter);
+            var filterInfos = filters.filter(isFilterInfo);
+            const filtersObj = filterInfos
+                .filter(fltr => Object.keys(state.metaData).some(key => key === fltr.key) || console.warn(`Meta data with key ${fltr.key} not found`))
+                .reduce((filtersObj, filter) => {
+                if (!filter.filterId) {
+                    filter.filterId = crypto.randomUUID();
+                }
+                filtersObj[filter.filterId] = filter;
+                return filtersObj;
+            }, {});
+            customFilters.forEach(fltr => {
+                if (!fltr.filterId) {
+                    fltr.filterId = crypto.randomUUID();
+                }
+                filtersObj[fltr.filterId] = fltr;
+            });
+            return {
+                ...state,
+                filters: { ...state.filters, ...filtersObj }
+            };
+        };
+        this.setSort = this.updater((state, { key, direction }) => {
+            const sortArray = state.sorted.filter(s => s.active !== key);
+            if (direction) {
+                sortArray.unshift({ active: key, direction });
             }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TrimWhitespaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[trimWhitespace]',
-                }]
-        }], propDecorators: { onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
-class FunctionPipe {
-    transform(func, ...args) {
-        if (typeof func === 'string') {
-            const [instance, ...tail] = args;
-            const method = instance[func].bind(instance);
-            return method(...tail);
-        }
-        return func(...args);
+            return {
+                ...state,
+                sorted: sortArray,
+            };
+        });
+        this.setAllSort = this.updater((state, sortArray) => {
+            return {
+                ...state,
+                sorted: sortArray,
+            };
+        });
+        this.setCurrentPage = this.updater((state, currentPage) => ({ ...state, currentPage }));
+        this.setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize }));
+        this.setUserDefinedPageSize = this.updater((state, pageSize) => ({ ...state, userDefined: { ...state.userDefined, pageSize } }));
+        this.setUserDefinedShowAll = this.updater((state, showAll) => ({ ...state, showAll, userDefined: { ...state.userDefined, showAll } }));
+        this.setProps = this.updater((state, props) => {
+            return ({ ...state, props });
+        });
+        this.setTableWidth = this.updater((state, widthInPixels) => ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
+        this.setInitializationState = this.updater((state, initializationState) => {
+            return { ...state, initializationState };
+        });
+        this.toggleCollapseHeader = this.updater((state) => {
+            const tableSettings = { ...state.persistedTableSettings };
+            tableSettings.collapseHeader = !tableSettings.collapseHeader;
+            return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
+        });
+        this.toggleCollapseFooter = this.updater((state, options) => {
+            const tableSettings = { ...state.persistedTableSettings };
+            tableSettings.collapseFooter = options?.collapseFooter ?? !tableSettings.collapseFooter;
+            return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
+        });
+        this.addGroupByKey = this.updater((state, metaDataKey) => ({
+            ...state,
+            groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [] }]
+        }));
+        this.removeGroupByKey = this.updater((state, groupByKey) => ({
+            ...state,
+            groupBy: state.groupBy.filter(key => groupByKey !== key.key)
+        }));
+        this.updateExpandedGroups = this.updater((state, data) => {
+            const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
+                gk.expandedHeaders = data.isExpanded ? [...gk.expandedHeaders, data.groupUniqueName] : gk.expandedHeaders.filter(g => g !== data.groupUniqueName);
+            });
+            return ({
+                ...state,
+                groupBy: gbk
+            });
+        });
+        this.expandAllOfGroup = this.updater((state, data) => {
+            const newGroupedData = state.groupBy.map(gb => ({
+                key: gb.key,
+                expandedHeaders: data.groupHeadersByKey[gb.key]?.map(g => g.uniqueName) ?? gb.expandedHeaders
+            }));
+            return ({ ...state, groupBy: newGroupedData });
+        });
+        this.collapseAll = this.updater((state) => ({
+            ...state,
+            groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [] }))
+        }));
+        this.collapseAllOfKey = this.updater((state, data) => ({
+            ...state,
+            groupBy: state.groupBy.map(gb => ({
+                key: gb.key,
+                expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders
+            }))
+        }));
+        this.setLinkMaps = this.updater((state, maps) => {
+            return ({ ...state, linkMaps: maps });
+        });
+        this.updateRowProps = this.updater((state, updates) => {
+            const notPersistedTableSettings = merge$1(new NotPersistedTableSettings(), (state.notPersistedTableSettings));
+            if (updates.rowClasses)
+                notPersistedTableSettings.rowClasses = updates.rowClasses;
+            if (updates.rowClick)
+                notPersistedTableSettings.rowClick = updates.rowClick;
+            if (updates.rowStyles)
+                notPersistedTableSettings.rowStyles = updates.rowStyles;
+            return ({ ...state, notPersistedTableSettings });
+        });
+        this.on = (srcObservable, func) => {
+            this.effect(() => srcObservable.pipe(tap(func)));
+            return this;
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FunctionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'func',
-                }]
-        }] });
-
-class ConditionalClassesDirective {
-    constructor() {
-        this.el = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.$element = input.required({ alias: 'element' });
-        this.$classes = input(undefined, { alias: 'conditionalClasses' });
-        this.classesApplied = [];
-        this.#onClasses = effect(() => {
-            const classes = this.$classes();
-            untracked(() => {
-                const element = this.$element();
-                let toApply = [];
-                if (classes) {
-                    toApply = Object.keys(classes)
-                        .filter(key => (classes[key] === true) || classes[key](element));
-                }
-                var classesNotYetApplied = toApply.filter(c => !this.classesApplied.includes(c));
-                var classesToRemove = this.classesApplied.filter(c => !toApply.includes(c));
-                classesToRemove.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
-                classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
-                this.classesApplied = toApply;
-            });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+const resetable = [
+    'Sorting',
+    'Filters',
+    'Group By',
+    'Hidden Columns',
+    'Column Widths',
+    'Column Order',
+    'Row Height',
+    'Header Height',
+    'Page Size',
+    'Show All',
+];
+
+class MultiSortDirective extends MatSort {
+    constructor() {
+        super();
+        this.state = inject(TableStore);
+        this.state.setSort(this.sortChange.pipe(distinctUntilChanged((f, s) => f.active === s.active && f.direction === s.direction), map(sc => ({ key: sc.active, direction: sc.direction }))));
+        this.state.on(this.state.sort$, (rules) => {
+            const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' };
+            const topActiveChanged = topRule.active !== this.active || '';
+            const topDirectionChanged = topRule.direction !== this.direction || '';
+            if (topActiveChanged || topDirectionChanged) {
+                this.active = topRule.active;
+                this.direction = topRule.direction;
+                this.sortChange.emit(topRule);
+            }
         });
     }
-    #onClasses;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $classes: { classPropertyName: "$classes", publicName: "conditionalClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
+            { provide: MatSort, useExisting: MultiSortDirective }
+        ], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MultiSortDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[conditionalClasses]',
+                    selector: '[multiSort]',
+                    exportAs: 'multiSort',
+                    inputs: ['disabled: matSortDisabled'],
+                    providers: [
+                        { provide: MatSort, useExisting: MultiSortDirective }
+                    ],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+function sortsAreSame(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].active !== b[i].active || a[i].direction !== b[i].direction) {
+            return false;
+        }
+    }
+    return true;
+}
 
-class UtilitiesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
-            PhoneNumberPipe,
-            FunctionPipe,
-            StopPropagationDirective,
-            StylerDirective,
-            PreventEnterDirective,
-            AutoFocusDirective,
-            TrimWhitespaceDirective,
-            ClickSubjectDirective,
-            ClickEmitterDirective,
-            DialogDirective,
-            MatSlideToggleGroupDirective,
-            ConditionalClassesDirective], exports: [StopPropagationDirective,
-            PreventEnterDirective,
-            SpaceCasePipe,
-            PhoneNumberPipe,
-            FunctionPipe,
-            TrimWhitespaceDirective,
-            StylerDirective,
-            AutoFocusDirective,
-            ClickSubjectDirective,
-            ClickEmitterDirective,
-            DialogDirective,
-            MatSlideToggleGroupDirective,
-            ConditionalClassesDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, providers: [
-            DialogService
-        ] }); }
+class DateFilterComponent {
+    constructor() {
+        this.FilterType = FilterType;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull)\r\n{\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: 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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UtilitiesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        StopPropagationDirective,
-                        PreventEnterDirective,
-                        SpaceCasePipe,
-                        PhoneNumberPipe,
-                        FunctionPipe,
-                        TrimWhitespaceDirective,
-                        StylerDirective,
-                        AutoFocusDirective,
-                        ClickSubjectDirective,
-                        ClickEmitterDirective,
-                        DialogDirective,
-                        MatSlideToggleGroupDirective,
-                        ConditionalClassesDirective,
-                    ],
-                    imports: [
-                        SpaceCasePipe,
-                        PhoneNumberPipe,
-                        FunctionPipe,
-                        StopPropagationDirective,
-                        StylerDirective,
-                        PreventEnterDirective,
-                        AutoFocusDirective,
-                        TrimWhitespaceDirective,
-                        ClickSubjectDirective,
-                        ClickEmitterDirective,
-                        DialogDirective,
-                        MatSlideToggleGroupDirective,
-                        ConditionalClassesDirective,
-                    ],
-                    providers: [
-                        DialogService
-                    ]
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        MatInputModule, FormsModule, MatDatepickerModule
+                    ], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull)\r\n{\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+        }], propDecorators: { info: [{
+                type: Input
+            }], CurrentFilterType: [{
+                type: Input
+            }] } });
 
 class InFilterComponent {
     constructor() {
@@ -3114,7 +3287,7 @@ class InFilterComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InFilterComponent,
                 multi: true
-            }], ngImport: i0, template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n        [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input #input type=\"string\"\r\n        [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n        [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1)\r\n    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], ngImport: i0, template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input #input type=\"string\"\r\n          [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1)\r\n    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
@@ -3124,7 +3297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                             multi: true
                         }], imports: [
                         FormsModule, AutoFocusDirective
-                    ], template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n        [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input #input type=\"string\"\r\n        [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n        [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1)\r\n    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
+                    ], template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input #input type=\"string\"\r\n          [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1)\r\n    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
         }], ctorParameters: () => [] });
 
 class NumberFilterComponent {
@@ -3178,10 +3351,21 @@ class InListFilterComponent {
         this.$key = input.required({ alias: 'key' });
         this.$selectedKeys = signal([]);
         this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())());
+        this.$allValues = computed(() => {
+            const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+            return filterable === 'all values' || filterable?.allValues === true;
+        });
+        this.$specialBlank = computed(() => {
+            const specialBlank = this.tableState.selectSignal(s => s.allFilters)()[this.$metaData().key]?.find(k => isBlankValueFilter(k));
+            if (!specialBlank)
+                return;
+            return { key: specialBlank, value: 'BLANK' };
+        });
+        this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)));
         this.$keyValues = computed(() => {
             const metaData = this.$metaData();
-            if (metaData?.additional?.filterOptions?.filterableValues === 'all values') {
-                return this.tableState.selectSignal(s => s.allFilters)()[metaData.key].map(f => ({ key: f, value: f }));
+            if (this.$allValues()) {
+                return this.tableState.selectSignal(s => s.allFilters)()[metaData.key].filter(isNotBlankValueFilter).map(f => ({ key: f, value: f }));
             }
             else if (metaData?.additional?.filterOptions?.filterableValues) {
                 return metaData.additional.filterOptions.filterableValues.map(value => ({ key: value, value }));
@@ -3229,6 +3413,14 @@ class InListFilterComponent {
                 useExisting: InListFilterComponent,
                 multi: true
             }], ngImport: i0, template: `
+    @if($specialBlank(); as specialBlank)
+    {
+      <div>
+        <mat-checkbox [checked]="$specialBlankSelected()" stop-propagation (change)='selectFilterChanged($event, specialBlank)' >
+          {{specialBlank.value}} PIZAA
+        </mat-checkbox>
+      </div>
+    }
     @switch ($metaData().fieldType)
     {
       @case (FieldType.Enum)
@@ -3294,6 +3486,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
             args: [{
                     selector: 'tb-in-list-filter',
                     template: `
+    @if($specialBlank(); as specialBlank)
+    {
+      <div>
+        <mat-checkbox [checked]="$specialBlankSelected()" stop-propagation (change)='selectFilterChanged($event, specialBlank)' >
+          {{specialBlank.value}} PIZAA
+        </mat-checkbox>
+      </div>
+    }
     @switch ($metaData().fieldType)
     {
       @case (FieldType.Enum)
@@ -3514,95 +3714,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
             args: [{ name: 'formatFilterType' }]
         }] });
 
-function isPipe(o) {
-    return typeof (o.transform) === 'function';
-}
-function createTransformer(metaData, config, noIcons = false, forItem = false) {
-    const defaultFunc = getFactory(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 (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';
-            }
-            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;
-    };
-}
-function dateFormatter(date, format) {
-    if (!date)
-        return;
-    return formatDate(date, format, 'en-US');
-}
-function currencyFormatter(amt) {
-    return formatCurrency(amt, 'en-US', '$');
-}
-
 class FormatFilterValuePipe {
     constructor() {
         this.tableState = inject(TableStore);
@@ -3623,15 +3734,15 @@ const transform = (value, meta, filterType) => {
     }
     if (value && (filterType === FilterType.In)) {
         if (meta.fieldType === FieldType.Enum) {
-            return value.map((v) => spaceCase(meta.additional.enumMap[v])).join(', ') ?? value;
+            return value.map((v) => mapSpecial(v) || spaceCase(meta.additional.enumMap[v])).join(', ') ?? value;
         }
         if (meta.fieldType === FieldType.Date || meta.fieldType === FieldType.DateTime) {
-            return value.map((v) => mapDate(v, meta, filterType)).join(', ') ?? value;
+            return value.map((v) => mapSpecial(v) || mapDate(v, meta, filterType)).join(', ') ?? value;
         }
         if (meta.fieldType === FieldType.Number || meta.fieldType === FieldType.Currency) {
-            return value.map((v) => mapNumber(v, meta)).join(', ') ?? value;
+            return value.map((v) => mapSpecial(v) || mapNumber(v, meta)).join(', ') ?? value;
         }
-        return value.join(', ') ?? value;
+        return value.map(v => mapSpecial(v) || v).join(', ') ?? value;
     }
     if (filterType === FilterType.NumberBetween && (meta.fieldType === FieldType.Number || meta.fieldType === FieldType.Currency)) {
         return mapNumber(value.Start, meta) + ' - ' + mapNumber(value.End, meta);
@@ -3662,6 +3773,11 @@ function mapNumber(value, meta) {
     }
     return value;
 }
+function mapSpecial(value) {
+    if (isBlankValueFilter(value))
+        return 'BLANK';
+    return undefined;
+}
 
 class FilterChipsComponent {
     constructor() {
@@ -3854,7 +3970,7 @@ class TableTemplateService {
         if (metaData.fieldType === FieldType.ImageUrl) {
             return this.initializationComponentInstance.$imageUrlTemplate();
         }
-        const useIcon = metaData.useIcon || metaData.fieldType === FieldType.Boolean;
+        const useIcon = metaData.useIcon || (metaData.fieldType === FieldType.Boolean && metaData.useIcon !== false);
         if (metaData.fieldType === FieldType.Link || metaData.additional?.link) {
             const router = metaData.additional?.link?.useRouterLink;
             if (router) {
@@ -3946,14 +4062,14 @@ class ColumnHeaderMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(filterFieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n        {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n        {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n              (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Boolean)\r\n        {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n        {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n            <mat-datepicker #calendar />\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}tb-in-list-filter{display:block;max-height:max(50vh,400px);overflow-y:auto}.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(filterFieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n        {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n        {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n              (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Boolean)\r\n        {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n        {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n            <mat-datepicker #calendar />\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.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: "20.0.3", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
                         MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule
-                    ], template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(filterFieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n        {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n        {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n              (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Boolean)\r\n        {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n        {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n            <mat-datepicker #calendar />\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}tb-in-list-filter{display:block;max-height:max(50vh,400px);overflow-y:auto}.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 filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n      <mat-icon color=\"primary\">group</mat-icon>\r\n      <span>Group By</span>\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(filterFieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n        {\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n        {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n              (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n                <mat-icon  class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n              (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n                <span class=\"suffix-icons\">=</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        }\r\n        @else if (filterFieldType === FieldType.Boolean)\r\n        {\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n        {\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n            <mat-datepicker #calendar />\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }] });
 
 class ColumnTotalPipe {
@@ -5658,6 +5774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
 
 class TableHeaderMenuComponent {
     constructor() {
+        this.menu = viewChild.required(MatMenu);
         this.exportToCsvService = inject(ExportToCsvService);
         this.tableContainer = inject(TableContainerComponent);
         this.state = this.tableContainer.state;
@@ -5678,11 +5795,11 @@ class TableHeaderMenuComponent {
             this.state.setUserDefinedHeaderHeight(+element.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableHeaderMenuComponent, isStandalone: true, selector: "lib-table-header-menu", ngImport: i0, template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: ResetMenuComponent, selector: "lib-reset-menu", outputs: ["onStateReset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableHeaderMenuComponent, isStandalone: true, selector: "lib-table-header-menu", viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: ResetMenuComponent, selector: "lib-reset-menu", outputs: ["onStateReset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-header-menu', imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective], template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"] }]
+            args: [{ selector: 'lib-table-header-menu', imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective], template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"] }]
         }] });
 
 class TableVirtualScrollStrategy {
@@ -5983,31 +6100,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-function buildInAllValuesFilter(config, previousMeta, currentMeta, data, metaTimestamp, dataTimestamp, currentAllFilters) {
-    const currentMetaDataOfFilterAll = currentMeta.filter(m => m.additional?.filterOptions?.filterableValues === 'all values');
-    if (dataTimestamp > metaTimestamp) {
-        return currentMetaDataOfFilterAll.reduce((dict, md) => {
-            dict[md.key] = buildFilter(data, md, config);
-            return dict;
-        }, {});
-    }
-    const previousMetaDataOfFilterAll = previousMeta.filter(m => m.additional?.filterOptions?.filterableValues === 'all values');
-    const newCurrent = currentMetaDataOfFilterAll.filter(c => previousMetaDataOfFilterAll.every(p => c.key !== p.key));
-    if (newCurrent.length) {
-        const c = { ...currentAllFilters };
-        newCurrent.forEach(md => c[md.key] = buildFilter(data, md, config));
-        return c;
-    }
-    return currentAllFilters;
-}
-function buildFilter(data, metaData, config) {
-    const map = createTransformer(metaData, config, true, true);
-    return [...new Map(data.map(v => {
-            const mappedV = map(v);
-            return [mappedV?.toString(), mappedV];
-        })).values()].filter(v => v != undefined).sort();
-}
-
 class TableContainerComponent {
     constructor() {
         this.state = inject(TableStore);
@@ -6357,7 +6449,7 @@ class TableContainerComponent {
     #setUpAllValuesFilters;
     static { this.headerId = 'tb-header-wrapper'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], 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    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\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}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}\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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\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}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
@@ -6366,8 +6458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         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      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\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}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}\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        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n  </ng-template>\r\n\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}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }] });
 function isFunction(a) {
     return typeof a === 'function';
@@ -6639,8 +6731,9 @@ let _ei;
 /**
  * Creates a selector that can dispatch an action if conditions are met.
  * Note: The props of the selector factory must include the props of the action.
- * @param selectorFactory A method that returns selector.
- * @param action The action that will be dispatched when conditions are met.
+ * @param selectorFactory A method that returns a selector.
+ * @param action A method that returns the action that will be dispatched when conditions are met. The method will be passed the args of the
+ * selector factory and the result of the selector.
  * @param [dispatchIf = defaultFilter] Optional. A method that takes the result of the selector and returns a boolean. The actions gets dispatched
  * if true is returned. If no method is passed in than the action will be dispatched if the selector returns undefined or null.
  */
@@ -6653,6 +6746,11 @@ const createActionableSelector = (selectorFactory, action, dispatchIf = defaultF
     const actionable = createActionResultSelector(options);
     return (...props) => createSelector(actionable(...props), b => b.result);
 };
+/**
+ * Creates a selector that can run an action if conditions are met.
+ * The action will run in the environment injector context if no injector is added to the options
+ * Note: The props of the selector factory must include the props of the action.
+ */
 const createActionSelector = (options) => {
     const actionable = createActionResultSelector(options);
     return ((...props) => createSelector(actionable(...props), b => b.result));
@@ -6671,7 +6769,7 @@ const createActionResultSelector = (options) => {
         const needsDispatch = (options.dispatchIf || defaultFilter)(selected);
         if (needsDispatch && !_cache.isInCache(id, ...props)) {
             queueMicrotask(() => runInInjectionContext(options.injector || _ei, () => {
-                options.action(...props)();
+                options.action(...[...props, selected])();
             }));
         }
         return ({
@@ -6690,7 +6788,7 @@ class AppStoreCache {
                     b = { b };
                 return ({ ...a, ...b });
             }, {});
-            let itemsInCache = this.cache[actionableSelectorId] = (this.cache[actionableSelectorId] || []);
+            const itemsInCache = this.cache[actionableSelectorId] = (this.cache[actionableSelectorId] || []);
             if (itemsInCache.some(itemInCache => shallowEquals(itemInCache, props))) {
                 return true;
             }