@one-paragon/angular-utilities 0.1.8 → 0.1.11

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

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, NgModule, Injectable, InjectionToken, Pipe, HostListener, Component, EventEmitter, Output, ContentChildren, Inject, ChangeDetectionStrategy, ViewChild, Injector, ElementRef, Optional } from '@angular/core';
 import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, pluck, last, takeUntil, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1, distinctUntilChanged, withLatestFrom, mergeAll, scan as scan$1 } from 'rxjs/operators';
-import * as i3$2 from 'rxjs';
+import * as i3$3 from 'rxjs';
 import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, switchMap as switchMap$1, scan, fromEvent, asyncScheduler, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, from } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
-import * as i3$1 from '@angular/material/table';
+import * as i4$4 from '@angular/material/table';
 import { MatColumnDef, MatTableDataSource, MatTable, MatTableModule, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import { flatten, get, merge as merge$1, sumBy, orderBy, cloneDeep, groupBy, flattenDeep, set } from 'lodash';
-import * as i12 from '@angular/cdk/drag-drop';
+import * as i9 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CDK_DROP_LIST, CdkDropList, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule, DatePipe, CurrencyPipe } from '@angular/common';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -18,58 +18,58 @@ import * as i5$1 from '@angular/material/slide-toggle';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { v4 } from 'uuid';
 import update from 'immutability-helper';
-import * as i4 from '@angular/material/icon';
+import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4$1 from '@angular/router';
+import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i1$2 from '@angular/material/sort';
+import * as i8 from '@ngrx/component';
+import { ReactiveComponentModule } from '@ngrx/component';
+import * as i5 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1$1 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i4$3 from '@angular/material/menu';
+import * as i6$1 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/form-field';
+import * as i4$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i6 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/forms';
+import * as i8$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ControlContainer, NgForm, FormsModule } from '@angular/forms';
-import * as i4$2 from '@angular/material/checkbox';
+import * as i4 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';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i8 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4$4 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i8$1 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 from '@angular/material/paginator';
+import * as i3$2 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$3 from '@angular/cdk/table';
-import * as i2$1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i6$1 from '@angular/material/select';
+import * as i1$2 from '@angular/cdk/table';
+import * as i4$5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7$2 from '@angular/material/core';
+import * as i7$1 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
+import * as i9$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatListModule } from '@angular/material/list';
-import * as i1$5 from '@angular/material/progress-spinner';
+import * as i2$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSidenavModule } from '@angular/material/sidenav';
 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 i7$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i8$2 from '@angular/material/button-toggle';
-import * as i3$3 from '@ngrx/store';
+import * as i3$4 from '@ngrx/store';
 import { createSelector, createAction, props, select, createReducer, on, StoreModule, createFeatureSelector } from '@ngrx/store';
-import * as i1$4 from '@ngrx/effects';
+import * as i1$3 from '@ngrx/effects';
 import { createEffect, ofType, concatLatestFrom, EffectsModule } from '@ngrx/effects';
 import { createEntityAdapter } from '@ngrx/entity';
 
@@ -153,9 +153,9 @@ class HttpRequestStateDirective {
         this.subscription.unsubscribe();
     }
 }
-HttpRequestStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestStateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-HttpRequestStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: HttpRequestStateDirective, selector: "[httpRequestState]", inputs: { stateStore: ["httpRequestState", "stateStore"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestStateDirective, decorators: [{
+HttpRequestStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestStateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+HttpRequestStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: HttpRequestStateDirective, selector: "[httpRequestState]", inputs: { stateStore: ["httpRequestState", "stateStore"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpRequestState]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { stateStore: [{
@@ -188,9 +188,9 @@ class HttpStateDirectiveBase {
     ngOnDestroy() {
     }
 }
-HttpStateDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpStateDirectiveBase, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-HttpStateDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: HttpStateDirectiveBase, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpStateDirectiveBase, decorators: [{
+HttpStateDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpStateDirectiveBase, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+HttpStateDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: HttpStateDirectiveBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpStateDirectiveBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
 
@@ -212,9 +212,9 @@ class HttpErrorStateDirective extends HttpStateDirectiveBase {
         super.ngOnDestroy();
     }
 }
-HttpErrorStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpErrorStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-HttpErrorStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: HttpErrorStateDirective, selector: "[httpErrorState]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpErrorStateDirective, decorators: [{
+HttpErrorStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpErrorStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+HttpErrorStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: HttpErrorStateDirective, selector: "[httpErrorState]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpErrorStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpErrorState]' }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -237,9 +237,9 @@ class HttpInProgressStateDirective extends HttpStateDirectiveBase {
         super.ngOnDestroy();
     }
 }
-HttpInProgressStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpInProgressStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-HttpInProgressStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: HttpInProgressStateDirective, selector: "[httpInProgressState]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpInProgressStateDirective, decorators: [{
+HttpInProgressStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpInProgressStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+HttpInProgressStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: HttpInProgressStateDirective, selector: "[httpInProgressState]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpInProgressStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpInProgressState]' }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -262,9 +262,9 @@ class HttpNotStartedStateDirective extends HttpStateDirectiveBase {
         super.ngOnDestroy();
     }
 }
-HttpNotStartedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpNotStartedStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-HttpNotStartedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: HttpNotStartedStateDirective, selector: "[httpNotStartedState]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpNotStartedStateDirective, decorators: [{
+HttpNotStartedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpNotStartedStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+HttpNotStartedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: HttpNotStartedStateDirective, selector: "[httpNotStartedState]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpNotStartedStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpNotStartedState]' }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -287,9 +287,9 @@ class HttpSuccessStateDirective extends HttpStateDirectiveBase {
         super.ngOnDestroy();
     }
 }
-HttpSuccessStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpSuccessStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-HttpSuccessStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: HttpSuccessStateDirective, selector: "[httpSuccessState]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpSuccessStateDirective, decorators: [{
+HttpSuccessStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpSuccessStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+HttpSuccessStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: HttpSuccessStateDirective, selector: "[httpSuccessState]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpSuccessStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpSuccessState]' }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -357,8 +357,8 @@ function chainRequest(httpState$, request, requestParams) {
 
 class HttpRequestModule {
 }
-HttpRequestModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HttpRequestModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestModule, declarations: [HttpSuccessStateDirective,
+HttpRequestModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+HttpRequestModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestModule, declarations: [HttpSuccessStateDirective,
         HttpRequestStateDirective,
         HttpErrorStateDirective,
         HttpInProgressStateDirective,
@@ -367,8 +367,8 @@ HttpRequestModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         HttpErrorStateDirective,
         HttpInProgressStateDirective,
         HttpNotStartedStateDirective] });
-HttpRequestModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestModule, providers: [] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestModule, decorators: [{
+HttpRequestModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestModule, providers: [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [],
@@ -455,9 +455,9 @@ class HttpRequestStateStore extends ComponentStore {
         super.ngOnDestroy();
     }
 }
-HttpRequestStateStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestStateStore, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-HttpRequestStateStore.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: HttpRequestStateStore, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestStateStore, decorators: [{
+HttpRequestStateStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestStateStore, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+HttpRequestStateStore.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: HttpRequestStateStore, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestStateStore, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }]; } });
 
@@ -479,9 +479,9 @@ class HttpRequestStateFactory {
         return requestor;
     }
 }
-HttpRequestStateFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestStateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-HttpRequestStateFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestStateFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HttpRequestStateFactory, decorators: [{
+HttpRequestStateFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestStateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+HttpRequestStateFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestStateFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestStateFactory, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -621,9 +621,9 @@ class PhoneNumberPipe {
         }
     }
 }
-PhoneNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PhoneNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PhoneNumberPipe, name: "phone" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PhoneNumberPipe, decorators: [{
+PhoneNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PhoneNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PhoneNumberPipe, name: "phone" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PhoneNumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'phone' }]
         }] });
@@ -633,9 +633,9 @@ class PreventEnterDirective {
         return false;
     }
 }
-PreventEnterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-PreventEnterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: PreventEnterDirective, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PreventEnterDirective, decorators: [{
+PreventEnterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PreventEnterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PreventEnterDirective, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PreventEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'preventEnter'
@@ -653,9 +653,9 @@ class StopPropagationDirective {
         event.stopPropagation();
     }
 }
-StopPropagationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-StopPropagationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: StopPropagationDirective, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: StopPropagationDirective, decorators: [{
+StopPropagationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+StopPropagationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: StopPropagationDirective, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: StopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[stop-propagation]"
@@ -681,9 +681,9 @@ class AutoFocusDirective {
         }
     }
 }
-AutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: AutoFocusDirective, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: AutoFocusDirective, decorators: [{
+AutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: AutoFocusDirective, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutoFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[autoFocus]'
@@ -700,9 +700,9 @@ class ClickSubjectDirective extends Subject {
         this._val = val;
     }
 }
-ClickSubjectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClickSubjectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: ClickSubjectDirective, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClickSubjectDirective, decorators: [{
+ClickSubjectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClickSubjectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: ClickSubjectDirective, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ClickSubjectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickSubject]',
@@ -721,9 +721,9 @@ class ClickEmitterDirective extends Subject {
         super();
     }
 }
-ClickEmitterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClickEmitterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: ClickEmitterDirective, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClickEmitterDirective, decorators: [{
+ClickEmitterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClickEmitterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: ClickEmitterDirective, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ClickEmitterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickEmitter]',
@@ -748,9 +748,9 @@ class DialogService {
         this.allOpenAppDialogs.forEach(ref => ref.close());
     }
 }
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogService, decorators: [{
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -780,9 +780,9 @@ class DialogWrapper {
         this.viewContext.opDialog = value;
     }
 }
-DialogWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogWrapper, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: DialogWrapper, selector: "app-dialog-content", ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogWrapper, decorators: [{
+DialogWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DialogWrapper, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DialogWrapper, selector: "app-dialog-content", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DialogWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-dialog-content',
@@ -866,9 +866,9 @@ class DialogDirective {
         return true;
     }
 }
-DialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1.MatDialog }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Directive });
-DialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: DialogDirective, selector: "[opDialog]", inputs: { opDialogConfig: "opDialogConfig", state: ["opDialog", "state"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DialogDirective, decorators: [{
+DialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1.MatDialog }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Directive });
+DialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: DialogDirective, selector: "[opDialog]", inputs: { opDialogConfig: "opDialogConfig", state: ["opDialog", "state"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DialogDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[opDialog]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i1.MatDialog }, { type: DialogService }]; }, propDecorators: { opDialogClosed: [{
@@ -896,9 +896,9 @@ class StylerDirective {
     }
     ;
 }
-StylerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-StylerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: StylerDirective, selector: "[styler]", inputs: { styler: "styler" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: StylerDirective, decorators: [{
+StylerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+StylerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: StylerDirective, selector: "[styler]", inputs: { styler: "styler" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: StylerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[styler]',
@@ -947,9 +947,9 @@ class MatSlideToggleGroupDirective {
         }, startValue), startWith$1(startValue));
     }
 }
-MatSlideToggleGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-MatSlideToggleGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: MatSlideToggleGroupDirective, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
+MatSlideToggleGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MatSlideToggleGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatSlideToggleGroupDirective, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[opMatSlideToggleGroup]', }]
         }], propDecorators: { allowMultiple: [{
@@ -971,9 +971,9 @@ class FunctionPipe {
         return func(...args);
     }
 }
-FunctionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FunctionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FunctionPipe, name: "func" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FunctionPipe, decorators: [{
+FunctionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FunctionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: FunctionPipe, name: "func" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FunctionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'func'
@@ -985,9 +985,9 @@ class SpaceCasePipe {
         return spaceCase(value);
     }
 }
-SpaceCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SpaceCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SpaceCasePipe, name: "spaceCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SpaceCasePipe, decorators: [{
+SpaceCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SpaceCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: SpaceCasePipe, name: "spaceCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SpaceCasePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'spaceCase' }]
         }] });
@@ -1023,9 +1023,9 @@ class ConditionalClassesDirective {
         this.classesApplied = toApply;
     }
 }
-ConditionalClassesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ConditionalClassesDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ConditionalClassesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: { element: "element", classes: ["conditionalClasses", "classes"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
+ConditionalClassesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ConditionalClassesDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ConditionalClassesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: { element: "element", classes: ["conditionalClasses", "classes"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[conditionalClasses]'
@@ -1039,8 +1039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
 
 class UtilitiesModule {
 }
-UtilitiesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UtilitiesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UtilitiesModule, declarations: [SpaceCasePipe,
+UtilitiesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UtilitiesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: UtilitiesModule, declarations: [SpaceCasePipe,
         PhoneNumberPipe,
         FunctionPipe,
         StopPropagationDirective,
@@ -1065,10 +1065,10 @@ UtilitiesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DialogDirective,
         MatSlideToggleGroupDirective,
         ConditionalClassesDirective] });
-UtilitiesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UtilitiesModule, providers: [
+UtilitiesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UtilitiesModule, providers: [
         DialogService
-    ], imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: UtilitiesModule, decorators: [{
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UtilitiesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -1126,10 +1126,11 @@ class TransformCreator {
             if (isPipe(metaData.transform)) {
                 return (value) => metaData.transform.transform(defaultFunc(value));
             }
-            return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value));
+            return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value), value);
         }
         if (this.config.transformers && this.config.transformers[metaData.fieldType]) {
-            return this.config.transformers[metaData.fieldType];
+            var tranformer = this.config.transformers[metaData.fieldType];
+            return (value) => tranformer(defaultFunc(value));
         }
         switch (metaData.fieldType) {
             case FieldType.Date:
@@ -1158,15 +1159,15 @@ class TransformCreator {
         return defaultFunc;
     }
 }
-TransformCreator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TransformCreator, deps: [{ token: i1$1.DatePipe }, { token: i1$1.CurrencyPipe }, { token: PhoneNumberPipe }, { token: SpaceCasePipe }, { token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable });
-TransformCreator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TransformCreator, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TransformCreator, decorators: [{
+TransformCreator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TransformCreator, deps: [{ token: i2.DatePipe }, { token: i2.CurrencyPipe }, { token: PhoneNumberPipe }, { token: SpaceCasePipe }, { token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable });
+TransformCreator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TransformCreator, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TransformCreator, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$1.DatePipe }, { type: i1$1.CurrencyPipe }, { type: PhoneNumberPipe }, { type: SpaceCasePipe }, { type: undefined, decorators: [{
+        return [{ type: i2.DatePipe }, { type: i2.CurrencyPipe }, { type: PhoneNumberPipe }, { type: SpaceCasePipe }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [TableBuilderConfigToken]
                     }] }];
@@ -1240,6 +1241,15 @@ class NotPersisitedTableSettings {
     }
 }
 
+class KeysToDelete {
+    constructor() {
+        this.initializationState = null;
+        this.metaData = null;
+        this.notPersisitedTableSettings = null;
+        this.linkMaps = null;
+    }
+}
+const keysToDelete = Object.keys(new KeysToDelete());
 var InitializationState;
 (function (InitializationState) {
     InitializationState[InitializationState["Created"] = 0] = "Created";
@@ -1257,6 +1267,7 @@ const defaultTableState = {
     persistedTableSettings: new PesrsistedTableSettings(),
     notPersisitedTableSettings: new NotPersisitedTableSettings(),
     pageSize: 10,
+    linkMaps: {}
 };
 
 var FilterType;
@@ -1689,12 +1700,19 @@ class TableStore extends ComponentStore {
             const ts = Object.assign(Object.assign({}, state.persistedTableSettings), state.notPersisitedTableSettings);
             return ts;
         });
+        this.setLinkMaps = this.updater((state, maps) => {
+            return Object.assign(Object.assign({}, state), { linkMaps: maps });
+        });
+        this.getLinkMap = (md) => {
+            return this.select(state => {
+                return state.linkMaps[md.key];
+            });
+        };
     }
     getSavableState() {
         return this.state$.pipe(map(s => {
             const savableState = Object.assign({}, s);
-            delete savableState.metaData;
-            delete savableState.notPersisitedTableSettings;
+            keysToDelete.forEach(key => delete savableState[key]);
             return savableState;
         }));
     }
@@ -1720,9 +1738,9 @@ class TableStore extends ComponentStore {
         this.runOnceWhen(stateIs(InitializationState.Ready), func);
     }
 }
-TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableStore, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable });
-TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableStore, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableStore, decorators: [{
+TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableStore, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable });
+TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableStore, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1753,8 +1771,8 @@ class ArrayColumnComponent {
         this.array = ((_d = this.array) !== null && _d !== void 0 ? _d : []).slice(0, this.additional.limit);
     }
 }
-ArrayColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ArrayColumnComponent, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Component });
-ArrayColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ArrayColumnComponent, selector: "tb-array-column", inputs: { array: "array", metaData: "metaData" }, ngImport: i0, template: `
+ArrayColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ArrayColumnComponent, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Component });
+ArrayColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ArrayColumnComponent, selector: "tb-array-column", inputs: { array: "array", metaData: "metaData" }, ngImport: i0, template: `
   <ng-container  *ngIf="array.length === 0; else hasVals">-</ng-container>
   <ng-template #hasVals>
     <ng-container [ngSwitch]="additional.arrayStyle">
@@ -1766,8 +1784,8 @@ ArrayColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       </ng-container>
     </ng-container>
   </ng-template>
-  `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ArrayColumnComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ArrayColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-array-column',
@@ -1797,33 +1815,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                 type: Input
             }] } });
 
-class InitializationComponent {
-    constructor() {
-        this.useRouterLink = (metaData) => { var _a, _b, _c; return ((_b = (_a = metaData.additional) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.useRouterLink) || ((_c = metaData.additional) === null || _c === void 0 ? void 0 : _c.useRouterLink); };
-        this.target = (metaData) => { var _a, _b, _c; return ((_b = (_a = metaData.additional) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.target) || ((_c = metaData.additional) === null || _c === void 0 ? void 0 : _c.target) || '_blank'; };
-        this.key = (metaData, element) => {
-            var _a, _b, _c, _d, _e;
-            return ((_b = (_a = metaData.additional) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.urlKey) ? element[(_d = (_c = metaData.additional) === null || _c === void 0 ? void 0 : _c.link) === null || _d === void 0 ? void 0 : _d.urlKey] :
-                ((_e = metaData.additional) === null || _e === void 0 ? void 0 : _e.urlKey) ? element[metaData.additional.urlKey] : element[metaData.key];
-        };
-        this.getLink = (metaData, element) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            const hasRoute = !!((_b = (_a = metaData.additional) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.interpolatedRoute);
-            let link = hasRoute ? this.parseInterpolatedRoute(((_d = (_c = metaData.additional) === null || _c === void 0 ? void 0 : _c.link) === null || _d === void 0 ? void 0 : _d.interpolatedRoute), element) : (((_f = (_e = metaData.additional) === null || _e === void 0 ? void 0 : _e.link) === null || _f === void 0 ? void 0 : _f.base) || ((_g = metaData.additional) === null || _g === void 0 ? void 0 : _g.base));
-            if (!hasRoute) {
-                var needsSlash = !(link === null || link === void 0 ? void 0 : link.endsWith('/'));
-                link += `${needsSlash ? '/' : ''}${this.key(metaData, element)}`;
-            }
-            return link;
-        };
-        this.parseInterpolatedRoute = (route, element) => route.replace(/{([^}]+)}/g, (_, key) => element[key]);
+class LinkColumnComponent {
+    constructor(store) {
+        this.store = store;
+        this.link = (metaData) => this.store.getLinkMap(metaData);
     }
 }
-InitializationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InitializationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: InitializationComponent, selector: "ng-component", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "currencyTemplate", first: true, predicate: ["currency"], descendants: true, static: true }, { propertyName: "arrayTemplate", first: true, predicate: ["array"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link  let-element='element' let-metaData='metaData'>\n  <a *ngIf=\"useRouterLink | func : metaData; else hrefLink\" target=\"{{target | func : metaData }}\"\n    [routerLink]=\" [(getLink | func : metaData : element)]\">\n    {{element[metaData.key]}}\n  </a>\n  <ng-template #hrefLink>\n    <a target=\"{{target | func : metaData}}\"\n      href=\"{{(getLink | func : metaData : element)}}\">\n      {{element[metaData.key]}}\n    </a>\n  </ng-template>\n</ng-template>\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\n  <span>\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n  </span>\n</ng-template>\n\n<ng-template #array let-element='element' let-metaData='metaData'>\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\n  <span>{{ transform | func : element }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\n  <mat-icon>{{ transform | func : element }}</mat-icon>\n</ng-template>\n", components: [{ type: ArrayColumnComponent, selector: "tb-array-column", inputs: ["array", "metaData"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "func": FunctionPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InitializationComponent, decorators: [{
+LinkColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LinkColumnComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
+LinkColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: LinkColumnComponent, selector: "tb-link-column", inputs: { metaData: "metaData", element: "element" }, ngImport: i0, template: `
+  <ng-container *ngrxLet="(link | func : (metaData)) as linkInfo">
+    <a *ngIf="$any(linkInfo).useRouterLink; else hrefLink" target="{{$any(linkInfo).target}}"
+      [routerLink]=" [($any(linkInfo).link | func : element)]"
+      [queryParams]="$any(linkInfo).routerLinkOptions.queryParams | func : element"
+      [fragment]="$any(linkInfo).routerLinkOptions.fragment"
+      [preserveFragment]="$any(linkInfo).routerLinkOptions.preserveFragment"
+      [queryParamsHandling]="$any(linkInfo).routerLinkOptions.queryParamsHandling"
+    >
+      {{element[metaData.key]}}
+    </a>
+    <ng-template #hrefLink>
+      <a target="{{$any(linkInfo).target}}"
+        href="{{($any(linkInfo).link | func : element)}}">
+        {{element[metaData.key]}}
+      </a>
+    </ng-template>
+  </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: LinkColumnComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-template #link  let-element='element' let-metaData='metaData'>\n  <a *ngIf=\"useRouterLink | func : metaData; else hrefLink\" target=\"{{target | func : metaData }}\"\n    [routerLink]=\" [(getLink | func : metaData : element)]\">\n    {{element[metaData.key]}}\n  </a>\n  <ng-template #hrefLink>\n    <a target=\"{{target | func : metaData}}\"\n      href=\"{{(getLink | func : metaData : element)}}\">\n      {{element[metaData.key]}}\n    </a>\n  </ng-template>\n</ng-template>\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\n  <span>\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n  </span>\n</ng-template>\n\n<ng-template #array let-element='element' let-metaData='metaData'>\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\n  <span>{{ transform | func : element }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\n  <mat-icon>{{ transform | func : element }}</mat-icon>\n</ng-template>\n" }]
+            args: [{
+                    selector: "tb-link-column",
+                    template: `
+  <ng-container *ngrxLet="(link | func : (metaData)) as linkInfo">
+    <a *ngIf="$any(linkInfo).useRouterLink; else hrefLink" target="{{$any(linkInfo).target}}"
+      [routerLink]=" [($any(linkInfo).link | func : element)]"
+      [queryParams]="$any(linkInfo).routerLinkOptions.queryParams | func : element"
+      [fragment]="$any(linkInfo).routerLinkOptions.fragment"
+      [preserveFragment]="$any(linkInfo).routerLinkOptions.preserveFragment"
+      [queryParamsHandling]="$any(linkInfo).routerLinkOptions.queryParamsHandling"
+    >
+      {{element[metaData.key]}}
+    </a>
+    <ng-template #hrefLink>
+      <a target="{{$any(linkInfo).target}}"
+        href="{{($any(linkInfo).link | func : element)}}">
+        {{element[metaData.key]}}
+      </a>
+    </ng-template>
+  </ng-container>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: TableStore }]; }, propDecorators: { metaData: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }] } });
+
+class InitializationComponent {
+}
+InitializationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InitializationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: InitializationComponent, selector: "ng-component", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "currencyTemplate", first: true, predicate: ["currency"], descendants: true, static: true }, { propertyName: "arrayTemplate", first: true, predicate: ["array"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link  let-element='element' let-metaData='metaData'>\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\"></tb-link-column>\n</ng-template>\n\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\n  <span>\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n  </span>\n</ng-template>\n\n<ng-template #array let-element='element' let-metaData='metaData'>\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\n  <span>{{ transform | func : element }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\n  <mat-icon>{{ transform | func : element }}</mat-icon>\n</ng-template>\n", dependencies: [{ kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ArrayColumnComponent, selector: "tb-array-column", inputs: ["array", "metaData"] }, { kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["metaData", "element"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InitializationComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<ng-template #link  let-element='element' let-metaData='metaData'>\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\"></tb-link-column>\n</ng-template>\n\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\n  <span>\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n  </span>\n</ng-template>\n\n<ng-template #array let-element='element' let-metaData='metaData'>\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\n  <span>{{ transform | func : element }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\n  <mat-icon>{{ transform | func : element }}</mat-icon>\n</ng-template>\n" }]
         }], propDecorators: { linkTemplate: [{
                 type: ViewChild,
                 args: ['link', { static: true }]
@@ -1876,9 +1930,9 @@ class TableTemplateService {
         return tmp;
     }
 }
-TableTemplateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableTemplateService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-TableTemplateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableTemplateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableTemplateService, decorators: [{
+TableTemplateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableTemplateService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+TableTemplateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableTemplateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableTemplateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; } });
@@ -1931,8 +1985,8 @@ class InListFilterComponent {
         this.onChange(this.value);
     }
 }
-InListFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-InListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
+InListFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
+InListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: InListFilterComponent,
             multi: true
@@ -1942,8 +1996,8 @@ InListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
     </mat-checkbox>
   </div>
-  `, isInline: true, components: [{ type: i4$2.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }], pipes: { "keyvalue": i1$1.KeyValuePipe, "async": i1$1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InListFilterComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-in-list-filter , [tb-in-list-filter]',
@@ -2024,9 +2078,9 @@ class HeaderMenuComponent {
         }
     }
 }
-HeaderMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.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$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$3.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$3.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$1.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i6.MatPrefix, selector: "[matPrefix]" }, { type: i6.MatLabel, selector: "mat-label" }, { type: i4$4.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: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.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.3.5", ngImport: i0, type: HeaderMenuComponent, decorators: [{
+HeaderMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
+HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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  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: [{
@@ -2104,9 +2158,9 @@ class ResizeColumnDirective {
         return ({ newTableWidth, newColumnWidth });
     }
 }
-ResizeColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ResizeColumnDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Directive });
-ResizeColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable"], key: "key" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ResizeColumnDirective, decorators: [{
+ResizeColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ResizeColumnDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Directive });
+ResizeColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable"], key: "key" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ResizeColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[resizeColumn]",
@@ -2128,19 +2182,20 @@ class ColumnTotalPipe {
         return null;
     }
 }
-ColumnTotalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ColumnTotalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ColumnTotalPipe, name: "columnTotal" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ColumnTotalPipe, decorators: [{
+ColumnTotalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ColumnTotalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: ColumnTotalPipe, name: "columnTotal" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColumnTotalPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'columnTotal' }]
         }] });
 
 class ColumnBuilderComponent {
-    constructor(transformCreator, table, state, templateService) {
+    constructor(transformCreator, table, state, templateService, injector) {
         this.transformCreator = transformCreator;
         this.table = table;
         this.state = state;
         this.templateService = templateService;
+        this.injector = injector;
         this.FieldType = FieldType;
         this.mapWidth = ([previousUserDefinedWidth, currentUserDefinedWidth]) => {
             if (currentUserDefinedWidth) {
@@ -2201,16 +2256,16 @@ class ColumnBuilderComponent {
         }
     }
 }
-ColumnBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", 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      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [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    </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>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background: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$2.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: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i12.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: i12.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$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "spaceCase": SpaceCasePipe, "async": i1$1.AsyncPipe, "currency": i1$1.CurrencyPipe, "columnTotal": ColumnTotalPipe, "number": i1$1.DecimalPipe }, viewProviders: [
+ColumnBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$4.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColumnBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [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 }; Injector: injector\">\n        </ng-container>\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>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background: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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }], viewProviders: [
         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
             type: Component,
             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      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [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    </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>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background: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: [{
+                    ], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\n\n  <ng-template #body let-element='element' >\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [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 }; Injector: injector\">\n        </ng-container>\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>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background: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: i4$4.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }]; }, propDecorators: { metaData: [{
                 type: Input
             }], customCell: [{
                 type: Input
@@ -2283,16 +2338,16 @@ class PaginatorComponent {
         }
     }
 }
-PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: PaginatorComponent, selector: "tb-paginator", inputs: { dataSource: "dataSource", tableElRef: "tableElRef", data$: "data$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
+PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PaginatorComponent, selector: "tb-paginator", inputs: { dataSource: "dataSource", tableElRef: "tableElRef", data$: "data$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
   <div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
     {{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
   </div>
   <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.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PaginatorComponent, decorators: [{
+  `, 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-paginator', template: `
   <div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
@@ -2460,12 +2515,12 @@ class GenericTableComponent {
             this.selection.select(...this.dataSource.data);
     }
 }
-GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$2.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: i4$2.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: i12.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$1.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: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i1$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenericTableComponent, decorators: [{
+GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.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: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { data$: [{
+        }], ctorParameters: function () { return [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { data$: [{
                 type: Input
             }], IndexColumn: [{
                 type: Input
@@ -2527,9 +2582,9 @@ class CustomCellDirective {
         };
     }
 }
-CustomCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: CustomCellDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1$3.CdkColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CustomCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: CustomCellDirective, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: CustomCellDirective, decorators: [{
+CustomCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CustomCellDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1$2.CdkColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CustomCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CustomCellDirective, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CustomCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[customCell]',
@@ -2537,7 +2592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
                         type: Optional
-                    }] }, { type: i1$3.CdkColumnDef, decorators: [{
+                    }] }, { type: i1$2.CdkColumnDef, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { customCell: [{
@@ -2579,9 +2634,9 @@ class GenColDisplayerComponent {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
 }
-GenColDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i12.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.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$1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
+GenColDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
+GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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"] }]
         }], ctorParameters: function () { return [{ type: TableStore }]; } });
@@ -2601,9 +2656,9 @@ class WrapperFilterStore extends ComponentStore {
         });
     }
 }
-WrapperFilterStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-WrapperFilterStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: WrapperFilterStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: WrapperFilterStore, decorators: [{
+WrapperFilterStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+WrapperFilterStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: WrapperFilterStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: WrapperFilterStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -2617,13 +2672,29 @@ class GenFilterDisplayerComponent {
         this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
     }
 }
-GenFilterDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
-GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1$1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
+GenFilterDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
+GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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 DateFilterComponent {
+    constructor() {
+        this.FilterType = FilterType;
+    }
+}
+DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DateFilterComponent, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n  <mat-form-field class=\"my-filter\">\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #cal></mat-datepicker>\n  </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n  <ng-container ngModelGroup=\"filterValue\">\n    <mat-form-field class=\"my-filter\" >\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\n          (click)=\"fromVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #fromVal></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #toVal></mat-datepicker>\n    </mat-form-field>\n  </ng-container>\n</ng-container>\n\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n  <mat-form-field class=\"my-filter\">\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #cal></mat-datepicker>\n  </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n  <ng-container ngModelGroup=\"filterValue\">\n    <mat-form-field class=\"my-filter\" >\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\n          (click)=\"fromVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #fromVal></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #toVal></mat-datepicker>\n    </mat-form-field>\n  </ng-container>\n</ng-container>\n\n" }]
+        }], propDecorators: { info: [{
+                type: Input
+            }], CurrentFilterType: [{
+                type: Input
+            }] } });
+
 class InFilterComponent {
     constructor(ref) {
         this.ref = ref;
@@ -2666,13 +2737,13 @@ class InFilterComponent {
         this.onChange(this.value);
     }
 }
-InFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-InFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: InFilterComponent, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
+InFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+InFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: InFilterComponent, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: InFilterComponent,
             multi: true
-        }], ngImport: i0, template: "<div class=inline>\n    <div *ngFor=\"let val of value; index as i\">\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        #input [autoFocus]=\"i === value.length - 1\" />\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    </div>\n</div>\n", styles: [".inline{display:inline-block}\n"], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InFilterComponent, decorators: [{
+        }], ngImport: i0, template: "<div class=inline>\n    <div *ngFor=\"let val of value; index as i\">\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        #input [autoFocus]=\"i === value.length - 1\" />\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    </div>\n</div>\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2689,9 +2760,9 @@ class NumberFilterComponent {
         this.FieldType = FieldType;
     }
 }
-NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: NumberFilterComponent, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In\">\n  <mat-form-field class=\"my-filter\">\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n  </mat-form-field>\n</ng-container>\n\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.NumberBetween\">\n  <ng-container ngModelGroup=\"filterValue\"  >\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n    </mat-form-field>\n  </ng-container>\n</ng-container>\n\n<div class=\"inline\" *ngIf=\"CurrentFilterType === FilterType.In\">\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'  ></lib-in-filter>\n</div>\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], components: [{ type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumberFilterComponent, decorators: [{
+NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: NumberFilterComponent, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In\">\n  <mat-form-field class=\"my-filter\">\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n  </mat-form-field>\n</ng-container>\n\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.NumberBetween\">\n  <ng-container ngModelGroup=\"filterValue\"  >\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n    </mat-form-field>\n  </ng-container>\n</ng-container>\n\n<div class=\"inline\" *ngIf=\"CurrentFilterType === FilterType.In\">\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'  ></lib-in-filter>\n</div>\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: NumberFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In\">\n  <mat-form-field class=\"my-filter\">\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n  </mat-form-field>\n</ng-container>\n\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.NumberBetween\">\n  <ng-container ngModelGroup=\"filterValue\"  >\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n    </mat-form-field>\n  </ng-container>\n</ng-container>\n\n<div class=\"inline\" *ngIf=\"CurrentFilterType === FilterType.In\">\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'  ></lib-in-filter>\n</div>\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
         }], propDecorators: { CurrentFilterType: [{
@@ -2700,22 +2771,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                 type: Input
             }] } });
 
-class DateFilterComponent {
-    constructor() {
-        this.FilterType = FilterType;
-    }
-}
-DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: DateFilterComponent, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n  <mat-form-field class=\"my-filter\">\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #cal></mat-datepicker>\n  </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n  <ng-container ngModelGroup=\"filterValue\">\n    <mat-form-field class=\"my-filter\" >\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\n          (click)=\"fromVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #fromVal></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #toVal></mat-datepicker>\n    </mat-form-field>\n  </ng-container>\n</ng-container>\n\n", components: [{ type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.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: 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: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: i6.MatSuffix, selector: "[matSuffix]" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: DateFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n  <mat-form-field class=\"my-filter\">\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #cal></mat-datepicker>\n  </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n  <ng-container ngModelGroup=\"filterValue\">\n    <mat-form-field class=\"my-filter\" >\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\n          (click)=\"fromVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #fromVal></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n      <mat-datepicker-toggle matSuffix [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n      <mat-datepicker #toVal></mat-datepicker>\n    </mat-form-field>\n  </ng-container>\n</ng-container>\n\n" }]
-        }], propDecorators: { info: [{
-                type: Input
-            }], CurrentFilterType: [{
-                type: Input
-            }] } });
-
 class FilterComponent {
     constructor(state) {
         this.state = state;
@@ -2736,9 +2791,9 @@ class FilterComponent {
         }
     }
 }
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.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 , [tb-in-list-filter]", inputs: ["key"] }], directives: [{ type: i1$1.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: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4$4.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$1.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FilterComponent, decorators: [{
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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"] }]
         }], ctorParameters: function () { return [{ type: TableStore }]; }, propDecorators: { filter: [{
@@ -2749,8 +2804,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
 
 class MaterialModule {
 }
-MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MaterialModule, imports: [MatSlideToggleModule,
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, imports: [MatSlideToggleModule,
         MatTableModule,
         MatSelectModule,
         MatDialogModule,
@@ -2809,38 +2864,36 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         MatPaginatorModule,
         MatChipsModule,
         MatDialogModule] });
-MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MaterialModule, imports: [[
-            MatSlideToggleModule,
-            MatTableModule,
-            MatSelectModule,
-            MatDialogModule,
-            MatDatepickerModule,
-            MatRadioModule,
-            MatButtonModule,
-            MatExpansionModule,
-            MatStepperModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatNativeDateModule,
-            MatSnackBarModule,
-            MatProgressSpinnerModule,
-            MatListModule,
-            MatGridListModule,
-            MatCardModule,
-            MatSidenavModule,
-            MatTabsModule,
-            MatInputModule,
-            MatTabsModule,
-            MatCheckboxModule,
-            MatMenuModule,
-            MatIconModule,
-            MatBadgeModule,
-            MatSortModule,
-            MatAutocompleteModule,
-            MatPaginatorModule,
-            MatChipsModule,
-            MatDialogModule,
-        ], MatSlideToggleModule,
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, imports: [MatSlideToggleModule,
+        MatTableModule,
+        MatSelectModule,
+        MatDialogModule,
+        MatDatepickerModule,
+        MatRadioModule,
+        MatButtonModule,
+        MatExpansionModule,
+        MatStepperModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        MatNativeDateModule,
+        MatSnackBarModule,
+        MatProgressSpinnerModule,
+        MatListModule,
+        MatGridListModule,
+        MatCardModule,
+        MatSidenavModule,
+        MatTabsModule,
+        MatInputModule,
+        MatTabsModule,
+        MatCheckboxModule,
+        MatMenuModule,
+        MatIconModule,
+        MatBadgeModule,
+        MatSortModule,
+        MatAutocompleteModule,
+        MatPaginatorModule,
+        MatChipsModule,
+        MatDialogModule, MatSlideToggleModule,
         MatTableModule,
         MatSelectModule,
         MatDialogModule,
@@ -2870,7 +2923,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         MatPaginatorModule,
         MatChipsModule,
         MatDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MaterialModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2961,11 +3014,11 @@ class MultiSortDirective extends MatSort {
         });
     }
 }
-MultiSortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MultiSortDirective, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Directive });
-MultiSortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: MultiSortDirective, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
+MultiSortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MultiSortDirective, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Directive });
+MultiSortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MultiSortDirective, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
         { provide: MatSort, useExisting: MultiSortDirective }
     ], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MultiSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MultiSortDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[multiSort]',
@@ -2987,9 +3040,9 @@ class TableCustomFilterDirective {
         this.used = false;
     }
 }
-TableCustomFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TableCustomFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: TableCustomFilterDirective, selector: " ", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
+TableCustomFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TableCustomFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: TableCustomFilterDirective, selector: " ", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ' '
@@ -3061,15 +3114,15 @@ class TableFilterDirective extends ComponentStore {
         }
     }
 }
-TableFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableFilterDirective, deps: [{ token: i5.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TableFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: TableFilterDirective, decorators: [{
+TableFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableFilterDirective, deps: [{ token: i4$3.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TableFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: TableFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[tbFilter]"
                 }]
         }], ctorParameters: function () {
-        return [{ type: i5.NgControl, decorators: [{
+        return [{ type: i4$3.NgControl, decorators: [{
                         type: Optional
                     }] }, { type: TableWrapperDirective, decorators: [{
                         type: Optional
@@ -3116,9 +3169,9 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
         super.ngOnChanges(changes);
     }
 }
-TableFilterStringContainsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i5.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TableFilterStringContainsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
+TableFilterStringContainsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i4$3.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TableFilterStringContainsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tbFilterStringContains]',
@@ -3131,7 +3184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                     ]
                 }]
         }], ctorParameters: function () {
-        return [{ type: i5.NgControl, decorators: [{
+        return [{ type: i4$3.NgControl, decorators: [{
                         type: Optional
                     }] }, { type: TableWrapperDirective, decorators: [{
                         type: Optional
@@ -3179,9 +3232,9 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
         this.filter$ = new BehaviorSubject(this.filter);
     }
 }
-TableCustomFilterDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TableCustomFilterDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: TableCustomFilterDirectiveBase, selector: "[tbCustomFilter]", inputs: { filterId: "filterId", predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
+TableCustomFilterDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TableCustomFilterDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: TableCustomFilterDirectiveBase, selector: "[tbCustomFilter]", inputs: { filterId: "filterId", predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
             type: Directive,
             args: [{
                     selector: "[tbCustomFilter]",
@@ -3218,12 +3271,12 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
         });
     }
 }
-TbSelectedFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-TbSelectedFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: TbSelectedFilterDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
+TbSelectedFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+TbSelectedFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: TbSelectedFilterDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () {
-        return [{ type: i3$2.Observable }, { type: undefined }, { type: TableWrapperDirective, decorators: [{
+        return [{ type: i3$3.Observable }, { type: undefined }, { type: TableWrapperDirective, decorators: [{
                         type: Optional
                     }] }];
     } });
@@ -3238,9 +3291,9 @@ class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
         super.active = val;
     }
 }
-MatCheckboxTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [{ token: i4$2.MatCheckbox }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MatCheckboxTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
+MatCheckboxTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [{ token: i4.MatCheckbox }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+MatCheckboxTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-checkbox[tbCustomFilter]',
@@ -3250,7 +3303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }]
                 }]
         }], ctorParameters: function () {
-        return [{ type: i4$2.MatCheckbox }, { type: TableWrapperDirective, decorators: [{
+        return [{ type: i4.MatCheckbox }, { type: TableWrapperDirective, decorators: [{
                         type: Optional
                     }] }];
     } });
@@ -3267,9 +3320,9 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
         super.ngOnInit();
     }
 }
-MatSlideToggleTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [{ token: i5$1.MatSlideToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MatSlideToggleTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
+MatSlideToggleTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [{ token: i5$1.MatSlideToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+MatSlideToggleTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-slide-toggle[tbCustomFilter]',
@@ -3297,9 +3350,9 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
         super.ngOnInit();
     }
 }
-MatRadioButtonTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [{ token: i7.MatRadioButton }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MatRadioButtonTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
+MatRadioButtonTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [{ token: i6.MatRadioButton }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+MatRadioButtonTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-radio-button[tbCustomFilter]',
@@ -3307,7 +3360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }]
                 }]
         }], ctorParameters: function () {
-        return [{ type: i7.MatRadioButton }, { type: TableWrapperDirective, decorators: [{
+        return [{ type: i6.MatRadioButton }, { type: TableWrapperDirective, decorators: [{
                         type: Optional
                     }] }];
     } });
@@ -3334,9 +3387,9 @@ class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
         super.ngOnInit();
     }
 }
-MatOptionTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MatOptionTbFilterDirective, deps: [{ token: i7$2.MatOption }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MatOptionTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
+MatOptionTbFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatOptionTbFilterDirective, deps: [{ token: i7$1.MatOption }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+MatOptionTbFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-option[tbCustomFilter]',
@@ -3346,7 +3399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                     providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }]
                 }]
         }], ctorParameters: function () {
-        return [{ type: i7$2.MatOption }, { type: TableWrapperDirective, decorators: [{
+        return [{ type: i7$1.MatOption }, { type: TableWrapperDirective, decorators: [{
                         type: Optional
                     }] }];
     } });
@@ -3364,9 +3417,9 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
         super.ngOnInit();
     }
 }
-MatButtonToggleFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8$2.MatButtonToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MatButtonToggleFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
+MatButtonToggleFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8$2.MatButtonToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+MatButtonToggleFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-button-toggle[tbCustomFilter]',
@@ -3389,9 +3442,9 @@ class TableWrapperDirective {
         this.registerations.push(filter);
     }
 }
-TableWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TableWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: TableWrapperDirective, selector: "[tbWrapper]", queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableWrapperDirective, decorators: [{
+TableWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TableWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: TableWrapperDirective, selector: "[tbWrapper]", queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableWrapperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tbWrapper]'
@@ -3493,15 +3546,15 @@ class ExportToCsvService {
         return this.datePipe.transform(val, dateFormat);
     }
 }
-ExportToCsvService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ExportToCsvService, deps: [{ token: TableStore }, { token: TableBuilderConfigToken }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable });
-ExportToCsvService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ExportToCsvService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ExportToCsvService, decorators: [{
+ExportToCsvService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ExportToCsvService, deps: [{ token: TableStore }, { token: TableBuilderConfigToken }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable });
+ExportToCsvService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ExportToCsvService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ExportToCsvService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
         return [{ type: TableStore }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [TableBuilderConfigToken]
-                    }] }, { type: i1$1.DatePipe }];
+                    }] }, { type: i2.DatePipe }];
     } });
 const removeFromMetaData = (state, keysToRemove) => orderMetaData(state)
     .filter(meta => !keysToRemove.includes(meta.key));
@@ -3548,100 +3601,53 @@ const setLocalProfile = createAction('[State Storage] Set Local Profile', props(
 const setLocalProfilesState = createAction('[State Storage] Set Local Profiles Current', props());
 const deleteLocalProfilesState = createAction('[State Storage] Delete Local Profiles Current', props());
 
-class KeyDisplayPipe {
-    constructor(tableState) {
-        this.tableState = tableState;
-    }
-    transform(key) {
-        return this.tableState.getMetaData$(key).pipe(map(metaData => metaData.displayName || spaceCase(key)));
-    }
-}
-KeyDisplayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: KeyDisplayPipe, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Pipe });
-KeyDisplayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: KeyDisplayPipe, name: "keyDisplay" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: KeyDisplayPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'keyDisplay' }]
-        }], ctorParameters: function () { return [{ type: TableStore }]; } });
-
-class FormatFilterTypePipe {
-    transform(filterType, value) {
-        if (filterType === FilterType.IsNull) {
-            return value ? filterType : 'Is Not Blank';
-        }
-        return filterType;
-    }
-}
-FormatFilterTypePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FormatFilterTypePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FormatFilterTypePipe, name: "formatFilterType" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'formatFilterType' }]
-        }] });
-
-class FormatFilterValuePipe {
-    constructor(tableState, datePipe) {
-        this.tableState = tableState;
-        this.datePipe = datePipe;
-    }
-    transform(value, key, filterType) {
-        return this.tableState.getMetaData$(key).pipe(map(md => {
-            var _a, _b;
-            if (filterType === FilterType.IsNull) {
-                return '';
-            }
-            if (value && (filterType === FilterType.In)) {
-                if (md.fieldType === FieldType.Enum) {
-                    return (_a = value.map((v) => spaceCase(md.additional.enumMap[v])).join(', ')) !== null && _a !== void 0 ? _a : value;
-                }
-                return (_b = value.join(', ')) !== null && _b !== void 0 ? _b : value;
-            }
-            if (filterType === FilterType.NumberBetween) {
-                if (md.fieldType === FieldType.Date) {
-                    value = this.datePipe.transform(value.Start, 'MM/dd/yy') + ' - ' + this.datePipe.transform(value.End, 'MM/dd/yy');
-                }
-                else {
-                    value = value.Start + ' - ' + value.End;
-                }
-            }
-            else if (md.fieldType === FieldType.Date) {
-                value = this.datePipe.transform(value, 'MM/dd/yy');
-            }
-            return value;
-        }));
-    }
-}
-FormatFilterValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FormatFilterValuePipe, deps: [{ token: TableStore }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe });
-FormatFilterValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FormatFilterValuePipe, name: "formatFilterValue" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'formatFilterValue' }]
-        }], ctorParameters: function () { return [{ type: TableStore }, { type: i1$1.DatePipe }]; } });
-
-class FilterChipsComponent {
-    constructor(tableState, filterStore) {
-        this.tableState = tableState;
-        this.filterStore = filterStore;
-        this.filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters)
-            .filter(isFilterInfo)
-            .filter(f => !f._isExternalyManaged)));
-        this.currentFilters$ = this.filterStore.currentFilters$;
-    }
-    deleteByIndex(index) {
-        this.filterStore.deleteByIndex(index);
-    }
-    addFilter(filter) {
-        this.filterStore.addFilter(filter);
+function createLinkCreator(metaData) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const target = ((_b = (_a = metaData.additional) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.target) || ((_c = metaData.additional) === null || _c === void 0 ? void 0 : _c.target) || '_blank';
+    const useRouterLink = ((_e = (_d = metaData.additional) === null || _d === void 0 ? void 0 : _d.link) === null || _e === void 0 ? void 0 : _e.useRouterLink) || ((_f = metaData.additional) === null || _f === void 0 ? void 0 : _f.useRouterLink);
+    const hasRoute = !!((_h = (_g = metaData.additional) === null || _g === void 0 ? void 0 : _g.link) === null || _h === void 0 ? void 0 : _h.interpolatedRoute);
+    const routerLinkOptions = useRouterLink ? {
+        queryParams: (element) => {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = metaData.additional.link.routerLinkOptions) === null || _a === void 0 ? void 0 : _a.queryParams) === null || _b === void 0 ? void 0 : _b.reduce((map, [key, value]) => {
+                map[key] = parseInterpolated(value, element);
+                return map;
+            }, {})) !== null && _c !== void 0 ? _c : null;
+        },
+        fragment: (_k = (_j = metaData.additional.link) === null || _j === void 0 ? void 0 : _j.routerLinkOptions) === null || _k === void 0 ? void 0 : _k.fragment,
+        preserveFragment: (_m = (_l = metaData.additional.link.routerLinkOptions) === null || _l === void 0 ? void 0 : _l.preserveFragment) !== null && _m !== void 0 ? _m : false,
+        queryParamsHandling: (_p = (_o = metaData.additional.link.routerLinkOptions) === null || _o === void 0 ? void 0 : _o.queryParamsHandling) !== null && _p !== void 0 ? _p : '',
+    }
+        : undefined;
+    if (hasRoute) {
+        return ({
+            link: (element) => parseInterpolated(metaData.additional.link.interpolatedRoute, element),
+            target,
+            useRouterLink,
+            routerLinkOptions,
+        });
     }
-    clearAll() {
-        this.filterStore.clearAll();
+    else {
+        const slashIfNeeded = !((_s = (_r = (_q = metaData.additional) === null || _q === void 0 ? void 0 : _q.link) === null || _r === void 0 ? void 0 : _r.base) === null || _s === void 0 ? void 0 : _s.endsWith('/')) ? '/' : '';
+        const base = ((_t = metaData.additional.link) === null || _t === void 0 ? void 0 : _t.base) || metaData.additional.base;
+        const getKey = key(metaData);
+        return ({
+            link: (element) => `${base}${slashIfNeeded}${getKey(element)}`,
+            target,
+            useRouterLink,
+            routerLinkOptions,
+        });
     }
 }
-FilterChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
-FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.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$1.AsyncPipe, "keyDisplay": KeyDisplayPipe, "formatFilterType": FormatFilterTypePipe, "formatFilterValue": FormatFilterValuePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", 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"] }]
-        }], ctorParameters: function () { return [{ type: TableStore }, { type: WrapperFilterStore }]; } });
+const key = (metaData) => {
+    var _a;
+    return ((_a = metaData.additional.link) === null || _a === void 0 ? void 0 : _a.urlKey) ?
+        (element) => get(element, metaData.additional.link.urlKey) :
+        metaData.additional.urlKey ?
+            (element) => get(element, metaData.additional.urlKey) :
+            (element) => get(element, metaData.key);
+};
+const parseInterpolated = (interpolatedString, element) => interpolatedString.replace(/{([^}]+)}/g, (_, key) => get(element, key));
 
 class SortMenuComponentStore extends ComponentStore {
     constructor(tableState) {
@@ -3671,9 +3677,9 @@ class SortMenuComponentStore extends ComponentStore {
         };
     }
 }
-SortMenuComponentStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable });
-SortMenuComponentStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponentStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponentStore, decorators: [{
+SortMenuComponentStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable });
+SortMenuComponentStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SortMenuComponentStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SortMenuComponentStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: TableStore }]; } });
 const equalSortArray = (arr1, arr2) => arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
@@ -3729,13 +3735,108 @@ class SortMenuComponent {
         this.store.setDirection(sort);
     }
 }
-SortMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component });
-SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i12.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe, "spaceCase": SpaceCasePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponent, decorators: [{
+SortMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component });
+SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i9.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"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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"] }]
         }], ctorParameters: function () { return [{ type: TableStore }, { type: SortMenuComponentStore }]; } });
 
+class KeyDisplayPipe {
+    constructor(tableState) {
+        this.tableState = tableState;
+    }
+    transform(key) {
+        return this.tableState.getMetaData$(key).pipe(map(metaData => metaData.displayName || spaceCase(key)));
+    }
+}
+KeyDisplayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: KeyDisplayPipe, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Pipe });
+KeyDisplayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: KeyDisplayPipe, name: "keyDisplay" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: KeyDisplayPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'keyDisplay' }]
+        }], ctorParameters: function () { return [{ type: TableStore }]; } });
+
+class FormatFilterValuePipe {
+    constructor(tableState, datePipe) {
+        this.tableState = tableState;
+        this.datePipe = datePipe;
+    }
+    transform(value, key, filterType) {
+        return this.tableState.getMetaData$(key).pipe(map(md => {
+            var _a, _b;
+            if (filterType === FilterType.IsNull) {
+                return '';
+            }
+            if (value && (filterType === FilterType.In)) {
+                if (md.fieldType === FieldType.Enum) {
+                    return (_a = value.map((v) => spaceCase(md.additional.enumMap[v])).join(', ')) !== null && _a !== void 0 ? _a : value;
+                }
+                return (_b = value.join(', ')) !== null && _b !== void 0 ? _b : value;
+            }
+            if (filterType === FilterType.NumberBetween) {
+                if (md.fieldType === FieldType.Date) {
+                    value = this.datePipe.transform(value.Start, 'MM/dd/yy') + ' - ' + this.datePipe.transform(value.End, 'MM/dd/yy');
+                }
+                else {
+                    value = value.Start + ' - ' + value.End;
+                }
+            }
+            else if (md.fieldType === FieldType.Date) {
+                value = this.datePipe.transform(value, 'MM/dd/yy');
+            }
+            return value;
+        }));
+    }
+}
+FormatFilterValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormatFilterValuePipe, deps: [{ token: TableStore }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe });
+FormatFilterValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: FormatFilterValuePipe, name: "formatFilterValue" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'formatFilterValue' }]
+        }], ctorParameters: function () { return [{ type: TableStore }, { type: i2.DatePipe }]; } });
+
+class FormatFilterTypePipe {
+    transform(filterType, value) {
+        if (filterType === FilterType.IsNull) {
+            return value ? filterType : 'Is Not Blank';
+        }
+        return filterType;
+    }
+}
+FormatFilterTypePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FormatFilterTypePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: FormatFilterTypePipe, name: "formatFilterType" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'formatFilterType' }]
+        }] });
+
+class FilterChipsComponent {
+    constructor(tableState, filterStore) {
+        this.tableState = tableState;
+        this.filterStore = filterStore;
+        this.filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters)
+            .filter(isFilterInfo)
+            .filter(f => !f._isExternalyManaged)));
+        this.currentFilters$ = this.filterStore.currentFilters$;
+    }
+    deleteByIndex(index) {
+        this.filterStore.deleteByIndex(index);
+    }
+    addFilter(filter) {
+        this.filterStore.addFilter(filter);
+    }
+    clearAll() {
+        this.filterStore.clearAll();
+    }
+}
+FilterChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
+FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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"] }]
+        }], ctorParameters: function () { return [{ type: TableStore }, { type: WrapperFilterStore }]; } });
+
 class TableContainerComponent {
     constructor(state, exportToCsvService, config, store, wrapper) {
         this.state = state;
@@ -3884,6 +3985,14 @@ class TableContainerComponent {
                 ...this.customCells.map(cc => cc.getMetaData(mds.find(item => item.key === cc.customCell)))
             ];
         })));
+        this.state.setLinkMaps(this.tableBuilder.metaData$.pipe(map((mds) => {
+            return mds.reduce((acc, md) => {
+                if (md.fieldType === FieldType.Link) {
+                    acc[md.key] = createLinkCreator(md);
+                }
+                return acc;
+            }, {});
+        })));
         this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })));
     }
     getData(data, metaData) {
@@ -3911,16 +4020,16 @@ class TableContainerComponent {
         return flattenDeep(withHeadersAndFooters);
     }
 }
-TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$3.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.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$3.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$3.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { type: i1$1.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$4.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$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableContainerComponent, decorators: [{
+TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$4.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "disableSort"], outputs: ["selection$"] }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
             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$3.Store }, { type: TableWrapperDirective, decorators: [{
+                    }] }, { type: i3$4.Store }, { type: TableWrapperDirective, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { customFilters: [{
@@ -4049,11 +4158,11 @@ class SaveTableEffects {
         })), { dispatch: false });
     }
 }
-SaveTableEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: SaveTableEffects });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SaveTableEffects, decorators: [{
+SaveTableEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SaveTableEffects, deps: [{ token: i1$3.Actions }, { token: i3$4.Store }], target: i0.ɵɵFactoryTarget.Injectable });
+SaveTableEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SaveTableEffects });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SaveTableEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$4.Actions }, { type: i3$3.Store }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: i3$4.Store }]; } });
 
 class TableBuilderModule {
     static forRoot(config) {
@@ -4066,8 +4175,8 @@ class TableBuilderModule {
         };
     }
 }
-TableBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableBuilderModule, declarations: [ColumnTotalPipe,
+TableBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: TableBuilderModule, declarations: [ColumnTotalPipe,
         TableContainerComponent,
         GenericTableComponent,
         PaginatorComponent,
@@ -4080,6 +4189,7 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         NumberFilterComponent,
         ColumnBuilderComponent,
         ArrayColumnComponent,
+        LinkColumnComponent,
         HeaderMenuComponent,
         KeyDisplayPipe,
         FormatFilterValuePipe,
@@ -4098,7 +4208,7 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         TableFilterDirective,
         TableFilterStringContainsDirective,
         TableWrapperDirective], imports: [CommonModule,
-        MaterialModule, i3$3.StoreFeatureModule, i1$4.EffectsFeatureModule, FormsModule,
+        MaterialModule, i3$4.StoreFeatureModule, i1$3.EffectsFeatureModule, FormsModule,
         RouterModule,
         ReactiveComponentModule,
         DragDropModule,
@@ -4119,24 +4229,21 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         TableFilterDirective,
         TableFilterStringContainsDirective,
         TableWrapperDirective] });
-TableBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableBuilderModule, providers: [
+TableBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableBuilderModule, providers: [
         SpaceCasePipe,
         DatePipe,
         CurrencyPipe,
-        PhoneNumberPipe,
-        TableTemplateService,
-    ], imports: [[
-            CommonModule,
-            MaterialModule,
-            StoreModule.forFeature('globalStorageState', storageStateReducer),
-            EffectsModule.forFeature([SaveTableEffects]),
-            FormsModule,
-            RouterModule,
-            ReactiveComponentModule,
-            DragDropModule,
-            UtilitiesModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableBuilderModule, decorators: [{
+        PhoneNumberPipe
+    ], imports: [CommonModule,
+        MaterialModule,
+        StoreModule.forFeature('globalStorageState', storageStateReducer),
+        EffectsModule.forFeature([SaveTableEffects]),
+        FormsModule,
+        RouterModule,
+        ReactiveComponentModule,
+        DragDropModule,
+        UtilitiesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4183,6 +4290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                         NumberFilterComponent,
                         ColumnBuilderComponent,
                         ArrayColumnComponent,
+                        LinkColumnComponent,
                         HeaderMenuComponent,
                         KeyDisplayPipe,
                         FormatFilterValuePipe,
@@ -4206,8 +4314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                         SpaceCasePipe,
                         DatePipe,
                         CurrencyPipe,
-                        PhoneNumberPipe,
-                        TableTemplateService,
+                        PhoneNumberPipe
                     ]
                 }]
         }] });
@@ -4307,13 +4414,11 @@ function actionStatusReducer(state = initialState, action) {
 
 class NgrxExtModule {
 }
-NgrxExtModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgrxExtModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i3$3.StoreFeatureModule] });
-NgrxExtModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NgrxExtModule, imports: [[
-            CommonModule,
-            StoreModule.forFeature('ActionStatus', actionStatusReducer),
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NgrxExtModule, decorators: [{
+NgrxExtModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgrxExtModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i3$4.StoreFeatureModule] });
+NgrxExtModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
+        StoreModule.forFeature('ActionStatus', actionStatusReducer)] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: NgrxExtModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -4332,9 +4437,9 @@ class ActionStateSpinnerComponent {
         this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
     }
 }
-ActionStateSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionStateSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ActionStateSpinnerComponent, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "<div id=\"blocker\" *ngIf=\"(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress\">\n  <mat-spinner class=\"spinner\" [diameter]=\"200\"></mat-spinner>\n</div>\n", styles: ["#blocker{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], components: [{ type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1$1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
+ActionStateSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionStateSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ActionStateSpinnerComponent, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "<div id=\"blocker\" *ngIf=\"(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress\">\n  <mat-spinner class=\"spinner\" [diameter]=\"200\"></mat-spinner>\n</div>\n", styles: ["#blocker{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-action-state-spinner', template: "<div id=\"blocker\" *ngIf=\"(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress\">\n  <mat-spinner class=\"spinner\" [diameter]=\"200\"></mat-spinner>\n</div>\n", styles: ["#blocker{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { status$: [{
@@ -4343,14 +4448,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
 
 class ActionStateUiModule {
 }
-ActionStateUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ActionStateUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ActionStateUiModule, declarations: [ActionStateSpinnerComponent], imports: [CommonModule,
+ActionStateUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ActionStateUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: ActionStateUiModule, declarations: [ActionStateSpinnerComponent], imports: [CommonModule,
         MatProgressSpinnerModule], exports: [ActionStateSpinnerComponent] });
-ActionStateUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ActionStateUiModule, imports: [[
-            CommonModule,
-            MatProgressSpinnerModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ActionStateUiModule, decorators: [{
+ActionStateUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ActionStateUiModule, imports: [CommonModule,
+        MatProgressSpinnerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ActionStateUiModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [