@one-paragon/angular-utilities 2.3.12 → 2.3.14

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';
@@ -1712,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];
+        };
+    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;
+    };
+}
+
+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);
         };
     }
-    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 }); }
+    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', '$');
 }
-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 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;
+        }, {});
+    }
+    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 [...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);
+}
+
+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: 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 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,
+};
+
+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: 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;
-    }
-    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;
+function isFilterInfo(filter) {
+    return filter && typeof filter.key === 'string' && filter.filterType !== FilterType.Custom;
 }
-
-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 }); }
+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: 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 PreventEnterDirective {
-    onKeyDown() {
-        return false;
+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: 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 }); }
+    return filter.filterValue != undefined && filter.active !== false;
 }
-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();
-    }
-    onMousedown(event) {
-        event.stopPropagation();
+function createFilterFunc(filter) {
+    if (isCustomFilter(filter)) {
+        return filter.active ? filter.predicate : defaultPredicate;
     }
-    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 }); }
-}
-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;
+    if (filter.filterValue == undefined) {
+        return defaultPredicate;
     }
-    ngAfterViewInit() {
-        if (this.autoFocus) {
-            setTimeout(() => {
-                this.elementRef.nativeElement.focus();
-            });
+    const func = filterTypeFuncMap[filter.fieldType][filter.filterType](filter);
+    if (!func) {
+        if (filterFactoryMap[filter.filterType]) {
+            return filterFactoryMap[filter.filterType](filter);
         }
     }
-    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
-            }] } });
-
-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 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: ClickSubjectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickSubject]',
-                    exportAs: 'clickSubject',
-                    host: {
-                        '(click)': 'next(this._val)'
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { clickSubject: [{
-                type: Input,
-                args: ['clickSubject']
-            }] } });
+const FalseyValueCanBeIncludedFilterTypes = [
+    FilterType.IsNull,
+    FilterType.NumberNotEqual,
+    FilterType.DateIsNotOn,
+    FilterType.StringDoesNotContain,
+];
 
-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 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 DialogService {
-    constructor() {
-        this.allOpenOpDialogs = [];
-    }
-    addDialogRef(ref) {
-        this.allOpenOpDialogs.push(ref);
+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;
     }
-    removeDialogRef(ref) {
-        this.allOpenOpDialogs = this.allOpenOpDialogs.filter(rf => ref.id !== rf.id);
+    if (orderA == null) {
+        return 1;
     }
-    closeAllOpDialogs() {
-        this.allOpenOpDialogs.forEach(ref => ref.close());
+    if (orderB == null) {
+        return -1;
     }
-    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' }); }
+    return orderA - orderB;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+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 {};
+    }
+    return userDefinedOrder;
+};
 
-class DialogWrapper {
+class TableStore extends ComponentStore {
     constructor() {
-        this.vcr = inject(ViewContainerRef);
-        this.viewEmbedded = false;
-        this.viewContext = {
-            close: () => { },
+        const config = inject(TableBuilderConfigToken);
+        const settingsFromConfig = {
+            persistedTableSettings: new PersistedTableSettings().merge(config.defaultTableSettings),
+            notPersistedTableSettings: new NotPersistedTableSettings().merge(config.defaultTableSettings),
         };
-    }
-    set template(tmpl) {
-        if (this.viewEmbedded) {
-            this.vcr.clear();
+        if (config.defaultTableSettings?.pageSize) {
+            settingsFromConfig.notPersistedTableSettings.paginatorSettings.pageSize = config.defaultTableSettings?.pageSize;
         }
-        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);
+        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 });
+        });
+        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;
             });
-        });
-    }
-    #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 }));
+            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',
-                }]
-        }] });
+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 ConditionalClassesDirective {
+class MultiSortDirective extends MatSort {
     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;
-            });
+        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() {
@@ -3117,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,
@@ -3127,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 {
@@ -3181,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 }));
@@ -3232,36 +3413,72 @@ class InListFilterComponent {
                 useExisting: InListFilterComponent,
                 multi: true
             }], ngImport: i0, template: `
-  @for (item of $keyValues(); track item.key) {
-    <div>
-      <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
-        @switch ($metaData().fieldType)
+    @if($specialBlank(); as specialBlank)
+    {
+      <div>
+        <mat-checkbox [checked]="$specialBlankSelected()" stop-propagation (change)='selectFilterChanged($event, specialBlank)' >
+          {{specialBlank.value}}
+        </mat-checkbox>
+      </div>
+    }
+    @switch ($metaData().fieldType)
+    {
+      @case (FieldType.Enum)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{(item.key | spaceCase)}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.Date)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | date: 'shortDate'}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.DateTime)
+      {
+        @for (item of $keyValues(); track item.key)
         {
-          @case (FieldType.Enum)
-          {
-            {{(item.key | spaceCase)}}
-          }
-          @case (FieldType.Date)
-          {
-            {{item.value | date: 'shortDate'}}
-          }
-          @case (FieldType.DateTime)
-          {
-            {{item.value | date: 'short'}}
-          }
-          @case (FieldType.Currency)
-          {
-            {{item.value | currency }}
-          }
-          @default
-          {
-            {{item.key}}
-          }
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | date: 'short'}}
+            </mat-checkbox>
+          </div>
         }
-      </mat-checkbox>
-    </div>
-  }
-
+      }
+      @case (FieldType.Currency)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | currency }}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @default
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.key}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InListFilterComponent, decorators: [{
@@ -3269,36 +3486,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
             args: [{
                     selector: 'tb-in-list-filter',
                     template: `
-  @for (item of $keyValues(); track item.key) {
-    <div>
-      <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
-        @switch ($metaData().fieldType)
+    @if($specialBlank(); as specialBlank)
+    {
+      <div>
+        <mat-checkbox [checked]="$specialBlankSelected()" stop-propagation (change)='selectFilterChanged($event, specialBlank)' >
+          {{specialBlank.value}}
+        </mat-checkbox>
+      </div>
+    }
+    @switch ($metaData().fieldType)
+    {
+      @case (FieldType.Enum)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{(item.key | spaceCase)}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.Date)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | date: 'shortDate'}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.DateTime)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | date: 'short'}}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @case (FieldType.Currency)
+      {
+        @for (item of $keyValues(); track item.key)
+        {
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.value | currency }}
+            </mat-checkbox>
+          </div>
+        }
+      }
+      @default
+      {
+        @for (item of $keyValues(); track item.key)
         {
-          @case (FieldType.Enum)
-          {
-            {{(item.key | spaceCase)}}
-          }
-          @case (FieldType.Date)
-          {
-            {{item.value | date: 'shortDate'}}
-          }
-          @case (FieldType.DateTime)
-          {
-            {{item.value | date: 'short'}}
-          }
-          @case (FieldType.Currency)
-          {
-            {{item.value | currency }}
-          }
-          @default
-          {
-            {{item.key}}
-          }
+          <div>
+            <mat-checkbox [checked]="includes | func :  item : $selectedKeys()" stop-propagation (change)='selectFilterChanged($event, item)' >
+              {{item.key}}
+            </mat-checkbox>
+          </div>
         }
-      </mat-checkbox>
-    </div>
-  }
-
+      }
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{
@@ -3461,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);
@@ -3570,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);
@@ -3609,6 +3773,11 @@ function mapNumber(value, meta) {
     }
     return value;
 }
+function mapSpecial(value) {
+    if (isBlankValueFilter(value))
+        return 'BLANK';
+    return undefined;
+}
 
 class FilterChipsComponent {
     constructor() {
@@ -5931,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 currentAll = currentMeta.filter(m => m.additional?.filterOptions?.filterableValues === 'all values');
-    if (dataTimestamp > metaTimestamp) {
-        return currentAll.reduce((dict, md) => {
-            dict[md.key] = buildFilter(data, md, config);
-            return dict;
-        }, {});
-    }
-    const previousAll = previousMeta.filter(m => m.additional?.filterOptions?.filterableValues === 'all values');
-    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;
-}
-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);