@saydar/table-builder 1.0.1 → 1.0.2-beta.0

package/fesm2022/saydar-table-builder.mjs

@@ -1,79 +1,55 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, NgModule, Injectable, InjectionToken, Pipe, HostListener, Component, EventEmitter, Output, ContentChildren, Inject, ChangeDetectionStrategy, ViewChild, Injector, ElementRef, Optional } from '@angular/core';
+import { Input, Directive, Injectable, InjectionToken, Inject, HostListener, Pipe, ChangeDetectionStrategy, Component, ViewChild, EventEmitter, Output, ContentChildren, NgModule, Injector, ElementRef, Optional } from '@angular/core';
 import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, 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$3 from 'rxjs';
-import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap as concatMap$1, merge, delay, switchMap as switchMap$1, scan, fromEvent, asyncScheduler, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, from } from 'rxjs';
+import * as i3$1 from 'rxjs';
+import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap as concatMap$1, merge, delay, fromEvent, switchMap as switchMap$1, scan, asyncScheduler, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, from } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
-import * as i4$1 from '@angular/material/table';
-import { MatColumnDef, MatTableDataSource, MatTable, MatTableModule, MatRowDef } from '@angular/material/table';
+import * as i2 from '@angular/material/table';
+import { MatColumnDef, MatCell, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatFooterCellDef, MatFooterCell, MatTableDataSource, MatTable, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as _ from 'lodash';
-import { flatten, get, merge as merge$1, sumBy, orderBy, groupBy, flattenDeep, cloneDeep, set } from 'lodash';
-import * as i9 from '@angular/cdk/drag-drop';
-import { moveItemInArray, CdkDropList, CDK_DROP_LIST, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2 from '@angular/common';
-import { CommonModule, DatePipe, CurrencyPipe, AsyncPipe } from '@angular/common';
-import * as i1 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
-import * as i5$2 from '@angular/material/slide-toggle';
-import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { flatten, merge as merge$1, get, sumBy, orderBy, groupBy, flattenDeep, cloneDeep, set } from 'lodash';
+import { moveItemInArray, CdkDropList, CDK_DROP_LIST, CdkDrag, CdkDragHandle, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import { LetDirective } from '@ngrx/component';
+import { MatTooltip } from '@angular/material/tooltip';
+import * as i1$2 from '@angular/common';
+import { AsyncPipe, KeyValuePipe, NgSwitch, NgIf, NgSwitchCase, NgClass, NgTemplateOutlet, DecimalPipe, CurrencyPipe, CommonModule, DatePipe } from '@angular/common';
 import { v4 } from 'uuid';
 import update from 'immutability-helper';
-import * as i8$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i8 from '@ngrx/component';
-import { LetDirective } from '@ngrx/component';
-import * as i6 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 i6$1 from '@angular/material/menu';
-import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i3$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i4 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i5 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i5$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i8$2 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NgForm, ControlContainer, FormsModule } from '@angular/forms';
-import * as i7 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i13 from 'ng-table-virtual-scroll';
+import * as i1$3 from '@angular/material/sort';
+import { MatSortHeader, MatSort } from '@angular/material/sort';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NgForm, ControlContainer } from '@angular/forms';
+import * as i4 from '@angular/material/checkbox';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatFormField, MatPrefix, MatLabel, MatSuffix, MatSelect, MatOption } from '@angular/material/select';
+import { MatInput } from '@angular/material/input';
+import * as i6 from '@angular/material/radio';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
+import * as i1$1 from '@angular/material/dialog';
+import * as i5 from '@angular/material/slide-toggle';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { RouterLink, RouterModule } from '@angular/router';
+import * as i3 from 'ng-table-virtual-scroll';
 import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
-import * as i3$2 from '@angular/material/paginator';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i12 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i1$2 from '@angular/cdk/table';
-import * as i7$1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import * as i7$2 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i7$3 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i8$3 from '@angular/material/button-toggle';
-import * as i3$4 from '@ngrx/store';
+import { MatPaginator } from '@angular/material/paginator';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1$4 from '@angular/cdk/table';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import * as i7 from '@angular/material/core';
+import * as i8 from '@angular/material/button-toggle';
+import * as i3$2 from '@ngrx/store';
 import { createSelector, createAction, props, select, createReducer, on, StoreModule, createFeatureSelector, Store } from '@ngrx/store';
-import * as i1$3 from '@ngrx/effects';
+import { MatChipSet, MatChip, MatChipRemove } from '@angular/material/chips';
+import * as i1$5 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import { concatLatestFrom } from '@ngrx/operators';
 import { createEntityAdapter } from '@ngrx/entity';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
 var HttpRequestStatus;
 (function (HttpRequestStatus) {
@@ -369,40 +345,6 @@ function chainRequest(httpState$, request, requestParams) {
     }));
 }
 
-/** @deprecated Import the standalone directives directly instead. */
-class HttpRequestModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: HttpRequestModule, imports: [HttpSuccessStateDirective,
-            HttpRequestStateDirective,
-            HttpErrorStateDirective,
-            HttpInProgressStateDirective,
-            HttpNotStartedStateDirective], exports: [HttpSuccessStateDirective,
-            HttpRequestStateDirective,
-            HttpErrorStateDirective,
-            HttpInProgressStateDirective,
-            HttpNotStartedStateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HttpRequestModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HttpRequestModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        HttpSuccessStateDirective,
-                        HttpRequestStateDirective,
-                        HttpErrorStateDirective,
-                        HttpInProgressStateDirective,
-                        HttpNotStartedStateDirective,
-                    ],
-                    exports: [
-                        HttpSuccessStateDirective,
-                        HttpRequestStateDirective,
-                        HttpErrorStateDirective,
-                        HttpInProgressStateDirective,
-                        HttpNotStartedStateDirective,
-                    ]
-                }]
-        }] });
-
 class HttpRequestStateStore extends ComponentStore {
     constructor(req, options) {
         super({ requestParams: null, response: notStarted });
@@ -639,697 +581,137 @@ function delayOn(predicate, delayTime) {
     };
 }
 
-const TableBuilderConfigToken = new InjectionToken('TableBuilderConfig');
-
-class PhoneNumberPipe {
-    transform(phoneNum) {
-        if (phoneNum) {
-            phoneNum = phoneNum.replace(/\D/g, '');
-            if (phoneNum[0] === '1') {
-                phoneNum = phoneNum.substring(1);
-            }
-            return '(' + phoneNum.slice(0, 3) + ') ' + phoneNum.slice(3, 6) + '-' + phoneNum.slice(6, 10) + ' ' + phoneNum.slice(10);
-        }
+class ConditionalClassesDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.classesApplied = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: PhoneNumberPipe, isStandalone: false, name: "phone" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PhoneNumberPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'phone',
-                    standalone: false
-                }]
-        }] });
-
-class PreventEnterDirective {
-    onKeyDown() {
-        return false;
+    ngOnChanges(changes) {
+        let toApply = [];
+        if (this.classes) {
+            toApply = Object.keys(this.classes)
+                .filter(key => this.classes[key](this.element));
+        }
+        var classesNotYetApplied = toApply.filter(c => !this.classesApplied.includes(c));
+        var classesToRemove = this.classesApplied.filter(c => !toApply.includes(c));
+        classesToRemove.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
+        classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
+        this.classesApplied = toApply;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: PreventEnterDirective, isStandalone: false, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ConditionalClassesDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { element: "element", classes: ["conditionalClasses", "classes"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreventEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: 'preventEnter',
-                    standalone: false
-                }]
-        }], propDecorators: { onKeyDown: [{
-                type: HostListener,
-                args: ['keydown.enter']
+            args: [{ selector: '[conditionalClasses]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { element: [{
+                type: Input
+            }], classes: [{
+                type: Input,
+                args: ['conditionalClasses']
             }] } });
 
-class StopPropagationDirective {
-    onClick(event) {
-        event.stopPropagation();
+class StylerDirective {
+    set styler(styles) {
+        if (styles) {
+            Object.keys(styles).forEach(style => {
+                this.el.nativeElement.style[style] = styles[style];
+            });
+        }
     }
-    onMousedown(event) {
-        event.stopPropagation();
+    ;
+    constructor(el) {
+        this.el = el;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: StopPropagationDirective, isStandalone: false, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { styler: "styler" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StopPropagationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StylerDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: "[stop-propagation]",
-                    standalone: false
-                }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ["click", ["$event"]]
-            }], onMousedown: [{
-                type: HostListener,
-                args: ["mousedown", ["$event"]]
+            args: [{ selector: '[styler]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { styler: [{
+                type: Input
             }] } });
 
-class AutoFocusDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.autoFocus = true;
+class Subjectifier extends Observable {
+    constructor(_source) {
+        super((obs) => {
+            const s = merge(_source, this._subj).subscribe(obs);
+            return s;
+        });
+        this._source = _source;
+        this._subj = new Subject();
+        this.merged = merge(this._source, this._subj);
+        this.next = this._subj.next.bind(this._subj);
+        this.newSubj = (...operations) => new Subjectifier(this.merged.pipe(...operations));
     }
-    ngAfterViewInit() {
-        if (this.autoFocus) {
-            setTimeout(() => {
-                this.elementRef.nativeElement.focus();
-            });
+}
+
+class GeneralTableSettings {
+    constructor(settings) {
+        this.headerSettings = new TableWrapperHeaderSettings();
+        this.footerSettings = new TableWrapperFooterSettings();
+        this.columnHeaderSettings = new TableColumnHeaderSettings();
+        if (settings) {
+            merge$1(this.headerSettings, settings.headerSettings);
+            merge$1(this.footerSettings, settings.footerSettings);
+            merge$1(this.columnHeaderSettings, settings.columnHeaderSettings);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: AutoFocusDirective, isStandalone: false, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AutoFocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[autoFocus]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { autoFocus: [{
-                type: Input
-            }] } });
-
-class ClickSubjectDirective extends Subject {
+class TableWrapperHeaderSettings {
     constructor() {
-        super();
-    }
-    set clickSubject(val) {
-        this._val = val;
+        this.hideExport = false;
+        this.hideFilter = false;
+        this.hideColumnSettings = false;
+        this.hideHeader = false;
+        this.hideSort = false;
+        this.collapse = false;
+        this.showTitleWhenCollapsed = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ClickSubjectDirective, isStandalone: false, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickSubjectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickSubject]',
-                    exportAs: 'clickSubject',
-                    host: {
-                        '(click)': 'next(this._val)'
-                    },
-                    standalone: false
-                }]
-        }], ctorParameters: () => [], propDecorators: { clickSubject: [{
-                type: Input,
-                args: ['clickSubject']
-            }] } });
-
-class ClickEmitterDirective extends Subject {
+class TableWrapperFooterSettings {
     constructor() {
-        super();
+        this.collapse = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ClickEmitterDirective, isStandalone: false, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickEmitterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickEmitter]',
-                    exportAs: 'clickEmitter',
-                    host: {
-                        '(click)': 'next(true)'
-                    },
-                    standalone: false
-                }]
-        }], ctorParameters: () => [] });
-
-class DialogService {
+class TableColumnHeaderSettings {
     constructor() {
-        this.allOpenOpDialogs = [];
-    }
-    addDialogRef(ref) {
-        this.allOpenOpDialogs.push(ref);
-    }
-    removeDialogRef(ref) {
-        this.allOpenOpDialogs = this.allOpenOpDialogs.filter(rf => ref.id !== rf.id);
-    }
-    closeAllOpDialogs() {
-        this.allOpenOpDialogs.forEach(ref => ref.close());
+        this.noFilters = false;
+        this.noHeader = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class DialogWrapper {
-    set template(tmpl) {
-        if (this.viewEmbeded) {
-            this.vcr.clear();
+class PesrsistedTableSettings {
+    constructor(tableSettings) {
+        this.collapseHeader = false;
+        this.collapseFooter = false;
+        if (tableSettings) {
+            this.collapseHeader = tableSettings.headerSettings?.collapse ?? tableSettings.collapseHeader;
+            this.collapseFooter = tableSettings.footerSettings?.collapse ?? tableSettings.collapseFooter;
         }
-        this.viewEmbeded = true;
-        this.vcr.createEmbeddedView(tmpl, this.viewContext);
-    }
-    set close(closeMethod) {
-        this.viewContext.close = closeMethod;
-    }
-    set data(value) {
-        this.viewContext.$implicit = value;
-        this.viewContext.opDialog = value;
     }
-    constructor(vcr) {
-        this.vcr = vcr;
-        this.viewEmbeded = false;
-        this.viewContext = {
-            close: () => { },
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogWrapper, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DialogWrapper, isStandalone: false, selector: "app-dialog-content", ngImport: i0, template: ``, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogWrapper, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-dialog-content',
-                    template: ``,
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
-const defaultDialogConfig = {
-    maxHeight: '95vh',
-};
-class DialogDirective {
-    set opDialogConfig(config) {
-        this._dialogConfig = { ...defaultDialogConfig, ...config };
-    }
-    get opDialogConfig() {
-        return this._dialogConfig;
-    }
-    set state(open_close) {
-        this._data.next(open_close);
-    }
-    constructor(templateRef, dialog, service) {
-        this.templateRef = templateRef;
-        this.dialog = dialog;
-        this.service = service;
-        this.opDialogClosed = new EventEmitter();
-        this._dialogConfig = defaultDialogConfig;
-        this.add_opDialog_Class = true;
-        this._data = new Subject();
-        this.subscription = this._data.pipe(switchAll()).subscribe(d => {
-            if (d) {
-                this.opDialogConfig.data = d;
-                this.setDialogState(true);
-            }
-            else {
-                this.setDialogState(false);
-            }
-        });
-    }
-    close() {
-        this.dialogRef?.close();
-    }
-    initDialog() {
-        if (this.nativeElement) {
-            const rect = this.nativeElement.getBoundingClientRect();
-            const position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
-            this.opDialogConfig = { ...this.opDialogConfig, position };
-        }
-        if (this.add_opDialog_Class) {
-            this.opDialogConfig.panelClass = [...(Array.isArray(this.opDialogConfig.panelClass) ? this.opDialogConfig.panelClass : this.opDialogConfig.panelClass ? [this.opDialogConfig.panelClass] : []), 'opDialog'];
-        }
-        this.dialogRef = this.dialog.open(DialogWrapper, this.opDialogConfig);
-        this.componentWrapper = this.dialogRef.componentInstance;
-        this.componentWrapper.close = () => this.dialogRef?.close();
-        this.componentWrapper.data = this.opDialogConfig.data;
-        this.componentWrapper.template = this.templateRef;
-        if (!this.opDialogConfig.disableClose) {
-            this.service.addDialogRef(this.dialogRef);
-        }
-        const sub = this.dialogRef.afterClosed().subscribe(() => {
-            this.opDialogClosed.emit(true);
-            this.service.removeDialogRef(this.dialogRef);
-            this.dialogRef = undefined;
-            sub.unsubscribe();
-        });
-    }
-    setDialogState(open) {
-        if (open) {
-            if (!this.dialogRef) {
-                this.initDialog();
-            }
-            else {
-                this.componentWrapper.data = this.opDialogConfig.data;
-            }
-        }
-        else if (!open && this.dialogRef) {
-            this.dialogRef.close();
-        }
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1.MatDialog }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: DialogDirective, isStandalone: false, selector: "[opDialog]", inputs: { add_opDialog_Class: "add_opDialog_Class", opDialogConfig: "opDialogConfig", state: ["opDialog", "state"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[opDialog]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i1.MatDialog }, { type: DialogService }], propDecorators: { opDialogClosed: [{
-                type: Output
-            }], add_opDialog_Class: [{
-                type: Input
-            }], opDialogConfig: [{
-                type: Input
-            }], state: [{
-                type: Input,
-                args: ['opDialog']
-            }], nativeElement: [{
-                type: Input,
-                args: ['opDialogOrigin']
-            }] } });
-
-class StylerDirective {
-    set styler(styles) {
-        if (styles) {
-            Object.keys(styles).forEach(style => {
-                this.el.nativeElement.style[style] = styles[style];
-            });
-        }
-    }
-    ;
-    constructor(el) {
-        this.el = el;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: StylerDirective, isStandalone: false, selector: "[styler]", inputs: { styler: "styler" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StylerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[styler]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { styler: [{
-                type: Input
-            }] } });
-
-class MatSlideToggleGroupDirective {
-    constructor() {
-        this.allowMultiple = false;
-        this._ready = new ReplaySubject(1);
-    }
-    set toggles(val) {
-        this._toggles = val;
-        this._ready.next(true);
-    }
-    get valueEmitter() {
-        return this._ready.pipe(switchMap$1(_ => this.getObs()));
-    }
-    getInitValue() {
-        const startValue = this._toggles.reduce((prev, cur) => {
-            if (!cur.name) {
-                throw new Error('toggle must have the name attribute set');
-            }
-            prev[cur.name] = cur.checked;
-            return prev;
-        }, {});
-        return startValue;
-    }
-    getObs() {
-        var toggleChanges = merge(...this._toggles.map(toggle => toggle.change));
-        const startValue = this.getInitValue();
-        return toggleChanges.pipe(scan((prev, cur) => {
-            const toggleName = cur.source.name;
-            const newVal = { ...prev, [toggleName]: cur.checked };
-            if (cur.checked && !this.allowMultiple) {
-                Object.keys(prev)
-                    .filter(key => key !== toggleName && prev[key])
-                    .forEach(key => {
-                    newVal[key] = false;
-                    this._toggles.find(toggle => toggle.name === key).toggle();
-                });
-            }
-            return newVal;
-        }, startValue), startWith$1(startValue));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatSlideToggleGroupDirective, isStandalone: false, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[opMatSlideToggleGroup]',
-                    standalone: false
-                }]
-        }], propDecorators: { allowMultiple: [{
-                type: Input
-            }], toggles: [{
-                type: ContentChildren,
-                args: [MatSlideToggle]
-            }], valueEmitter: [{
-                type: Output
-            }] } });
-
-class TrimWhitespaceDirective {
-    constructor(elem) {
-        this.elem = elem;
-    }
-    onBlur() {
-        const inputString = this.elem.nativeElement.value;
-        if (inputString) {
-            const newValue = inputString.trim().replace(/\t/g, '');
-            if (inputString !== newValue) {
-                this.elem.nativeElement.value = newValue;
-                this.elem.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TrimWhitespaceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TrimWhitespaceDirective, isStandalone: false, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[trimWhitespace]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
-class FunctionPipe {
-    transform(func, ...args) {
-        if (typeof func === 'string') {
-            const [instance, ...tail] = args;
-            const method = instance[func].bind(instance);
-            return method(...tail);
-        }
-        return func(...args);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: FunctionPipe, isStandalone: false, name: "func" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FunctionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'func',
-                    standalone: false
-                }]
-        }] });
-
-class SpaceCasePipe {
-    transform(value) {
-        return spaceCase(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: SpaceCasePipe, isStandalone: false, name: "spaceCase" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SpaceCasePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'spaceCase',
-                    standalone: false
-                }]
-        }] });
-/**
- * Adds a space before uppercase letters that either
- * 1. follows a lowercase letter or digit
- * 2. or precedes a lowercase letter and follows an alpha-numeric character
- *
- * Uppercases the first digit
- *
- * Turns underscores into spaces
- */
-function spaceCase(value) {
-    const phrase = value?.replace(/([a-z0-9])([A-Z])|([a-zA-Z0-9])([A-Z])(?=[a-z])|_/g, '$1$3 $2$4');
-    // uppercase the first character of every word
-    return phrase?.replace(/(^| )(\w)/g, x => x.toUpperCase());
-}
-
-class ConditionalClassesDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.classesApplied = [];
-    }
-    ngOnChanges(changes) {
-        let toApply = [];
-        if (this.classes) {
-            toApply = Object.keys(this.classes)
-                .filter(key => this.classes[key](this.element));
-        }
-        var classesNotYetApplied = toApply.filter(c => !this.classesApplied.includes(c));
-        var classesToRemove = this.classesApplied.filter(c => !toApply.includes(c));
-        classesToRemove.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
-        classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
-        this.classesApplied = toApply;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ConditionalClassesDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ConditionalClassesDirective, isStandalone: false, selector: "[conditionalClasses]", inputs: { element: "element", classes: ["conditionalClasses", "classes"] }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[conditionalClasses]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { element: [{
-                type: Input
-            }], classes: [{
-                type: Input,
-                args: ['conditionalClasses']
-            }] } });
-
-class UtilitiesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, declarations: [SpaceCasePipe,
-            PhoneNumberPipe,
-            FunctionPipe,
-            StopPropagationDirective,
-            StylerDirective,
-            PreventEnterDirective,
-            AutoFocusDirective,
-            TrimWhitespaceDirective,
-            ClickSubjectDirective,
-            ClickEmitterDirective,
-            DialogDirective,
-            MatSlideToggleGroupDirective,
-            ConditionalClassesDirective], exports: [StopPropagationDirective,
-            PreventEnterDirective,
-            SpaceCasePipe,
-            PhoneNumberPipe,
-            FunctionPipe,
-            StopPropagationDirective,
-            TrimWhitespaceDirective,
-            StylerDirective,
-            PreventEnterDirective,
-            AutoFocusDirective,
-            ClickSubjectDirective,
-            ClickEmitterDirective,
-            DialogDirective,
-            MatSlideToggleGroupDirective,
-            ConditionalClassesDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, providers: [
-            DialogService
-        ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    exports: [
-                        StopPropagationDirective,
-                        PreventEnterDirective,
-                        SpaceCasePipe,
-                        PhoneNumberPipe,
-                        FunctionPipe,
-                        StopPropagationDirective,
-                        TrimWhitespaceDirective,
-                        StylerDirective,
-                        PreventEnterDirective,
-                        AutoFocusDirective,
-                        ClickSubjectDirective,
-                        ClickEmitterDirective,
-                        DialogDirective,
-                        MatSlideToggleGroupDirective,
-                        ConditionalClassesDirective,
-                    ],
-                    declarations: [
-                        SpaceCasePipe,
-                        PhoneNumberPipe,
-                        FunctionPipe,
-                        StopPropagationDirective,
-                        StylerDirective,
-                        PreventEnterDirective,
-                        AutoFocusDirective,
-                        TrimWhitespaceDirective,
-                        ClickSubjectDirective,
-                        ClickEmitterDirective,
-                        DialogDirective,
-                        MatSlideToggleGroupDirective,
-                        ConditionalClassesDirective,
-                    ],
-                    providers: [
-                        DialogService
-                    ]
-                }]
-        }] });
-
-function isPipe(o) {
-    return typeof (o.transform) === 'function';
-}
-class TransformCreator {
-    constructor(datePipe, currencyPipe, phonePipe, casePipe, config) {
-        this.datePipe = datePipe;
-        this.currencyPipe = currencyPipe;
-        this.phonePipe = phonePipe;
-        this.casePipe = casePipe;
-        this.config = config;
-    }
-    createTransformer(metaData) {
-        const defaultFunc = (value) => get(value, metaData.key);
-        if (metaData.transform) {
-            if (isPipe(metaData.transform)) {
-                return (value) => metaData.transform.transform(defaultFunc(value));
-            }
-            return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value), value);
-        }
-        if (this.config.transformers && this.config.transformers[metaData.fieldType]) {
-            var tranformer = this.config.transformers[metaData.fieldType];
-            return (value) => tranformer(defaultFunc(value));
-        }
-        const defaultDateFormat = this.config.defaultSettings?.dateFormat ?? 'shortDate';
-        const defaultDateTimeFormat = this.config.defaultSettings?.dateTimeFormat ?? 'short';
-        switch (metaData.fieldType) {
-            case FieldType.Date:
-                const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
-                return (value) => this.datePipe.transform(defaultFunc(value), dateFormat);
-            case FieldType.DateTime:
-                const dateTimeFormat = metaData.additional?.dateTimeOptions?.format ?? defaultDateTimeFormat;
-                return (value) => this.datePipe.transform(defaultFunc(value), dateTimeFormat);
-            case FieldType.Currency:
-                return (value) => this.currencyPipe.transform(defaultFunc(value));
-            case FieldType.PhoneNumber:
-                return (value) => this.phonePipe.transform(defaultFunc(value));
-            case FieldType.Enum:
-                return (value) => this.casePipe.transform(metaData.additional?.enumMap[defaultFunc(value)]);
-            case FieldType.Boolean:
-                let forTrue = 'check';
-                let forFalse = '';
-                if (metaData.additional?.boolean?.forTrue) {
-                    forTrue = metaData?.additional.boolean.forTrue.icon;
-                }
-                if (metaData.additional?.boolean?.showForFalse === true) {
-                    forFalse = 'clear';
-                }
-                else if (metaData.additional?.boolean?.showForFalse?.icon) {
-                    forFalse = metaData.additional?.boolean?.showForFalse?.icon;
-                }
-                return (value) => defaultFunc(value) ? forTrue : forFalse;
-        }
-        return defaultFunc;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TransformCreator, deps: [{ token: i2.DatePipe }, { token: i2.CurrencyPipe }, { token: PhoneNumberPipe }, { token: SpaceCasePipe }, { token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TransformCreator, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TransformCreator, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i2.DatePipe }, { type: i2.CurrencyPipe }, { type: PhoneNumberPipe }, { type: SpaceCasePipe }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TableBuilderConfigToken]
-                }] }] });
-
-class GeneralTableSettings {
-    constructor(settings) {
-        this.headerSettings = new TableWrapperHeaderSettings();
-        this.footerSettings = new TableWrapperFooterSettings();
-        this.columnHeaderSettings = new TableColumnHeaderSettings();
-        if (settings) {
-            merge$1(this.headerSettings, settings.headerSettings);
-            merge$1(this.footerSettings, settings.footerSettings);
-            merge$1(this.columnHeaderSettings, settings.columnHeaderSettings);
-        }
-    }
-}
-class TableWrapperHeaderSettings {
-    constructor() {
-        this.hideExport = false;
-        this.hideFilter = false;
-        this.hideColumnSettings = false;
-        this.hideHeader = false;
-        this.hideSort = false;
-        this.collapse = false;
-        this.showTitleWhenCollapsed = true;
-    }
-}
-class TableWrapperFooterSettings {
-    constructor() {
-        this.collapse = false;
-    }
-}
-class TableColumnHeaderSettings {
-    constructor() {
-        this.noFilters = false;
-        this.noHeader = false;
-    }
-}
-class PesrsistedTableSettings {
-    constructor(tableSettings) {
-        this.collapseHeader = false;
-        this.collapseFooter = false;
-        if (tableSettings) {
-            this.collapseHeader = tableSettings.headerSettings?.collapse ?? tableSettings.collapseHeader;
-            this.collapseFooter = tableSettings.footerSettings?.collapse ?? tableSettings.collapseFooter;
-        }
-    }
-}
-class NotPersisitedTableSettings {
-    constructor(tableSettings) {
-        this.hideExport = true;
-        this.hideFilter = true;
-        this.hideColumnSettings = true;
-        this.hideSort = true;
-        this.showTitleWhenHeaderCollapsed = true;
-        this.hideHeader = true;
-        this.hideColumnHeaderFilters = true;
-        this.hideColumnHeader = true;
-        if (tableSettings) {
-            this.hideExport = tableSettings.headerSettings.hideExport;
-            this.hideColumnSettings = tableSettings.headerSettings.hideColumnSettings;
-            this.hideFilter = tableSettings.headerSettings.hideFilter;
-            this.hideSort = tableSettings.headerSettings.hideSort;
-            this.showTitleWhenHeaderCollapsed = tableSettings.headerSettings.showTitleWhenCollapsed;
-            this.hideHeader = tableSettings.headerSettings.hideHeader;
-            this.hideColumnHeaderFilters = tableSettings.columnHeaderSettings.noFilters;
-            this.hideColumnHeader = tableSettings.columnHeaderSettings.noHeader;
-        }
+}
+class NotPersisitedTableSettings {
+    constructor(tableSettings) {
+        this.hideExport = true;
+        this.hideFilter = true;
+        this.hideColumnSettings = true;
+        this.hideSort = true;
+        this.showTitleWhenHeaderCollapsed = true;
+        this.hideHeader = true;
+        this.hideColumnHeaderFilters = true;
+        this.hideColumnHeader = true;
+        if (tableSettings) {
+            this.hideExport = tableSettings.headerSettings.hideExport;
+            this.hideColumnSettings = tableSettings.headerSettings.hideColumnSettings;
+            this.hideFilter = tableSettings.headerSettings.hideFilter;
+            this.hideSort = tableSettings.headerSettings.hideSort;
+            this.showTitleWhenHeaderCollapsed = tableSettings.headerSettings.showTitleWhenCollapsed;
+            this.hideHeader = tableSettings.headerSettings.hideHeader;
+            this.hideColumnHeaderFilters = tableSettings.columnHeaderSettings.noFilters;
+            this.hideColumnHeader = tableSettings.columnHeaderSettings.noHeader;
+        }
     }
 }
 
@@ -1364,6 +746,8 @@ const defaultTableState = {
     groups: []
 };
 
+const TableBuilderConfigToken = new InjectionToken('TableBuilderConfig');
+
 var FilterType;
 (function (FilterType) {
     FilterType["NumberEquals"] = "Equals";
@@ -1924,455 +1308,995 @@ const orderMetaData = (state) => {
             Object.values(state.metaData).sort((a, b) => a.order - b.order);
 };
 
-class ArrayColumnComponent {
-    constructor(config) {
-        this.config = config;
-        this.ArrayStyle = ArrayStyle;
+class ResizeColumnDirective {
+    constructor(renderer, el, store) {
+        this.renderer = renderer;
+        this.el = el;
+        this.store = store;
+        this.getElementWidth = (elem) => (+(globalThis.getComputedStyle(elem).getPropertyValue('width').replace('px', '')));
+    }
+    ngOnInit() {
+        if (this.resizable) {
+            const { table, columnHead } = this.getTableAndColumnHeadHtmlElements();
+            const resizer = this.createResizerSpanInColumnHead(columnHead);
+            const aggregateMouseEventsMapped$ = this.mouseDownThroghMouseUpEventMapper(resizer, columnHead, table);
+            const resizeColsData$ = aggregateMouseEventsMapped$.pipe(filter(({ mouseMove }) => !!mouseMove.buttons), map(({ mouseDownData, mouseMove }) => {
+                const { newTableWidth, newColumnWidth } = this.calculateNewWidths(mouseDownData, mouseMove);
+                return ({
+                    key: this.key,
+                    widthInPixel: newColumnWidth,
+                    tableSize: newTableWidth,
+                });
+            }), defaultShareReplay());
+            this.store.setUserDefinedWidth(resizeColsData$.pipe(map(resizeData => ([{ key: this.key, widthInPixel: resizeData.widthInPixel }]))));
+            this.store.setTableWidth(resizeColsData$.pipe(map(resizeData => resizeData.tableSize)));
+        }
+    }
+    createResizerSpanInColumnHead(columnHead) {
+        const resizer = this.renderer.createElement("span");
+        this.renderer.addClass(resizer, "resize-holder");
+        resizer.style['cursor'] = 'col-resize';
+        resizer.style['user-select'] = 'none';
+        resizer.style['width'] = '10px';
+        resizer.style['height'] = '100%';
+        resizer.style['position'] = 'absolute';
+        resizer.style['right'] = '0';
+        resizer.style['top'] = '0';
+        resizer.style['z-index'] = '1';
+        this.renderer.appendChild(columnHead, resizer);
+        return resizer;
+    }
+    getTableAndColumnHeadHtmlElements() {
+        const columnHead = this.el.nativeElement;
+        const row = this.renderer.parentNode(columnHead);
+        const table = this.renderer.parentNode(row);
+        return ({ table, columnHead });
+    }
+    mouseDownThroghMouseUpEventMapper(resizer, columnHead, table) {
+        return this.resizerMouseDownEventMapper(resizer, columnHead, table)
+            .pipe(switchMap(mouseDownData => fromEvent(table, "mousemove").pipe(map(mouseMove => ({ mouseDownData, mouseMove })), takeUntil(fromEvent(document, "mouseup")))));
+    }
+    resizerMouseDownEventMapper(resizer, columnHead, table) {
+        return fromEvent(resizer, "mousedown").pipe(map(event => ({
+            startPageX: event.pageX,
+            startColumnWidth: this.getElementWidth(columnHead),
+            startTableWidth: this.getElementWidth(table),
+        })));
+    }
+    calculateNewWidths(mouseDownData, mouseMove) {
+        const change = (mouseMove.pageX - mouseDownData.startPageX);
+        let newColumnWidth = mouseDownData.startColumnWidth + change;
+        if (newColumnWidth < 1) {
+            newColumnWidth = 1;
+        }
+        const columnChange = newColumnWidth - mouseDownData.startColumnWidth;
+        const newTableWidth = (mouseDownData.startTableWidth + columnChange);
+        return ({ newTableWidth, newColumnWidth });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ResizeColumnDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ResizeColumnDirective, isStandalone: true, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable"], key: "key" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ResizeColumnDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[resizeColumn]" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TableStore }], propDecorators: { resizable: [{
+                type: Input,
+                args: ["resizeColumn"]
+            }], key: [{
+                type: Input
+            }] } });
+
+class StopPropagationDirective {
+    onClick(event) {
+        event.stopPropagation();
+    }
+    onMousedown(event) {
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: StopPropagationDirective, isStandalone: true, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: StopPropagationDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[stop-propagation]" }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }], onMousedown: [{
+                type: HostListener,
+                args: ["mousedown", ["$event"]]
+            }] } });
+
+class SpaceCasePipe {
+    transform(value) {
+        return spaceCase(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SpaceCasePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'spaceCase' }]
+        }] });
+/**
+ * Adds a space before uppercase letters that either
+ * 1. follows a lowercase letter or digit
+ * 2. or precedes a lowercase letter and follows an alpha-numeric character
+ *
+ * Uppercases the first digit
+ *
+ * Turns underscores into spaces
+ */
+function spaceCase(value) {
+    const phrase = value?.replace(/([a-z0-9])([A-Z])|([a-zA-Z0-9])([A-Z])(?=[a-z])|_/g, '$1$3 $2$4');
+    // uppercase the first character of every word
+    return phrase?.replace(/(^| )(\w)/g, x => x.toUpperCase());
+}
+
+class InListFilterComponent {
+    constructor(ref, tableState) {
+        this.ref = ref;
+        this.tableState = tableState;
+        this.value = [];
+        this.FieldType = FieldType;
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.selectedKeys = [];
+    }
+    writeValue(obj) {
+        this.value = obj;
+        if (this.value) {
+            this.selectedKeys = this.value.map(f => f);
+        }
+        this.ref.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
     ngOnInit() {
-        this.additional = this.metaData?.additional ?? this.config.arrayInfo ?? { limit: 3, arrayStyle: ArrayStyle.NewLine };
-        this.array = (this.array ?? []).slice(0, this.additional.limit);
+        this.keyValues$ = this.tableState.getMetaData$(this.key).pipe(tap(metaData => this.metaData = metaData), map(metaData => {
+            if (metaData.additional?.filterOptions?.filterableValues) {
+                return metaData.additional.filterOptions.filterableValues.reduce((prev, cur) => { prev[cur] = cur; return prev; }, {});
+            }
+            else {
+                if (metaData.fieldType === FieldType.Enum) {
+                    return metaData.additional.enumMap;
+                }
+            }
+            return {};
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ArrayColumnComponent, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: ArrayColumnComponent, isStandalone: false, 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">
-      <ng-container *ngSwitchCase="ArrayStyle.CommaDelimited">
-        <span *ngFor="let val of array; last as isLast">{{val}}<ng-container *ngIf="!isLast">, </ng-container> </span>
-      </ng-container>
-      <ng-container *ngSwitchCase="ArrayStyle.NewLine">
-        <span *ngFor="let val of array; last as isLast">{{val}}<ng-container *ngIf="!isLast"><br /></ng-container> </span>
-      </ng-container>
-    </ng-container>
-  </ng-template>
-  `, 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 }); }
+    selectFilterChanged($event, val) {
+        if ($event.checked) {
+            this.selectedKeys.push(val);
+        }
+        else {
+            this.selectedKeys = this.selectedKeys.filter(item => item !== val);
+        }
+        this.value = this.selectedKeys;
+        this.onChange(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: InListFilterComponent, isStandalone: true, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: InListFilterComponent,
+                multi: true
+            }], ngImport: i0, template: `
+  @for (item of keyValues$ | async| keyvalue; track item) {
+    <div >
+      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      </mat-checkbox>
+    </div>
+  }
+  `, isInline: true, dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ArrayColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'tb-array-column',
+                    selector: 'tb-in-list-filter , [tb-in-list-filter]',
                     template: `
-  <ng-container  *ngIf="array.length === 0; else hasVals">-</ng-container>
-  <ng-template #hasVals>
-    <ng-container [ngSwitch]="additional.arrayStyle">
-      <ng-container *ngSwitchCase="ArrayStyle.CommaDelimited">
-        <span *ngFor="let val of array; last as isLast">{{val}}<ng-container *ngIf="!isLast">, </ng-container> </span>
-      </ng-container>
-      <ng-container *ngSwitchCase="ArrayStyle.NewLine">
-        <span *ngFor="let val of array; last as isLast">{{val}}<ng-container *ngIf="!isLast"><br /></ng-container> </span>
-      </ng-container>
-    </ng-container>
-  </ng-template>
+  @for (item of keyValues$ | async| keyvalue; track item) {
+    <div >
+      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      </mat-checkbox>
+    </div>
+  }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: false
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: InListFilterComponent,
+                            multi: true
+                        }],
+                    imports: [MatCheckbox, StopPropagationDirective, AsyncPipe, KeyValuePipe, SpaceCasePipe]
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TableBuilderConfigToken]
-                }] }], propDecorators: { array: [{
-                type: Input
-            }], metaData: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TableStore }], propDecorators: { key: [{
                 type: Input
             }] } });
 
-class LinkColumnComponent {
-    constructor(store) {
-        this.store = store;
-        this.transform = (a) => a;
-        this.link = (metaData) => this.store.getLinkMap(metaData);
+class HeaderMenuComponent {
+    constructor(tableState) {
+        this.tableState = tableState;
+        this.FieldType = FieldType;
+        this.FilterType = FilterType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: LinkColumnComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: LinkColumnComponent, isStandalone: false, selector: "tb-link-column", inputs: { metaData: "metaData", element: "element", transform: "transform" }, 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"
-    >
-      {{transform | func : element}}
-    </a>
-    <ng-template #hrefLink>
-      <a target="{{$any(linkInfo).target}}"
-        href="{{($any(linkInfo).link | func : element)}}">
-        {{transform | func : element}}
-      </a>
-    </ng-template>
-  </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
+    hideField(key) {
+        this.tableState.hideColumn(key);
+    }
+    ngOnInit() {
+        this.resetFilterType();
+    }
+    resetFilterType() {
+        if (this.metaData.additional?.filterOptions?.filterableValues) {
+            this.myFilterType = FilterType.In;
+            return;
+        }
+        switch (this.metaData.fieldType) {
+            case FieldType.String:
+            case FieldType.Link:
+            case FieldType.PhoneNumber:
+            case FieldType.Array:
+            case FieldType.Unknown:
+                this.myFilterType = FilterType.StringContains;
+                break;
+            case FieldType.Currency:
+            case FieldType.Number:
+                this.myFilterType = FilterType.NumberEquals;
+                break;
+            case FieldType.Boolean:
+                this.myFilterType = FilterType.BooleanEquals;
+                break;
+            case FieldType.Date:
+            case FieldType.DateTime:
+                this.myFilterType = FilterType.DateIsOn;
+                break;
+            case FieldType.Enum:
+                this.myFilterType = FilterType.In;
+                break;
+        }
+    }
+    setStringFilterType() {
+        this.myFilterType = this.myFilterType === FilterType.StringContains ? FilterType.StringDoesNotContain : FilterType.StringContains;
+    }
+    setFilterType(filterType) {
+        if (filterType === this.myFilterType) {
+            this.resetFilterType();
+        }
+        else {
+            this.myFilterType = filterType;
+        }
+    }
+    onEnter(filter) {
+        if (filter.filterValue != undefined && filter.filterType) {
+            this.tableState.addFilter(filter);
+            this.trigger.closeMenu();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: HeaderMenuComponent, isStandalone: true, 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 class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <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)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\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 auto-width\">\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()\" class=\"header-filter-icon-button\">\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>\r\n           \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 class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\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>\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 || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</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 class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </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}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: LinkColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
-            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"
-    >
-      {{transform | func : element}}
-    </a>
-    <ng-template #hrefLink>
-      <a target="{{$any(linkInfo).target}}"
-        href="{{($any(linkInfo).link | func : element)}}">
-        {{transform | func : element}}
-      </a>
-    </ng-template>
-  </ng-container>
-  `,
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: TableStore }], propDecorators: { metaData: [{
+            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem, FormsModule, NgSwitch, NgIf, InListFilterComponent, NgSwitchCase, MatFormField, StopPropagationDirective, MatPrefix, MatLabel, MatInput, MatSuffix, MatTooltip, NgClass, MatRadioGroup, MatRadioButton, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatButton], template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <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)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\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 auto-width\">\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()\" class=\"header-filter-icon-button\">\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>\r\n           \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 class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\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>\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 || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</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 class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </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}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+        }], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
                 type: Input
-            }], element: [{
+            }], metaData: [{
                 type: Input
-            }], transform: [{
+            }], trigger: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }] } });
+
+class ColumnTotalPipe {
+    transform(data, metaData) {
+        const dataToCalculate = data.filter(d => !d.isGroupHeader && !d.isGroupFooter);
+        switch (metaData.additional.footer.type) {
+            case 'sum':
+                return sumBy(dataToCalculate, metaData.key);
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnTotalPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'columnTotal' }]
+        }] });
+
+class PhoneNumberPipe {
+    transform(phoneNum) {
+        if (phoneNum) {
+            phoneNum = phoneNum.replace(/\D/g, '');
+            if (phoneNum[0] === '1') {
+                phoneNum = phoneNum.substring(1);
+            }
+            return '(' + phoneNum.slice(0, 3) + ') ' + phoneNum.slice(3, 6) + '-' + phoneNum.slice(6, 10) + ' ' + phoneNum.slice(10);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PhoneNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'phone' }]
+        }] });
+
+class PreventEnterDirective {
+    onKeyDown() {
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreventEnterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'preventEnter' }]
+        }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown.enter']
+            }] } });
+
+class AutoFocusDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.autoFocus = true;
+    }
+    ngAfterViewInit() {
+        if (this.autoFocus) {
+            setTimeout(() => {
+                this.elementRef.nativeElement.focus();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[autoFocus]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { autoFocus: [{
                 type: Input
             }] } });
 
-class InitializationComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: InitializationComponent, isStandalone: false, 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' let-transform='transform'>\r\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\r\n  <span>\r\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #array let-element='element' let-metaData='metaData'>\r\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\r\n</ng-template>\r\n\r\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <span>{{ transform | func : element }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <mat-icon>{{ transform | func : element }}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: i8$1.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", "transform"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
+class ClickSubjectDirective extends Subject {
+    constructor() {
+        super();
+    }
+    set clickSubject(val) {
+        this._val = val;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ClickSubjectDirective, isStandalone: true, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InitializationComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, template: "<ng-template #link  let-element='element' let-metaData='metaData' let-transform='transform'>\r\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\r\n  <span>\r\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #array let-element='element' let-metaData='metaData'>\r\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\r\n</ng-template>\r\n\r\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <span>{{ transform | func : element }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <mat-icon>{{ transform | func : element }}</mat-icon>\r\n</ng-template>\r\n" }]
-        }], propDecorators: { linkTemplate: [{
-                type: ViewChild,
-                args: ['link', { static: true }]
-            }], imageUrlTemplate: [{
-                type: ViewChild,
-                args: ['imageUrl', { static: true }]
-            }], currencyTemplate: [{
-                type: ViewChild,
-                args: ['currency', { static: true }]
-            }], arrayTemplate: [{
-                type: ViewChild,
-                args: ['array', { static: true }]
-            }], defaultTemplate: [{
-                type: ViewChild,
-                args: ['default', { static: true }]
-            }], defaultWithIcon: [{
-                type: ViewChild,
-                args: ['defaultWithIcon', { static: true }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickSubjectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickSubject]',
+                    exportAs: 'clickSubject',
+                    host: {
+                        '(click)': 'next(this._val)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { clickSubject: [{
+                type: Input,
+                args: ['clickSubject']
             }] } });
 
-class TableTemplateService {
-    initTemplates() {
-        this.templates = {};
-        this.templates[FieldType.Array] = this.instance.arrayTemplate;
-        this.templates[FieldType.Boolean] = this.instance.defaultWithIcon;
-        this.templates[FieldType.Currency] = this.instance.defaultTemplate;
-        this.templates[FieldType.Date] = this.instance.defaultTemplate;
-        this.templates[FieldType.DateTime] = this.instance.defaultTemplate;
-        this.templates[FieldType.Expression] = this.instance.defaultTemplate;
-        this.templates[FieldType.ImageUrl] = this.instance.imageUrlTemplate;
-        this.templates[FieldType.Link] = this.instance.linkTemplate;
-        this.templates[FieldType.Number] = this.instance.defaultTemplate;
-        this.templates[FieldType.PhoneNumber] = this.instance.defaultTemplate;
-        this.templates[FieldType.String] = this.instance.defaultTemplate;
-        this.templates[FieldType.Unknown] = this.instance.defaultTemplate;
-        this.templates[FieldType.Enum] = this.instance.defaultTemplate;
+class ClickEmitterDirective extends Subject {
+    constructor() {
+        super();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ClickEmitterDirective, isStandalone: true, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ClickEmitterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickEmitter]',
+                    exportAs: 'clickEmitter',
+                    host: {
+                        '(click)': 'next(true)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class DialogService {
+    constructor() {
+        this.allOpenOpDialogs = [];
     }
-    getTemplate(metaData) {
-        let tmp = this.templates[metaData.fieldType];
-        if (metaData.useIcon) {
-            if (tmp === this.instance.defaultTemplate) {
-                tmp = this.instance.defaultWithIcon;
-            }
-        }
-        return tmp;
+    addDialogRef(ref) {
+        this.allOpenOpDialogs.push(ref);
     }
-    constructor(resolver, i) {
-        const factory = resolver.resolveComponentFactory(InitializationComponent);
-        const c = factory.create(i);
-        this.instance = c.instance;
-        this.initTemplates();
+    removeDialogRef(ref) {
+        this.allOpenOpDialogs = this.allOpenOpDialogs.filter(rf => ref.id !== rf.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableTemplateService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
+    closeAllOpDialogs() {
+        this.allOpenOpDialogs.forEach(ref => ref.close());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableTemplateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }] });
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
-class InListFilterComponent {
-    constructor(ref, tableState) {
-        this.ref = ref;
-        this.tableState = tableState;
-        this.value = [];
-        this.FieldType = FieldType;
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-        this.selectedKeys = [];
-    }
-    writeValue(obj) {
-        this.value = obj;
-        if (this.value) {
-            this.selectedKeys = this.value.map(f => f);
+class DialogWrapper {
+    set template(tmpl) {
+        if (this.viewEmbeded) {
+            this.vcr.clear();
         }
-        this.ref.markForCheck();
+        this.viewEmbeded = true;
+        this.vcr.createEmbeddedView(tmpl, this.viewContext);
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    set close(closeMethod) {
+        this.viewContext.close = closeMethod;
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    set data(value) {
+        this.viewContext.$implicit = value;
+        this.viewContext.opDialog = value;
     }
-    ngOnInit() {
-        this.keyValues$ = this.tableState.getMetaData$(this.key).pipe(tap(metaData => this.metaData = metaData), map(metaData => {
-            if (metaData.additional?.filterOptions?.filterableValues) {
-                return metaData.additional.filterOptions.filterableValues.reduce((prev, cur) => { prev[cur] = cur; return prev; }, {});
+    constructor(vcr) {
+        this.vcr = vcr;
+        this.viewEmbeded = false;
+        this.viewContext = {
+            close: () => { },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogWrapper, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DialogWrapper, isStandalone: false, selector: "app-dialog-content", ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogWrapper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-dialog-content',
+                    template: ``,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+const defaultDialogConfig = {
+    maxHeight: '95vh',
+};
+class DialogDirective {
+    set opDialogConfig(config) {
+        this._dialogConfig = { ...defaultDialogConfig, ...config };
+    }
+    get opDialogConfig() {
+        return this._dialogConfig;
+    }
+    set state(open_close) {
+        this._data.next(open_close);
+    }
+    constructor(templateRef, dialog, service) {
+        this.templateRef = templateRef;
+        this.dialog = dialog;
+        this.service = service;
+        this.opDialogClosed = new EventEmitter();
+        this._dialogConfig = defaultDialogConfig;
+        this.add_opDialog_Class = true;
+        this._data = new Subject();
+        this.subscription = this._data.pipe(switchAll()).subscribe(d => {
+            if (d) {
+                this.opDialogConfig.data = d;
+                this.setDialogState(true);
             }
             else {
-                if (metaData.fieldType === FieldType.Enum) {
-                    return metaData.additional.enumMap;
-                }
+                this.setDialogState(false);
             }
-            return {};
-        }));
+        });
     }
-    selectFilterChanged($event, val) {
-        if ($event.checked) {
-            this.selectedKeys.push(val);
+    close() {
+        this.dialogRef?.close();
+    }
+    initDialog() {
+        if (this.nativeElement) {
+            const rect = this.nativeElement.getBoundingClientRect();
+            const position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
+            this.opDialogConfig = { ...this.opDialogConfig, position };
         }
-        else {
-            this.selectedKeys = this.selectedKeys.filter(item => item !== val);
+        if (this.add_opDialog_Class) {
+            this.opDialogConfig.panelClass = [...(Array.isArray(this.opDialogConfig.panelClass) ? this.opDialogConfig.panelClass : this.opDialogConfig.panelClass ? [this.opDialogConfig.panelClass] : []), 'opDialog'];
         }
-        this.value = this.selectedKeys;
-        this.onChange(this.value);
+        this.dialogRef = this.dialog.open(DialogWrapper, this.opDialogConfig);
+        this.componentWrapper = this.dialogRef.componentInstance;
+        this.componentWrapper.close = () => this.dialogRef?.close();
+        this.componentWrapper.data = this.opDialogConfig.data;
+        this.componentWrapper.template = this.templateRef;
+        if (!this.opDialogConfig.disableClose) {
+            this.service.addDialogRef(this.dialogRef);
+        }
+        const sub = this.dialogRef.afterClosed().subscribe(() => {
+            this.opDialogClosed.emit(true);
+            this.service.removeDialogRef(this.dialogRef);
+            this.dialogRef = undefined;
+            sub.unsubscribe();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: InListFilterComponent, isStandalone: false, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: InListFilterComponent,
-                multi: true
-            }], ngImport: i0, template: `
-  <div *ngFor="let item of keyValues$ | async| keyvalue" >
-    <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
-      {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
-    </mat-checkbox>
-  </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    setDialogState(open) {
+        if (open) {
+            if (!this.dialogRef) {
+                this.initDialog();
+            }
+            else {
+                this.componentWrapper.data = this.opDialogConfig.data;
+            }
+        }
+        else if (!open && this.dialogRef) {
+            this.dialogRef.close();
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1$1.MatDialog }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { add_opDialog_Class: "add_opDialog_Class", opDialogConfig: "opDialogConfig", state: ["opDialog", "state"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InListFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tb-in-list-filter , [tb-in-list-filter]',
-                    template: `
-  <div *ngFor="let item of keyValues$ | async| keyvalue" >
-    <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
-      {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
-    </mat-checkbox>
-  </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: InListFilterComponent,
-                            multi: true
-                        }],
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TableStore }], propDecorators: { key: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DialogDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[opDialog]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i1$1.MatDialog }, { type: DialogService }], propDecorators: { opDialogClosed: [{
+                type: Output
+            }], add_opDialog_Class: [{
                 type: Input
+            }], opDialogConfig: [{
+                type: Input
+            }], state: [{
+                type: Input,
+                args: ['opDialog']
+            }], nativeElement: [{
+                type: Input,
+                args: ['opDialogOrigin']
             }] } });
 
-class HeaderMenuComponent {
-    constructor(tableState) {
-        this.tableState = tableState;
-        this.FieldType = FieldType;
-        this.FilterType = FilterType;
-    }
-    hideField(key) {
-        this.tableState.hideColumn(key);
-    }
-    ngOnInit() {
-        this.resetFilterType();
+class MatSlideToggleGroupDirective {
+    constructor() {
+        this.allowMultiple = false;
+        this._ready = new ReplaySubject(1);
     }
-    resetFilterType() {
-        if (this.metaData.additional?.filterOptions?.filterableValues) {
-            this.myFilterType = FilterType.In;
-            return;
-        }
-        switch (this.metaData.fieldType) {
-            case FieldType.String:
-            case FieldType.Link:
-            case FieldType.PhoneNumber:
-            case FieldType.Array:
-            case FieldType.Unknown:
-                this.myFilterType = FilterType.StringContains;
-                break;
-            case FieldType.Currency:
-            case FieldType.Number:
-                this.myFilterType = FilterType.NumberEquals;
-                break;
-            case FieldType.Boolean:
-                this.myFilterType = FilterType.BooleanEquals;
-                break;
-            case FieldType.Date:
-            case FieldType.DateTime:
-                this.myFilterType = FilterType.DateIsOn;
-                break;
-            case FieldType.Enum:
-                this.myFilterType = FilterType.In;
-                break;
-        }
+    set toggles(val) {
+        this._toggles = val;
+        this._ready.next(true);
     }
-    setStringFilterType() {
-        this.myFilterType = this.myFilterType === FilterType.StringContains ? FilterType.StringDoesNotContain : FilterType.StringContains;
+    get valueEmitter() {
+        return this._ready.pipe(switchMap$1(_ => this.getObs()));
     }
-    setFilterType(filterType) {
-        if (filterType === this.myFilterType) {
-            this.resetFilterType();
-        }
-        else {
-            this.myFilterType = filterType;
-        }
+    getInitValue() {
+        const startValue = this._toggles.reduce((prev, cur) => {
+            if (!cur.name) {
+                throw new Error('toggle must have the name attribute set');
+            }
+            prev[cur.name] = cur.checked;
+            return prev;
+        }, {});
+        return startValue;
     }
-    onEnter(filter) {
-        if (filter.filterValue != undefined && filter.filterType) {
-            this.tableState.addFilter(filter);
-            this.trigger.closeMenu();
-        }
+    getObs() {
+        var toggleChanges = merge(...this._toggles.map(toggle => toggle.change));
+        const startValue = this.getInitValue();
+        return toggleChanges.pipe(scan((prev, cur) => {
+            const toggleName = cur.source.name;
+            const newVal = { ...prev, [toggleName]: cur.checked };
+            if (cur.checked && !this.allowMultiple) {
+                Object.keys(prev)
+                    .filter(key => key !== toggleName && prev[key])
+                    .forEach(key => {
+                    newVal[key] = false;
+                    this._toggles.find(toggle => toggle.name === key).toggle();
+                });
+            }
+            return newVal;
+        }, startValue), startWith$1(startValue));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: HeaderMenuComponent, isStandalone: false, 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 class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <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)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\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 auto-width\">\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()\" class=\"header-filter-icon-button\">\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>\r\n           \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 class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\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>\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 || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</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 class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </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}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatSlideToggleGroupDirective, isStandalone: true, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <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)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\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 auto-width\">\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()\" class=\"header-filter-icon-button\">\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>\r\n           \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 class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\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>\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 || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</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 class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </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}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
-        }], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
-                type: Input
-            }], metaData: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[opMatSlideToggleGroup]' }]
+        }], propDecorators: { allowMultiple: [{
                 type: Input
-            }], trigger: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
+            }], toggles: [{
+                type: ContentChildren,
+                args: [MatSlideToggle]
+            }], valueEmitter: [{
+                type: Output
             }] } });
 
-class Subjectifier extends Observable {
-    constructor(_source) {
-        super((obs) => {
-            const s = merge(_source, this._subj).subscribe(obs);
-            return s;
-        });
-        this._source = _source;
-        this._subj = new Subject();
-        this.merged = merge(this._source, this._subj);
-        this.next = this._subj.next.bind(this._subj);
-        this.newSubj = (...operations) => new Subjectifier(this.merged.pipe(...operations));
+class TrimWhitespaceDirective {
+    constructor(elem) {
+        this.elem = elem;
+    }
+    onBlur() {
+        const inputString = this.elem.nativeElement.value;
+        if (inputString) {
+            const newValue = inputString.trim().replace(/\t/g, '');
+            if (inputString !== newValue) {
+                this.elem.nativeElement.value = newValue;
+                this.elem.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TrimWhitespaceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'input[trimWhitespace]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
 
-class ResizeColumnDirective {
-    constructor(renderer, el, store) {
-        this.renderer = renderer;
-        this.el = el;
-        this.store = store;
-        this.getElementWidth = (elem) => (+(globalThis.getComputedStyle(elem).getPropertyValue('width').replace('px', '')));
-    }
-    ngOnInit() {
-        if (this.resizable) {
-            const { table, columnHead } = this.getTableAndColumnHeadHtmlElements();
-            const resizer = this.createResizerSpanInColumnHead(columnHead);
-            const aggregateMouseEventsMapped$ = this.mouseDownThroghMouseUpEventMapper(resizer, columnHead, table);
-            const resizeColsData$ = aggregateMouseEventsMapped$.pipe(filter(({ mouseMove }) => !!mouseMove.buttons), map(({ mouseDownData, mouseMove }) => {
-                const { newTableWidth, newColumnWidth } = this.calculateNewWidths(mouseDownData, mouseMove);
-                return ({
-                    key: this.key,
-                    widthInPixel: newColumnWidth,
-                    tableSize: newTableWidth,
-                });
-            }), defaultShareReplay());
-            this.store.setUserDefinedWidth(resizeColsData$.pipe(map(resizeData => ([{ key: this.key, widthInPixel: resizeData.widthInPixel }]))));
-            this.store.setTableWidth(resizeColsData$.pipe(map(resizeData => resizeData.tableSize)));
+class FunctionPipe {
+    transform(func, ...args) {
+        if (typeof func === 'string') {
+            const [instance, ...tail] = args;
+            const method = instance[func].bind(instance);
+            return method(...tail);
         }
+        return func(...args);
     }
-    createResizerSpanInColumnHead(columnHead) {
-        const resizer = this.renderer.createElement("span");
-        this.renderer.addClass(resizer, "resize-holder");
-        resizer.style['cursor'] = 'col-resize';
-        resizer.style['user-select'] = 'none';
-        resizer.style['width'] = '10px';
-        resizer.style['height'] = '100%';
-        resizer.style['position'] = 'absolute';
-        resizer.style['right'] = '0';
-        resizer.style['top'] = '0';
-        resizer.style['z-index'] = '1';
-        this.renderer.appendChild(columnHead, resizer);
-        return resizer;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FunctionPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'func' }]
+        }] });
+
+class UtilitiesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
+            PhoneNumberPipe,
+            FunctionPipe,
+            StopPropagationDirective,
+            StylerDirective,
+            PreventEnterDirective,
+            AutoFocusDirective,
+            TrimWhitespaceDirective,
+            ClickSubjectDirective,
+            ClickEmitterDirective,
+            DialogDirective,
+            MatSlideToggleGroupDirective,
+            ConditionalClassesDirective], exports: [StopPropagationDirective,
+            PreventEnterDirective,
+            SpaceCasePipe,
+            PhoneNumberPipe,
+            FunctionPipe,
+            StopPropagationDirective,
+            TrimWhitespaceDirective,
+            StylerDirective,
+            PreventEnterDirective,
+            AutoFocusDirective,
+            ClickSubjectDirective,
+            ClickEmitterDirective,
+            DialogDirective,
+            MatSlideToggleGroupDirective,
+            ConditionalClassesDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, providers: [
+            DialogService
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: UtilitiesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SpaceCasePipe,
+                        PhoneNumberPipe,
+                        FunctionPipe,
+                        StopPropagationDirective,
+                        StylerDirective,
+                        PreventEnterDirective,
+                        AutoFocusDirective,
+                        TrimWhitespaceDirective,
+                        ClickSubjectDirective,
+                        ClickEmitterDirective,
+                        DialogDirective,
+                        MatSlideToggleGroupDirective,
+                        ConditionalClassesDirective
+                    ],
+                    exports: [
+                        StopPropagationDirective,
+                        PreventEnterDirective,
+                        SpaceCasePipe,
+                        PhoneNumberPipe,
+                        FunctionPipe,
+                        StopPropagationDirective,
+                        TrimWhitespaceDirective,
+                        StylerDirective,
+                        PreventEnterDirective,
+                        AutoFocusDirective,
+                        ClickSubjectDirective,
+                        ClickEmitterDirective,
+                        DialogDirective,
+                        MatSlideToggleGroupDirective,
+                        ConditionalClassesDirective,
+                    ],
+                    providers: [
+                        DialogService
+                    ]
+                }]
+        }] });
+
+function isPipe(o) {
+    return typeof (o.transform) === 'function';
+}
+class TransformCreator {
+    constructor(datePipe, currencyPipe, phonePipe, casePipe, config) {
+        this.datePipe = datePipe;
+        this.currencyPipe = currencyPipe;
+        this.phonePipe = phonePipe;
+        this.casePipe = casePipe;
+        this.config = config;
+    }
+    createTransformer(metaData) {
+        const defaultFunc = (value) => get(value, metaData.key);
+        if (metaData.transform) {
+            if (isPipe(metaData.transform)) {
+                return (value) => metaData.transform.transform(defaultFunc(value));
+            }
+            return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value), value);
+        }
+        if (this.config.transformers && this.config.transformers[metaData.fieldType]) {
+            var tranformer = this.config.transformers[metaData.fieldType];
+            return (value) => tranformer(defaultFunc(value));
+        }
+        const defaultDateFormat = this.config.defaultSettings?.dateFormat ?? 'shortDate';
+        const defaultDateTimeFormat = this.config.defaultSettings?.dateTimeFormat ?? 'short';
+        switch (metaData.fieldType) {
+            case FieldType.Date:
+                const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
+                return (value) => this.datePipe.transform(defaultFunc(value), dateFormat);
+            case FieldType.DateTime:
+                const dateTimeFormat = metaData.additional?.dateTimeOptions?.format ?? defaultDateTimeFormat;
+                return (value) => this.datePipe.transform(defaultFunc(value), dateTimeFormat);
+            case FieldType.Currency:
+                return (value) => this.currencyPipe.transform(defaultFunc(value));
+            case FieldType.PhoneNumber:
+                return (value) => this.phonePipe.transform(defaultFunc(value));
+            case FieldType.Enum:
+                return (value) => this.casePipe.transform(metaData.additional?.enumMap[defaultFunc(value)]);
+            case FieldType.Boolean:
+                let forTrue = 'check';
+                let forFalse = '';
+                if (metaData.additional?.boolean?.forTrue) {
+                    forTrue = metaData?.additional.boolean.forTrue.icon;
+                }
+                if (metaData.additional?.boolean?.showForFalse === true) {
+                    forFalse = 'clear';
+                }
+                else if (metaData.additional?.boolean?.showForFalse?.icon) {
+                    forFalse = metaData.additional?.boolean?.showForFalse?.icon;
+                }
+                return (value) => defaultFunc(value) ? forTrue : forFalse;
+        }
+        return defaultFunc;
     }
-    getTableAndColumnHeadHtmlElements() {
-        const columnHead = this.el.nativeElement;
-        const row = this.renderer.parentNode(columnHead);
-        const table = this.renderer.parentNode(row);
-        return ({ table, columnHead });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TransformCreator, deps: [{ token: i1$2.DatePipe }, { token: i1$2.CurrencyPipe }, { token: PhoneNumberPipe }, { token: SpaceCasePipe }, { token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TransformCreator, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TransformCreator, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$2.DatePipe }, { type: i1$2.CurrencyPipe }, { type: PhoneNumberPipe }, { type: SpaceCasePipe }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TableBuilderConfigToken]
+                }] }] });
+
+class LinkColumnComponent {
+    constructor(store) {
+        this.store = store;
+        this.transform = (a) => a;
+        this.link = (metaData) => this.store.getLinkMap(metaData);
     }
-    mouseDownThroghMouseUpEventMapper(resizer, columnHead, table) {
-        return this.resizerMouseDownEventMapper(resizer, columnHead, table)
-            .pipe(switchMap(mouseDownData => fromEvent(table, "mousemove").pipe(map(mouseMove => ({ mouseDownData, mouseMove })), takeUntil(fromEvent(document, "mouseup")))));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: LinkColumnComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { metaData: "metaData", element: "element", transform: "transform" }, ngImport: i0, template: `
+  <ng-container *ngrxLet="(link | func : (metaData)) as linkInfo">
+    @if ($any(linkInfo).useRouterLink) {
+      <a 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"
+        >
+        {{transform | func : element}}
+      </a>
+    } @else {
+      <a target="{{$any(linkInfo).target}}"
+        href="{{($any(linkInfo).link | func : element)}}">
+        {{transform | func : element}}
+      </a>
+    }
+  </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: LinkColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "tb-link-column",
+                    template: `
+  <ng-container *ngrxLet="(link | func : (metaData)) as linkInfo">
+    @if ($any(linkInfo).useRouterLink) {
+      <a 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"
+        >
+        {{transform | func : element}}
+      </a>
+    } @else {
+      <a target="{{$any(linkInfo).target}}"
+        href="{{($any(linkInfo).link | func : element)}}">
+        {{transform | func : element}}
+      </a>
+    }
+  </ng-container>
+  `,
+                    imports: [LetDirective, RouterLink, FunctionPipe]
+                }]
+        }], ctorParameters: () => [{ type: TableStore }], propDecorators: { metaData: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], transform: [{
+                type: Input
+            }] } });
+
+class ArrayColumnComponent {
+    constructor(config) {
+        this.config = config;
+        this.ArrayStyle = ArrayStyle;
     }
-    resizerMouseDownEventMapper(resizer, columnHead, table) {
-        return fromEvent(resizer, "mousedown").pipe(map(event => ({
-            startPageX: event.pageX,
-            startColumnWidth: this.getElementWidth(columnHead),
-            startTableWidth: this.getElementWidth(table),
-        })));
+    ngOnInit() {
+        this.additional = this.metaData?.additional ?? this.config.arrayInfo ?? { limit: 3, arrayStyle: ArrayStyle.NewLine };
+        this.array = (this.array ?? []).slice(0, this.additional.limit);
     }
-    calculateNewWidths(mouseDownData, mouseMove) {
-        const change = (mouseMove.pageX - mouseDownData.startPageX);
-        let newColumnWidth = mouseDownData.startColumnWidth + change;
-        if (newColumnWidth < 1) {
-            newColumnWidth = 1;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ArrayColumnComponent, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ArrayColumnComponent, isStandalone: true, selector: "tb-array-column", inputs: { array: "array", metaData: "metaData" }, ngImport: i0, template: `
+  @if (array.length === 0) {
+    -
+  } @else {
+    @switch (additional.arrayStyle) {
+      @case (ArrayStyle.CommaDelimited) {
+        @for (val of array; track val; let isLast = $last) {
+          <span>{{val}}@if (!isLast) {
+            ,
+          } </span>
         }
-        const columnChange = newColumnWidth - mouseDownData.startColumnWidth;
-        const newTableWidth = (mouseDownData.startTableWidth + columnChange);
-        return ({ newTableWidth, newColumnWidth });
+      }
+      @case (ArrayStyle.NewLine) {
+        @for (val of array; track val; let isLast = $last) {
+          <span>{{val}}@if (!isLast) {
+            <br />
+          } </span>
+        }
+      }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ResizeColumnDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: ResizeColumnDirective, isStandalone: false, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable"], key: "key" }, ngImport: i0 }); }
+  }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ResizeColumnDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ArrayColumnComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: "[resizeColumn]",
-                    standalone: false
+                    selector: 'tb-array-column',
+                    template: `
+  @if (array.length === 0) {
+    -
+  } @else {
+    @switch (additional.arrayStyle) {
+      @case (ArrayStyle.CommaDelimited) {
+        @for (val of array; track val; let isLast = $last) {
+          <span>{{val}}@if (!isLast) {
+            ,
+          } </span>
+        }
+      }
+      @case (ArrayStyle.NewLine) {
+        @for (val of array; track val; let isLast = $last) {
+          <span>{{val}}@if (!isLast) {
+            <br />
+          } </span>
+        }
+      }
+    }
+  }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: []
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TableStore }], propDecorators: { resizable: [{
-                type: Input,
-                args: ["resizeColumn"]
-            }], key: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TableBuilderConfigToken]
+                }] }], propDecorators: { array: [{
+                type: Input
+            }], metaData: [{
                 type: Input
             }] } });
 
-class ColumnTotalPipe {
-    transform(data, metaData) {
-        const dataToCalculate = data.filter(d => !d.isGroupHeader && !d.isGroupFooter);
-        switch (metaData.additional.footer.type) {
-            case 'sum':
-                return sumBy(dataToCalculate, metaData.key);
+class InitializationComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: InitializationComponent, isStandalone: true, 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' let-transform='transform'>\r\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\r\n  <span>\r\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #array let-element='element' let-metaData='metaData'>\r\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\r\n</ng-template>\r\n\r\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <span>{{ transform | func : element }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <mat-icon>{{ transform | func : element }}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["metaData", "element", "transform"] }, { kind: "component", type: ArrayColumnComponent, selector: "tb-array-column", inputs: ["array", "metaData"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InitializationComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [LinkColumnComponent, ArrayColumnComponent, MatIcon, FunctionPipe], template: "<ng-template #link  let-element='element' let-metaData='metaData' let-transform='transform'>\r\n  <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-element='element' let-metaData='metaData'>\r\n  <span>\r\n    <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #array let-element='element' let-metaData='metaData'>\r\n  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\r\n</ng-template>\r\n\r\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <span>{{ transform | func : element }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\r\n  <mat-icon>{{ transform | func : element }}</mat-icon>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { linkTemplate: [{
+                type: ViewChild,
+                args: ['link', { static: true }]
+            }], imageUrlTemplate: [{
+                type: ViewChild,
+                args: ['imageUrl', { static: true }]
+            }], currencyTemplate: [{
+                type: ViewChild,
+                args: ['currency', { static: true }]
+            }], arrayTemplate: [{
+                type: ViewChild,
+                args: ['array', { static: true }]
+            }], defaultTemplate: [{
+                type: ViewChild,
+                args: ['default', { static: true }]
+            }], defaultWithIcon: [{
+                type: ViewChild,
+                args: ['defaultWithIcon', { static: true }]
+            }] } });
+
+class TableTemplateService {
+    initTemplates() {
+        this.templates = {};
+        this.templates[FieldType.Array] = this.instance.arrayTemplate;
+        this.templates[FieldType.Boolean] = this.instance.defaultWithIcon;
+        this.templates[FieldType.Currency] = this.instance.defaultTemplate;
+        this.templates[FieldType.Date] = this.instance.defaultTemplate;
+        this.templates[FieldType.DateTime] = this.instance.defaultTemplate;
+        this.templates[FieldType.Expression] = this.instance.defaultTemplate;
+        this.templates[FieldType.ImageUrl] = this.instance.imageUrlTemplate;
+        this.templates[FieldType.Link] = this.instance.linkTemplate;
+        this.templates[FieldType.Number] = this.instance.defaultTemplate;
+        this.templates[FieldType.PhoneNumber] = this.instance.defaultTemplate;
+        this.templates[FieldType.String] = this.instance.defaultTemplate;
+        this.templates[FieldType.Unknown] = this.instance.defaultTemplate;
+        this.templates[FieldType.Enum] = this.instance.defaultTemplate;
+    }
+    getTemplate(metaData) {
+        let tmp = this.templates[metaData.fieldType];
+        if (metaData.useIcon) {
+            if (tmp === this.instance.defaultTemplate) {
+                tmp = this.instance.defaultWithIcon;
+            }
         }
-        return null;
+        return tmp;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: ColumnTotalPipe, isStandalone: false, name: "columnTotal" }); }
+    constructor(resolver, i) {
+        const factory = resolver.resolveComponentFactory(InitializationComponent);
+        const c = factory.create(i);
+        this.instance = c.instance;
+        this.initTemplates();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableTemplateService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnTotalPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'columnTotal',
-                    standalone: false
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableTemplateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }] });
 
 class ColumnBuilderComponent {
     constructor(transformCreator, table, state, templateService, injector) {
@@ -2440,8 +2364,8 @@ class ColumnBuilderComponent {
             this.metaData.click(element, key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$1.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: ColumnBuilderComponent, isStandalone: false, 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\" >\r\n\r\n  <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\">\r\n        </ng-container>\r\n    </mat-cell>\r\n\r\n  </ng-template>\r\n\r\n  <ng-template matHeaderCellDef #myHeader>\r\n\r\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\r\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #header>\r\n\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\r\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n          </div>\r\n          <ng-template #headerWithoutMenu >\r\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          </ng-template>\r\n          <tb-header-menu\r\n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\r\n          </tb-header-menu>\r\n        </div>\r\n      </mat-header-cell>\r\n\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template matFooterCellDef>\r\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #footer>\r\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\r\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\r\n          <span *ngSwitchCase=\"FieldType.Currency\">\r\n            {{ data | columnTotal: metaData | currency }}\r\n          </span>\r\n          <span *ngSwitchCase=\"FieldType.Number\">\r\n            {{ data | columnTotal: metaData | number }}\r\n          </span>\r\n        </span>\r\n      </mat-footer-cell>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\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:#fff;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$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "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", "cdkDragScale"], 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i2.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: ColumnBuilderComponent, isStandalone: true, 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\" >\r\n\r\n  <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\">\r\n        </ng-container>\r\n    </mat-cell>\r\n\r\n  </ng-template>\r\n\r\n  <ng-template matHeaderCellDef #myHeader>\r\n\r\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\r\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #header>\r\n\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\r\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n          </div>\r\n          <ng-template #headerWithoutMenu >\r\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          </ng-template>\r\n          <tb-header-menu\r\n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\r\n          </tb-header-menu>\r\n        </div>\r\n      </mat-header-cell>\r\n\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template matFooterCellDef>\r\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #footer>\r\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\r\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\r\n          <span *ngSwitchCase=\"FieldType.Currency\">\r\n            {{ data | columnTotal: metaData | currency }}\r\n          </span>\r\n          <span *ngSwitchCase=\"FieldType.Number\">\r\n            {{ data | columnTotal: metaData | number }}\r\n          </span>\r\n        </span>\r\n      </mat-footer-cell>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\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:#fff;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: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: 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 }); }
 }
@@ -2449,8 +2373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
             type: Component,
             args: [{ selector: 'tb-column-builder', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
-                    ], standalone: false, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\">\r\n        </ng-container>\r\n    </mat-cell>\r\n\r\n  </ng-template>\r\n\r\n  <ng-template matHeaderCellDef #myHeader>\r\n\r\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\r\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #header>\r\n\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\r\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n          </div>\r\n          <ng-template #headerWithoutMenu >\r\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          </ng-template>\r\n          <tb-header-menu\r\n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\r\n          </tb-header-menu>\r\n        </div>\r\n      </mat-header-cell>\r\n\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template matFooterCellDef>\r\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #footer>\r\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\r\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\r\n          <span *ngSwitchCase=\"FieldType.Currency\">\r\n            {{ data | columnTotal: metaData | currency }}\r\n          </span>\r\n          <span *ngSwitchCase=\"FieldType.Number\">\r\n            {{ data | columnTotal: metaData | number }}\r\n          </span>\r\n        </span>\r\n      </mat-footer-cell>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\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:#fff;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: () => [{ type: TransformCreator }, { type: i4$1.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { metaData: [{
+                    ], imports: [LetDirective, MatColumnDef, MatCell, MatTooltip, ConditionalClassesDirective, StylerDirective, NgTemplateOutlet, MatHeaderCellDef, NgIf, MatHeaderCell, CdkDrag, ResizeColumnDirective, CdkDragHandle, MatSortHeader, HeaderMenuComponent, MatCellDef, MatFooterCellDef, MatFooterCell, NgSwitch, NgSwitchCase, AsyncPipe, DecimalPipe, CurrencyPipe, SpaceCasePipe, ColumnTotalPipe], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\">\r\n        </ng-container>\r\n    </mat-cell>\r\n\r\n  </ng-template>\r\n\r\n  <ng-template matHeaderCellDef #myHeader>\r\n\r\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\r\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #header>\r\n\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\r\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n          </div>\r\n          <ng-template #headerWithoutMenu >\r\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          </ng-template>\r\n          <tb-header-menu\r\n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\r\n          </tb-header-menu>\r\n        </div>\r\n      </mat-header-cell>\r\n\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template matFooterCellDef>\r\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #footer>\r\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\r\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\r\n          <span *ngSwitchCase=\"FieldType.Currency\">\r\n            {{ data | columnTotal: metaData | currency }}\r\n          </span>\r\n          <span *ngSwitchCase=\"FieldType.Number\">\r\n            {{ data | columnTotal: metaData | number }}\r\n          </span>\r\n        </span>\r\n      </mat-footer-cell>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\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:#fff;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: () => [{ type: TransformCreator }, { type: i2.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { metaData: [{
                 type: Input
             }], customCell: [{
                 type: Input
@@ -2553,25 +2477,29 @@ class PaginatorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: PaginatorComponent, isStandalone: false, selector: "tb-paginator", inputs: { dataSource: "dataSource", tableElRef: "tableElRef", data$: "data$" }, outputs: { paginatorChangeEmitter: "paginatorChangeEmitter" }, 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-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { dataSource: "dataSource", tableElRef: "tableElRef", data$: "data$" }, outputs: { paginatorChangeEmitter: "paginatorChangeEmitter" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
+  @if (currentPageData$ | async; as pageData) {
+    <div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
+      {{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-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", 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">
-    {{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>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-paginator', template: `
+  @if (currentPageData$ | async; as pageData) {
+    <div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
+      {{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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatPaginator, AsyncPipe], styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: () => [{ type: TableStore }], propDecorators: { dataSource: [{
                 type: Input
             }], tableElRef: [{
@@ -2743,13 +2671,13 @@ class GenericTableComponent {
             this.selection.clear() :
             this.selection.select(...this.dataSource.data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", 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 }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\"\r\n      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.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", "cdkDropListElementContainer", "cdkDropListHasAnchor"], 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$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$3.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", 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 }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], 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\">\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\">\n      @if (!row.isGroupFooter) {\n        <mat-checkbox\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? selection.toggle(row) : null\"\n          [checked]=\"selection.isSelected(row)\">\n        </mat-checkbox>\n      }\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef>\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  </ng-container>\n\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n        <button mat-icon-button (click)=\"updateGroup(row);\">\n          @if (!row.isExpanded) {\n            <mat-icon>chevron_right</mat-icon>\n          }\n          @if (row.isExpanded) {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{row.groupHeaderName}}\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  @if (showHeader$ | async) {\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  }\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: white;\"></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    (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "  <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\"\r\n      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: () => [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
+            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTable, CdkDropList, StylerDirective, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCheckbox, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatIconButton, MatIcon, NgTemplateOutlet, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, PaginatorComponent, MatTooltip, AsyncPipe], 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\">\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\">\n      @if (!row.isGroupFooter) {\n        <mat-checkbox\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? selection.toggle(row) : null\"\n          [checked]=\"selection.isSelected(row)\">\n        </mat-checkbox>\n      }\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef>\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  </ng-container>\n\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n        <button mat-icon-button (click)=\"updateGroup(row);\">\n          @if (!row.isExpanded) {\n            <mat-icon>chevron_right</mat-icon>\n          }\n          @if (row.isExpanded) {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{row.groupHeaderName}}\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  @if (showHeader$ | async) {\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  }\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: white;\"></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    (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: () => [{ type: i1$3.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
                 type: Input
             }], IndexColumn: [{
                 type: Input
@@ -2796,11 +2724,11 @@ class GenericTableVsComponent extends GenericTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\r\n\r\n    <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.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", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i13.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: true, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n  <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\">\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\">\n        @if (!row.isGroupFooter) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        }\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\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    </ng-container>\n\n    <ng-container matColumnDef=\"groupHeader\">\n      <mat-cell *matCellDef=\"let row\">\n        <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n          <button mat-icon-button (click)=\"updateGroup(row);\">\n            @if (!row.isExpanded) {\n              <mat-icon>chevron_right</mat-icon>\n            }\n            @if (row.isExpanded) {\n              <mat-icon>expand_more</mat-icon>\n            }\n          </button>\n          {{row.groupHeaderName}}\n        </div>\n        <div style=\"flex-grow: 1\">\n          <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n        </div>\n      </mat-cell>\n    </ng-container>\n\n    @if (showHeader$ | async) {\n      <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n    }\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: white;\"></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</cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: TableVirtualScrollModule }, { kind: "directive", type: i3.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\r\n\r\n    <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkVirtualScrollViewport, TableVirtualScrollModule, MatTable, CdkDropList, StylerDirective, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCheckbox, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatIconButton, MatIcon, NgTemplateOutlet, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, PaginatorComponent, MatTooltip, AsyncPipe], template: "<cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n  <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\">\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\">\n        @if (!row.isGroupFooter) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        }\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\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    </ng-container>\n\n    <ng-container matColumnDef=\"groupHeader\">\n      <mat-cell *matCellDef=\"let row\">\n        <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n          <button mat-icon-button (click)=\"updateGroup(row);\">\n            @if (!row.isExpanded) {\n              <mat-icon>chevron_right</mat-icon>\n            }\n            @if (row.isExpanded) {\n              <mat-icon>expand_more</mat-icon>\n            }\n          </button>\n          {{row.groupHeaderName}}\n        </div>\n        <div style=\"flex-grow: 1\">\n          <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n        </div>\n      </mat-cell>\n    </ng-container>\n\n    @if (showHeader$ | async) {\n      <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n    }\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: white;\"></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</cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;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-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".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"] }]
         }] });
 
 // here is how to use it
@@ -2832,18 +2760,15 @@ class CustomCellDirective {
             noExport: !metaData
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomCellDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1$2.CdkColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: CustomCellDirective, isStandalone: false, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomCellDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1$4.CdkColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: CustomCellDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[customCell]',
-                    standalone: false
-                }]
+            args: [{ selector: '[customCell]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
-                }] }, { type: i1$2.CdkColumnDef, decorators: [{
+                }] }, { type: i1$4.CdkColumnDef, decorators: [{
                     type: Optional
                 }] }], propDecorators: { customCell: [{
                 type: Input
@@ -2884,11 +2809,11 @@ class GenColDisplayerComponent {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenColDisplayerComponent, isStandalone: false, selector: "tb-col-displayer", ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\r\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\r\n        *ngFor=\"let col of displayCols\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\" [matTooltip]=\"col.displayName || (col.key | spaceCase)\">\r\n          <button mat-icon-button class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\r\n            <mat-icon color=\"primary\">check_box</mat-icon>\r\n          </button>\r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n          <ng-template #hidden>\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.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)}.mdc-list-item__primary-text{display:inline-block;width:100%}\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: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.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", "cdkDropListElementContainer", "cdkDropListHasAnchor"], 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", "cdkDragScale"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if (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    <button mat-menu-item>\n      <span matTooltip=\"Close\">\n        <button class=\"filter-button\" mat-icon-button>\n          <mat-icon>close</mat-icon>\n        </button>\n      </span>\n    </button>\n    <button mat-menu-item stop-propagation>\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      <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    </button>\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\n      @for (col of displayCols; track col) {\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n          >\n          <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\" [matTooltip]=\"col.displayName || (col.key | spaceCase)\">\n            @if (col.isVisible) {\n              <button mat-icon-button class=\"show-hide\">\n                <mat-icon color=\"primary\">check_box</mat-icon>\n              </button>\n            } @else {\n              <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n                <mat-icon>indeterminate_check_box</mat-icon>\n              </button>\n            }\n            <p class=\"label\">\n              {{col.displayName || (col.key | spaceCase) }}\n            </p>\n          </div>\n        </button>\n      }\n    </div>\n  </mat-menu>\n}\n", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.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)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\r\n      <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\r\n        *ngFor=\"let col of displayCols\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\" [matTooltip]=\"col.displayName || (col.key | spaceCase)\">\r\n          <button mat-icon-button class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\r\n            <mat-icon color=\"primary\">check_box</mat-icon>\r\n          </button>\r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n          <ng-template #hidden>\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.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)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
+            args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem, StopPropagationDirective, CdkDropList, CdkDrag, AsyncPipe, SpaceCasePipe], template: "@if (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    <button mat-menu-item>\n      <span matTooltip=\"Close\">\n        <button class=\"filter-button\" mat-icon-button>\n          <mat-icon>close</mat-icon>\n        </button>\n      </span>\n    </button>\n    <button mat-menu-item stop-propagation>\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      <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    </button>\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\n      @for (col of displayCols; track col) {\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n          >\n          <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\" [matTooltip]=\"col.displayName || (col.key | spaceCase)\">\n            @if (col.isVisible) {\n              <button mat-icon-button class=\"show-hide\">\n                <mat-icon color=\"primary\">check_box</mat-icon>\n              </button>\n            } @else {\n              <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n                <mat-icon>indeterminate_check_box</mat-icon>\n              </button>\n            }\n            <p class=\"label\">\n              {{col.displayName || (col.key | spaceCase) }}\n            </p>\n          </div>\n        </button>\n      }\n    </div>\n  </mat-menu>\n}\n", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.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)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }] });
 
 class WrapperFilterStore extends ComponentStore {
@@ -2922,29 +2847,13 @@ class GenFilterDisplayerComponent {
         this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenFilterDisplayerComponent, isStandalone: false, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\r\n    <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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: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: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: GenFilterDisplayerComponent, isStandalone: true, 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  @for (md of filterCols$ | async; track md) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\r\n    <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
+            args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton, StopPropagationDirective, MatTooltip, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem, AsyncPipe, SpaceCasePipe], 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  @for (md of filterCols$ | async; track md) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
 
-class DateFilterComponent {
-    constructor() {
-        this.FilterType = FilterType;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateFilterComponent, isStandalone: false, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\r\n  <mat-form-field>\r\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n      <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #cal></mat-datepicker>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #toVal></mat-datepicker>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\r\n  <mat-form-field>\r\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n      <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #cal></mat-datepicker>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #toVal></mat-datepicker>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
-        }], propDecorators: { info: [{
-                type: Input
-            }], CurrentFilterType: [{
-                type: Input
-            }] } });
-
 class InFilterComponent {
     constructor(ref) {
         this.ref = ref;
@@ -2984,11 +2893,11 @@ class InFilterComponent {
         this.onChange(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: InFilterComponent, isStandalone: false, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InFilterComponent,
                 multi: true
-            }], ngImport: i0, template: "<div class=inline>\r\n    <div *ngFor=\"let val of value; index as i\">\r\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\r\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\r\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\r\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"i === value.length - 1\" />\r\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\r\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    </div>\r\n</div>\r\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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], ngImport: i0, template: "<div class=inline>\n  @for (val of value; track val; let i = $index) {\n    <div>\n      @if (type === FieldType.Number || type === FieldType.Currency) {\n        <input\n          [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n          [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n        }\n        @if (type !== FieldType.Number && type !== FieldType.Currency) {\n          <input\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        }\n        <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n        @if (i === value.length - 1) {\n          <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n        }\n      </div>\n    }\n  </div>\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "21.2.2", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
@@ -2996,7 +2905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: InFilterComponent,
                             multi: true
-                        }], standalone: false, template: "<div class=inline>\r\n    <div *ngFor=\"let val of value; index as i\">\r\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\r\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\r\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\r\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"i === value.length - 1\" />\r\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\r\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    </div>\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
+                        }], imports: [FormsModule, AutoFocusDirective], template: "<div class=inline>\n  @for (val of value; track val; let i = $index) {\n    <div>\n      @if (type === FieldType.Number || type === FieldType.Currency) {\n        <input\n          [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n          [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n        }\n        @if (type !== FieldType.Number && type !== FieldType.Currency) {\n          <input\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        }\n        <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n        @if (i === value.length - 1) {\n          <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n        }\n      </div>\n    }\n  </div>\n", styles: [".inline{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }] } });
@@ -3007,27 +2916,43 @@ class NumberFilterComponent {
         this.FieldType = FieldType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: NumberFilterComponent, isStandalone: false, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In\">\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.NumberBetween\">\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<div class=\"inline\" *ngIf=\"CurrentFilterType === FilterType.In\">\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'  ></lib-in-filter>\r\n</div>\r\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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if (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}\n\n\n@if (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}\n\n@if (CurrentFilterType === FilterType.In) {\n  <div class=\"inline\">\n    <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'  ></lib-in-filter>\n  </div>\n}\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.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: "21.2.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In\">\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.NumberBetween\">\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<div class=\"inline\" *ngIf=\"CurrentFilterType === FilterType.In\">\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'  ></lib-in-filter>\r\n</div>\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
+            args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [MatFormField, MatInput, FormsModule, InFilterComponent], template: "@if (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}\n\n\n@if (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}\n\n@if (CurrentFilterType === FilterType.In) {\n  <div class=\"inline\">\n    <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'  ></lib-in-filter>\n  </div>\n}\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
         }], propDecorators: { CurrentFilterType: [{
                 type: Input
             }], info: [{
                 type: Input
             }] } });
 
+class DateFilterComponent {
+    constructor() {
+        this.FilterType = FilterType;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\n  <mat-form-field>\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n    <mat-datepicker #cal></mat-datepicker>\n  </mat-form-field>\n}\n\n@if (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 class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n        <mat-datepicker #fromVal></mat-datepicker>\n      </mat-form-field>\n      <mat-form-field>\n        <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n        <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n        <mat-datepicker #toVal></mat-datepicker>\n      </mat-form-field>\n    </ng-container>\n  }\n\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [MatFormField, MatInput, FormsModule, MatDatepickerInput, MatDatepickerToggle, MatSuffix, MatDatepicker], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\n  <mat-form-field>\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n    <mat-datepicker #cal></mat-datepicker>\n  </mat-form-field>\n}\n\n@if (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 class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n        <mat-datepicker #fromVal></mat-datepicker>\n      </mat-form-field>\n      <mat-form-field>\n        <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n        <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n        <mat-datepicker #toVal></mat-datepicker>\n      </mat-form-field>\n    </ng-container>\n  }\n\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+        }], propDecorators: { info: [{
+                type: Input
+            }], CurrentFilterType: [{
+                type: Input
+            }] } });
+
 class DateTimeFilterComponent {
     constructor() {
         this.FilterType = FilterType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateTimeFilterComponent, isStandalone: false, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull\">\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\r\n</ng-container>", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull) {\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n}\n\n@if (CurrentFilterType === FilterType.DateTimeBetween) {\n  <ng-container ngModelGroup=\"filterValue\">\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n  </ng-container>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull\">\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\r\n</ng-container>", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+            args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [FormsModule], template: "@if (CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull) {\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n}\n\n@if (CurrentFilterType === FilterType.DateTimeBetween) {\n  <ng-container ngModelGroup=\"filterValue\">\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n  </ng-container>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }], propDecorators: { info: [{
                 type: Input
             }], CurrentFilterType: [{
@@ -3054,196 +2979,17 @@ class FilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FilterComponent, isStandalone: false, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "<mat-card appearance=\"outlined\" class=\"filter-card\" *ngIf=\"filter\">\r\n  <mat-card-content>\r\n    <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\r\n      <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n      <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n      <div class=\"head-row\" >\r\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n        <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\r\n            matTooltip=\"Close\">\r\n          <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div class=\"filter-row\">\r\n          <div class=\"inline\">\r\n            <mat-form-field class=\"my-filter\" >\r\n                <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [(ngModel)]=\"currentFilterType\" >\r\n                    <mat-option *ngFor=\"let kvp of  filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\r\n                        {{ kvp.key }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <ng-container [ngSwitch]=\"true\">\r\n              <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\r\n                                            filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\r\n                  <ng-container *ngTemplateOutlet=\"String\"></ng-container>\r\n              </ng-container>\r\n              <ng-container   *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\r\n                  <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\r\n              </ng-container>\r\n              <ng-container  *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\r\n                <ng-container   *ngTemplateOutlet=\"Boolean\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\r\n                  <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.DateTime\">\r\n                <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-time-filter>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\r\n                <ng-container  *ngTemplateOutlet=\"Enum\"></ng-container>\r\n              </ng-container>\r\n          </ng-container>\r\n          <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\r\n            <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n            <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n          </mat-radio-group>\r\n      </div>\r\n      <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\r\n        Apply\r\n      </button>\r\n    \r\n    \r\n    <ng-template #String>\r\n    <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\r\n      <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"currentFilterType === FilterType.In\">\r\n      <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\r\n    </ng-container>\r\n    </ng-template>\r\n    \r\n    <ng-template #Boolean >\r\n    <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\r\n      <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\r\n        <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n          <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\r\n          <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\r\n        </mat-radio-group>\r\n      </div>\r\n    </div>\r\n    </ng-template>\r\n    <ng-template #Enum>\r\n      <ng-container *ngIf='currentFilterType === FilterType.In' >\r\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n      </ng-container>\r\n    </ng-template>\r\n    </form>\r\n  </mat-card-content>\r\n</mat-card>\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),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: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\n  <mat-card appearance=\"outlined\" class=\"filter-card\">\n    <mat-card-content>\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=\"head-row\" >\n          <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n          <button class=\"cancel-button small-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=\"filter-row\">\n          <div class=\"inline\">\n            <mat-form-field class=\"my-filter\" >\n              <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [(ngModel)]=\"currentFilterType\" >\n                @for (kvp of  filterTypes[filter.fieldType] | keyvalue ; track kvp) {\n                  <mat-option [value]=\"$any(kvp.value)[0]\">\n                    {{ kvp.key }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          @switch (true) {\n            @case (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            }\n            @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n              <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n            }\n            @case (filter.fieldType === FieldType.Boolean) {\n              <ng-container   *ngTemplateOutlet=\"Boolean\"></ng-container>\n            }\n            @case (filter.fieldType === FieldType.Date) {\n              <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n            }\n            @case (filter.fieldType === FieldType.DateTime) {\n              <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-time-filter>\n            }\n            @case (filter.fieldType === FieldType.Enum) {\n              <ng-container  *ngTemplateOutlet=\"Enum\"></ng-container>\n            }\n          }\n          @if (currentFilterType === FilterType.IsNull) {\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\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        <ng-template #String>\n          @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n            <mat-form-field class=\"my-filter\">\n              <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n            </mat-form-field>\n          }\n          @if (currentFilterType === FilterType.In) {\n            <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n          }\n        </ng-template>\n        <ng-template #Boolean >\n          <div class=\"switch\">\n            @switch (currentFilterType) {\n              @case (FilterType.BooleanEquals) {\n                <div class=\"switch\">\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              }\n            }\n          </div>\n        </ng-template>\n        <ng-template #Enum>\n          @if (currentFilterType === FilterType.In) {\n            <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n          }\n        </ng-template>\n      </form>\n    </mat-card-content>\n  </mat-card>\n}\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: 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: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-card appearance=\"outlined\" class=\"filter-card\" *ngIf=\"filter\">\r\n  <mat-card-content>\r\n    <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\r\n      <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n      <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n      <div class=\"head-row\" >\r\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n        <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\r\n            matTooltip=\"Close\">\r\n          <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div class=\"filter-row\">\r\n          <div class=\"inline\">\r\n            <mat-form-field class=\"my-filter\" >\r\n                <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [(ngModel)]=\"currentFilterType\" >\r\n                    <mat-option *ngFor=\"let kvp of  filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\r\n                        {{ kvp.key }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <ng-container [ngSwitch]=\"true\">\r\n              <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\r\n                                            filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\r\n                  <ng-container *ngTemplateOutlet=\"String\"></ng-container>\r\n              </ng-container>\r\n              <ng-container   *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\r\n                  <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\r\n              </ng-container>\r\n              <ng-container  *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\r\n                <ng-container   *ngTemplateOutlet=\"Boolean\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\r\n                  <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.DateTime\">\r\n                <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-time-filter>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\r\n                <ng-container  *ngTemplateOutlet=\"Enum\"></ng-container>\r\n              </ng-container>\r\n          </ng-container>\r\n          <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\r\n            <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n            <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n          </mat-radio-group>\r\n      </div>\r\n      <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\r\n        Apply\r\n      </button>\r\n    \r\n    \r\n    <ng-template #String>\r\n    <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\r\n      <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"currentFilterType === FilterType.In\">\r\n      <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\r\n    </ng-container>\r\n    </ng-template>\r\n    \r\n    <ng-template #Boolean >\r\n    <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\r\n      <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\r\n        <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n          <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\r\n          <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\r\n        </mat-radio-group>\r\n      </div>\r\n    </div>\r\n    </ng-template>\r\n    <ng-template #Enum>\r\n      <ng-container *ngIf='currentFilterType === FilterType.In' >\r\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n      </ng-container>\r\n    </ng-template>\r\n    </form>\r\n  </mat-card-content>\r\n</mat-card>\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+            args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCard, MatCardContent, FormsModule, MatIconButton, MatTooltip, MatIcon, MatFormField, MatSelect, MatOption, NgTemplateOutlet, NumberFilterComponent, DateFilterComponent, DateTimeFilterComponent, MatRadioGroup, MatRadioButton, MatButton, MatInput, InFilterComponent, InListFilterComponent, KeyValuePipe, SpaceCasePipe], template: "@if (filter) {\n  <mat-card appearance=\"outlined\" class=\"filter-card\">\n    <mat-card-content>\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=\"head-row\" >\n          <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n          <button class=\"cancel-button small-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=\"filter-row\">\n          <div class=\"inline\">\n            <mat-form-field class=\"my-filter\" >\n              <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [(ngModel)]=\"currentFilterType\" >\n                @for (kvp of  filterTypes[filter.fieldType] | keyvalue ; track kvp) {\n                  <mat-option [value]=\"$any(kvp.value)[0]\">\n                    {{ kvp.key }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          @switch (true) {\n            @case (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            }\n            @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n              <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n            }\n            @case (filter.fieldType === FieldType.Boolean) {\n              <ng-container   *ngTemplateOutlet=\"Boolean\"></ng-container>\n            }\n            @case (filter.fieldType === FieldType.Date) {\n              <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n            }\n            @case (filter.fieldType === FieldType.DateTime) {\n              <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-time-filter>\n            }\n            @case (filter.fieldType === FieldType.Enum) {\n              <ng-container  *ngTemplateOutlet=\"Enum\"></ng-container>\n            }\n          }\n          @if (currentFilterType === FilterType.IsNull) {\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\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        <ng-template #String>\n          @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n            <mat-form-field class=\"my-filter\">\n              <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n            </mat-form-field>\n          }\n          @if (currentFilterType === FilterType.In) {\n            <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n          }\n        </ng-template>\n        <ng-template #Boolean >\n          <div class=\"switch\">\n            @switch (currentFilterType) {\n              @case (FilterType.BooleanEquals) {\n                <div class=\"switch\">\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              }\n            }\n          </div>\n        </ng-template>\n        <ng-template #Enum>\n          @if (currentFilterType === FilterType.In) {\n            <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n          }\n        </ng-template>\n      </form>\n    </mat-card-content>\n  </mat-card>\n}\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
                 type: Input
             }], close: [{
                 type: Output
             }] } });
 
-class MaterialModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: MaterialModule, imports: [MatSlideToggleModule,
-            MatTableModule,
-            MatSelectModule,
-            MatDialogModule,
-            MatDatepickerModule,
-            MatRadioModule,
-            MatButtonModule,
-            MatExpansionModule,
-            MatStepperModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatNativeDateModule,
-            MatProgressSpinnerModule,
-            MatGridListModule,
-            MatCardModule,
-            MatSidenavModule,
-            MatTabsModule,
-            MatInputModule,
-            MatTabsModule,
-            MatCheckboxModule,
-            MatMenuModule,
-            MatIconModule,
-            MatBadgeModule,
-            MatSortModule,
-            MatAutocompleteModule,
-            MatPaginatorModule,
-            MatChipsModule,
-            MatDialogModule], exports: [MatSlideToggleModule,
-            MatTableModule,
-            MatSelectModule,
-            MatDialogModule,
-            MatDatepickerModule,
-            MatRadioModule,
-            MatButtonModule,
-            MatExpansionModule,
-            MatStepperModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatNativeDateModule,
-            MatProgressSpinnerModule,
-            MatGridListModule,
-            MatCardModule,
-            MatSidenavModule,
-            MatTabsModule,
-            MatInputModule,
-            MatTabsModule,
-            MatCheckboxModule,
-            MatMenuModule,
-            MatIconModule,
-            MatBadgeModule,
-            MatSortModule,
-            MatAutocompleteModule,
-            MatPaginatorModule,
-            MatChipsModule,
-            MatDialogModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MaterialModule, imports: [MatSlideToggleModule,
-            MatTableModule,
-            MatSelectModule,
-            MatDialogModule,
-            MatDatepickerModule,
-            MatRadioModule,
-            MatButtonModule,
-            MatExpansionModule,
-            MatStepperModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatNativeDateModule,
-            MatProgressSpinnerModule,
-            MatGridListModule,
-            MatCardModule,
-            MatSidenavModule,
-            MatTabsModule,
-            MatInputModule,
-            MatTabsModule,
-            MatCheckboxModule,
-            MatMenuModule,
-            MatIconModule,
-            MatBadgeModule,
-            MatSortModule,
-            MatAutocompleteModule,
-            MatPaginatorModule,
-            MatChipsModule,
-            MatDialogModule, MatSlideToggleModule,
-            MatTableModule,
-            MatSelectModule,
-            MatDialogModule,
-            MatDatepickerModule,
-            MatRadioModule,
-            MatButtonModule,
-            MatExpansionModule,
-            MatStepperModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatNativeDateModule,
-            MatProgressSpinnerModule,
-            MatGridListModule,
-            MatCardModule,
-            MatSidenavModule,
-            MatTabsModule,
-            MatInputModule,
-            MatTabsModule,
-            MatCheckboxModule,
-            MatMenuModule,
-            MatIconModule,
-            MatBadgeModule,
-            MatSortModule,
-            MatAutocompleteModule,
-            MatPaginatorModule,
-            MatChipsModule,
-            MatDialogModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatSlideToggleModule,
-                        MatTableModule,
-                        MatSelectModule,
-                        MatDialogModule,
-                        MatDatepickerModule,
-                        MatRadioModule,
-                        MatButtonModule,
-                        MatExpansionModule,
-                        MatStepperModule,
-                        MatToolbarModule,
-                        MatTooltipModule,
-                        MatNativeDateModule,
-                        MatProgressSpinnerModule,
-                        MatGridListModule,
-                        MatCardModule,
-                        MatSidenavModule,
-                        MatTabsModule,
-                        MatInputModule,
-                        MatTabsModule,
-                        MatCheckboxModule,
-                        MatMenuModule,
-                        MatIconModule,
-                        MatBadgeModule,
-                        MatSortModule,
-                        MatAutocompleteModule,
-                        MatPaginatorModule,
-                        MatChipsModule,
-                        MatDialogModule,
-                    ],
-                    exports: [
-                        MatSlideToggleModule,
-                        MatTableModule,
-                        MatSelectModule,
-                        MatDialogModule,
-                        MatDatepickerModule,
-                        MatRadioModule,
-                        MatButtonModule,
-                        MatExpansionModule,
-                        MatStepperModule,
-                        MatToolbarModule,
-                        MatTooltipModule,
-                        MatNativeDateModule,
-                        MatProgressSpinnerModule,
-                        MatGridListModule,
-                        MatCardModule,
-                        MatSidenavModule,
-                        MatTabsModule,
-                        MatInputModule,
-                        MatTabsModule,
-                        MatCheckboxModule,
-                        MatMenuModule,
-                        MatIconModule,
-                        MatBadgeModule,
-                        MatSortModule,
-                        MatAutocompleteModule,
-                        MatPaginatorModule,
-                        MatChipsModule,
-                        MatDialogModule,
-                    ]
-                }]
-        }] });
-
 class MultiSortDirective extends MatSort {
     constructor(state) {
         super();
@@ -3265,7 +3011,7 @@ class MultiSortDirective extends MatSort {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MultiSortDirective, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MultiSortDirective, isStandalone: false, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
             { provide: MatSort, useExisting: MultiSortDirective }
         ], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
 }
@@ -3277,8 +3023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                     inputs: ['disabled: matSortDisabled'],
                     providers: [
                         { provide: MatSort, useExisting: MultiSortDirective }
-                    ],
-                    standalone: false
+                    ]
                 }]
         }], ctorParameters: () => [{ type: TableStore }] });
 
@@ -3366,16 +3111,13 @@ class TableFilterDirective extends ComponentStore {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterDirective, deps: [{ token: i2$1.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableFilterDirective, isStandalone: false, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterDirective, deps: [{ token: i1.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableFilterDirective, isStandalone: true, 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: "21.2.2", ngImport: i0, type: TableFilterDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: "[tbFilter]",
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
+            args: [{ selector: "[tbFilter]" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
@@ -3420,8 +3162,8 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
         }
         super.ngOnChanges(changes);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i2$1.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableFilterStringContainsDirective, isStandalone: false, selector: "[tbFilterStringContains]", inputs: { key: ["tbFilterStringContains", "key"], filterValue: "filterValue", filterId: "filterId", active: "active" }, providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i1.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableFilterStringContainsDirective, isStandalone: true, 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: "21.2.2", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
             type: Directive,
@@ -3433,10 +3175,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         'filterValue:filterValue',
                         'filterId: filterId',
                         'active: active',
-                    ],
-                    standalone: false
+                    ]
                 }]
-        }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
@@ -3527,7 +3268,7 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i3$3.Observable }, { type: undefined }, { type: TableWrapperDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i3$1.Observable }, { type: undefined }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
                 }] }] });
 // Checkbox
@@ -3540,8 +3281,8 @@ class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
         super(matCheckbox.change, () => matCheckbox.checked, wrapper);
         this.matCheckbox = matCheckbox;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [{ token: i7.MatCheckbox }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatCheckboxTbFilterDirective, isStandalone: false, selector: "mat-checkbox[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [{ token: i4.MatCheckbox }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatCheckboxTbFilterDirective, isStandalone: true, 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: "21.2.2", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
             type: Directive,
@@ -3550,10 +3291,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                     inputs: [
                         ...inputs
                     ],
-                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }],
-                    standalone: false
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }]
                 }]
-        }], ctorParameters: () => [{ type: i7.MatCheckbox }, { type: TableWrapperDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i4.MatCheckbox }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
                 }] }] });
 class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
@@ -3568,8 +3308,8 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [{ token: i5$2.MatSlideToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatSlideToggleTbFilterDirective, isStandalone: false, selector: "mat-slide-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [{ token: i5.MatSlideToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatSlideToggleTbFilterDirective, isStandalone: true, 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: "21.2.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
             type: Directive,
@@ -3578,10 +3318,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                     inputs: [
                         ...inputs
                     ],
-                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }],
-                    standalone: false
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }]
                 }]
-        }], ctorParameters: () => [{ type: i5$2.MatSlideToggle }, { type: TableWrapperDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i5.MatSlideToggle }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
                 }] }] });
 // Radio button
@@ -3597,18 +3336,17 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [{ token: i5.MatRadioButton }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatRadioButtonTbFilterDirective, isStandalone: false, selector: "mat-radio-button[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"] }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [{ token: i6.MatRadioButton }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatRadioButtonTbFilterDirective, isStandalone: true, 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: "21.2.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-radio-button[tbCustomFilter]',
                     inputs: ['predicate: tbCustomFilter'],
-                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }],
-                    standalone: false
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }]
                 }]
-        }], ctorParameters: () => [{ type: i5.MatRadioButton }, { type: TableWrapperDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i6.MatRadioButton }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
                 }] }] });
 // Option (select)
@@ -3633,8 +3371,8 @@ class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatOptionTbFilterDirective, deps: [{ token: i7$2.MatOption }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatOptionTbFilterDirective, isStandalone: false, selector: "mat-option[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatOptionTbFilterDirective, deps: [{ token: i7.MatOption }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatOptionTbFilterDirective, isStandalone: true, 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: "21.2.2", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
             type: Directive,
@@ -3643,10 +3381,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                     inputs: [
                         ...inputs
                     ],
-                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }],
-                    standalone: false
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }]
                 }]
-        }], ctorParameters: () => [{ type: i7$2.MatOption }, { type: TableWrapperDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i7.MatOption }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
                 }] }] });
 // Button toggle
@@ -3662,8 +3399,8 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8$3.MatButtonToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatButtonToggleFilterDirective, isStandalone: false, selector: "mat-button-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8.MatButtonToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatButtonToggleFilterDirective, isStandalone: true, 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: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
             type: Directive,
@@ -3672,10 +3409,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                     inputs: [
                         ...inputs
                     ],
-                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }],
-                    standalone: false
+                    providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }]
                 }]
-        }], ctorParameters: () => [{ type: i8$3.MatButtonToggle }, { type: TableWrapperDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i8.MatButtonToggle }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -3687,14 +3423,11 @@ class TableWrapperDirective {
         this.registerations.push(filter);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableWrapperDirective, isStandalone: false, selector: "[tbWrapper]", queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableWrapperDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[tbWrapper]',
-                    standalone: false
-                }]
+            args: [{ selector: '[tbWrapper]' }]
         }], propDecorators: { customFilters: [{
                 type: ContentChildren,
                 args: [TableCustomFilterDirective, { descendants: true }]
@@ -3793,7 +3526,7 @@ class ExportToCsvService {
         }
         return this.datePipe.transform(val, dateFormat);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ExportToCsvService, deps: [{ token: TableStore }, { token: TableBuilderConfigToken }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ExportToCsvService, deps: [{ token: TableStore }, { token: TableBuilderConfigToken }, { token: i1$2.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ExportToCsvService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ExportToCsvService, decorators: [{
@@ -3801,7 +3534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
         }], ctorParameters: () => [{ type: TableStore }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TableBuilderConfigToken]
-                }] }, { type: i2.DatePipe }] });
+                }] }, { type: i1$2.DatePipe }] });
 const removeFromMetaData = (state, keysToRemove) => orderMetaData(state)
     .filter(meta => !keysToRemove.includes(meta.key));
 const nonExportableFields = (state) => Object.values(state.metaData)
@@ -3873,110 +3606,32 @@ function createLinkCreator(metaData) {
         const getKey = key(metaData);
         return ({
             link: (element) => `${base}${slashIfNeeded}${getKey(element)}`,
-            target,
-            useRouterLink,
-            routerLinkOptions,
-        });
-    }
-}
-const key = (metaData) => metaData.additional.link?.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) {
-        super({ notSorted: [], sorted: [] });
-        this.tableState = tableState;
-        this.set = this.updater((state, data) => ({ ...data }));
-        this.setSorted = this.updater((state, sorted) => ({ ...state, sorted }));
-        this.setNotSorted = this.updater((state, notSorted) => ({ ...state, notSorted }));
-        this.sorted$ = this.select(state => state.sorted);
-        this.notSorted$ = this.select(state => state.notSorted);
-        this.setDirection = this.updater((state, sort) => {
-            const index = state.sorted.findIndex(s => s.active === sort.active);
-            const sorted = [...state.sorted];
-            sorted.splice(index, 1, sort);
-            return ({ ...state, sorted });
+            target,
+            useRouterLink,
+            routerLinkOptions,
         });
-        this.reset = () => {
-            const sorted = this.tableState.sorted$.pipe(mergeMap(sort => this.tableState.metaData$.pipe(notNull(), map(meta => sort.map(s => {
-                return { ...s, displayName: meta[s.active]?.displayName };
-            })))));
-            const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sorted$.pipe(map(s => metas.filter(meta => !s.some(s => s.active === meta.key))
-                .map(meta => ({ active: meta.key, displayName: meta.displayName }))))));
-            this.set(combineLatest([
-                sorted.pipe(distinctSortArray), notSorted.pipe(distinctSortArray)
-            ]).pipe(map(([sorted, notSorted]) => ({ sorted, notSorted }))));
-        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: TableStore }] });
-const equalSortArray = (arr1, arr2) => arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
-const distinctSortArray = distinctUntilChanged(equalSortArray);
+const key = (metaData) => metaData.additional.link?.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 SortMenuComponent {
-    constructor(tableState, store) {
-        this.tableState = tableState;
-        this.store = store;
-        this.SortDirection = SortDirection;
-        this.dirty$ = new BehaviorSubject(false);
-        this.apply = this.store.effect((obs) => obs.pipe(tap(() => {
-            this.dirty$.next(false);
-            this.tableState.setAllSort(this.store.sorted$.pipe(first$1()));
-        })));
-        this.sorted$ = this.store.sorted$.pipe(map(data => [...data]));
-        this.notSorted$ = this.store.notSorted$.pipe(map(data => [...data]));
-    }
-    reset() {
-        this.dirty$.next(false);
-        this.store.reset();
+class GroupByListComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
     }
     ngOnInit() {
-        this.store.reset();
-    }
-    dropIntoSorted(event) {
-        this.dirty$.next(true);
-        if (event.previousContainer === event.container) {
-            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            this.store.setSorted(event.container.data);
-        }
-        else {
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-            event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex], direction: SortDirection.asc };
-            this.store.setSorted(event.container.data);
-            this.store.setNotSorted(event.previousContainer.data);
-        }
-    }
-    dropIntoNotSorted(event) {
-        if (event.previousContainer === event.container) {
-            return;
-        }
-        else {
-            this.dirty$.next(true);
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-            event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex] };
-            this.store.setNotSorted(event.container.data);
-            this.store.setSorted(event.previousContainer.data);
-        }
-    }
-    setDirection(sort) {
-        this.dirty$.next(true);
-        this.store.setDirection(sort);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: SortMenuComponent, isStandalone: false, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n<ng-container  *ngIf=\"sorted$ | async as sorted\">\r\n  <ng-container *ngIf=\"notSorted$ | async as notSorted\">\r\n    <!-- Menu Trigger -->\r\n    <span matTooltip=\"Sort\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n        <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n      </button>\r\n    </span>\r\n\r\n    <!-- Menu -->\r\n    <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n      <div mat-menu-item class=\"menu-button\">\r\n        <div class=\"close-button-wrapper\">\r\n          <span matTooltip=\"Close\">\r\n            <mat-icon>close</mat-icon>\r\n          </span>\r\n          <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n            <mat-icon>undo</mat-icon>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Apply Button -->\r\n      <div class=\"apply-button-wrapper\">\r\n        <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n          stop-propagation [class.apply-border]=\"dirty\"\r\n          [disabled]=\"!dirty\">\r\n            Apply\r\n            <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Default Sorting Text -->\r\n      <div *ngIf=\"!sorted.length\" class=\"tip\" >\r\n        Sorting List\r\n      </div>\r\n\r\n      <!-- Sorted Menu List -->\r\n      <div class=\"list\"\r\n        cdkDropList\r\n        #sortedGroup=\"cdkDropList\"\r\n        [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n        [cdkDropListData]=\"sorted\"\r\n        (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n        <!-- Menu Item Wrapper -->\r\n        <ng-container *ngFor=\"let sort of sorted;let i=index\">\r\n\r\n          <!-- Menu Item Headers -->\r\n          <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\r\n          <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\"  class=\"sort-header\">Then By</span>\r\n\r\n          <!-- Menu Item -->\r\n          <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n            <div class=\"sort-item\">\r\n              <span class=\"sorted-name\">\r\n                {{sort.displayName || (sort.active | spaceCase)}}\r\n                <span class=\"direction-text\">{{sort.direction}}</span>\r\n              </span>\r\n\r\n              <!-- Sort Direction Buttons -->\r\n              <div class=\"up-down-buttons-wrapper\">\r\n                <button  class=\"up-down-button up-button\" stop-propagation\r\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n                  <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                  arrow_upward\r\n                  </mat-icon>\r\n                </button>\r\n\r\n                <button class=\"up-down-button\" stop-propagation\r\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n                  <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                    arrow_downward\r\n                  </mat-icon>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Default Not Sorted Text -->\r\n      <div *ngIf=\"!notSorted.length\" class=\"tip\" >\r\n        Not Sorted List\r\n      </div>\r\n      <!-- Not Sorted Menu List -->\r\n      <div class=\"list\"\r\n        cdkDropList\r\n        #notSortedGroup=\"cdkDropList\"\r\n        [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n        [cdkDropListData]=\"notSorted\"\r\n        (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n        <div mat-menu-item *ngFor=\"let sort of notSorted\"  class=\"menu-item\" cdkDrag>\r\n          <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n        </div>\r\n      </div>\r\n    </mat-menu>\r\n  </ng-container>\r\n</ng-container>\r\n</ng-container>\r\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:#fff}.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;height:27px}.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-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.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: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.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", "cdkDropListElementContainer", "cdkDropListHasAnchor"], 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", "cdkDragScale"], 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n  @if (groupByKeys?.length) {\n    <span class=\"tb-group-label\">Group By:</span>\n  }\n  @for (groupByKey of groupByKeys; track groupByKey; let i = $index) {\n    @if (i > 0) {\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\n    }\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n      {{groupByKey | spaceCase}}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], standalone: false, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n<ng-container  *ngIf=\"sorted$ | async as sorted\">\r\n  <ng-container *ngIf=\"notSorted$ | async as notSorted\">\r\n    <!-- Menu Trigger -->\r\n    <span matTooltip=\"Sort\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n        <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n      </button>\r\n    </span>\r\n\r\n    <!-- Menu -->\r\n    <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n      <div mat-menu-item class=\"menu-button\">\r\n        <div class=\"close-button-wrapper\">\r\n          <span matTooltip=\"Close\">\r\n            <mat-icon>close</mat-icon>\r\n          </span>\r\n          <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n            <mat-icon>undo</mat-icon>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Apply Button -->\r\n      <div class=\"apply-button-wrapper\">\r\n        <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n          stop-propagation [class.apply-border]=\"dirty\"\r\n          [disabled]=\"!dirty\">\r\n            Apply\r\n            <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Default Sorting Text -->\r\n      <div *ngIf=\"!sorted.length\" class=\"tip\" >\r\n        Sorting List\r\n      </div>\r\n\r\n      <!-- Sorted Menu List -->\r\n      <div class=\"list\"\r\n        cdkDropList\r\n        #sortedGroup=\"cdkDropList\"\r\n        [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n        [cdkDropListData]=\"sorted\"\r\n        (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n        <!-- Menu Item Wrapper -->\r\n        <ng-container *ngFor=\"let sort of sorted;let i=index\">\r\n\r\n          <!-- Menu Item Headers -->\r\n          <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\r\n          <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\"  class=\"sort-header\">Then By</span>\r\n\r\n          <!-- Menu Item -->\r\n          <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n            <div class=\"sort-item\">\r\n              <span class=\"sorted-name\">\r\n                {{sort.displayName || (sort.active | spaceCase)}}\r\n                <span class=\"direction-text\">{{sort.direction}}</span>\r\n              </span>\r\n\r\n              <!-- Sort Direction Buttons -->\r\n              <div class=\"up-down-buttons-wrapper\">\r\n                <button  class=\"up-down-button up-button\" stop-propagation\r\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n                  <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                  arrow_upward\r\n                  </mat-icon>\r\n                </button>\r\n\r\n                <button class=\"up-down-button\" stop-propagation\r\n                (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n                  <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                    arrow_downward\r\n                  </mat-icon>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Default Not Sorted Text -->\r\n      <div *ngIf=\"!notSorted.length\" class=\"tip\" >\r\n        Not Sorted List\r\n      </div>\r\n      <!-- Not Sorted Menu List -->\r\n      <div class=\"list\"\r\n        cdkDropList\r\n        #notSortedGroup=\"cdkDropList\"\r\n        [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n        [cdkDropListData]=\"notSorted\"\r\n        (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n        <div mat-menu-item *ngFor=\"let sort of notSorted\"  class=\"menu-item\" cdkDrag>\r\n          <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n        </div>\r\n      </div>\r\n    </mat-menu>\r\n  </ng-container>\r\n</ng-container>\r\n</ng-container>\r\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:#fff}.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;height:27px}.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-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.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: () => [{ type: TableStore }, { type: SortMenuComponentStore }] });
+            args: [{ selector: 'group-by-list', imports: [LetDirective, MatChipSet, MatIcon, MatChip, MatChipRemove, SpaceCasePipe], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n  @if (groupByKeys?.length) {\n    <span class=\"tb-group-label\">Group By:</span>\n  }\n  @for (groupByKey of groupByKeys; track groupByKey; let i = $index) {\n    @if (i > 0) {\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\n    }\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n      {{groupByKey | spaceCase}}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
+        }], ctorParameters: () => [{ type: TableStore }] });
 
 class KeyDisplayPipe {
     constructor(tableState) {
@@ -3986,14 +3641,11 @@ class KeyDisplayPipe {
         return this.tableState.getMetaData$(key).pipe(map(metaData => metaData.displayName || spaceCase(key)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: KeyDisplayPipe, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: KeyDisplayPipe, isStandalone: false, name: "keyDisplay" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: KeyDisplayPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'keyDisplay',
-                    standalone: false
-                }]
+            args: [{ name: 'keyDisplay' }]
         }], ctorParameters: () => [{ type: TableStore }] });
 
 class FormatFilterValuePipe {
@@ -4024,16 +3676,13 @@ class FormatFilterValuePipe {
             return value;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterValuePipe, deps: [{ token: TableStore }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterValuePipe, isStandalone: false, name: "formatFilterValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterValuePipe, deps: [{ token: TableStore }, { token: i1$2.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'formatFilterValue',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: TableStore }, { type: i2.DatePipe }] });
+            args: [{ name: 'formatFilterValue' }]
+        }], ctorParameters: () => [{ type: TableStore }, { type: i1$2.DatePipe }] });
 
 class FormatFilterTypePipe {
     transform(filterType, value) {
@@ -4043,14 +3692,11 @@ class FormatFilterTypePipe {
         return filterType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterTypePipe, isStandalone: false, name: "formatFilterType" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'formatFilterType',
-                    standalone: false
-                }]
+            args: [{ name: 'formatFilterType' }]
         }] });
 
 class FilterChipsComponent {
@@ -4072,26 +3718,104 @@ class FilterChipsComponent {
         this.filterStore.clearAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n    matTooltip=\"Close all Filters Cards\">\r\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n  </button>\r\n\r\n\r\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n      Clear All\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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: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: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\"\n      matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n  }\n\n\n  @if (currentFilters.length) {\n    <div class=\"float\">\n      @for (filter of (currentFilters$ | async); track filter; let i = $index) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\n    @for (filter of filters; track filter) {\n      <mat-chip (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    }\n    @if (filters.length >= 2) {\n      <mat-chip (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "pipe", type: 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: "21.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-filter-list', standalone: false, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n    matTooltip=\"Close all Filters Cards\">\r\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n  </button>\r\n\r\n\r\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n      Clear All\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
+            args: [{ selector: 'lib-filter-list', imports: [LetDirective, MatIconButton, MatTooltip, MatIcon, FilterComponent, MatChipSet, MatChip, MatChipRemove, AsyncPipe, KeyDisplayPipe, FormatFilterValuePipe, FormatFilterTypePipe], template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\"\n      matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n  }\n\n\n  @if (currentFilters.length) {\n    <div class=\"float\">\n      @for (filter of (currentFilters$ | async); track filter; let i = $index) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\n    @for (filter of filters; track filter) {\n      <mat-chip (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    }\n    @if (filters.length >= 2) {\n      <mat-chip (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.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:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
 
-class GroupByListComponent {
-    constructor(tableStore) {
-        this.tableStore = tableStore;
+class SortMenuComponentStore extends ComponentStore {
+    constructor(tableState) {
+        super({ notSorted: [], sorted: [] });
+        this.tableState = tableState;
+        this.set = this.updater((state, data) => ({ ...data }));
+        this.setSorted = this.updater((state, sorted) => ({ ...state, sorted }));
+        this.setNotSorted = this.updater((state, notSorted) => ({ ...state, notSorted }));
+        this.sorted$ = this.select(state => state.sorted);
+        this.notSorted$ = this.select(state => state.notSorted);
+        this.setDirection = this.updater((state, sort) => {
+            const index = state.sorted.findIndex(s => s.active === sort.active);
+            const sorted = [...state.sorted];
+            sorted.splice(index, 1, sort);
+            return ({ ...state, sorted });
+        });
+        this.reset = () => {
+            const sorted = this.tableState.sorted$.pipe(mergeMap(sort => this.tableState.metaData$.pipe(notNull(), map(meta => sort.map(s => {
+                return { ...s, displayName: meta[s.active]?.displayName };
+            })))));
+            const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sorted$.pipe(map(s => metas.filter(meta => !s.some(s => s.active === meta.key))
+                .map(meta => ({ active: meta.key, displayName: meta.displayName }))))));
+            this.set(combineLatest([
+                sorted.pipe(distinctSortArray), notSorted.pipe(distinctSortArray)
+            ]).pipe(map(([sorted, notSorted]) => ({ sorted, notSorted }))));
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: TableStore }] });
+const equalSortArray = (arr1, arr2) => arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
+const distinctSortArray = distinctUntilChanged(equalSortArray);
+
+class SortMenuComponent {
+    constructor(tableState, store) {
+        this.tableState = tableState;
+        this.store = store;
+        this.SortDirection = SortDirection;
+        this.dirty$ = new BehaviorSubject(false);
+        this.apply = this.store.effect((obs) => obs.pipe(tap(() => {
+            this.dirty$.next(false);
+            this.tableState.setAllSort(this.store.sorted$.pipe(first$1()));
+        })));
+        this.sorted$ = this.store.sorted$.pipe(map(data => [...data]));
+        this.notSorted$ = this.store.notSorted$.pipe(map(data => [...data]));
+    }
+    reset() {
+        this.dirty$.next(false);
+        this.store.reset();
     }
     ngOnInit() {
+        this.store.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GroupByListComponent, isStandalone: false, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\r\n  <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\r\n    <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </ng-container>\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
+    dropIntoSorted(event) {
+        this.dirty$.next(true);
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            this.store.setSorted(event.container.data);
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex], direction: SortDirection.asc };
+            this.store.setSorted(event.container.data);
+            this.store.setNotSorted(event.previousContainer.data);
+        }
+    }
+    dropIntoNotSorted(event) {
+        if (event.previousContainer === event.container) {
+            return;
+        }
+        else {
+            this.dirty$.next(true);
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex] };
+            this.store.setNotSorted(event.container.data);
+            this.store.setSorted(event.previousContainer.data);
+        }
+    }
+    setDirection(sort) {
+        this.dirty$.next(true);
+        this.store.setDirection(sort);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n  @if (sorted$ | async; as sorted) {\n    @if (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      <!-- 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            @if (dirty) {\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n                <mat-icon>undo</mat-icon>\n              </span>\n            }\n          </div>\n        </div>\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            @if (dirty) {\n              Unsaved Changes\n            }\n          </button>\n        </div>\n        <!-- Default Sorting Text -->\n        @if (!sorted.length) {\n          <div 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          <!-- Menu Item Wrapper -->\n          @for (sort of sorted; track sort; let i = $index) {\n            <!-- Menu Item Headers -->\n            @if (sorted.length > 1 && i === 0 ) {\n              <span class=\"description\" class=\"sort-header\">First By</span>\n            }\n            @if (sorted.length > 1 && i !== 0 ) {\n              <span 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                <!-- 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                  <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          }\n        </div>\n        <!-- Default Not Sorted Text -->\n        @if (!notSorted.length) {\n          <div class=\"tip\" >\n            Not Sorted List\n          </div>\n        }\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          @for (sort of notSorted; track sort) {\n            <div mat-menu-item  class=\"menu-item\" cdkDrag>\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n            </div>\n          }\n        </div>\n      </mat-menu>\n    }\n  }\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:#fff}.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;height:27px}.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-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.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: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'group-by-list', standalone: false, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\r\n  <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\r\n    <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </ng-container>\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
-        }], ctorParameters: () => [{ type: TableStore }] });
+            args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], imports: [LetDirective, MatTooltip, MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem, StopPropagationDirective, MatButton, CdkDropList, CdkDrag, NgClass, AsyncPipe, SpaceCasePipe], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n  @if (sorted$ | async; as sorted) {\n    @if (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      <!-- 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            @if (dirty) {\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n                <mat-icon>undo</mat-icon>\n              </span>\n            }\n          </div>\n        </div>\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            @if (dirty) {\n              Unsaved Changes\n            }\n          </button>\n        </div>\n        <!-- Default Sorting Text -->\n        @if (!sorted.length) {\n          <div 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          <!-- Menu Item Wrapper -->\n          @for (sort of sorted; track sort; let i = $index) {\n            <!-- Menu Item Headers -->\n            @if (sorted.length > 1 && i === 0 ) {\n              <span class=\"description\" class=\"sort-header\">First By</span>\n            }\n            @if (sorted.length > 1 && i !== 0 ) {\n              <span 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                <!-- 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                  <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          }\n        </div>\n        <!-- Default Not Sorted Text -->\n        @if (!notSorted.length) {\n          <div class=\"tip\" >\n            Not Sorted List\n          </div>\n        }\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          @for (sort of notSorted; track sort) {\n            <div mat-menu-item  class=\"menu-item\" cdkDrag>\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n            </div>\n          }\n        </div>\n      </mat-menu>\n    }\n  }\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:#fff}.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;height:27px}.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-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.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: () => [{ type: TableStore }, { type: SortMenuComponentStore }] });
 
 class TableContainerComponent {
     set isVs(val) {
@@ -4321,16 +4045,16 @@ class TableContainerComponent {
         this.disableSort = true;
         return this.tbGroupBy(data, groupByKeys);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$4.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: TableContainerComponent, isStandalone: false, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", isVs: "isVs", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey" }, outputs: { selection$: "selection$", data: "data", paginatorChange: "paginatorChange", 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 }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\r\n</ng-content>\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\r\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n\r\n\r\n    <div class=\"header-wrapper\">\r\n      <div class=\"title\">\r\n        <ng-content select=\".tb-header-title\"\r\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\r\n\r\n        </ng-content>\r\n        <group-by-list></group-by-list>\r\n      </div>\r\n      <div class=\"flx-row-end\">\r\n        <lib-filter-list></lib-filter-list>\r\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\r\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\r\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n            </button>\r\n            <mat-menu #mainMenu='matMenu'>\r\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <ng-template #allMenu>\r\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n            </button>\r\n            <mat-menu #mainMenu='matMenu'>\r\n              <div class=\"flex-column\">\r\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n              </div>\r\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n            </mat-menu>\r\n          </ng-template>\r\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n            (click)=\"state.toggleCollapseHeader()\">\r\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n          </mat-icon>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div style=\"clear: both;\" *ngIf=\"!_isVs\">\r\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n        [compareWithKey]=\"compareWithKey\">\r\n      </tb-generic-table>\r\n    </div>\r\n\r\n    <div style=\"clear: both;\" *ngIf=\"_isVs\">\r\n      <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n        (paginatorChange)=\"paginatorChange.emit()\">\r\n      </tb-generic-table-vs>\r\n    </div>\r\n\r\n\r\n    <ng-template #headerMenu>\r\n      <ng-container>\r\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\r\n        </tb-filter-displayer>\r\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\r\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-template #headerMenuExtra>\r\n      <button mat-menu-item (click)=\"resetState()\">\r\n        <mat-icon color=\"primary\">autorenew</mat-icon>\r\n        <span>Reset table</span>\r\n      </button>\r\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\r\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\r\n          <mat-icon>add</mat-icon>\r\n          <span>New</span>\r\n        </button>\r\n        <ng-container *ngFor='let key of stateKeys$ | async'>\r\n          <button mat-menu-item (click)='setProfileState(key)'>\r\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\r\n              <span style='display:flex;'>{{key}}</span>\r\n              <span style='display:flex;'>\r\n                <span style=\"width: 120px;\"></span>\r\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n              </span>\r\n            </div>\r\n          </button>\r\n        </ng-container>\r\n      </mat-menu>\r\n      <ng-container *opDialog='add'>\r\n        <mat-form-field>\r\n          <input style='width:90%' matInput #addedKey />\r\n        </mat-form-field>\r\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\r\n          [disabled]=\"!addedKey.value\">Add</button>\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n  </ng-container>\r\n\r\n</ng-container>\r\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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.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: ["add_opDialog_Class", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "compareWithKey", "disableSort"], outputs: ["paginatorChange", "selection$"] }, { kind: "component", type: GenericTableVsComponent, selector: "tb-generic-table-vs" }, { 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: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$2.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", isVs: "isVs", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey" }, outputs: { selection$: "selection$", data: "data", paginatorChange: "paginatorChange", 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 }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], 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        @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n          <ng-content select=\".tb-header-title\"\n            >\n          </ng-content>\n        }\n        <group-by-list></group-by-list>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        @if (!tableSettings.hideHeader) {\n          @if (!(collapseHeader$ | async)) {\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          } @else {\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          }\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        }\n      </div>\n    </div>\n\n    @if (!_isVs) {\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\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [compareWithKey]=\"compareWithKey\">\n        </tb-generic-table>\n      </div>\n    }\n\n    @if (_isVs) {\n      <div style=\"clear: both;\">\n        <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n          [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n          [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          (paginatorChange)=\"paginatorChange.emit()\">\n        </tb-generic-table-vs>\n      </div>\n    }\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        @if (!tableSettings.hideFilter) {\n          <tb-filter-displayer>\n          </tb-filter-displayer>\n        }\n        @if (!tableSettings.hideColumnSettings) {\n          <tb-col-displayer></tb-col-displayer>\n        }\n        @if (!tableSettings.hideSort) {\n          <tb-sort-menu></tb-sort-menu>\n        }\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      @if (!tableSettings.hideExport) {\n        <button mat-menu-item (click)=\"exportToCsv()\">\n          <mat-icon color=\"primary\">file_download</mat-icon>\n          <span>Export Table</span>\n        </button>\n      }\n      @if (currentStateKey$ | async; as currentKey) {\n        @if (tableId) {\n          <button mat-menu-item (click)=\"saveState()\">\n            <mat-icon color=\"primary\">save</mat-icon>\n            <span>Save to {{currentKey}}</span>\n          </button>\n        }\n        @if (tableId) {\n          <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n            <span>Choose Profile</span>\n          </button>\n        }\n      }\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        @for (key of stateKeys$ | async; track key) {\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        }\n      </mat-menu>\n      <ng-container *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      </ng-container>\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: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "compareWithKey", "disableSort"], outputs: ["paginatorChange", "selection$"] }, { kind: "component", type: GenericTableVsComponent, selector: "tb-generic-table-vs" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["add_opDialog_Class", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: false, template: "<ng-content select=\"[before]\" >\r\n</ng-content>\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\r\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n\r\n\r\n    <div class=\"header-wrapper\">\r\n      <div class=\"title\">\r\n        <ng-content select=\".tb-header-title\"\r\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\r\n\r\n        </ng-content>\r\n        <group-by-list></group-by-list>\r\n      </div>\r\n      <div class=\"flx-row-end\">\r\n        <lib-filter-list></lib-filter-list>\r\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\r\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\r\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n            </button>\r\n            <mat-menu #mainMenu='matMenu'>\r\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <ng-template #allMenu>\r\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n            </button>\r\n            <mat-menu #mainMenu='matMenu'>\r\n              <div class=\"flex-column\">\r\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n              </div>\r\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n            </mat-menu>\r\n          </ng-template>\r\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n            (click)=\"state.toggleCollapseHeader()\">\r\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n          </mat-icon>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div style=\"clear: both;\" *ngIf=\"!_isVs\">\r\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n        [compareWithKey]=\"compareWithKey\">\r\n      </tb-generic-table>\r\n    </div>\r\n\r\n    <div style=\"clear: both;\" *ngIf=\"_isVs\">\r\n      <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n        (paginatorChange)=\"paginatorChange.emit()\">\r\n      </tb-generic-table-vs>\r\n    </div>\r\n\r\n\r\n    <ng-template #headerMenu>\r\n      <ng-container>\r\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\r\n        </tb-filter-displayer>\r\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\r\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-template #headerMenuExtra>\r\n      <button mat-menu-item (click)=\"resetState()\">\r\n        <mat-icon color=\"primary\">autorenew</mat-icon>\r\n        <span>Reset table</span>\r\n      </button>\r\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\r\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\r\n          <mat-icon>add</mat-icon>\r\n          <span>New</span>\r\n        </button>\r\n        <ng-container *ngFor='let key of stateKeys$ | async'>\r\n          <button mat-menu-item (click)='setProfileState(key)'>\r\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\r\n              <span style='display:flex;'>{{key}}</span>\r\n              <span style='display:flex;'>\r\n                <span style=\"width: 120px;\"></span>\r\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n              </span>\r\n            </div>\r\n          </button>\r\n        </ng-container>\r\n      </mat-menu>\r\n      <ng-container *opDialog='add'>\r\n        <mat-form-field>\r\n          <input style='width:90%' matInput #addedKey />\r\n        </mat-form-field>\r\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\r\n          [disabled]=\"!addedKey.value\">Add</button>\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n  </ng-container>\r\n\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], imports: [MultiSortDirective, LetDirective, GroupByListComponent, FilterChipsComponent, NgTemplateOutlet, MatIconButton, MatMenuTrigger, NgClass, MatIcon, MatMenu, MatTooltip, GenericTableComponent, GenericTableVsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent, SortMenuComponent, MatMenuItem, ClickEmitterDirective, StopPropagationDirective, DialogDirective, MatFormField, MatInput, MatButton, AsyncPipe], 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        @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n          <ng-content select=\".tb-header-title\"\n            >\n          </ng-content>\n        }\n        <group-by-list></group-by-list>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        @if (!tableSettings.hideHeader) {\n          @if (!(collapseHeader$ | async)) {\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          } @else {\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          }\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        }\n      </div>\n    </div>\n\n    @if (!_isVs) {\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\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [compareWithKey]=\"compareWithKey\">\n        </tb-generic-table>\n      </div>\n    }\n\n    @if (_isVs) {\n      <div style=\"clear: both;\">\n        <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n          [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n          [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          (paginatorChange)=\"paginatorChange.emit()\">\n        </tb-generic-table-vs>\n      </div>\n    }\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        @if (!tableSettings.hideFilter) {\n          <tb-filter-displayer>\n          </tb-filter-displayer>\n        }\n        @if (!tableSettings.hideColumnSettings) {\n          <tb-col-displayer></tb-col-displayer>\n        }\n        @if (!tableSettings.hideSort) {\n          <tb-sort-menu></tb-sort-menu>\n        }\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      @if (!tableSettings.hideExport) {\n        <button mat-menu-item (click)=\"exportToCsv()\">\n          <mat-icon color=\"primary\">file_download</mat-icon>\n          <span>Export Table</span>\n        </button>\n      }\n      @if (currentStateKey$ | async; as currentKey) {\n        @if (tableId) {\n          <button mat-menu-item (click)=\"saveState()\">\n            <mat-icon color=\"primary\">save</mat-icon>\n            <span>Save to {{currentKey}}</span>\n          </button>\n        }\n        @if (tableId) {\n          <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n            <span>Choose Profile</span>\n          </button>\n        }\n      }\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        @for (key of stateKeys$ | async; track key) {\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        }\n      </mat-menu>\n      <ng-container *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      </ng-container>\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: () => [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TableBuilderConfigToken]
-                }] }, { type: i3$4.Store }, { type: TableWrapperDirective, decorators: [{
+                }] }, { type: i3$2.Store }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { genericTableComponent: [{
                 type: ViewChild,
@@ -4464,12 +4188,12 @@ class SaveTableEffects {
             localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
         })), { dispatch: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects, deps: [{ token: i1$3.Actions }, { token: i3$4.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects, deps: [{ token: i1$5.Actions }, { token: i3$2.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: i3$4.Store }] });
+        }], ctorParameters: () => [{ type: i1$5.Actions }, { type: i3$2.Store }] });
 
 class TableBuilderModule {
     static forRoot(config) {
@@ -4482,7 +4206,14 @@ class TableBuilderModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: TableBuilderModule, declarations: [ColumnTotalPipe,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: TableBuilderModule, imports: [CommonModule, i3$2.StoreFeatureModule, i1$5.EffectsFeatureModule, FormsModule,
+            RouterModule,
+            LetDirective,
+            DragDropModule,
+            UtilitiesModule,
+            ScrollingModule,
+            TableVirtualScrollModule,
+            ColumnTotalPipe,
             TableContainerComponent,
             GenericTableComponent,
             GenericTableVsComponent,
@@ -4516,14 +4247,7 @@ class TableBuilderModule {
             TableFilterStringContainsDirective,
             TableWrapperDirective,
             GroupByListComponent,
-            DateTimeFilterComponent], imports: [CommonModule,
-            MaterialModule, i3$4.StoreFeatureModule, i1$3.EffectsFeatureModule, FormsModule,
-            RouterModule,
-            LetDirective,
-            DragDropModule,
-            UtilitiesModule,
-            ScrollingModule,
-            TableVirtualScrollModule], exports: [GenericTableComponent,
+            DateTimeFilterComponent], exports: [GenericTableComponent,
             GenericTableVsComponent,
             PaginatorComponent,
             TableContainerComponent,
@@ -4548,7 +4272,6 @@ class TableBuilderModule {
             CurrencyPipe,
             PhoneNumberPipe
         ], imports: [CommonModule,
-            MaterialModule,
             StoreModule.forFeature('globalStorageState', storageStateReducer),
             EffectsModule.forFeature([SaveTableEffects]),
             FormsModule,
@@ -4556,14 +4279,31 @@ class TableBuilderModule {
             DragDropModule,
             UtilitiesModule,
             ScrollingModule,
-            TableVirtualScrollModule] }); }
+            TableVirtualScrollModule,
+            TableContainerComponent,
+            GenericTableComponent,
+            GenericTableVsComponent,
+            PaginatorComponent,
+            GenColDisplayerComponent,
+            GenFilterDisplayerComponent,
+            DateFilterComponent,
+            FilterComponent,
+            NumberFilterComponent,
+            ColumnBuilderComponent,
+            HeaderMenuComponent,
+            InFilterComponent,
+            InitializationComponent,
+            InListFilterComponent,
+            SortMenuComponent,
+            FilterChipsComponent,
+            GroupByListComponent,
+            DateTimeFilterComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        MaterialModule,
                         StoreModule.forFeature('globalStorageState', storageStateReducer),
                         EffectsModule.forFeature([SaveTableEffects]),
                         FormsModule,
@@ -4573,18 +4313,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         UtilitiesModule,
                         ScrollingModule,
                         TableVirtualScrollModule,
-                    ],
-                    exports: [
+                        ColumnTotalPipe,
+                        TableContainerComponent,
                         GenericTableComponent,
                         GenericTableVsComponent,
                         PaginatorComponent,
-                        TableContainerComponent,
                         CustomCellDirective,
                         GenColDisplayerComponent,
                         GenFilterDisplayerComponent,
+                        DateFilterComponent,
                         FilterComponent,
                         MultiSortDirective,
+                        NumberFilterComponent,
+                        ColumnBuilderComponent,
+                        ArrayColumnComponent,
+                        LinkColumnComponent,
+                        HeaderMenuComponent,
+                        KeyDisplayPipe,
+                        FormatFilterValuePipe,
+                        FormatFilterTypePipe,
                         ResizeColumnDirective,
+                        InFilterComponent,
+                        InitializationComponent,
+                        InListFilterComponent,
+                        SortMenuComponent,
+                        FilterChipsComponent,
                         MatSlideToggleTbFilterDirective,
                         MatRadioButtonTbFilterDirective,
                         MatOptionTbFilterDirective,
@@ -4594,33 +4347,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         TableFilterStringContainsDirective,
                         TableWrapperDirective,
                         GroupByListComponent,
+                        DateTimeFilterComponent,
                     ],
-                    declarations: [
-                        ColumnTotalPipe,
-                        TableContainerComponent,
+                    exports: [
                         GenericTableComponent,
                         GenericTableVsComponent,
                         PaginatorComponent,
+                        TableContainerComponent,
                         CustomCellDirective,
                         GenColDisplayerComponent,
                         GenFilterDisplayerComponent,
-                        DateFilterComponent,
                         FilterComponent,
                         MultiSortDirective,
-                        NumberFilterComponent,
-                        ColumnBuilderComponent,
-                        ArrayColumnComponent,
-                        LinkColumnComponent,
-                        HeaderMenuComponent,
-                        KeyDisplayPipe,
-                        FormatFilterValuePipe,
-                        FormatFilterTypePipe,
                         ResizeColumnDirective,
-                        InFilterComponent,
-                        InitializationComponent,
-                        InListFilterComponent,
-                        SortMenuComponent,
-                        FilterChipsComponent,
                         MatSlideToggleTbFilterDirective,
                         MatRadioButtonTbFilterDirective,
                         MatOptionTbFilterDirective,
@@ -4630,7 +4369,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         TableFilterStringContainsDirective,
                         TableWrapperDirective,
                         GroupByListComponent,
-                        DateTimeFilterComponent,
                     ],
                     providers: [
                         SpaceCasePipe,
@@ -4751,7 +4489,7 @@ function actionStatusReducer(state = initialState, action) {
 
 class NgrxExtModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i3$4.StoreFeatureModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i3$2.StoreFeatureModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
             StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
 }
@@ -4783,24 +4521,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 type: Input
             }] } });
 
-/** @deprecated Import ActionStateSpinnerComponent directly instead. */
-class ActionStateUiModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ActionStateUiModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        ActionStateSpinnerComponent,
-                    ],
-                    exports: [
-                        ActionStateSpinnerComponent,
-                    ]
-                }]
-        }] });
-
 /*
  * Public API Surface of action-state
  */
@@ -4886,5 +4606,5 @@ const shallowEquals = (first, second) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
+export { ActionStateSpinnerComponent, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
 //# sourceMappingURL=saydar-table-builder.mjs.map