@one-paragon/angular-utilities 0.0.26 → 0.0.27

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

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, NgModule, Injectable, InjectionToken, Pipe, Inject, Component, ChangeDetectionStrategy, ViewChild, HostListener, Injector, ElementRef, Output, Optional, EventEmitter, ContentChildren } from '@angular/core';
-import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, pluck, pairwise, last, takeUntil, distinctUntilKeyChanged, delay, distinct, first, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
-import { Subject, isObservable, of, ReplaySubject, Observable, combineLatest, Subscription, fromEvent, merge as merge$1, asyncScheduler, BehaviorSubject, switchMap as switchMap$1, scan, startWith as startWith$1 } from 'rxjs';
+import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, pluck, first, pairwise, last, takeUntil, distinctUntilKeyChanged, delay, distinct, distinctUntilChanged, withLatestFrom, mergeAll, scan } from 'rxjs/operators';
+import * as i2$2 from 'rxjs';
+import { Subject, isObservable, of, ReplaySubject, Observable, combineLatest, Subscription, fromEvent, merge as merge$1, asyncScheduler, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, from, switchMap as switchMap$1, scan as scan$1, startWith as startWith$1 } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
-import * as i3$1 from '@angular/material/table';
+import * as i3$2 from '@angular/material/table';
 import { MatColumnDef, MatTableDataSource, MatTable, MatTableModule, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as _ from 'lodash';
@@ -22,11 +23,11 @@ import * as i1$1 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
 import * as i4$2 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i3 from '@angular/material/button';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ControlContainer, NgForm, FormsModule } from '@angular/forms';
-import * as i2 from '@angular/material/checkbox';
+import * as i3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i6 from '@angular/material/form-field';
 import * as i7 from '@angular/material/radio';
@@ -39,14 +40,14 @@ import * as i13 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i7$1 from '@ngrx/component';
 import { ReactiveComponentModule } from '@ngrx/component';
-import * as i2$1 from '@angular/material/paginator';
+import * as i2 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$2 from '@angular/cdk/table';
-import * as i2$2 from '@angular/material/card';
+import * as i2$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i6$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7$2 from '@angular/material/core';
+import * as i6$2 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -57,14 +58,16 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i4$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule, MatSlideToggle } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i6$2 from '@angular/material/chips';
+import * as i6$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i3$2 from '@ngrx/store';
+import * as i7$2 from '@angular/material/button-toggle';
+import * as i3$3 from '@ngrx/store';
 import { createSelector, createAction, props, select, createReducer, on, StoreModule } from '@ngrx/store';
 import * as i1$4 from '@ngrx/effects';
 import { createEffect, ofType, concatLatestFrom, EffectsModule } from '@ngrx/effects';
@@ -513,6 +516,9 @@ var ArrayStyle;
     ArrayStyle[ArrayStyle["NewLine"] = 1] = "NewLine";
 })(ArrayStyle || (ArrayStyle = {}));
 
+const onceWhen = (predicate) => (src) => {
+    return src.pipe(filter(predicate), first());
+};
 const mapArray = (mapFunc) => (source) => source.pipe(map(src => src.map(mapFunc)));
 const filterArray = (filterFunc) => (source) => source.pipe(map(src => src.filter(filterFunc)));
 function onWait(val) {
@@ -718,7 +724,15 @@ class NotPersisitedTableSettings {
     }
 }
 
+var InitializationState;
+(function (InitializationState) {
+    InitializationState[InitializationState["Created"] = 0] = "Created";
+    InitializationState[InitializationState["MetaDataLoaded"] = 1] = "MetaDataLoaded";
+    InitializationState[InitializationState["LoadedFromStore"] = 2] = "LoadedFromStore";
+    InitializationState[InitializationState["Ready"] = 3] = "Ready";
+})(InitializationState || (InitializationState = {}));
 const defaultTableState = {
+    initializationState: InitializationState.Created,
     metaData: {},
     filters: {},
     hiddenKeys: [],
@@ -729,6 +743,247 @@ const defaultTableState = {
     pageSize: 10,
 };
 
+var FilterType;
+(function (FilterType) {
+    FilterType["NumberEquals"] = "Equals";
+    FilterType["NumberNotEqual"] = "Does Not Equal";
+    FilterType["NumberGreaterThan"] = "Greater Than";
+    FilterType["NumberLessThan"] = "Less Than";
+    FilterType["NumberBetween"] = "Between";
+    FilterType["StringEquals"] = "Equals";
+    FilterType["StringContains"] = "Contains";
+    FilterType["StringDoesNotContain"] = "Does Not Contain";
+    FilterType["StringStartWith"] = "Start With";
+    FilterType["StringEndsWith"] = "Ends With";
+    FilterType["DateIsOn"] = "Is on";
+    FilterType["DateIsNotOn"] = "Is Not On";
+    FilterType["DateOnOrAfter"] = "On or After";
+    FilterType["DateOnOrBefore"] = "On or Before";
+    FilterType["DateBetween"] = "Between";
+    FilterType["BooleanEquals"] = "Is";
+    FilterType["IsNull"] = "Is Blank";
+    FilterType["Or"] = "Or";
+    FilterType["And"] = "And";
+    FilterType["In"] = "In";
+    FilterType["Custom"] = "Custom";
+})(FilterType || (FilterType = {}));
+const NumberFilterMap = {
+    [FilterType.NumberEquals]: [FilterType.NumberEquals],
+    [FilterType.NumberNotEqual]: [FilterType.NumberNotEqual],
+    [FilterType.NumberGreaterThan]: [FilterType.NumberGreaterThan],
+    [FilterType.NumberLessThan]: [FilterType.NumberLessThan],
+    [FilterType.NumberBetween]: [FilterType.NumberBetween],
+    [FilterType.IsNull]: [FilterType.IsNull],
+    [FilterType.In]: [FilterType.In],
+};
+const StringFilterMap = {
+    [FilterType.StringEquals]: [FilterType.StringEquals],
+    [FilterType.StringContains]: [FilterType.StringContains],
+    [FilterType.StringDoesNotContain]: [FilterType.StringDoesNotContain],
+    [FilterType.StringStartWith]: [FilterType.StringStartWith],
+    [FilterType.StringEndsWith]: [FilterType.StringEndsWith],
+    [FilterType.IsNull]: [FilterType.IsNull],
+    [FilterType.In]: [FilterType.In],
+};
+const DateFilterMap = {
+    [FilterType.DateIsOn]: [FilterType.DateIsOn],
+    [FilterType.DateIsNotOn]: [FilterType.DateIsNotOn],
+    [FilterType.DateOnOrAfter]: [FilterType.DateOnOrAfter],
+    [FilterType.DateOnOrBefore]: [FilterType.DateOnOrBefore],
+    [FilterType.DateBetween]: [FilterType.DateBetween],
+    [FilterType.IsNull]: [FilterType.IsNull],
+};
+const BooleanFilterMap = {
+    [FilterType.BooleanEquals]: [FilterType.BooleanEquals],
+    [FilterType.IsNull]: [FilterType.IsNull],
+};
+const EnumFilterMap = {
+    [FilterType.IsNull]: [FilterType.IsNull],
+    [FilterType.In]: [FilterType.In]
+};
+
+const isNull = (filterInfo) => {
+    const func = filterInfo.filterValue ?
+        (val) => val == null || val === ''
+        :
+            (val) => val != null && val !== '';
+    return func;
+};
+
+const stringEqualFunc = (filterInfo) => {
+    const equelsVal = prepareForStringCompare(filterInfo.filterValue);
+    return ((val) => prepareForStringCompare(val) === equelsVal);
+};
+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) => filterVals.some((s) => prepareForStringCompare(val) === 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();
+    return ((val) => val.getTime() === isOnVal);
+};
+const dateIsNotOnFunc = (filterInfo) => {
+    const isNotOnVal = new Date(filterInfo.filterValue).getTime();
+    return ((val) => val?.getTime() !== isNotOnVal);
+};
+const dateIsOnOrAfterFunc = (filterInfo) => {
+    const afterVal = new Date(filterInfo.filterValue).getTime();
+    return ((val) => val.getTime() >= afterVal);
+};
+const dateIsOnOrBeforeFunc = (filterInfo) => {
+    const beforeVal = new Date(filterInfo.filterValue).getTime();
+    return ((val) => val.getTime() <= beforeVal);
+};
+const dateBetweenFunc = (filterInfo) => {
+    const startVal = new Date(filterInfo.filterValue.Start);
+    const endVal = new Date(filterInfo.filterValue.End);
+    return ((val) => val >= startVal && val <= endVal);
+};
+const DateFilterFuncs = {
+    [FilterType.DateIsOn]: dateIsOnFunc,
+    [FilterType.DateIsNotOn]: dateIsNotOnFunc,
+    [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
+    [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
+    [FilterType.DateBetween]: dateBetweenFunc,
+    [FilterType.IsNull]: isNull,
+};
+
+const booleanEqualsFunc = (filterInfo) => (val) => {
+    return filterInfo.filterValue === val;
+};
+const BooleanFilterFuncs = {
+    [FilterType.BooleanEquals]: booleanEqualsFunc,
+    [FilterType.IsNull]: isNull,
+};
+
+const filterTypeMap = {
+    [FieldType.Unknown]: StringFilterMap,
+    [FieldType.Date]: DateFilterMap,
+    [FieldType.Currency]: NumberFilterMap,
+    [FieldType.Array]: StringFilterMap,
+    [FieldType.Number]: NumberFilterMap,
+    [FieldType.String]: StringFilterMap,
+    [FieldType.Boolean]: BooleanFilterMap,
+    [FieldType.PhoneNumber]: StringFilterMap,
+    [FieldType.Link]: StringFilterMap,
+    [FieldType.Enum]: EnumFilterMap,
+};
+const filterFactoryMap = {
+    [FilterType.And]: (filter) => {
+        const filters = filter.filterValue.map(createFilterFunc);
+        return (obj) => filters.every(f => f(obj));
+    },
+    [FilterType.In]: (filter) => {
+        const filters = filter.filterValue.map(createFilterFunc);
+        return (obj) => filters.some(f => f(obj));
+    },
+};
+const filterTypeFuncMap = {
+    [FieldType.String]: StringFilterFuncs,
+    [FieldType.Array]: StringFilterFuncs,
+    [FieldType.Currency]: NumberFilterFuncs,
+    [FieldType.PhoneNumber]: StringFilterFuncs,
+    [FieldType.Date]: DateFilterFuncs,
+    [FieldType.Number]: NumberFilterFuncs,
+    [FieldType.Boolean]: BooleanFilterFuncs,
+    [FieldType.Unknown]: StringFilterFuncs,
+    [FieldType.Enum]: EnumFilterFuncs,
+    [FieldType.Link]: StringFilterFuncs,
+};
+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 createFilterFunc(filter) {
+    if (isCustomFilter(filter)) {
+        return filter.active ? filter.predicate : defaultPredicate;
+    }
+    if (filter.filterValue === undefined) {
+        return defaultPredicate;
+    }
+    const func = filterTypeFuncMap[filter.fieldType][filter.filterType](filter);
+    if (!func) {
+        if (filterFactoryMap[filter.filterType]) {
+            return filterFactoryMap[filter.filterType](filter);
+        }
+    }
+    const cannotBeTrueForNull = !FalseyValueCanBeIncludedFilterTypes.includes(filter.filterType);
+    return (rowObj) => {
+        const value = rowObj[filter.key];
+        return ((value == undefined) && cannotBeTrueForNull)
+            ? false
+            : func(value);
+    };
+}
+const FalseyValueCanBeIncludedFilterTypes = [FilterType.IsNull, FilterType.NumberNotEqual, FilterType.DateIsNotOn, FilterType.StringDoesNotContain];
+
+function stateIs(initializationState) {
+    return (state) => state.initializationState === initializationState;
+}
 class TableStore extends ComponentStore {
     constructor(config) {
         super({ ...defaultTableState, ...config.defaultTableState });
@@ -801,7 +1056,9 @@ class TableStore extends ComponentStore {
             return this.addFiltersToState(state, filters);
         });
         this.addFiltersToState = (state, filters) => {
-            const filtersObj = 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) {
@@ -810,6 +1067,12 @@ class TableStore extends ComponentStore {
                 filtersObj[filter.filterId] = filter;
                 return filtersObj;
             }, {});
+            customFilters.forEach(fltr => {
+                if (!fltr.filterId) {
+                    fltr.filterId = v4();
+                }
+                filtersObj[fltr.filterId] = fltr;
+            });
             return {
                 ...state,
                 filters: { ...state.filters, ...filtersObj }
@@ -847,6 +1110,12 @@ class TableStore extends ComponentStore {
         };
         this.setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize }));
         this.updateState = this.updater(this.updateStateFunc);
+        this.updateStateFromPersistedState = this.updater((state, persistedState) => {
+            const incomingTableState = this.cleanPersistedState(state, persistedState);
+            const newState = this.updateStateFunc(state, incomingTableState);
+            newState.initializationState = state.initializationState === InitializationState.MetaDataLoaded ? InitializationState.LoadedFromStore : state.initializationState;
+            return newState;
+        });
         this.getUserDefinedTableSize$ = this.select(state => state.userDefined.table.width);
         this.setTableWidth = this.updater((state, widthInpixels) => ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInpixels } } }));
         this.mergeMeta = (orig, merge) => {
@@ -866,6 +1135,9 @@ class TableStore extends ComponentStore {
                 click: merge.click ?? orig.click,
             };
         };
+        this.setIntializationState = this.updater((state, initializationState) => {
+            return { ...state, initializationState };
+        });
         this.setMetaData = this.updater((state, md) => {
             const metaData = (Array.isArray(md) ? [...md] : [md])
                 .reduce((prev, curr) => {
@@ -882,7 +1154,8 @@ class TableStore extends ComponentStore {
                 sorted = this.createPreSort(metaData);
             }
             const order = this.initializeOrder(state, metaData);
-            return { ...state, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
+            const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
+            return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
         });
         this.initializeOrder = (state, mds) => {
             const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
@@ -926,6 +1199,24 @@ class TableStore extends ComponentStore {
     onLast(callback) {
         this.on(this.state$.pipe(last()), callback);
     }
+    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 });
+    }
+    runOnceWhen(predicate, func) {
+        const obs = this.state$.pipe(onceWhen(predicate));
+        this.on(obs, (state) => {
+            func(state);
+        });
+    }
+    onReady(func) {
+        this.runOnceWhen(stateIs(InitializationState.Ready), func);
+    }
 }
 TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableStore, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable });
 TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableStore, providedIn: 'root' });
@@ -1120,64 +1411,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; } });
 
-var FilterType;
-(function (FilterType) {
-    FilterType["NumberEquals"] = "Equals";
-    FilterType["NumberNotEqual"] = "Does Not Equal";
-    FilterType["NumberGreaterThan"] = "Greater Than";
-    FilterType["NumberLessThan"] = "Less Than";
-    FilterType["NumberBetween"] = "Between";
-    FilterType["StringEquals"] = "Equals";
-    FilterType["StringContains"] = "Contains";
-    FilterType["StringDoesNotContain"] = "Does Not Contain";
-    FilterType["StringStartWith"] = "Start With";
-    FilterType["StringEndsWith"] = "Ends With";
-    FilterType["DateIsOn"] = "Is on";
-    FilterType["DateIsNotOn"] = "Is Not On";
-    FilterType["DateOnOrAfter"] = "On or After";
-    FilterType["DateOnOrBefore"] = "On or Before";
-    FilterType["DateBetween"] = "Between";
-    FilterType["BooleanEquals"] = "Is";
-    FilterType["IsNull"] = "Is Blank";
-    FilterType["Or"] = "Or";
-    FilterType["And"] = "And";
-    FilterType["In"] = "In";
-})(FilterType || (FilterType = {}));
-const NumberFilterMap = {
-    [FilterType.NumberEquals]: [FilterType.NumberEquals],
-    [FilterType.NumberNotEqual]: [FilterType.NumberNotEqual],
-    [FilterType.NumberGreaterThan]: [FilterType.NumberGreaterThan],
-    [FilterType.NumberLessThan]: [FilterType.NumberLessThan],
-    [FilterType.NumberBetween]: [FilterType.NumberBetween],
-    [FilterType.IsNull]: [FilterType.IsNull],
-    [FilterType.In]: [FilterType.In],
-};
-const StringFilterMap = {
-    [FilterType.StringEquals]: [FilterType.StringEquals],
-    [FilterType.StringContains]: [FilterType.StringContains],
-    [FilterType.StringDoesNotContain]: [FilterType.StringDoesNotContain],
-    [FilterType.StringStartWith]: [FilterType.StringStartWith],
-    [FilterType.StringEndsWith]: [FilterType.StringEndsWith],
-    [FilterType.IsNull]: [FilterType.IsNull],
-    [FilterType.In]: [FilterType.In],
-};
-const DateFilterMap = {
-    [FilterType.DateIsOn]: [FilterType.DateIsOn],
-    [FilterType.DateIsNotOn]: [FilterType.DateIsNotOn],
-    [FilterType.DateOnOrAfter]: [FilterType.DateOnOrAfter],
-    [FilterType.DateOnOrBefore]: [FilterType.DateOnOrBefore],
-    [FilterType.DateBetween]: [FilterType.DateBetween],
-    [FilterType.IsNull]: [FilterType.IsNull],
-};
-const BooleanFilterMap = {
-    [FilterType.BooleanEquals]: [FilterType.BooleanEquals],
-    [FilterType.IsNull]: [FilterType.IsNull],
-};
-const EnumFilterMap = {
-    [FilterType.IsNull]: [FilterType.IsNull],
-    [FilterType.In]: [FilterType.In]
-};
-
 class StopPropagationDirective {
     onClick(event) {
         event.stopPropagation();
@@ -1249,7 +1482,7 @@ class InListFilterComponent {
     }
 }
 InListFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-InListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: { key: "key" }, providers: [{
+InListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: InListFilterComponent,
             multi: true
@@ -1259,11 +1492,11 @@ InListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
     </mat-checkbox>
   </div>
-  `, isInline: true, components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }], pipes: { "keyvalue": i1.KeyValuePipe, "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }], pipes: { "keyvalue": i1.KeyValuePipe, "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'tb-in-list-filter',
+                    selector: 'tb-in-list-filter , [tb-in-list-filter]',
                     template: `
   <div *ngFor="let item of keyValues$ | async| keyvalue" >
     <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
@@ -1276,7 +1509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: InListFilterComponent,
                             multi: true
-                        }],
+                        }]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TableStore }]; }, propDecorators: { key: [{
                 type: Input
@@ -1341,10 +1574,10 @@ class HeaderMenuComponent {
     }
 }
 HeaderMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' ></tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          <mat-form-field stop-propagation class=\"example-full-width font\" style=\"padding: 0 16px\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          <mat-form-field class=\"auto-width\"  stop-propagation style=\"padding: 0 16px\">\r\n            <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div style=\"padding: 0 16px\">\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' : \r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["key"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i6.MatPrefix, selector: "[matPrefix]" }, { type: i6.MatLabel, selector: "mat-label" }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter  style=\"display:block;padding: 0 16px\"  name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n          </tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          <mat-form-field stop-propagation class=\"font\" style=\"padding: 0 16px\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          <mat-form-field class=\"auto-width\"  stop-propagation style=\"padding: 0 16px\">\r\n            <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div style=\"padding: 0 16px\">\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i6.MatPrefix, selector: "[matPrefix]" }, { type: i6.MatLabel, selector: "mat-label" }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' ></tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          <mat-form-field stop-propagation class=\"example-full-width font\" style=\"padding: 0 16px\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          <mat-form-field class=\"auto-width\"  stop-propagation style=\"padding: 0 16px\">\r\n            <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div style=\"padding: 0 16px\">\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' : \r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"] }]
+            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter  style=\"display:block;padding: 0 16px\"  name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n          </tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          <mat-form-field stop-propagation class=\"font\" style=\"padding: 0 16px\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          <mat-form-field class=\"auto-width\"  stop-propagation style=\"padding: 0 16px\">\r\n            <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div style=\"padding: 0 16px\">\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"] }]
         }], ctorParameters: function () { return [{ type: TableStore }]; }, propDecorators: { filter: [{
                 type: Input
             }], metaData: [{
@@ -1531,8 +1764,8 @@ class ColumnBuilderComponent {
         }
     }
 }
-ColumnBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$1.MatTable }, { token: TableStore }, { token: TableTemplateService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: ColumnBuilderComponent, selector: "tb-column-builder", inputs: { metaData: "metaData", customCell: "customCell", data$: "data$" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\">\n\n  <ng-template #body let-element='element' >\n\n      <mat-cell [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)'>\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }\">\n        </ng-container>\n      <span class=\"no-val\" *ngIf=\"\n        !element.isGroupFooter &&\n        metaData.fieldType !== FieldType.Expression &&\n        (element[metaData.key] == null) &&\n        !((customCell && customCell.TemplateRef) || metaData.template)\n      \"> - </span>\n    </mat-cell>\n\n  </ng-template>\n\n  <ng-template matHeaderCellDef #myHeader>\n\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\n      </ng-container>\n    </ng-container>\n\n    <ng-template #header>\n\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\n        <div class=\"header-container\" cdkDragHandle>\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n          </div>\n          <ng-template #headerWithoutMenu >\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n            </div>\n          </ng-template>\n          <tb-header-menu \n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\n          </tb-header-menu>\n        </div>\n      </mat-header-cell>\n\n    </ng-template>\n\n  </ng-template>\n\n\n  <ng-container *matCellDef=\"let element;\">\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\n    </ng-container>\n  </ng-container>\n\n  <ng-template matFooterCellDef>\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\n      <ng-container\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\n      </ng-container>\n    </ng-container>\n\n    <ng-template #footer>\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\n          <span *ngSwitchCase=\"FieldType.Currency\">\n            {{ data | columnTotal: metaData | currency }}\n          </span>\n          <span *ngSwitchCase=\"FieldType.Number\">\n            {{ data | columnTotal: metaData | number }}\n          </span>\n        </span>\n      </mat-footer-cell>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:white;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], components: [{ type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$1.MatCellDef, selector: "[matCellDef]" }, { type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "spaceCase": SpaceCasePipe, "async": i1.AsyncPipe, "currency": i1.CurrencyPipe, "columnTotal": ColumnTotalPipe, "number": i1.DecimalPipe }, viewProviders: [
+ColumnBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$2.MatTable }, { token: TableStore }, { token: TableTemplateService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: ColumnBuilderComponent, selector: "tb-column-builder", inputs: { metaData: "metaData", customCell: "customCell", data$: "data$" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\">\n\n  <ng-template #body let-element='element' >\n\n      <mat-cell [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)'>\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }\">\n        </ng-container>\n      <span class=\"no-val\" *ngIf=\"\n        !element.isGroupFooter &&\n        metaData.fieldType !== FieldType.Expression &&\n        (element[metaData.key] == null) &&\n        !((customCell && customCell.TemplateRef) || metaData.template)\n      \"> - </span>\n    </mat-cell>\n\n  </ng-template>\n\n  <ng-template matHeaderCellDef #myHeader>\n\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\n      </ng-container>\n    </ng-container>\n\n    <ng-template #header>\n\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\n        <div class=\"header-container\" cdkDragHandle>\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n          </div>\n          <ng-template #headerWithoutMenu >\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n            </div>\n          </ng-template>\n          <tb-header-menu \n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\n          </tb-header-menu>\n        </div>\n      </mat-header-cell>\n\n    </ng-template>\n\n  </ng-template>\n\n\n  <ng-container *matCellDef=\"let element;\">\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\n    </ng-container>\n  </ng-container>\n\n  <ng-template matFooterCellDef>\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\n      <ng-container\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\n      </ng-container>\n    </ng-container>\n\n    <ng-template #footer>\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\n          <span *ngSwitchCase=\"FieldType.Currency\">\n            {{ data | columnTotal: metaData | currency }}\n          </span>\n          <span *ngSwitchCase=\"FieldType.Number\">\n            {{ data | columnTotal: metaData | number }}\n          </span>\n        </span>\n      </mat-footer-cell>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:white;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], components: [{ type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$2.MatCellDef, selector: "[matCellDef]" }, { type: i3$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i3$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "spaceCase": SpaceCasePipe, "async": i1.AsyncPipe, "currency": i1.CurrencyPipe, "columnTotal": ColumnTotalPipe, "number": i1.DecimalPipe }, viewProviders: [
         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
@@ -1540,7 +1773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
             args: [{ selector: 'tb-column-builder', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
                     ], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\">\n\n  <ng-template #body let-element='element' >\n\n      <mat-cell [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)'>\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }\">\n        </ng-container>\n      <span class=\"no-val\" *ngIf=\"\n        !element.isGroupFooter &&\n        metaData.fieldType !== FieldType.Expression &&\n        (element[metaData.key] == null) &&\n        !((customCell && customCell.TemplateRef) || metaData.template)\n      \"> - </span>\n    </mat-cell>\n\n  </ng-template>\n\n  <ng-template matHeaderCellDef #myHeader>\n\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\n      </ng-container>\n    </ng-container>\n\n    <ng-template #header>\n\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\n        <div class=\"header-container\" cdkDragHandle>\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n          </div>\n          <ng-template #headerWithoutMenu >\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n            </div>\n          </ng-template>\n          <tb-header-menu \n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\n          </tb-header-menu>\n        </div>\n      </mat-header-cell>\n\n    </ng-template>\n\n  </ng-template>\n\n\n  <ng-container *matCellDef=\"let element;\">\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\n    </ng-container>\n  </ng-container>\n\n  <ng-template matFooterCellDef>\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\n      <ng-container\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\n      </ng-container>\n    </ng-container>\n\n    <ng-template #footer>\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\n          <span *ngSwitchCase=\"FieldType.Currency\">\n            {{ data | columnTotal: metaData | currency }}\n          </span>\n          <span *ngSwitchCase=\"FieldType.Number\">\n            {{ data | columnTotal: metaData | number }}\n          </span>\n        </span>\n      </mat-footer-cell>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:white;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
-        }], ctorParameters: function () { return [{ type: TransformCreator }, { type: i3$1.MatTable }, { type: TableStore }, { type: TableTemplateService }]; }, propDecorators: { metaData: [{
+        }], ctorParameters: function () { return [{ type: TransformCreator }, { type: i3$2.MatTable }, { type: TableStore }, { type: TableTemplateService }]; }, propDecorators: { metaData: [{
                 type: Input
             }], customCell: [{
                 type: Input
@@ -1621,7 +1854,7 @@ PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
   <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
     [ngClass]="{'hide' : (collapseFooter$ | async)}">
   </mat-paginator>
-  `, isInline: true, styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-paginator', template: `
@@ -1789,7 +2022,7 @@ class GenericTableComponent {
     }
 }
 GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: GenericTableComponent, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", disableSort: "disableSort" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  #table\n  [dataSource]=\"dataSource\"\n  [trackBy]='trackByFunction'\n  [styler]=\"tableWidth | async\"\n>\n\n    <ng-container matColumnDef=\"select\">\n\n        <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"!!(masterToggleChecked$ | async)\"\n                        [indeterminate]=\"masterToggleIndeterminate$ | async\">\n          </mat-checkbox>\n        </mat-header-cell>\n\n        <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n          <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </mat-cell>\n\n        <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n          {{ selection.selected.length }}\n        </mat-footer-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"index\">\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n          <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\n          <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n      </ng-container>\n\n      <ng-container matColumnDef=\"groupHeader\">\n        <mat-cell *matCellDef=\"let row\" class=\"group-header\">\n          {{row.groupHeaderName}}\n        </mat-cell>\n      </ng-container>\n\n  <ng-container *ngIf=\"showHeader$ | async\">\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  </ng-container>\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: lightgray;\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n  <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n  <tb-paginator #tbPaginator\n    [dataSource]=\"dataSource\"\n    [tableElRef]=\"tableElRef\"\n    [data$]=\"data$\">\n  </tb-paginator>\n\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n  </mat-icon>\n</div>\n", styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3$1.MatCellDef, selector: "[matCellDef]" }, { type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: GenericTableComponent, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", disableSort: "disableSort" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  #table\n  [dataSource]=\"dataSource\"\n  [trackBy]='trackByFunction'\n  [styler]=\"tableWidth | async\"\n>\n\n    <ng-container matColumnDef=\"select\">\n\n        <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"!!(masterToggleChecked$ | async)\"\n                        [indeterminate]=\"masterToggleIndeterminate$ | async\">\n          </mat-checkbox>\n        </mat-header-cell>\n\n        <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n          <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </mat-cell>\n\n        <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n          {{ selection.selected.length }}\n        </mat-footer-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"index\">\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n          <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\n          <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n      </ng-container>\n\n      <ng-container matColumnDef=\"groupHeader\">\n        <mat-cell *matCellDef=\"let row\" class=\"group-header\">\n          {{row.groupHeaderName}}\n        </mat-cell>\n      </ng-container>\n\n  <ng-container *ngIf=\"showHeader$ | async\">\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  </ng-container>\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: lightgray;\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n  <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n  <tb-paginator #tbPaginator\n    [dataSource]=\"dataSource\"\n    [tableElRef]=\"tableElRef\"\n    [data$]=\"data$\">\n  </tb-paginator>\n\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n  </mat-icon>\n</div>\n", styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3$2.MatCellDef, selector: "[matCellDef]" }, { type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i3$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  #table\n  [dataSource]=\"dataSource\"\n  [trackBy]='trackByFunction'\n  [styler]=\"tableWidth | async\"\n>\n\n    <ng-container matColumnDef=\"select\">\n\n        <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"!!(masterToggleChecked$ | async)\"\n                        [indeterminate]=\"masterToggleIndeterminate$ | async\">\n          </mat-checkbox>\n        </mat-header-cell>\n\n        <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n          <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </mat-cell>\n\n        <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n          {{ selection.selected.length }}\n        </mat-footer-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"index\">\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n          <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\n          <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n      </ng-container>\n\n      <ng-container matColumnDef=\"groupHeader\">\n        <mat-cell *matCellDef=\"let row\" class=\"group-header\">\n          {{row.groupHeaderName}}\n        </mat-cell>\n      </ng-container>\n\n  <ng-container *ngIf=\"showHeader$ | async\">\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  </ng-container>\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: lightgray;\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n  <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n  <tb-paginator #tbPaginator\n    [dataSource]=\"dataSource\"\n    [tableElRef]=\"tableElRef\"\n    [data$]=\"data$\">\n  </tb-paginator>\n\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n  </mat-icon>\n</div>\n", styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
@@ -1905,7 +2138,7 @@ class GenColDisplayerComponent {
     }
 }
 GenColDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: GenColDisplayerComponent, selector: "tb-col-displayer", ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n  <span matTooltip=\"Show/hide columns\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\n    </button>\n  </span>\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n    <button mat-menu-item>\n      <div style=\"display: flex; flex-direction: row-reverse;\">\n        <span matTooltip=\"Close\">\n            <button class=\"filter-button\" mat-icon-button>\n                <mat-icon>close</mat-icon>\n            </button>\n        </span>\n      </div>\n    </button>\n    <button mat-menu-item stop-propagation>\n      <div style=\"display: flex; justify-content: space-between;\">\n        <span matTooltip=\"Show all columns\">\n            <button mat-icon-button (click)=\"reset(displayCols)\">\n                <mat-icon color=\"primary\">done_all</mat-icon>\n            </button>\n        </span>\n\n        <span matTooltip=\"Hide all columns\">\n            <button mat-icon-button (click)=\"unset(displayCols)\">\n                <mat-icon color=\"primary\">cancel</mat-icon>\n            </button>\n        </span>\n      </div>\n    </button>\n\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y' >\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n          *ngFor=\"let col of displayCols\">\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <p class=\"label\" style=\"display: flex;\">\n              {{col.displayName || (col.key | spaceCase) }}\n          </p>\n          <span matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\n            <button mat-icon-button>\n                <mat-icon color=\"primary\">check_box</mat-icon>\n            </button>\n          </span>\n\n          <ng-template #hidden >\n            <span matTooltip=\"Show Column\" class=\"show-hide\">\n              <button mat-icon-button>\n                <mat-icon>indeterminate_check_box</mat-icon>\n              </button>\n            </span>\n          </ng-template>\n\n        </div>\n      </button>\n    </div>\n  </mat-menu>\n</ng-container>\n", styles: [".show-hide{margin-left:15px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: GenColDisplayerComponent, selector: "tb-col-displayer", ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n  <span matTooltip=\"Show/hide columns\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\n    </button>\n  </span>\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n    <button mat-menu-item>\n      <div style=\"display: flex; flex-direction: row-reverse;\">\n        <span matTooltip=\"Close\">\n            <button class=\"filter-button\" mat-icon-button>\n                <mat-icon>close</mat-icon>\n            </button>\n        </span>\n      </div>\n    </button>\n    <button mat-menu-item stop-propagation>\n      <div style=\"display: flex; justify-content: space-between;\">\n        <span matTooltip=\"Show all columns\">\n            <button mat-icon-button (click)=\"reset(displayCols)\">\n                <mat-icon color=\"primary\">done_all</mat-icon>\n            </button>\n        </span>\n\n        <span matTooltip=\"Hide all columns\">\n            <button mat-icon-button (click)=\"unset(displayCols)\">\n                <mat-icon color=\"primary\">cancel</mat-icon>\n            </button>\n        </span>\n      </div>\n    </button>\n\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y' >\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n          *ngFor=\"let col of displayCols\">\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <p class=\"label\" style=\"display: flex;\">\n              {{col.displayName || (col.key | spaceCase) }}\n          </p>\n          <span matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\n            <button mat-icon-button>\n                <mat-icon color=\"primary\">check_box</mat-icon>\n            </button>\n          </span>\n\n          <ng-template #hidden >\n            <span matTooltip=\"Show Column\" class=\"show-hide\">\n              <button mat-icon-button>\n                <mat-icon>indeterminate_check_box</mat-icon>\n              </button>\n            </span>\n          </ng-template>\n\n        </div>\n      </button>\n    </div>\n  </mat-menu>\n</ng-container>\n", styles: [".show-hide{margin-left:15px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n  <span matTooltip=\"Show/hide columns\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\n    </button>\n  </span>\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n    <button mat-menu-item>\n      <div style=\"display: flex; flex-direction: row-reverse;\">\n        <span matTooltip=\"Close\">\n            <button class=\"filter-button\" mat-icon-button>\n                <mat-icon>close</mat-icon>\n            </button>\n        </span>\n      </div>\n    </button>\n    <button mat-menu-item stop-propagation>\n      <div style=\"display: flex; justify-content: space-between;\">\n        <span matTooltip=\"Show all columns\">\n            <button mat-icon-button (click)=\"reset(displayCols)\">\n                <mat-icon color=\"primary\">done_all</mat-icon>\n            </button>\n        </span>\n\n        <span matTooltip=\"Hide all columns\">\n            <button mat-icon-button (click)=\"unset(displayCols)\">\n                <mat-icon color=\"primary\">cancel</mat-icon>\n            </button>\n        </span>\n      </div>\n    </button>\n\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y' >\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n          *ngFor=\"let col of displayCols\">\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <p class=\"label\" style=\"display: flex;\">\n              {{col.displayName || (col.key | spaceCase) }}\n          </p>\n          <span matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\n            <button mat-icon-button>\n                <mat-icon color=\"primary\">check_box</mat-icon>\n            </button>\n          </span>\n\n          <ng-template #hidden >\n            <span matTooltip=\"Show Column\" class=\"show-hide\">\n              <button mat-icon-button>\n                <mat-icon>indeterminate_check_box</mat-icon>\n              </button>\n            </span>\n          </ng-template>\n\n        </div>\n      </button>\n    </div>\n  </mat-menu>\n</ng-container>\n", styles: [".show-hide{margin-left:15px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
@@ -1917,206 +2150,37 @@ class WrapperFilterStore extends ComponentStore {
         this.clearAll = this.updater(() => ({ filterInfo: [] }));
         this.deleteByIndex = this.updater((state, index) => {
             const arr = [...state.filterInfo];
-            arr.splice(index, 1);
-            return { filterInfo: arr };
-        });
-        this.currentFilters$ = this.state$.pipe(map(state => state.filterInfo));
-        this.addFilter = this.updater((state, filter) => {
-            return ({ ...state, filterInfo: [...state.filterInfo, filter] });
-        });
-    }
-}
-WrapperFilterStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-WrapperFilterStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WrapperFilterStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WrapperFilterStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-class GenFilterDisplayerComponent {
-    constructor(tableState, filterStore) {
-        this.tableState = tableState;
-        this.filterStore = filterStore;
-        this.filterCols$ = tableState.metaDataArray$.pipe(map(md => Object.values(md).filter(m => (m.fieldType !== FieldType.Hidden) && (!m.noFilter))));
-    }
-    addFilter(metaData) {
-        this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
-    }
-}
-GenFilterDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
-GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n    {{md.displayName || (md.key | spaceCase)}}\n  </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n    {{md.displayName || (md.key | spaceCase)}}\n  </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
-        }], ctorParameters: function () { return [{ type: TableStore }, { type: WrapperFilterStore }]; } });
-
-const isNull = (filterInfo) => {
-    const func = filterInfo.filterValue ?
-        (val) => val == null || val === ''
-        :
-            (val) => val != null && val !== '';
-    return func;
-};
-
-const stringEqualFunc = (filterInfo) => {
-    const equelsVal = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => prepareForStringCompare(val) === equelsVal);
-};
-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) => filterVals.some((s) => prepareForStringCompare(val) === 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();
-    return ((val) => val.getTime() === isOnVal);
-};
-const dateIsNotOnFunc = (filterInfo) => {
-    const isNotOnVal = new Date(filterInfo.filterValue).getTime();
-    return ((val) => val?.getTime() !== isNotOnVal);
-};
-const dateIsOnOrAfterFunc = (filterInfo) => {
-    const afterVal = new Date(filterInfo.filterValue).getTime();
-    return ((val) => val.getTime() >= afterVal);
-};
-const dateIsOnOrBeforeFunc = (filterInfo) => {
-    const beforeVal = new Date(filterInfo.filterValue).getTime();
-    return ((val) => val.getTime() <= beforeVal);
-};
-const dateBetweenFunc = (filterInfo) => {
-    const startVal = new Date(filterInfo.filterValue.Start);
-    const endVal = new Date(filterInfo.filterValue.End);
-    return ((val) => val >= startVal && val <= endVal);
-};
-const DateFilterFuncs = {
-    [FilterType.DateIsOn]: dateIsOnFunc,
-    [FilterType.DateIsNotOn]: dateIsNotOnFunc,
-    [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
-    [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
-    [FilterType.DateBetween]: dateBetweenFunc,
-    [FilterType.IsNull]: isNull,
-};
-
-const booleanEqualsFunc = (filterInfo) => (val) => {
-    return filterInfo.filterValue === val;
-};
-const BooleanFilterFuncs = {
-    [FilterType.BooleanEquals]: booleanEqualsFunc,
-    [FilterType.IsNull]: isNull,
-};
+            arr.splice(index, 1);
+            return { filterInfo: arr };
+        });
+        this.currentFilters$ = this.state$.pipe(map(state => state.filterInfo));
+        this.addFilter = this.updater((state, filter) => {
+            return ({ ...state, filterInfo: [...state.filterInfo, filter] });
+        });
+    }
+}
+WrapperFilterStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+WrapperFilterStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WrapperFilterStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WrapperFilterStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
-const filterTypeMap = {
-    [FieldType.Unknown]: StringFilterMap,
-    [FieldType.Date]: DateFilterMap,
-    [FieldType.Currency]: NumberFilterMap,
-    [FieldType.Array]: StringFilterMap,
-    [FieldType.Number]: NumberFilterMap,
-    [FieldType.String]: StringFilterMap,
-    [FieldType.Boolean]: BooleanFilterMap,
-    [FieldType.PhoneNumber]: StringFilterMap,
-    [FieldType.Link]: StringFilterMap,
-    [FieldType.Enum]: EnumFilterMap,
-};
-const filterFactoryMap = {
-    [FilterType.And]: (filter) => {
-        const filters = filter.filterValue.map(createFilterFunc);
-        return (obj) => filters.every(f => f(obj));
-    },
-    [FilterType.In]: (filter) => {
-        const filters = filter.filterValue.map(createFilterFunc);
-        return (obj) => filters.some(f => f(obj));
-    },
-};
-const filterTypeFuncMap = {
-    [FieldType.String]: StringFilterFuncs,
-    [FieldType.Array]: StringFilterFuncs,
-    [FieldType.Currency]: NumberFilterFuncs,
-    [FieldType.PhoneNumber]: StringFilterFuncs,
-    [FieldType.Date]: DateFilterFuncs,
-    [FieldType.Number]: NumberFilterFuncs,
-    [FieldType.Boolean]: BooleanFilterFuncs,
-    [FieldType.Unknown]: StringFilterFuncs,
-    [FieldType.Enum]: EnumFilterFuncs,
-    [FieldType.Link]: StringFilterFuncs,
-};
-function createFilterFunc(filter) {
-    if (filter.filterValue === undefined) {
-        return () => true;
+class GenFilterDisplayerComponent {
+    constructor(tableState, filterStore) {
+        this.tableState = tableState;
+        this.filterStore = filterStore;
+        this.filterCols$ = tableState.metaDataArray$.pipe(map(md => Object.values(md).filter(m => (m.fieldType !== FieldType.Hidden) && (!m.noFilter))));
     }
-    const func = filterTypeFuncMap[filter.fieldType][filter.filterType](filter);
-    if (!func) {
-        if (filterFactoryMap[filter.filterType]) {
-            return filterFactoryMap[filter.filterType](filter);
-        }
+    addFilter(metaData) {
+        this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
     }
-    const cannotBeTrueForNull = !FalseyValueCanBeIncludedFilterTypes.includes(filter.filterType);
-    return (rowObj) => {
-        const value = rowObj[filter.key];
-        return ((value == undefined) && cannotBeTrueForNull)
-            ? false
-            : func(value);
-    };
 }
-const FalseyValueCanBeIncludedFilterTypes = [FilterType.IsNull, FilterType.NumberNotEqual, FilterType.DateIsNotOn, FilterType.StringDoesNotContain];
+GenFilterDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
+GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n    {{md.displayName || (md.key | spaceCase)}}\n  </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n    {{md.displayName || (md.key | spaceCase)}}\n  </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
+        }], ctorParameters: function () { return [{ type: TableStore }, { type: WrapperFilterStore }]; } });
 
 class AutoFocusDirective {
     constructor(elementRef) {
@@ -2255,7 +2319,7 @@ class FilterComponent {
     }
 }
 FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FilterComponent, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "<mat-card class=\"mat-elevation-z5\" *ngIf=\"filter\">\n  <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n    <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n    <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n    <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n    <div class=\"row\" >\n      <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n      <button class=\"cancel-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n          matTooltip=\"Close\">\n        <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"row\">\n        <mat-form-field class=\"my-filter\" >\n            <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [(ngModel)]=\"currentFilterType\" >\n                <mat-option *ngFor=\"let kvp of  filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\n                    {{ kvp.key }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n                                          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\n                <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n            </ng-container>\n            <ng-container   *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\n                <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n            </ng-container>\n            <ng-container  *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\n              <ng-container   *ngTemplateOutlet=\"Boolean\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\n                <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n            </ng-container>\n            <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\n              <ng-container  *ngTemplateOutlet=\"Enum\"></ng-container>\n            </ng-container>\n        </ng-container>\n\n        <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\n          <mat-radio-button [value]=\"true\">True</mat-radio-button>\n          <mat-radio-button [value]=\"false\">False</mat-radio-button>\n        </mat-radio-group>\n\n    </div>\n    <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n      Apply\n    </button>\n\n\n<ng-template #String>\n  <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\n    <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n  </mat-form-field>\n  <ng-container *ngIf=\"currentFilterType === FilterType.In\">\n    <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n  </ng-container>\n</ng-template>\n\n<ng-template #Boolean >\n  <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\n    <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\n      <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n        <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n        <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n      </mat-radio-group>\n    </div>\n  </div>\n</ng-template>\n\n  <ng-template #Enum>\n    <ng-container *ngIf='currentFilterType === FilterType.In' >\n      <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n    </ng-container>\n  </ng-template>\n\n  </form>\n</mat-card>\n", styles: [".filter-name{color:#6495ed;margin-right:30px;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.row{margin:0}.cancel-button{font-size:18px;font-weight:700}mat-radio-button{margin:5px}\n"], components: [{ type: i2$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["key"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "spaceCase": SpaceCasePipe, "keyvalue": i1.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FilterComponent, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "<mat-card class=\"mat-elevation-z5\" *ngIf=\"filter\">\n  <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n    <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n    <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n    <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n    <div class=\"row\" >\n      <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n      <button class=\"cancel-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n          matTooltip=\"Close\">\n        <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"row\">\n        <mat-form-field class=\"my-filter\" >\n            <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [(ngModel)]=\"currentFilterType\" >\n                <mat-option *ngFor=\"let kvp of  filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\n                    {{ kvp.key }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n                                          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\n                <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n            </ng-container>\n            <ng-container   *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\n                <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n            </ng-container>\n            <ng-container  *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\n              <ng-container   *ngTemplateOutlet=\"Boolean\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\n                <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n            </ng-container>\n            <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\n              <ng-container  *ngTemplateOutlet=\"Enum\"></ng-container>\n            </ng-container>\n        </ng-container>\n\n        <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\n          <mat-radio-button [value]=\"true\">True</mat-radio-button>\n          <mat-radio-button [value]=\"false\">False</mat-radio-button>\n        </mat-radio-group>\n\n    </div>\n    <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n      Apply\n    </button>\n\n\n<ng-template #String>\n  <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\n    <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n  </mat-form-field>\n  <ng-container *ngIf=\"currentFilterType === FilterType.In\">\n    <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n  </ng-container>\n</ng-template>\n\n<ng-template #Boolean >\n  <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\n    <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\n      <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n        <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n        <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n      </mat-radio-group>\n    </div>\n  </div>\n</ng-template>\n\n  <ng-template #Enum>\n    <ng-container *ngIf='currentFilterType === FilterType.In' >\n      <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n    </ng-container>\n  </ng-template>\n\n  </form>\n</mat-card>\n", styles: [".filter-name{color:#6495ed;margin-right:30px;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.row{margin:0}.cancel-button{font-size:18px;font-weight:700}mat-radio-button{margin:5px}\n"], components: [{ type: i2$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "spaceCase": SpaceCasePipe, "keyvalue": i1.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"mat-elevation-z5\" *ngIf=\"filter\">\n  <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n    <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n    <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n    <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n    <div class=\"row\" >\n      <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n      <button class=\"cancel-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n          matTooltip=\"Close\">\n        <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"row\">\n        <mat-form-field class=\"my-filter\" >\n            <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [(ngModel)]=\"currentFilterType\" >\n                <mat-option *ngFor=\"let kvp of  filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\n                    {{ kvp.key }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n                                          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\n                <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n            </ng-container>\n            <ng-container   *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\n                <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n            </ng-container>\n            <ng-container  *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\n              <ng-container   *ngTemplateOutlet=\"Boolean\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\n                <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n            </ng-container>\n            <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\n              <ng-container  *ngTemplateOutlet=\"Enum\"></ng-container>\n            </ng-container>\n        </ng-container>\n\n        <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\n          <mat-radio-button [value]=\"true\">True</mat-radio-button>\n          <mat-radio-button [value]=\"false\">False</mat-radio-button>\n        </mat-radio-group>\n\n    </div>\n    <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n      Apply\n    </button>\n\n\n<ng-template #String>\n  <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\n    <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n  </mat-form-field>\n  <ng-container *ngIf=\"currentFilterType === FilterType.In\">\n    <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n  </ng-container>\n</ng-template>\n\n<ng-template #Boolean >\n  <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\n    <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\n      <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n        <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n        <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n      </mat-radio-group>\n    </div>\n  </div>\n</ng-template>\n\n  <ng-template #Enum>\n    <ng-container *ngIf='currentFilterType === FilterType.In' >\n      <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n    </ng-container>\n  </ng-template>\n\n  </form>\n</mat-card>\n", styles: [".filter-name{color:#6495ed;margin-right:30px;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.row{margin:0}.cancel-button{font-size:18px;font-weight:700}mat-radio-button{margin:5px}\n"] }]
@@ -2495,6 +2559,372 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: TableStore }]; } });
 
+const inputs = [
+    'predicate: tbCustomFilter',
+    'filterId: filterId',
+];
+class TableCustomFilterDirective {
+    constructor() {
+        this.savable = false;
+        this.used = false;
+    }
+}
+TableCustomFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TableCustomFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: TableCustomFilterDirective, selector: " ", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: ' '
+                }]
+        }] });
+class TableFilterDirective extends ComponentStore {
+    constructor(model) {
+        super();
+        this.model = model;
+        this.filter$ = this.state$;
+        this.active = true;
+        this.filterValue = null;
+        this.used = false;
+        this.savable = false;
+        this.ready = false;
+        this._userActive = true;
+        if (model) {
+            this.effect(() => {
+                return model.valueChanges.pipe(tap$1(val => {
+                    this.filterValue = val;
+                    this.update();
+                }));
+            });
+        }
+    }
+    reset() {
+        this.filterValue = undefined;
+    }
+    setFilterValue(value) {
+        if (this.model) {
+            setTimeout(() => {
+                this.model.reset(value);
+            }, 0);
+        }
+        else {
+            this.filterValue = value;
+        }
+    }
+    ngOnChanges(changes) {
+        this.update();
+    }
+    ngOnInit() {
+        if (!this.filterId) {
+            this.filterId = v4();
+        }
+        else {
+            this.savable = true;
+        }
+        this.ready = true;
+        this.update();
+    }
+    setFilter(filter) {
+        this.setState(filter);
+    }
+    update() {
+        if (this.ready) {
+            this.setFilter({
+                filterId: this.filterId,
+                key: this.key,
+                filterType: this.filterType,
+                fieldType: this.fieldType,
+                filterValue: this.filterValue,
+                active: this.active && this.filterValue !== undefined,
+                _isExternalyManaged: true,
+            });
+        }
+    }
+}
+TableFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableFilterDirective, deps: [{ token: i5.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TableFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: TableFilterDirective, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tbFilter]"
+                }]
+        }], ctorParameters: function () { return [{ type: i5.NgControl, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { filterType: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], fieldType: [{
+                type: Input
+            }], filterId: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], filterValue: [{
+                type: Input
+            }] } });
+class TableFilterStringContainsDirective extends TableFilterDirective {
+    constructor(model) {
+        super(model);
+        this.filterType = FilterType.StringContains;
+        this.fieldType = FieldType.String;
+        this.effect(() => {
+            return model.valueChanges.pipe(tap$1(val => {
+                this.filterValue = val;
+                this.update();
+            }));
+        });
+    }
+    reset() {
+        if (this.model) {
+            this.model.reset();
+        }
+        super.reset();
+    }
+    setFilter(filter) {
+        filter.active = filter.filterValue && this._userActive;
+        super.setFilter(filter);
+    }
+    ngOnChanges(changes) {
+        if (changes['active']) {
+            this._userActive = changes['active'].currentValue;
+        }
+        super.ngOnChanges(changes);
+    }
+}
+TableFilterStringContainsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i5.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TableFilterStringContainsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: TableFilterStringContainsDirective, selector: "[tbFilterStringContains]", inputs: { key: ["tbFilterStringContains", "key"], filterValue: "filterValue", filterId: "filterId", active: "active" }, providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tbFilterStringContains]',
+                    providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }],
+                    inputs: [
+                        'key:tbFilterStringContains',
+                        'filterValue:filterValue',
+                        'filterId: filterId',
+                        'active: active',
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i5.NgControl, decorators: [{
+                    type: Optional
+                }] }]; } });
+class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
+    constructor() {
+        super(...arguments);
+        this._active = false;
+        this.ready = false;
+    }
+    set predicate(val) {
+        this._predicate = val;
+        this.update({ predicate: val });
+    }
+    update(val) {
+        if (this.ready) {
+            this.filter = { ...this.filter, ...val };
+            this.filter$.next(this.filter);
+        }
+    }
+    set active(val) {
+        if (this._active !== val) {
+            this._active = val;
+            this.update({ active: val });
+        }
+    }
+    get active() {
+        return this._active;
+    }
+    ngOnInit() {
+        if (!this.filterId) {
+            this.filterId = v4();
+        }
+        else {
+            this.savable = true;
+        }
+        this.filter = {
+            filterType: FilterType.Custom,
+            filterId: this.filterId,
+            active: this._active,
+            predicate: this._predicate,
+        };
+        this.ready = true;
+        this.filter$ = new BehaviorSubject(this.filter);
+    }
+}
+TableCustomFilterDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TableCustomFilterDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: TableCustomFilterDirectiveBase, selector: "[tbCustomFilter]", inputs: { filterId: "filterId", predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tbCustomFilter]",
+                }]
+        }], propDecorators: { filterId: [{
+                type: Input
+            }], predicate: [{
+                type: Input,
+                args: ['tbCustomFilter']
+            }], active: [{
+                type: Input
+            }] } });
+class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
+    constructor(change, isActive) {
+        super();
+        this.change = change;
+        this.isActive = isActive;
+        this.destroySubject$ = new ReplaySubject(1);
+    }
+    reset() {
+        this.active = false;
+    }
+    ngOnDestroy() {
+        this.destroySubject$.next();
+    }
+    ngOnInit() {
+        this._active = this.isActive();
+        super.ngOnInit();
+        this.change.pipe(takeUntil$1(this.destroySubject$)).subscribe(() => {
+            this.active = this.isActive();
+        });
+    }
+}
+TbSelectedFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+TbSelectedFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: TbSelectedFilterDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i2$2.Observable }, { type: undefined }]; } });
+// Checkbox
+class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
+    constructor(matCheckbox) {
+        super(matCheckbox.change, () => matCheckbox.checked);
+        this.matCheckbox = matCheckbox;
+    }
+    set active(val) {
+        this.matCheckbox.checked = val;
+        super.active = val;
+    }
+}
+MatCheckboxTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [{ token: i3.MatCheckbox }], target: i0.ɵɵFactoryTarget.Directive });
+MatCheckboxTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: MatCheckboxTbFilterDirective, selector: "mat-checkbox[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-checkbox[tbCustomFilter]',
+                    inputs: [
+                        ...inputs
+                    ],
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }]
+                }]
+        }], ctorParameters: function () { return [{ type: i3.MatCheckbox }]; } });
+class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
+    constructor(matSlideToggle) {
+        super(matSlideToggle.change, () => matSlideToggle.checked);
+        this.matSlideToggle = matSlideToggle;
+    }
+    set active(val) {
+        this.matSlideToggle.checked = val;
+        super.active = val;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+MatSlideToggleTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [{ token: i4$4.MatSlideToggle }], target: i0.ɵɵFactoryTarget.Directive });
+MatSlideToggleTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: MatSlideToggleTbFilterDirective, selector: "mat-slide-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-slide-toggle[tbCustomFilter]',
+                    inputs: [
+                        ...inputs
+                    ],
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }]
+                }]
+        }], ctorParameters: function () { return [{ type: i4$4.MatSlideToggle }]; } });
+// Radio button
+class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
+    constructor(matRadioButton) {
+        super(matRadioButton.change, () => matRadioButton.checked);
+        this.matRadioButton = matRadioButton;
+    }
+    set active(val) {
+        this.matRadioButton.checked = val;
+        super.active = val;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+MatRadioButtonTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [{ token: i7.MatRadioButton }], target: i0.ɵɵFactoryTarget.Directive });
+MatRadioButtonTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: MatRadioButtonTbFilterDirective, selector: "mat-radio-button[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"] }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-radio-button[tbCustomFilter]',
+                    inputs: ['predicate: tbCustomFilter'],
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }]
+                }]
+        }], ctorParameters: function () { return [{ type: i7.MatRadioButton }]; } });
+// Option (select)
+class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
+    constructor(matOption) {
+        super(matOption.onSelectionChange.pipe(tap$1(d => {
+            if (!matOption.value) {
+                matOption.value = v4();
+            }
+        })), () => matOption.selected);
+        this.matOption = matOption;
+    }
+    set active(val) {
+        if (val) {
+            this.matOption.select();
+        }
+        else {
+            this.matOption.deselect();
+        }
+        super.active = val;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+MatOptionTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatOptionTbFilterDirective, deps: [{ token: i6$2.MatOption }], target: i0.ɵɵFactoryTarget.Directive });
+MatOptionTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: MatOptionTbFilterDirective, selector: "mat-option[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-option[tbCustomFilter]',
+                    inputs: [
+                        ...inputs
+                    ],
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }]
+                }]
+        }], ctorParameters: function () { return [{ type: i6$2.MatOption }]; } });
+// Button toggle
+class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
+    constructor(matButtonToggle) {
+        super(matButtonToggle.change, () => matButtonToggle.checked);
+        this.matButtonToggle = matButtonToggle;
+    }
+    set active(val) {
+        this.matButtonToggle.checked = val;
+        super.active = val;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+MatButtonToggleFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i7$2.MatButtonToggle }], target: i0.ɵɵFactoryTarget.Directive });
+MatButtonToggleFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: MatButtonToggleFilterDirective, selector: "mat-button-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-button-toggle[tbCustomFilter]',
+                    inputs: [
+                        ...inputs
+                    ],
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }]
+                }]
+        }], ctorParameters: function () { return [{ type: i7$2.MatButtonToggle }]; } });
+
 class DataFilter {
     constructor(filters$) {
         this.filters$ = filters$;
@@ -2508,7 +2938,7 @@ class DataFilter {
     appendFilters(filters$) {
         return new DataFilter(combineArrays([
             this.filters$ ?? of([]),
-            filters$.pipe(map(fltrs => fltrs.map(filter => createFilterFunc(filter))))
+            filters$.pipe(map(fltrs => fltrs.filter(f => f.active).map(filter => createFilterFunc(filter))))
         ]));
     }
 }
@@ -2701,7 +3131,9 @@ class FilterChipsComponent {
     constructor(tableState, filterStore) {
         this.tableState = tableState;
         this.filterStore = filterStore;
-        this.filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters)));
+        this.filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters)
+            .filter(isFilterInfo)
+            .filter(f => !f._isExternalyManaged)));
         this.currentFilters$ = this.filterStore.currentFilters$;
     }
     deleteByIndex(index) {
@@ -2715,7 +3147,7 @@ class FilterChipsComponent {
     }
 }
 FilterChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
-FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FilterChipsComponent, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n    matTooltip=\"Close all Filters\">\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n  </button>\n\n\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n    </div>\n  </div>\n\n  <mat-chip-list *ngrxLet=\"filters$ as filters\">\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n      Clear All\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { type: i6$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6$2.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "async": i1.AsyncPipe, "keyDisplay": KeyDisplayPipe, "formatFilterType": FormatFilterTypePipe, "formatFilterValue": FormatFilterValuePipe } });
+FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: FilterChipsComponent, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n    matTooltip=\"Close all Filters\">\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n  </button>\n\n\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n    </div>\n  </div>\n\n  <mat-chip-list *ngrxLet=\"filters$ as filters\">\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n      Clear All\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { type: i6$3.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6$3.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "async": i1.AsyncPipe, "keyDisplay": KeyDisplayPipe, "formatFilterType": FormatFilterTypePipe, "formatFilterValue": FormatFilterValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-filter-list', template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n    matTooltip=\"Close all Filters\">\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n  </button>\n\n\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n    </div>\n  </div>\n\n  <mat-chip-list *ngrxLet=\"filters$ as filters\">\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n      Clear All\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
@@ -2806,7 +3238,7 @@ class SortMenuComponent {
     }
 }
 SortMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component });
-SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: SortMenuComponent, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container  *ngIf=\"sorted$ | async as sorted\">\n  <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n    <!-- Menu Trigger -->\n    <span matTooltip=\"Sort\">\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n        <mat-icon color=\"primary\">swap_vert</mat-icon>\n      </button>\n    </span>\n\n    <!-- Menu -->\n    <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\n      <div mat-menu-item class=\"menu-button\">\n        <div class=\"close-button-wrapper\">\n          <span matTooltip=\"Close\">\n            <mat-icon>close</mat-icon>\n          </span>\n          <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n            <mat-icon>undo</mat-icon>\n          </span>\n        </div>\n      </div>\n\n      <!-- Apply Button -->\n      <div class=\"apply-button-wrapper\">\n        <button mat-button color=\"primary\" (click)=\"apply(null)\"\n          stop-propagation [class.apply-border]=\"dirty\"\n          [disabled]=\"!dirty\">\n            Apply\n            <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n        </button>\n      </div>\n\n      <!-- Default Sorting Text -->\n      <div *ngIf=\"!sorted.length\" class=\"tip\" >\n        Sorting List\n      </div>\n\n      <!-- Sorted Menu List -->\n      <div class=\"list\"\n        cdkDropList\n        #sortedGroup=\"cdkDropList\"\n        [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n        [cdkDropListData]=\"sorted\"\n        (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n        <!-- Menu Item Wrapper -->\n        <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n          <!-- Menu Item Headers -->\n          <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n          <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\"  class=\"sort-header\">Then By</span>\n\n          <!-- Menu Item -->\n          <div mat-menu-item   cdkDrag class=\"menu-item\">\n            <div class=\"sort-item\">\n              <span class=\"sorted-name\">\n                {{sort.displayName || (sort.active | spaceCase)}}\n                <span class=\"direction-text\">{{sort.direction}}</span>\n              </span>\n\n              <!-- Sort Direction Buttons -->\n              <div class=\"up-down-buttons-wrapper\">\n                <button  class=\"up-down-button up-button\" stop-propagation\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n                  <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                  arrow_upward\n                  </mat-icon>\n                </button>\n\n                <button class=\"up-down-button\" stop-propagation\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n                  <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                    arrow_downward\n                  </mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Default Not Sorted Text -->\n      <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n        Not Sorted List\n      </div>\n      <!-- Not Sorted Menu List -->\n      <div class=\"list\"\n        cdkDropList\n        #notSortedGroup=\"cdkDropList\"\n        [cdkDropListConnectedTo]=\"[sortedGroup]\"\n        [cdkDropListData]=\"notSorted\"\n        (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n        <div mat-menu-item *ngFor=\"let sort of notSorted\"  class=\"menu-item\" cdkDrag>\n          <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n        </div>\n      </div>\n    </mat-menu>\n  </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe } });
+SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: SortMenuComponent, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container  *ngIf=\"sorted$ | async as sorted\">\n  <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n    <!-- Menu Trigger -->\n    <span matTooltip=\"Sort\">\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n        <mat-icon color=\"primary\">swap_vert</mat-icon>\n      </button>\n    </span>\n\n    <!-- Menu -->\n    <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\n      <div mat-menu-item class=\"menu-button\">\n        <div class=\"close-button-wrapper\">\n          <span matTooltip=\"Close\">\n            <mat-icon>close</mat-icon>\n          </span>\n          <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n            <mat-icon>undo</mat-icon>\n          </span>\n        </div>\n      </div>\n\n      <!-- Apply Button -->\n      <div class=\"apply-button-wrapper\">\n        <button mat-button color=\"primary\" (click)=\"apply(null)\"\n          stop-propagation [class.apply-border]=\"dirty\"\n          [disabled]=\"!dirty\">\n            Apply\n            <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n        </button>\n      </div>\n\n      <!-- Default Sorting Text -->\n      <div *ngIf=\"!sorted.length\" class=\"tip\" >\n        Sorting List\n      </div>\n\n      <!-- Sorted Menu List -->\n      <div class=\"list\"\n        cdkDropList\n        #sortedGroup=\"cdkDropList\"\n        [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n        [cdkDropListData]=\"sorted\"\n        (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n        <!-- Menu Item Wrapper -->\n        <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n          <!-- Menu Item Headers -->\n          <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n          <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\"  class=\"sort-header\">Then By</span>\n\n          <!-- Menu Item -->\n          <div mat-menu-item   cdkDrag class=\"menu-item\">\n            <div class=\"sort-item\">\n              <span class=\"sorted-name\">\n                {{sort.displayName || (sort.active | spaceCase)}}\n                <span class=\"direction-text\">{{sort.direction}}</span>\n              </span>\n\n              <!-- Sort Direction Buttons -->\n              <div class=\"up-down-buttons-wrapper\">\n                <button  class=\"up-down-button up-button\" stop-propagation\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n                  <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                  arrow_upward\n                  </mat-icon>\n                </button>\n\n                <button class=\"up-down-button\" stop-propagation\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n                  <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                    arrow_downward\n                  </mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Default Not Sorted Text -->\n      <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n        Not Sorted List\n      </div>\n      <!-- Not Sorted Menu List -->\n      <div class=\"list\"\n        cdkDropList\n        #notSortedGroup=\"cdkDropList\"\n        [cdkDropListConnectedTo]=\"[sortedGroup]\"\n        [cdkDropListData]=\"notSorted\"\n        (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n        <div mat-menu-item *ngFor=\"let sort of notSorted\"  class=\"menu-item\" cdkDrag>\n          <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n        </div>\n      </div>\n    </mat-menu>\n  </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SortMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container  *ngIf=\"sorted$ | async as sorted\">\n  <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n    <!-- Menu Trigger -->\n    <span matTooltip=\"Sort\">\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n        <mat-icon color=\"primary\">swap_vert</mat-icon>\n      </button>\n    </span>\n\n    <!-- Menu -->\n    <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\n      <div mat-menu-item class=\"menu-button\">\n        <div class=\"close-button-wrapper\">\n          <span matTooltip=\"Close\">\n            <mat-icon>close</mat-icon>\n          </span>\n          <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n            <mat-icon>undo</mat-icon>\n          </span>\n        </div>\n      </div>\n\n      <!-- Apply Button -->\n      <div class=\"apply-button-wrapper\">\n        <button mat-button color=\"primary\" (click)=\"apply(null)\"\n          stop-propagation [class.apply-border]=\"dirty\"\n          [disabled]=\"!dirty\">\n            Apply\n            <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n        </button>\n      </div>\n\n      <!-- Default Sorting Text -->\n      <div *ngIf=\"!sorted.length\" class=\"tip\" >\n        Sorting List\n      </div>\n\n      <!-- Sorted Menu List -->\n      <div class=\"list\"\n        cdkDropList\n        #sortedGroup=\"cdkDropList\"\n        [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n        [cdkDropListData]=\"sorted\"\n        (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n        <!-- Menu Item Wrapper -->\n        <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n          <!-- Menu Item Headers -->\n          <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n          <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\"  class=\"sort-header\">Then By</span>\n\n          <!-- Menu Item -->\n          <div mat-menu-item   cdkDrag class=\"menu-item\">\n            <div class=\"sort-item\">\n              <span class=\"sorted-name\">\n                {{sort.displayName || (sort.active | spaceCase)}}\n                <span class=\"direction-text\">{{sort.direction}}</span>\n              </span>\n\n              <!-- Sort Direction Buttons -->\n              <div class=\"up-down-buttons-wrapper\">\n                <button  class=\"up-down-button up-button\" stop-propagation\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n                  <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                  arrow_upward\n                  </mat-icon>\n                </button>\n\n                <button class=\"up-down-button\" stop-propagation\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n                  <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                    arrow_downward\n                  </mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Default Not Sorted Text -->\n      <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n        Not Sorted List\n      </div>\n      <!-- Not Sorted Menu List -->\n      <div class=\"list\"\n        cdkDropList\n        #notSortedGroup=\"cdkDropList\"\n        [cdkDropListConnectedTo]=\"[sortedGroup]\"\n        [cdkDropListData]=\"notSorted\"\n        (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n        <div mat-menu-item *ngFor=\"let sort of notSorted\"  class=\"menu-item\" cdkDrag>\n          <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n        </div>\n      </div>\n    </mat-menu>\n  </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
@@ -2989,9 +3421,10 @@ class TableContainerComponent {
         this.isSticky = true;
         this.selection$ = new EventEmitter();
         this.dataSubject = new ReplaySubject(1);
-        this.data = this.dataSubject.pipe(switchMap(d => d), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.data = this.dataSubject.pipe(switchMap(d => d), defaultShareReplay());
         this.OnStateReset = new EventEmitter();
         this.OnSaveState = new EventEmitter();
+        this.customFilters$ = new BehaviorSubject([]);
         this.mapMetaDatas = (meta) => {
             if (meta.fieldType === FieldType.Array) {
                 const additional = { ...meta.additional };
@@ -3001,17 +3434,6 @@ class TableContainerComponent {
             }
             return meta;
         };
-        this.cleanStateOnInitialLoad = () => (obs) => combineLatest([obs.pipe(addTimeStamp()), this.tableBuilder.metaData$]).pipe(distinctUntilChanged(([state], [state2]) => state.index === state2.index), map(([{ value: state }, metas], index) => {
-            if (index === 0) {
-                const filters = Object.values(state.filters).filter(fltr => metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
-                    obj[filter.filterId] = state.filters[filter.filterId];
-                    return obj;
-                }, {});
-                const sorted = state.sorted.filter(s => metas.some(m => m.key === s.active));
-                return ({ ...state, filters, sorted });
-            }
-            return state;
-        }));
         this.collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
         this.state.on(this.state.getSavableState().pipe(last()), finalState => {
             if (this.tableId) {
@@ -3023,19 +3445,47 @@ class TableContainerComponent {
     set pageSize(value) {
         this.state.setPageSize(value);
     }
-    ngOnInit() {
+    resetState() {
+        this.customFilters.forEach(cf => cf.reset());
+        this.filters.forEach(cf => cf.reset());
+        this.state.resetState();
+        this.OnStateReset.next(null);
+    }
+    initializeState() {
         this.state.setTableSettings(this.tableBuilder.settings);
-        if (this.tableId) {
-            this.state.updateState(this.store.pipe(select(selectLocalProfileState(this.tableId)), notNull(), this.cleanStateOnInitialLoad(), skipOneWhen(this.OnSaveState)));
-            this.stateKeys$ = this.store.select(selectLocalProfileKeys(this.tableId));
-            this.currentStateKey$ = this.store.select(selectLocalProfileCurrentKey(this.tableId));
-        }
+        this.state.runOnceWhen(stateIs(InitializationState.MetaDataLoaded), state => {
+            if (this.tableId) {
+                const persistedState$ = this.store.pipe(select(selectLocalProfileState(this.tableId)), first(), tap(persistedState => {
+                    if (!persistedState) {
+                        this.state.setIntializationState(InitializationState.LoadedFromStore);
+                    }
+                }), notNull());
+                this.state.updateStateFromPersistedState(persistedState$);
+            }
+            else {
+                this.state.setIntializationState(InitializationState.LoadedFromStore);
+            }
+        });
+    }
+    initializeData() {
+        var allFilters = this.inputFilters ? combineArrays([
+            this.customFilters$,
+            this.inputFilters
+        ]) : this.customFilters$;
         const filters$ = this.state.filters$.pipe(map(filters => Object.values(filters)));
-        const data = new DataFilter(this.inputFilters)
+        const data = new DataFilter(allFilters)
             .appendFilters(filters$)
             .filterData(this.tableBuilder.getData$().pipe(switchMap(data => this.state.metaDataArray$.pipe(map(metaData => this.getData(data, metaData))))));
         this.dataSubject.next(data);
     }
+    ngOnInit() {
+        this.initializeState();
+        this.initializeData();
+        if (this.tableId) {
+            this.stateKeys$ = this.store.select(selectLocalProfileKeys(this.tableId));
+            this.currentStateKey$ = this.store.select(selectLocalProfileCurrentKey(this.tableId));
+        }
+    }
     exportToCsv() {
         const sorted = this.data.pipe(withLatestFrom(this.state.sorted$), map(([data, sorted]) => sortData(data, sorted)));
         this.exportToCsvService.exportToCsv(sorted);
@@ -3054,6 +3504,52 @@ class TableContainerComponent {
     }
     ngAfterContentInit() {
         this.InitializeColumns();
+        this.state.runOnceWhen(stateIs(InitializationState.LoadedFromStore), state => {
+            var customFilters = [];
+            this.filters.filter(f => !f.used).forEach(f => {
+                f.used = true;
+                if (f.savable) {
+                    var filter = state.filters[f.filterId];
+                    if (isFilterInfo(filter)) {
+                        f.fieldType = filter.fieldType;
+                        f.filterType = filter.filterType;
+                        f.setFilterValue(filter.filterValue);
+                        f.key = filter.key;
+                        f.update();
+                    }
+                    this.state.addFilter(f.filter$);
+                }
+                else {
+                    customFilters.push(f);
+                }
+            });
+            this.customFilters.filter(cf => !cf.used).forEach(cf => {
+                cf.used = true;
+                if (cf.savable) {
+                    var filter = state.filters[cf.filterId];
+                    if (isCustomFilter(filter)) {
+                        cf.active = filter.active ?? false;
+                    }
+                    this.state.addFilter(cf.filter$);
+                }
+                else {
+                    customFilters.push(cf);
+                }
+            });
+            const filters$ = from(customFilters.map(cf => cf.filter$)).pipe(mergeAll(), scan((a, b) => {
+                if (b.active) {
+                    a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
+                }
+                else {
+                    delete a[b.filterId];
+                }
+                return a;
+            }, {}), map(f => Object.values(f)));
+            this.state.on(filters$, (f) => {
+                this.customFilters$.next(f);
+            });
+            this.state.updateState({ initializationState: InitializationState.Ready });
+        });
     }
     InitializeColumns() {
         const customCellMap = new Map(this.customCells.map(cc => [cc.customCell, cc]));
@@ -3093,15 +3589,21 @@ class TableContainerComponent {
         return _.flattenDeep(withHeadersAndFooters);
     }
 }
-TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$2.Store }], target: i0.ɵɵFactoryTarget.Component });
-TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], ngImport: i0, template: "<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"state.resetState();OnStateReset.next(null)\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: FilterChipsComponent, selector: "lib-filter-list" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "disableSort"], outputs: ["selection$"] }, { type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { type: SortMenuComponent, selector: "tb-sort-menu" }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$3.Store }], target: i0.ɵɵFactoryTarget.Component });
+TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"resetState()\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: FilterChipsComponent, selector: "lib-filter-list" }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "disableSort"], outputs: ["selection$"] }, { type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { type: SortMenuComponent, selector: "tb-sort-menu" }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"state.resetState();OnStateReset.next(null)\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"resetState()\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TableBuilderConfigToken]
-                }] }, { type: i3$2.Store }]; }, propDecorators: { tableId: [{
+                }] }, { type: i3$3.Store }]; }, propDecorators: { customFilters: [{
+                type: ContentChildren,
+                args: [TableCustomFilterDirective, { descendants: true }]
+            }], filters: [{
+                type: ContentChildren,
+                args: [TableFilterDirective, { descendants: true }]
+            }], tableId: [{
                 type: Input
             }], tableBuilder: [{
                 type: Input
@@ -3134,7 +3636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
             }], state$: [{
                 type: Output
             }] } });
-const addTimeStamp = () => (obs) => obs.pipe(map((t, i) => ({ value: t, index: i })));
 
 const defaultStorageState = {
     globalProfileKeys: ['Default'],
@@ -3218,11 +3719,11 @@ class SaveTableEffects {
         })), { dispatch: false });
     }
 }
-SaveTableEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SaveTableEffects, deps: [{ token: i1$4.Actions }, { token: i3$2.Store }], target: i0.ɵɵFactoryTarget.Injectable });
+SaveTableEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SaveTableEffects, deps: [{ token: i1$4.Actions }, { token: i3$3.Store }], target: i0.ɵɵFactoryTarget.Injectable });
 SaveTableEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SaveTableEffects });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SaveTableEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$4.Actions }, { type: i3$2.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.Actions }, { type: i3$3.Store }]; } });
 
 class PreventEnterDirective {
     onKeyDown() {
@@ -3290,7 +3791,7 @@ class MatSlideToggleGroupDirective {
     getObs() {
         var toggleChanges = merge$1(...this._toggles.map(toggle => toggle.change));
         const startValue = this.getInitValue();
-        return toggleChanges.pipe(scan((prev, cur) => {
+        return toggleChanges.pipe(scan$1((prev, cur) => {
             const toggleName = cur.source.name;
             const newVal = { ...prev, [toggleName]: cur.checked };
             if (cur.checked && !this.allowMultiple) {
@@ -3420,8 +3921,15 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InitializationComponent,
         InListFilterComponent,
         SortMenuComponent,
-        FilterChipsComponent], imports: [CommonModule,
-        MaterialModule, i3$2.StoreFeatureModule, i1$4.EffectsFeatureModule, FormsModule,
+        FilterChipsComponent,
+        MatSlideToggleTbFilterDirective,
+        MatRadioButtonTbFilterDirective,
+        MatOptionTbFilterDirective,
+        MatCheckboxTbFilterDirective,
+        MatButtonToggleFilterDirective,
+        TableFilterDirective,
+        TableFilterStringContainsDirective], imports: [CommonModule,
+        MaterialModule, i3$3.StoreFeatureModule, i1$4.EffectsFeatureModule, FormsModule,
         RouterModule,
         ReactiveComponentModule,
         DragDropModule,
@@ -3433,7 +3941,14 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         GenFilterDisplayerComponent,
         FilterComponent,
         MultiSortDirective,
-        ResizeColumnDirective] });
+        ResizeColumnDirective,
+        MatSlideToggleTbFilterDirective,
+        MatRadioButtonTbFilterDirective,
+        MatOptionTbFilterDirective,
+        MatCheckboxTbFilterDirective,
+        MatButtonToggleFilterDirective,
+        TableFilterDirective,
+        TableFilterStringContainsDirective] });
 TableBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableBuilderModule, providers: [
         SpaceCasePipe,
         DatePipe,
@@ -3475,6 +3990,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                         FilterComponent,
                         MultiSortDirective,
                         ResizeColumnDirective,
+                        MatSlideToggleTbFilterDirective,
+                        MatRadioButtonTbFilterDirective,
+                        MatOptionTbFilterDirective,
+                        MatCheckboxTbFilterDirective,
+                        MatButtonToggleFilterDirective,
+                        TableFilterDirective,
+                        TableFilterStringContainsDirective,
                     ],
                     declarations: [
                         ColumnTotalPipe,
@@ -3500,6 +4022,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                         InListFilterComponent,
                         SortMenuComponent,
                         FilterChipsComponent,
+                        MatSlideToggleTbFilterDirective,
+                        MatRadioButtonTbFilterDirective,
+                        MatOptionTbFilterDirective,
+                        MatCheckboxTbFilterDirective,
+                        MatButtonToggleFilterDirective,
+                        TableFilterDirective,
+                        TableFilterStringContainsDirective,
                     ],
                     providers: [
                         SpaceCasePipe,
@@ -3570,5 +4099,5 @@ const CreateTableBuilder = (reportDef$) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayStyle, AutoFocusDirective, ClickEmitterDirective, ClickSubjectDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatSlideToggleGroupDirective, MatTableObservableDataSource, MultiSortDirective, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, UtilitiesModule, chainRequest, combineArrays, createFailure, createSuccess, defaultShareReplay, filterArray, getRequestorBody, getRequestorStatus, httpRequest, httpRequestor, inProgress, isErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, previousAndCurrent, skipOneWhen, spaceCase, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
+export { ArrayStyle, AutoFocusDirective, ClickEmitterDirective, ClickSubjectDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, UtilitiesModule, chainRequest, combineArrays, createFailure, createSuccess, defaultShareReplay, filterArray, getRequestorBody, getRequestorStatus, httpRequest, httpRequestor, inProgress, isErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, onceWhen, previousAndCurrent, skipOneWhen, spaceCase, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map