@one-paragon/angular-utilities 1.1.4 → 1.1.6

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, Injectable, assertInInjectionContext, DestroyRef, inject, Pipe, Optional, Injector, booleanAttribute, InjectionToken, makeEnvironmentProviders, Inject, HostListener, Component, ChangeDetectionStrategy, EventEmitter, Output, ContentChildren, ViewChild, input, computed, createComponent, forwardRef, ElementRef, ContentChild, APP_INITIALIZER } from '@angular/core';
-import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, distinctUntilChanged, last, first as first$1, distinctUntilKeyChanged, delay as delay$1, mergeAll as mergeAll$1, scan as scan$1, timestamp as timestamp$1, withLatestFrom } from 'rxjs/operators';
+import { Directive, Input, NgModule, Injectable, assertInInjectionContext, DestroyRef, inject, Pipe, Optional, Injector, booleanAttribute, InjectionToken, makeEnvironmentProviders, computed, Inject, HostListener, Component, ChangeDetectionStrategy, isSignal, untracked, EventEmitter, Output, ContentChildren, ViewChild, input, createComponent, viewChild, effect, forwardRef, output, signal, ElementRef, ContentChild, APP_INITIALIZER } from '@angular/core';
+import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, distinctUntilChanged, last, first as first$1, distinctUntilKeyChanged, delay as delay$1, debounceTime, mergeAll as mergeAll$1, scan as scan$1, timestamp as timestamp$1, withLatestFrom } from 'rxjs/operators';
 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 as merge$1, delay, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, distinctUntilChanged as distinctUntilChanged$1, timestamp, mergeAll, from } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
@@ -14,7 +14,7 @@ import * as i1 from '@angular/cdk/table';
 import * as i3 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i4 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
 import * as i5 from '@angular/material/slide-toggle';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i6 from '@angular/material/radio';
@@ -27,23 +27,24 @@ import { moveItemInArray, DragDropModule, CDK_DROP_LIST, CdkDropList, transferAr
 import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$2 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i4$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i7$1 from '@angular/material/form-field';
 import * as i2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i4$2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
 import * as i5$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import * as i3$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i9 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i15 from '@angular/material/menu';
+import * as i14 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i3$4 from '@ngrx/component';
 import { LetDirective } from '@ngrx/component';
@@ -52,12 +53,10 @@ import { MatChipsModule } from '@angular/material/chips';
 import * as i3$3 from '@angular/material/table';
 import { MatColumnDef, MatTableModule, MatTable, MatTableDataSource, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
-import { concatLatestFrom } from '@ngrx/operators';
 import * as i2$1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i2$2 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
-import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$5 from '@ngrx/store';
 import { createFeatureSelector, createSelector, StoreModule, Store } from '@ngrx/store';
 import { createEntityAdapter } from '@ngrx/entity';
@@ -150,10 +149,10 @@ class HttpRequestStateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestStateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: HttpRequestStateDirective, isStandalone: true, selector: "[httpRequestState]", inputs: { stateStore: ["httpRequestState", "stateStore"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestStateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: HttpRequestStateDirective, isStandalone: true, selector: "[httpRequestState]", inputs: { stateStore: ["httpRequestState", "stateStore"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpRequestState]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { stateStore: [{
@@ -185,10 +184,10 @@ class HttpStateDirectiveBase {
     }
     ngOnDestroy() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpStateDirectiveBase, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: HttpStateDirectiveBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpStateDirectiveBase, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: HttpStateDirectiveBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpStateDirectiveBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpStateDirectiveBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
 
@@ -209,10 +208,10 @@ class HttpErrorStateDirective extends HttpStateDirectiveBase {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpErrorStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: HttpErrorStateDirective, isStandalone: true, selector: "[httpErrorState]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpErrorStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: HttpErrorStateDirective, isStandalone: true, selector: "[httpErrorState]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpErrorStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpErrorStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpErrorState]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
@@ -234,10 +233,10 @@ class HttpInProgressStateDirective extends HttpStateDirectiveBase {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpInProgressStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: HttpInProgressStateDirective, isStandalone: true, selector: "[httpInProgressState]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpInProgressStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: HttpInProgressStateDirective, isStandalone: true, selector: "[httpInProgressState]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpInProgressStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpInProgressStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpInProgressState]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
@@ -259,10 +258,10 @@ class HttpNotStartedStateDirective extends HttpStateDirectiveBase {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpNotStartedStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: HttpNotStartedStateDirective, isStandalone: true, selector: "[httpNotStartedState]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpNotStartedStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: HttpNotStartedStateDirective, isStandalone: true, selector: "[httpNotStartedState]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpNotStartedStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpNotStartedStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpNotStartedState]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
@@ -287,10 +286,10 @@ class HttpSuccessStateDirective extends HttpStateDirectiveBase {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpSuccessStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: HttpSuccessStateDirective, isStandalone: true, selector: "[httpSuccessState]", inputs: { httpSuccessStateTypeSafety: "httpSuccessStateTypeSafety" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpSuccessStateDirective, deps: [{ token: i0.Injector }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: HttpSuccessStateDirective, isStandalone: true, selector: "[httpSuccessState]", inputs: { httpSuccessStateTypeSafety: "httpSuccessStateTypeSafety" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpSuccessStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpSuccessStateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[httpSuccessState]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { httpSuccessStateTypeSafety: [{
@@ -359,8 +358,8 @@ function chainRequest(httpState$, request, requestParams) {
 }
 
 class HttpRequestModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestModule, imports: [HttpSuccessStateDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestModule, imports: [HttpSuccessStateDirective,
             HttpRequestStateDirective,
             HttpErrorStateDirective,
             HttpInProgressStateDirective,
@@ -369,9 +368,9 @@ class HttpRequestModule {
             HttpErrorStateDirective,
             HttpInProgressStateDirective,
             HttpNotStartedStateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -474,10 +473,10 @@ class HttpRequestStateStore extends ComponentStore {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestStateStore, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: HttpRequestStateStore, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestStateStore, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: HttpRequestStateStore, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestStateStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestStateStore, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }, { type: undefined }, { type: undefined }] });
 class CancellationToken {
@@ -500,10 +499,10 @@ class HttpRequestStateFactory {
         this.requestors.push(requestor);
         return requestor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestStateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestStateFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestStateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestStateFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HttpRequestStateFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HttpRequestStateFactory, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 function createRequestor(req, optionsOrProject, options) {
@@ -536,10 +535,10 @@ class SpaceCasePipe {
     transform(value) {
         return spaceCase(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SpaceCasePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpaceCasePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'spaceCase', standalone: true }]
         }] });
@@ -619,7 +618,12 @@ class GeneralTableSettings {
             merge(this.footerSettings, settings.footerSettings);
             merge(this.columnHeaderSettings, settings.columnHeaderSettings);
             merge(this.tableSettings, settings.tableSettings);
+            if (settings.tableSettings?.useVirtualScroll) {
+                const currVirt = settings.tableSettings.useVirtualScroll === true ? new VirtualScrollOptions() : settings.tableSettings.useVirtualScroll;
+                this.tableSettings.useVirtualScroll = { ...new VirtualScrollOptions(), ...currVirt };
+            }
         }
+        this.injector = settings?.injector;
     }
 }
 class TableWrapperHeaderSettings {
@@ -631,6 +635,7 @@ class TableWrapperHeaderSettings {
         this.hideSort = false;
         this.collapse = false;
         this.showTitleWhenCollapsed = true;
+        this.headerHeight = undefined;
     }
 }
 class TableWrapperFooterSettings {
@@ -648,6 +653,8 @@ class TableSettings {
     constructor() {
         this.usePaginator = true;
         this.useVirtualScroll = null;
+        this.includeAllInPaginatorOptions = false;
+        this.rowHeight = undefined;
     }
 }
 class PersistedTableSettings {
@@ -672,6 +679,8 @@ class NotPersistedTableSettings {
         this.hideColumnHeader = true;
         this.usePaginator = true;
         this.useVirtualScroll = null;
+        this.includeAllInPaginatorOptions = false;
+        this.headerHeight = undefined;
         if (tableSettings) {
             this.hideExport = tableSettings.headerSettings.hideExport;
             this.hideColumnSettings = tableSettings.headerSettings.hideColumnSettings;
@@ -683,13 +692,24 @@ class NotPersistedTableSettings {
             this.hideColumnHeader = tableSettings.columnHeaderSettings.noHeader;
             this.usePaginator = tableSettings.tableSettings.usePaginator;
             this.useVirtualScroll = tableSettings.tableSettings.useVirtualScroll;
+            this.includeAllInPaginatorOptions = tableSettings.tableSettings.includeAllInPaginatorOptions;
+            this.rowHeight = tableSettings.tableSettings.rowHeight;
+            this.headerHeight = tableSettings.headerSettings.headerHeight;
         }
     }
 }
 class VirtualScrollOptions {
     constructor() {
-        this.itemHeight = 48;
-        this.headerOffset = 56;
+        this.virtualAsDefault = true;
+        this.rowHeight = 48;
+        this.enforceRowHeight = true;
+        this.headerHeight = 56;
+        this.enforceHeaderHeight = true;
+        this.amountOfVisibleItems = 10;
+        /**
+         * This will win over `amountOfVisibleItems`
+         */
+        this.maxViewPortHeight = undefined;
     }
 }
 
@@ -703,9 +723,10 @@ class KeysToDelete {
         this.currentPage = null;
         this.virtualScrollOffset = null;
         this.dataLen = null;
-        this.virtualStart = null;
+        this.virtualEnds = null;
         this.virtualEnd = null;
         this.props = null;
+        this.showAll = null;
     }
 }
 const keysToDelete = Object.keys(new KeysToDelete());
@@ -731,9 +752,11 @@ const defaultTableState = {
     currentPage: 0,
     virtualScrollOffset: 0,
     dataLen: 0,
-    virtualStart: 0,
-    virtualEnd: 20,
-    props: {}
+    virtualEnds: {
+        start: 0, end: 20
+    },
+    props: {},
+    showAll: false,
 };
 
 // here is how to use it
@@ -771,10 +794,10 @@ class CustomCellDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CustomCellDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1.CdkColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth", customCellTableRef: "customCellTableRef", customCellNotMapped: "customCellNotMapped" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CustomCellDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1.CdkColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth", customCellTableRef: "customCellTableRef", customCellNotMapped: "customCellNotMapped" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CustomCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CustomCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[customCell]',
@@ -922,26 +945,28 @@ class Subscriber {
             subscription.unsubscribe();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: Subscriber, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: Subscriber, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: Subscriber, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: Subscriber, decorators: [{
             type: Directive
         }] });
-function subscriber(obsOrSub, actionOrInjector, injector) {
-    const destroyRef = getDestroyRef(actionOrInjector, injector);
+function subscriber(obsOrSubOrInjector, actionOrInjector, injector) {
+    const destroyRef = getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector);
     const subscriber = new Subscriber();
-    if (obsOrSub instanceof Subscription) {
-        subscriber.handle(obsOrSub);
+    if (obsOrSubOrInjector instanceof Subscription) {
+        subscriber.handle(obsOrSubOrInjector);
     }
-    else if (obsOrSub instanceof Observable) {
-        subscriber.handle(obsOrSub.subscribe(actionOrInjector));
+    else if (obsOrSubOrInjector instanceof Observable) {
+        subscriber.handle(obsOrSubOrInjector.subscribe(actionOrInjector));
     }
     destroyRef.onDestroy(() => subscriber?.ngOnDestroy());
     return subscriber;
 }
-function getDestroyRef(actionOrInjector, injector) {
-    const providedInjector = actionOrInjector instanceof Injector ? actionOrInjector : injector;
+function getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector) {
+    const providedInjector = obsOrSubOrInjector instanceof Injector ? obsOrSubOrInjector
+        : actionOrInjector instanceof Injector ? actionOrInjector
+            : injector;
     if (!providedInjector) {
         try {
             assertInInjectionContext(subscriber);
@@ -1020,10 +1045,10 @@ class ResizeColumnDirective {
         const newTableWidth = (mouseDownData.startTableWidth + columnChange);
         return ({ newTableWidth, newColumnWidth });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ResizeColumnDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0", type: ResizeColumnDirective, isStandalone: true, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable", booleanAttribute], key: "key" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ResizeColumnDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.2", type: ResizeColumnDirective, isStandalone: true, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable", booleanAttribute], key: "key" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ResizeColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ResizeColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[resizeColumn]",
@@ -1043,10 +1068,10 @@ class TableWrapperDirective {
     register(filter) {
         this.registrations.push(filter);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableWrapperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tbWrapper]',
@@ -1135,10 +1160,10 @@ class TableCustomFilterDirective {
         this.savable = false;
         this.used = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: TableCustomFilterDirective, selector: " ", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: TableCustomFilterDirective, selector: " ", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ' '
@@ -1209,10 +1234,10 @@ class TableFilterDirective extends ComponentStore {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableFilterDirective, deps: [{ token: i3.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableFilterDirective, deps: [{ token: i3.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.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: "18.0.0", ngImport: i0, type: TableFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[tbFilter]",
@@ -1263,10 +1288,10 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
         }
         super.ngOnChanges(changes);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i3.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i3.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.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: "18.0.0", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tbFilterStringContains]',
@@ -1325,10 +1350,10 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
         this.ready = true;
         this.filter$ = new BehaviorSubject(this.filter);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: TableCustomFilterDirectiveBase, selector: "[tbCustomFilter]", inputs: { filterId: "filterId", predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: TableCustomFilterDirectiveBase, selector: "[tbCustomFilter]", inputs: { filterId: "filterId", predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
             type: Directive,
             args: [{
                     selector: "[tbCustomFilter]",
@@ -1364,10 +1389,10 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
             this.active = this.isActive();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: TbSelectedFilterDirective, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: TbSelectedFilterDirective, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i3$1.Observable }, { type: undefined }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
@@ -1382,10 +1407,10 @@ class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
         super(matCheckbox.change, () => matCheckbox.checked, wrapper);
         this.matCheckbox = matCheckbox;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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: "18.0.0", type: MatCheckboxTbFilterDirective, isStandalone: true, 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: "18.1.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: "18.1.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: "18.0.0", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-checkbox[tbCustomFilter]',
@@ -1410,10 +1435,10 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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: "18.0.0", type: MatSlideToggleTbFilterDirective, isStandalone: true, 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: "18.1.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: "18.1.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: "18.0.0", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-slide-toggle[tbCustomFilter]',
@@ -1439,10 +1464,10 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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: "18.0.0", type: MatRadioButtonTbFilterDirective, isStandalone: true, 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: "18.1.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: "18.1.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: "18.0.0", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-radio-button[tbCustomFilter]',
@@ -1475,10 +1500,10 @@ class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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: "18.0.0", type: MatOptionTbFilterDirective, isStandalone: true, 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: "18.1.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: "18.1.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: "18.0.0", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-option[tbCustomFilter]',
@@ -1504,10 +1529,10 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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: "18.0.0", type: MatButtonToggleFilterDirective, isStandalone: true, 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: "18.1.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: "18.1.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: "18.0.0", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-button-toggle[tbCustomFilter]',
@@ -1531,10 +1556,10 @@ class PhoneNumberPipe {
             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: "18.0.0", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PhoneNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PhoneNumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'phone', standalone: true }]
         }] });
@@ -1778,6 +1803,15 @@ class TableStore extends ComponentStore {
     constructor(config) {
         super({ ...defaultTableState, ...config.defaultTableState });
         this.selectStateReady = this.select(state => state.initializationState).pipe(filter(i => i === InitializationState.Ready));
+        this.getSavableStateSignal = computed(() => {
+            const state = this.state();
+            return this.mapSaveableState(state);
+        });
+        this.mapSaveableState = (s) => {
+            const savableState = { ...s };
+            keysToDelete.forEach(key => delete savableState[key]);
+            return savableState;
+        };
         this.on = (srcObservable, func) => {
             this.effect(() => srcObservable.pipe(tap(func)));
             return this;
@@ -1795,11 +1829,8 @@ class TableStore extends ComponentStore {
         this.getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
         this.displayedColumns$ = this.select(orderedVisibleColumns);
         this.resetState = this.updater((state) => {
-            const hiddenKeys = Object.values(state.metaData)
-                .filter(md => md.fieldType === FieldType.Hidden)
-                .map(md => md.key);
             const sorted = this.createPreSort(state.metaData);
-            return ({ ...state, hiddenKeys, sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
+            return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
         });
         this.showColumn = this.updater((state, key) => ({
             ...state,
@@ -1810,11 +1841,7 @@ class TableStore extends ComponentStore {
             hiddenKeys: [...state.hiddenKeys.filter(k => k !== key), key],
         }));
         this.setHiddenColumns = this.updater((state, displayCols) => {
-            var hiddenKeysSet = new Set([
-                ...displayCols.filter(col => !col.visible).map(col => col.key),
-                ...Object.values(state.metaData).filter(md => md.fieldType === FieldType.Hidden).map(md => md.key)
-            ]);
-            return ({ ...state, hiddenKeys: [...hiddenKeysSet] });
+            return ({ ...state, hiddenKeys: displayCols.filter(d => !d.visible).map(d => d.key) });
         });
         this.setUserDefinedWidth = this.updater((state, colWidths) => {
             const userDefinedWidths = { ...state.userDefined.widths };
@@ -2046,12 +2073,11 @@ class TableStore extends ComponentStore {
         this.getIsExpanded = (columnKey, groupHeaderKey) => {
             return this.select(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupHeaderKey)).length);
         };
+        this.$isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll === true || state.notPersistedTableSettings.useVirtualScroll?.virtualAsDefault || state.showAll);
     }
     getSavableState() {
         return this.state$.pipe(map(s => {
-            const savableState = { ...s };
-            keysToDelete.forEach(key => delete savableState[key]);
-            return savableState;
+            return this.mapSaveableState(s);
         }));
     }
     onLast(callback) {
@@ -2075,10 +2101,10 @@ class TableStore extends ComponentStore {
     onReady(func) {
         this.runOnceWhen(stateIs(InitializationState.Ready), func);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableStore, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableStore, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2129,12 +2155,12 @@ class MultiSortDirective extends MatSort {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: MultiSortDirective, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MultiSortDirective, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
             { provide: MatSort, useExisting: MultiSortDirective }
         ], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: MultiSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MultiSortDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[multiSort]',
@@ -2162,10 +2188,10 @@ class PreventEnterDirective {
     onKeyDown() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PreventEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PreventEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'preventEnter',
@@ -2183,10 +2209,10 @@ class StopPropagationDirective {
     onMousedown(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: StopPropagationDirective, isStandalone: true, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.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: "18.0.0", ngImport: i0, type: StopPropagationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: StopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[stop-propagation]",
@@ -2212,10 +2238,10 @@ class AutoFocusDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: AutoFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: AutoFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[autoFocus]',
@@ -2232,10 +2258,10 @@ class ClickSubjectDirective extends Subject {
     set clickSubject(val) {
         this._val = val;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: ClickSubjectDirective, isStandalone: true, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.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: "18.0.0", ngImport: i0, type: ClickSubjectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClickSubjectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickSubject]',
@@ -2254,10 +2280,10 @@ class ClickEmitterDirective extends Subject {
     constructor() {
         super();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: ClickEmitterDirective, isStandalone: true, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.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: "18.0.0", ngImport: i0, type: ClickEmitterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClickEmitterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickEmitter]',
@@ -2282,10 +2308,10 @@ class DialogService {
     closeAllOpDialogs() {
         this.allOpenOpDialogs.forEach(ref => ref.close());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2312,10 +2338,10 @@ class DialogWrapper {
             close: () => { },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DialogWrapper, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DialogWrapper, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DialogWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DialogWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'dialog-wrapper',
@@ -2334,8 +2360,17 @@ class DialogDirective {
     get opDialogConfig() {
         return this._dialogConfig;
     }
-    set state(open_close) {
-        this._data.next(open_close);
+    set setControl(i) {
+        let o;
+        if (isSignal(i)) {
+            o = toObservable(i, { injector: this.injector });
+        }
+        else {
+            o = i;
+        }
+        untracked(() => {
+            this.subscriber.on(o, this.setDataAndState);
+        });
     }
     constructor(templateRef, dialog, service) {
         this.templateRef = templateRef;
@@ -2344,16 +2379,18 @@ class DialogDirective {
         this.opDialogClosed = new EventEmitter();
         this._dialogConfig = defaultDialogConfig;
         this.opDialogAddDialogClass = true;
+        this.injector = inject(Injector);
+        this.subscriber = subscriber(this.injector);
         this._data = new Subject();
-        this.subscription = this._data.pipe(switchAll()).subscribe(d => {
-            if (d) {
-                this.opDialogConfig.data = d;
+        this.setDataAndState = (data) => {
+            if (data) {
+                this.opDialogConfig.data = data;
                 this.setDialogState(true);
             }
             else {
                 this.setDialogState(false);
             }
-        });
+        };
     }
     close() {
         this.dialogRef?.close();
@@ -2395,18 +2432,13 @@ class DialogDirective {
             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: "18.0.0", 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: "18.0.0", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { opDialogAddDialogClass: "opDialogAddDialogClass", opDialogConfig: "opDialogConfig", state: ["opDialog", "state"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.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: "18.1.2", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { opDialogAddDialogClass: "opDialogAddDialogClass", opDialogConfig: "opDialogConfig", setControl: ["opDialog", "setControl"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DialogDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[opDialog]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i1$1.MatDialog }, { type: DialogService }], propDecorators: { opDialogClosed: [{
@@ -2415,7 +2447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 type: Input
             }], opDialogConfig: [{
                 type: Input
-            }], state: [{
+            }], setControl: [{
                 type: Input,
                 args: ['opDialog']
             }], nativeElement: [{
@@ -2448,10 +2480,10 @@ class StylerDirective {
         this.renderer = renderer;
         this.stylesApplied = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { element: "element", styler: "styler" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { element: "element", styler: "styler" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StylerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: StylerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[styler]',
@@ -2502,10 +2534,10 @@ class MatSlideToggleGroupDirective {
             return newVal;
         }, startValue), startWith$1(startValue));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: MatSlideToggleGroupDirective, isStandalone: true, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.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: "18.0.0", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[opMatSlideToggleGroup]',
                     standalone: true
@@ -2533,10 +2565,10 @@ class TrimWhitespaceDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TrimWhitespaceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TrimWhitespaceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[trimWhitespace]',
@@ -2556,10 +2588,10 @@ class FunctionPipe {
         }
         return func(...args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FunctionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FunctionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'func',
@@ -2585,10 +2617,10 @@ class ConditionalClassesDirective {
         classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
         this.classesApplied = toApply;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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: "18.0.0", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { element: "element", classes: ["conditionalClasses", "classes"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.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: "18.1.2", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { element: "element", classes: ["conditionalClasses", "classes"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[conditionalClasses]',
@@ -2602,8 +2634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             }] } });
 
 class UtilitiesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
             PhoneNumberPipe,
             FunctionPipe,
             StopPropagationDirective,
@@ -2630,11 +2662,11 @@ class UtilitiesModule {
             DialogDirective,
             MatSlideToggleGroupDirective,
             ConditionalClassesDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: UtilitiesModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: UtilitiesModule, providers: [
             DialogService
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: UtilitiesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: UtilitiesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -2679,10 +2711,10 @@ class DateFilterComponent {
     constructor() {
         this.FilterType = FilterType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <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 />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(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 />\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 />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <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 />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(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 />\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 />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DateFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         MatInputModule, FormsModule, MatDatepickerModule, PreventEnterDirective
@@ -2731,14 +2763,14 @@ class InFilterComponent {
         this.ref.markForCheck();
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.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  @for (val of value; track $index) {\r\n    <div>\r\n      @if(type === FieldType.Number || type === FieldType.Currency){\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n      }\r\n      @else {\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"$index === value.length - 1\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1) {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n    \r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: "18.0.0", ngImport: i0, type: InFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2756,10 +2788,10 @@ class NumberFilterComponent {
         this.FilterType = FilterType;
         this.FieldType = FieldType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", 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){\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}\r\n@if(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}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.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){\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}\r\n@if(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}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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: "18.0.0", ngImport: i0, type: NumberFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         MatInputModule, FormsModule, InFilterComponent
@@ -2774,10 +2806,10 @@ class DateTimeFilterComponent {
     constructor() {
         this.FilterType = FilterType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if(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}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween){\r\n  <ng-container 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>\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.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){\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween){\r\n  <ng-container 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>\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         FormsModule, PreventEnterDirective
@@ -2834,8 +2866,8 @@ class InListFilterComponent {
         this.value = this.selectedKeys;
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: InListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: InListFilterComponent, isStandalone: true, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.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: "18.1.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
@@ -2850,7 +2882,7 @@ class InListFilterComponent {
 
   `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: InListFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-in-list-filter , [tb-in-list-filter]',
@@ -2898,10 +2930,10 @@ class FilterComponent {
             this.close.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\r\n<mat-card appearance=\"outlined\" class=\"filter-card\">\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\" [panelWidth]=\"null\">\r\n                  @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\r\n                    <mat-option [value]=\"kvp.value\">\r\n                      {{ kvp.key }}\r\n                    </mat-option>\r\n                  }\r\n                </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          @if(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\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\r\n            <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Boolean){\r\n            <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Date){\r\n            <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.DateTime){\r\n            <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Enum){\r\n            <ng-container *ngTemplateOutlet=\"Enum\" />\r\n          }\r\n\r\n          @if(currentFilterType === FilterType.IsNull){\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\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          }\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      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\r\n        <mat-form-field class=\"my-filter\">\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n        </mat-form-field>\r\n      } @else if(currentFilterType === FilterType.In) {\r\n        <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\r\n      }\r\n    </ng-template>\r\n    \r\n    <ng-template #Boolean >\r\n      @if(currentFilterType === FilterType.BooleanEquals){\r\n        <div class=\"switch\">\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      }\r\n    </ng-template>\r\n    <ng-template #Enum>\r\n      @if(currentFilterType === FilterType.In){\r\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n\r\n      }\r\n    </ng-template>\r\n    </form>\r\n  </mat-card-content>\r\n</mat-card>\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: "ngmodule", type: MatCardModule }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { 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: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\r\n<mat-card appearance=\"outlined\" class=\"filter-card\">\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\" [panelWidth]=\"null\">\r\n                  @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\r\n                    <mat-option [value]=\"kvp.value\">\r\n                      {{ kvp.key }}\r\n                    </mat-option>\r\n                  }\r\n                </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          @if(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\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\r\n            <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Boolean){\r\n            <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Date){\r\n            <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.DateTime){\r\n            <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Enum){\r\n            <ng-container *ngTemplateOutlet=\"Enum\" />\r\n          }\r\n\r\n          @if(currentFilterType === FilterType.IsNull){\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\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          }\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      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\r\n        <mat-form-field class=\"my-filter\">\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n        </mat-form-field>\r\n      } @else if(currentFilterType === FilterType.In) {\r\n        <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\r\n      }\r\n    </ng-template>\r\n    \r\n    <ng-template #Boolean >\r\n      @if(currentFilterType === FilterType.BooleanEquals){\r\n        <div class=\"switch\">\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      }\r\n    </ng-template>\r\n    <ng-template #Enum>\r\n      @if(currentFilterType === FilterType.In){\r\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n\r\n      }\r\n    </ng-template>\r\n    </form>\r\n  </mat-card-content>\r\n</mat-card>\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: "ngmodule", type: MatCardModule }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { 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: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
@@ -2939,10 +2971,10 @@ class GenColDisplayerComponent {
     emit(displayCols) {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(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      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\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          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.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: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(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      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\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          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
@@ -2964,10 +2996,10 @@ class WrapperFilterStore extends ComponentStore {
             return ({ ...state, filterInfo: [...state.filterInfo, filter] });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: WrapperFilterStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: WrapperFilterStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: WrapperFilterStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: WrapperFilterStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2980,10 +3012,10 @@ class GenFilterDisplayerComponent {
     addFilter(metaData) {
         this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", 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\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  @for (md of filterCols$ | async; track md.key) {\r\n    <button (click)=\"addFilter(md)\" mat-menu-item>\r\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n    </button>\r\n  }\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}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.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\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  @for (md of filterCols$ | async; track md.key) {\r\n    <button (click)=\"addFilter(md)\" mat-menu-item>\r\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n    </button>\r\n  }\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}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
@@ -2998,10 +3030,10 @@ class KeyDisplayPipe {
     transform(key) {
         return this.tableState.getMetaData$(key).pipe(map(metaData => metaData.displayName || spaceCase(key)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: KeyDisplayPipe, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: KeyDisplayPipe, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: KeyDisplayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: KeyDisplayPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'keyDisplay', standalone: true }]
         }], ctorParameters: () => [{ type: TableStore }] });
@@ -3013,10 +3045,10 @@ class FormatFilterTypePipe {
         }
         return filterType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'formatFilterType', standalone: true }]
         }] });
@@ -3049,10 +3081,10 @@ class FormatFilterValuePipe {
             return value;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FormatFilterValuePipe, deps: [{ token: TableStore }, { token: i1$3.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FormatFilterValuePipe, deps: [{ token: TableStore }, { token: i1$3.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'formatFilterValue', standalone: true }]
         }], ctorParameters: () => [{ type: TableStore }, { type: i1$3.DatePipe }] });
@@ -3073,10 +3105,10 @@ class FilterChipsComponent {
     clearAll() {
         this.filterStore.clearAll();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  @if (currentFilters.length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of currentFilters; track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    @for (filter of filters; track filter.key) {\r\n      <mat-chip (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    }\r\n    @if (filters.length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\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}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$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", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  @if (currentFilters.length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of currentFilters; track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    @for (filter of filters; track filter.key) {\r\n      <mat-chip (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    }\r\n    @if (filters.length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\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}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$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", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FilterChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
@@ -3143,15 +3175,15 @@ class HeaderMenuComponent {
             this.trigger.closeMenu();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: HeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\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  }\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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (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      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n      }\r\n      @else if(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      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\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\">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\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (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      }\r\n      @else if (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      }\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  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.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: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: HeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\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  }\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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (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      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n      }\r\n      @else if(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      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\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\">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\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (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      }\r\n      @else if (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      }\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  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.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: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: HeaderMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
                         MatInputModule, MatTooltipModule, NgClass, StopPropagationDirective, MatRadioModule, MatDatepickerModule
-                    ], 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\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  }\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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (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      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n      }\r\n      @else if(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      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\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\">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\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (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      }\r\n      @else if (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      }\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  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;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"] }]
+                    ], 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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\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  }\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  @if (!(metaData.fieldType === FieldType.NotMapped))\r\n  {\r\n    <ng-form #myForm=\"ngForm\" (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      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n      }\r\n      @else if(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      }\r\n      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n        <mat-form-field class=\"auto-width\" stop-propagation>\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\">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\">=</span>\r\n            </button>\r\n          </span>\r\n        </mat-form-field>\r\n      }\r\n      @else if (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      }\r\n      @else if (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      }\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  }\r\n</mat-menu>\r\n", styles: [":host{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;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: { metaData: [{
                 type: Input
             }], trigger: [{
@@ -3167,10 +3199,10 @@ class ColumnTotalPipe {
                 return sumBy(dataToCalculate, metaData.key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ColumnTotalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ColumnTotalPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnTotal',
@@ -3287,10 +3319,10 @@ class TransformCreator {
         }
         return defaultFunc;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TransformCreator, deps: [{ token: i1$3.DatePipe }, { token: i1$3.CurrencyPipe }, { token: PhoneNumberPipe }, { token: SpaceCasePipe }, { token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TransformCreator, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TransformCreator, deps: [{ token: i1$3.DatePipe }, { token: i1$3.CurrencyPipe }, { token: PhoneNumberPipe }, { token: SpaceCasePipe }, { token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TransformCreator, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TransformCreator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TransformCreator, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3309,8 +3341,8 @@ class RouterLinkColumnComponent {
         this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()));
         this.routerLinkOptions = computed(() => this.additional().routerLinkOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", type: RouterLinkColumnComponent, isStandalone: true, selector: "tb-router-link-column", inputs: { additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.2", type: RouterLinkColumnComponent, isStandalone: true, selector: "tb-router-link-column", inputs: { additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
   <a target="{{additional().target}}"
     [routerLink]=" [link()]"
     [queryParams]="queryParams()"
@@ -3322,7 +3354,7 @@ class RouterLinkColumnComponent {
   </a>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "tb-router-link-column",
@@ -3351,15 +3383,15 @@ class LinkColumnComponent {
         this.additional = input.required();
         this.link = computed(() => this.additional().link(this.element()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.2", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
   <a target="{{additional().target}}"
       href="{{link()}}">
       {{value()}}
   </a>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: LinkColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: LinkColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "tb-link-column",
@@ -3380,14 +3412,14 @@ class ArrayCommaColumnComponent {
         this.additional = input(3);
         this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayCommaColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: ArrayCommaColumnComponent, isStandalone: true, selector: "tb-comma-array-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ArrayCommaColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: ArrayCommaColumnComponent, isStandalone: true, selector: "tb-comma-array-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
   @for(val of displayArray(); track $index){
           {{val + (!$last ? ',' : '')}}
         }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayCommaColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ArrayCommaColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-comma-array-column',
@@ -3406,15 +3438,15 @@ class ArrayNewLineColumnComponent {
         this.additional = input(3);
         this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayNewLineColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: ArrayNewLineColumnComponent, isStandalone: true, selector: "tb-new-line-array-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ArrayNewLineColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: ArrayNewLineColumnComponent, isStandalone: true, selector: "tb-new-line-array-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
   @for(val of displayArray(); track $index){
           {{val}}
           @if(!$last){ <br/> }
         }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayNewLineColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ArrayNewLineColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-new-line-array-column',
@@ -3430,10 +3462,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
         }] });
 
 class InitializationComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], 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-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value'>\r\n  <span>{{ value }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value'>\r\n  <mat-icon>{{ value}}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["value", "element", "additional"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "value"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], 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-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value'>\r\n  <span>{{ value }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value'>\r\n  <mat-icon>{{ value}}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["value", "element", "additional"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "value"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: InitializationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: InitializationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'initialization', standalone: true, imports: [
                         LinkColumnComponent, ArrayCommaColumnComponent, MatIconModule, FunctionPipe,
@@ -3505,10 +3537,10 @@ class TableTemplateService {
         this.instance = c.instance;
         this.initTemplates();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableTemplateService, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableTemplateService, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableTemplateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableTemplateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
@@ -3592,12 +3624,12 @@ class ColumnBuilderComponent {
             this.metaData.click(element, key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$3.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", 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  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\" \r\n      [class]='metaData.additional?.columnPartClasses?.header'>\r\n      <div class=\"header-container\" cdkDragHandle>\r\n        @if(!customCell?.columnDef?.headerCell)\r\n        {\r\n            @if(metaData.fieldType !== FieldType.NotMapped  && !customCell?.columnDef?.cell){\r\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            } @else if(metaData.fieldType === FieldType.NotMapped){\r\n              <div style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            }\r\n            @if(!customCell?.columnDef?.cell && (showFilters$ | async)){\r\n              <tb-header-menu #menu [metaData]='metaData' />\r\n            }\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    </mat-header-cell>\r\n  </ng-template>\r\n\r\n  <!-- body -->\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n  </ng-container>\r\n  <ng-template #body let-element='element' >\r\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\r\n    </mat-cell>\r\n  </ng-template>\r\n  \r\n  <!-- footer -->\r\n  <ng-template matFooterCellDef>\r\n    @if(customCell?.columnDef?.footerCell){\r\n      <ng-container\r\n      *ngTemplateOutlet=\"customCell!.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n    } @else {\r\n      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\r\n        @if(!!data?.length && metaData.additional?.footer){\r\n          <span class=\"bold\">\r\n            @switch (metaData.fieldType) {\r\n              @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n              @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n            }\r\n          </span>\r\n        }\r\n        \r\n      </mat-footer-cell>\r\n    }\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: "ngmodule", type: MatTableModule }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$3.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", 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  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\" \r\n      [class]='metaData.additional?.columnPartClasses?.header'>\r\n      <div class=\"header-container\" cdkDragHandle>\r\n        @if(!customCell?.columnDef?.headerCell)\r\n        {\r\n            @if(metaData.fieldType !== FieldType.NotMapped  && !customCell?.columnDef?.cell){\r\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            } @else if(metaData.fieldType === FieldType.NotMapped){\r\n              <div style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            }\r\n            @if(!customCell?.columnDef?.cell && (showFilters$ | async)){\r\n              <tb-header-menu #menu [metaData]='metaData' />\r\n            }\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    </mat-header-cell>\r\n  </ng-template>\r\n\r\n  <!-- body -->\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n  </ng-container>\r\n  <ng-template #body let-element='element' >\r\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\r\n    </mat-cell>\r\n  </ng-template>\r\n  \r\n  <!-- footer -->\r\n  <ng-template matFooterCellDef>\r\n    @if(customCell?.columnDef?.footerCell){\r\n      <ng-container\r\n      *ngTemplateOutlet=\"customCell!.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n    } @else {\r\n      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\r\n        @if(!!data?.length && metaData.additional?.footer){\r\n          <span class=\"bold\">\r\n            @switch (metaData.fieldType) {\r\n              @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n              @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n            }\r\n          </span>\r\n        }\r\n        \r\n      </mat-footer-cell>\r\n    }\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: "ngmodule", type: MatTableModule }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
             { provide: CDK_DROP_LIST, useExisting: CdkDropList },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
@@ -3655,10 +3687,12 @@ class GenericTableComponent {
     }
     set trackBy(trackBy) {
         if (trackBy) {
+            this._trackBy = trackBy;
             this.trackByFunction = (index, item) => item[trackBy];
         }
         this.setUpSelections(trackBy);
     }
+    get trackBy() { return this._trackBy; }
     constructor(state, viewContainer, transformCreator, injector) {
         this.state = state;
         this.viewContainer = viewContainer;
@@ -3705,6 +3739,24 @@ class GenericTableComponent {
                 return val;
             }
         };
+        this.$rowHeight = this.state.selectSignal(s => {
+            if (this.state.$isVirtual() && s.notPersistedTableSettings.useVirtualScroll?.enforceRowHeight) {
+                return s.notPersistedTableSettings.useVirtualScroll.rowHeight + 'px';
+            }
+            if (typeof s.notPersistedTableSettings.rowHeight === 'number') {
+                return s.notPersistedTableSettings.rowHeight + 'px';
+            }
+            return s.notPersistedTableSettings.rowHeight;
+        });
+        this.$headerHeight = this.state.selectSignal(s => {
+            if (this.state.$isVirtual() && s.notPersistedTableSettings.useVirtualScroll?.enforceHeaderHeight) {
+                return s.notPersistedTableSettings.useVirtualScroll.headerHeight + 'px';
+            }
+            if (typeof s.notPersistedTableSettings.headerHeight === 'number') {
+                return s.notPersistedTableSettings.headerHeight + 'px';
+            }
+            return s.notPersistedTableSettings.headerHeight;
+        });
         this.injector = Injector.create({
             providers: [
                 { provide: MatTable, useFactory: () => this.table },
@@ -3753,7 +3805,7 @@ class GenericTableComponent {
         }));
         if (this.state.tableSettings().usePaginator || this.state.tableSettings().useVirtualScroll) {
             this.state.on(this.state.state$, (state) => {
-                this.offsetIndex = state.virtualStart;
+                this.offsetIndex = state.virtualEnds.start;
                 if (this.state.tableSettings().usePaginator) {
                     this.offsetIndex += (state.pageSize * state.currentPage);
                 }
@@ -3797,15 +3849,15 @@ class GenericTableComponent {
             this.selection.clear() :
             this.selection.select(...this.state.props().dataSource.data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GenericTableComponent, deps: [{ token: TableStore }, { token: i0.ViewContainerRef }, { token: TransformCreator }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$", rows: "rows", columnBuilders: "columnBuilders", columnInfos: "columnInfos" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async\"\r\n>\r\n\r\n  <!-- select column -->\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\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"$event ? selection.toggle(row) : null\"\r\n      [checked]=\"selection.isSelected(row)\"/>\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  <!-- index column -->\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;\">\r\n         {{ 1 + i + offsetIndex}}\r\n      </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n          @if(!expanded){\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{getTransform | func : row.key :  row.groupHeaderDisplay}} ({{row.length}})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"  />\r\n  }\r\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: state.props().stickyFooter \"  [style.bottom.px]=\"state.props().stickyFooter ? (offset$ | async) : undefined\"  />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: TableStore }, { token: i0.ViewContainerRef }, { token: TransformCreator }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$", rows: "rows", columnBuilders: "columnBuilders", columnInfos: "columnInfos" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async\"\r\n>\r\n\r\n  <!-- select column -->\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\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"$event ? selection.toggle(row) : null\"\r\n      [checked]=\"selection.isSelected(row)\"/>\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  <!-- index column -->\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;\">\r\n         {{ 1 + i + offsetIndex}}\r\n      </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n          @if(!expanded){\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{getTransform | func : row.key :  row.groupHeaderDisplay}} ({{row.length}})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\" *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"  />\r\n  }\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\" *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\" *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\" *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: state.props().stickyFooter \"  [style.bottom.px]=\"state.props().stickyFooter ? (offset$ | async) : undefined\"  />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GenericTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
                         MatTooltipModule, AsyncPipe, LetDirective, FunctionPipe,
-                    ], 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async\"\r\n>\r\n\r\n  <!-- select column -->\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\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"$event ? selection.toggle(row) : null\"\r\n      [checked]=\"selection.isSelected(row)\"/>\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  <!-- index column -->\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;\">\r\n         {{ 1 + i + offsetIndex}}\r\n      </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n          @if(!expanded){\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{getTransform | func : row.key :  row.groupHeaderDisplay}} ({{row.length}})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"  />\r\n  }\r\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: state.props().stickyFooter \"  [style.bottom.px]=\"state.props().stickyFooter ? (offset$ | async) : undefined\"  />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"] }]
+                    ], 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  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async\"\r\n>\r\n\r\n  <!-- select column -->\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\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"$event ? selection.toggle(row) : null\"\r\n      [checked]=\"selection.isSelected(row)\"/>\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  <!-- index column -->\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;\">\r\n         {{ 1 + i + offsetIndex}}\r\n      </mat-cell>\r\n      <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n          @if(!expanded){\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{getTransform | func : row.key :  row.groupHeaderDisplay}} ({{row.length}})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if(showHeader$ | async){\r\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\" *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"  />\r\n  }\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\" *matRowDef=\"let row; columns: keys; let i = index\" />\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\" *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\" *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: state.props().stickyFooter \"  [style.bottom.px]=\"state.props().stickyFooter ? (offset$ | async) : undefined\"  />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }, { type: i0.ViewContainerRef }, { type: TransformCreator }, { type: i0.Injector }], propDecorators: { trackBy: [{
                 type: Input
             }], displayData$: [{
@@ -3899,10 +3951,10 @@ class ExportToCsvService {
         }
         return this.datePipe.transform(val, dateFormat);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ExportToCsvService, deps: [{ token: TableStore }, { token: TableBuilderConfigToken }, { token: i1$3.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ExportToCsvService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExportToCsvService, deps: [{ token: TableStore }, { token: TableBuilderConfigToken }, { token: i1$3.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExportToCsvService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ExportToCsvService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExportToCsvService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: TableStore }, { type: undefined, decorators: [{
                     type: Inject,
@@ -3990,111 +4042,152 @@ const parseInterpolated = (interpolatedString, element) => interpolatedString.re
 
 class TableBuilderStateStore extends ComponentStore {
     constructor() {
-        super(loadGlobalStorageState());
+        super(loadGlobalStorageState() || defaultStorageState);
         //selectors
-        this.selectLocalProfile = (key) => this.select(state => state.localProfiles[key]);
-        this.selectLocalProfileState = (key) => this.select(this.selectLocalProfile(key), (profile) => {
-            if (profile) {
-                return profile.states[profile.current ?? profile.default];
+        this.$selectLocalTableProfile = (profileKey) => this.selectSignal(state => state.localProfiles[profileKey]);
+        this.$selectLocalTableStateForView = (tableId) => this.selectSignal(this.$selectLocalTableProfile(tableId), (profile) => {
+            if (profile?.current) {
+                return profile.states[profile.current];
             }
+            if (profile?.localSavedState)
+                return profile.localSavedState;
             return null;
         });
-        this.selectLocalProfileCurrentKey = (key) => this.select(this.selectLocalProfile(key), (profile) => {
-            if (profile) {
-                return profile.current ?? profile.default;
+        this.$selectLocalProfileCurrentKey = (key) => this.selectSignal(this.$selectLocalTableProfile(key), (profile) => profile?.current);
+        this.$selectLocalProfileDefaultKey = (key) => this.selectSignal(this.$selectLocalTableProfile(key), (profile) => profile?.default);
+        this.$selectLocalProfileKeys = (tableId) => this.selectSignal(this.$selectLocalTableProfile(tableId), (profile) => Object.keys(profile?.states || {}));
+        // reducers
+        this.saveTableSettingsToLocalAndStorage = (tableId, stateName, tableState, asDefault) => {
+            this.saveTableStateToStorage(tableId, stateName, tableState, asDefault);
+            this.saveTableStateToLocal({ tableId, tableState, stateName, asDefault });
+        };
+        this.saveTableStateToLocal = this.updater((state, props) => {
+            let profile = state.localProfiles[props.tableId];
+            if (!profile?.states) {
+                profile = { states: {} };
             }
-            return 'default';
-        });
-        this.selectLocalProfileKeys = (key) => this.select(this.selectLocalProfile(key), (profile) => {
-            if (profile) {
-                return Object.keys(profile.states).filter(key => key);
+            if (!props.stateName) {
+                profile = { ...profile, localSavedState: props.tableState };
             }
-            return null;
+            else {
+                profile = { ...profile, states: { ...profile.states, [props.stateName]: props.tableState } };
+            }
+            if (props.asDefault) {
+                profile.default = props.stateName;
+            }
+            return { ...state, localProfiles: { ...state.localProfiles, [props.tableId]: profile } };
         });
-        // reducers
-        this.setLocalProfile = this.updater((state, props) => {
-            let profile = state.localProfiles[props.key];
-            if (!profile) {
-                profile = { default: 'default', current: 'default', states: {
-                        default: props.value
-                    } };
+        this.saveTableStateToStorage = (tableId, stateName, tableState, asDefault = false) => {
+            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
+            globalSavedState.localProfiles[tableId] ??= { states: {} };
+            globalSavedState.localProfiles[tableId].states[stateName] = tableState;
+            if (asDefault) {
+                globalSavedState.localProfiles[tableId].default = stateName;
             }
-            else {
-                profile = { ...profile, states: { ...profile.states, [profile.current ?? profile.default]: props.value } };
+            localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
+        };
+        this.addNewStateToLocalAndStorage = (tableId, newStateName, tableState, asDefault) => {
+            this.saveTableSettingsToLocalAndStorage(tableId, newStateName, tableState, asDefault);
+            this.setLocalCurrentState({ tableId: tableId, currentStateKey: newStateName });
+        };
+        this.setLocalCurrentState = this.updater((state, props) => {
+            const profile = state.localProfiles[props.tableId] || { states: {} };
+            profile.current = props.currentStateKey;
+            return { ...state, localProfiles: { ...state.localProfiles, [props.tableId]: { ...profile } } };
+        });
+        this.setDefaultInLocalAndStorage = (tableId, newDefault) => {
+            this.setDefaultInLocal({ default: newDefault, key: tableId });
+            this.setDefaultInStorage(tableId, newDefault);
+        };
+        this.setDefaultInLocal = this.updater((state, props) => {
+            if (state.localProfiles[props.key]?.states[props.default]) {
+                return ({ ...state, localProfiles: { ...state.localProfiles, [props.key]: { ...state.localProfiles[props.key], default: props.default } } });
             }
-            return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
+            return state;
         });
-        this.setLocalProfilesState = this.updater((state, props) => {
-            let profile = state.localProfiles[props.key];
-            if (!profile) {
-                profile = { default: props.current, current: props.current, states: { [props.current]: null } };
+        this.unsetDefaultFromLocalAndStorage = (tableId) => {
+            this.unsetDefaultFromLocal(tableId);
+            this.unsetDefaultFromStorage(tableId);
+        };
+        this.unsetDefaultFromLocal = (tableId) => {
+            this.patchState(tables => {
+                const profile = { ...tables.localProfiles[tableId] };
+                if (profile) {
+                    delete profile.default;
+                }
+                return { ...tables, localProfiles: { ...tables.localProfiles, [tableId]: profile } };
+            });
+        };
+        this.unsetDefaultFromStorage = (tableId) => {
+            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
+            if (globalSavedState.localProfiles[tableId]) {
+                delete globalSavedState.localProfiles[tableId].default;
+                localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
+            }
+        };
+        this.setDefaultInStorage = (tableId, stateName) => {
+            const tableProfile = this.$selectLocalTableProfile(tableId)();
+            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
+            let savedProfile = globalSavedState.localProfiles[stateName];
+            if (!savedProfile?.states) {
+                savedProfile = { default: stateName, states: tableProfile.states };
             }
             else {
-                const state = profile.states[props.current] ?? profile.states[profile.current ?? profile.default];
-                profile = { ...profile, current: props.current, states: { ...profile.states, [props.current]: state } };
+                savedProfile.default = stateName;
             }
-            return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
-        });
+            globalSavedState.localProfiles[tableId] = savedProfile;
+            localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
+        };
         this.deleteLocalProfilesState = this.updater((state, props) => {
             let profile = state.localProfiles[props.key];
             if (profile) {
                 const current = profile.current === props.stateKey ? profile.default : profile.current;
                 profile = { ...profile, current, states: { ...profile.states } };
                 delete profile.states[props.stateKey];
+                if (current === props.stateKey) {
+                    profile.current = undefined;
+                }
                 return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
             }
             else {
                 return state;
             }
         });
-        // effects
-        this.saveLocalProfile = this.effect((props$) => props$.pipe(filter$1(action => !!action.persist), concatLatestFrom((action) => this.selectLocalProfile(action.key)), tap$1(([action, profile]) => {
+        this.deleteProfileFromLocalAndStorage = (key, stateKey) => {
             const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
-            if (!profile) {
-                profile = { default: 'default', current: 'default', states: { default: action.value } };
-                globalSavedState.localProfiles[action.key] = profile;
-            }
-            {
-                if (!globalSavedState.localProfiles[action.key]) {
-                    globalSavedState.localProfiles[action.key] = { ...profile, states: { [profile.current ?? profile.default]: action.value } };
-                }
-                else {
-                    globalSavedState.localProfiles[action.key].states[profile.current ?? profile.default] = action.value;
-                }
-            }
-            localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
-            this.setLocalProfile(action);
-        })));
-        this.deleteLocalProfile = this.effect((props$) => props$.pipe(tap$1((props) => {
-            const globalSavedState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState));
-            if (!globalSavedState.localProfiles[props.key]) {
+            if (!globalSavedState.localProfiles[key]) {
                 return;
             }
             else {
-                delete globalSavedState.localProfiles[props.key].states[props.stateKey];
+                delete (globalSavedState.localProfiles[key].states ?? {})[stateKey];
+            }
+            if (globalSavedState.localProfiles[key].default === stateKey) {
+                globalSavedState.localProfiles[key].default = undefined;
             }
             localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
-            this.deleteLocalProfilesState(props);
-        })));
+            this.deleteLocalProfilesState({ key, stateKey });
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableBuilderStateStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableBuilderStateStore, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 function loadGlobalStorageState() {
     const storage = localStorage.getItem('global-state-storage');
     if (storage) {
-        return { ...defaultStorageState, ...JSON.parse(storage) };
+        const s = JSON.parse(storage);
+        s.localProfiles ??= {};
+        for (const key in s.localProfiles) {
+            const profile = s.localProfiles[key];
+            s.localProfiles[key] = { ...profile, current: profile.default };
+        }
+        return { ...defaultStorageState, ...s };
     }
-    return defaultStorageState;
 }
 const defaultStorageState = {
-    globalProfileKeys: ['Default'],
-    currentGlobalProfile: 'Default',
-    globalProfiles: {},
     localProfiles: {}
 };
 
@@ -4102,10 +4195,10 @@ class GroupByListComponent {
     constructor() {
         this.tableStore = inject(TableStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of groupByKeys; track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\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  }\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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$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", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of groupByKeys; track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\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  }\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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$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", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: GroupByListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'group-by-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatChipsModule, LetDirective, MatIconModule, SpaceCasePipe
@@ -4132,17 +4225,17 @@ class SortMenuComponentStore extends ComponentStore {
                 return { ...s, displayName: meta[s.active]?.displayName };
             })))));
             const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sort$.pipe(map(s => metas
-                .filter(meta => !s.some(s => s.active === meta.key) && !meta.noSort)
+                .filter(meta => !s.some(s => s.active === meta.key) && meta.fieldType !== FieldType.NotMapped && !meta.noSort)
                 .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: "18.0.0", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SortMenuComponentStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SortMenuComponentStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.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));
@@ -4197,10 +4290,10 @@ class SortMenuComponent {
         this.dirty$.next(true);
         this.store.setDirection(sort);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n  @if(sorted$ | async; as sorted){\r\n    @if (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            @if(dirty){\r\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n                <mat-icon>undo</mat-icon>\r\n              </span>\r\n            }\r\n            \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 @if (dirty) { Unsaved Changes }\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Default Sorting Text -->\r\n        @if (!sorted.length) {\r\n          <div class=\"tip\" >\r\n            Sorting List\r\n          </div>\r\n        }\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          @for (sort of sorted; track sort.active) {\r\n            <!-- Menu Item Headers -->\r\n            @if (sorted.length > 1) {\r\n              <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n            }\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          }\r\n\r\n        </div>\r\n\r\n        <!-- Default Not Sorted Text -->\r\n        @if(!notSorted.length){\r\n          <div class=\"tip\" >\r\n            Not Sorted List\r\n          </div>\r\n        }\r\n\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          @for (sort of notSorted; track sort.active) {\r\n            <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n    }\r\n  }\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: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.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: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n  @if(sorted$ | async; as sorted){\r\n    @if (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            @if(dirty){\r\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n                <mat-icon>undo</mat-icon>\r\n              </span>\r\n            }\r\n            \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 @if (dirty) { Unsaved Changes }\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Default Sorting Text -->\r\n        @if (!sorted.length) {\r\n          <div class=\"tip\" >\r\n            Sorting List\r\n          </div>\r\n        }\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          @for (sort of sorted; track sort.active) {\r\n            <!-- Menu Item Headers -->\r\n            @if (sorted.length > 1) {\r\n              <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n            }\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          }\r\n\r\n        </div>\r\n\r\n        <!-- Default Not Sorted Text -->\r\n        @if(!notSorted.length){\r\n          <div class=\"tip\" >\r\n            Not Sorted List\r\n          </div>\r\n        }\r\n\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          @for (sort of notSorted; track sort.active) {\r\n            <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n    }\r\n  }\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: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: SortMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SortMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         LetDirective, MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
@@ -4211,12 +4304,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
 class PaginatorComponent {
     constructor(state) {
         this.state = state;
+        this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)() || this.$showAll());
         this.ourPageEvent = false;
+        this.$showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.includeAllInPaginatorOptions);
+        this.$showAll = this.state.selectSignal(s => s.showAll);
+        this.updatePaginator = this.state.updater(state => ({ ...state, showAll: !state.showAll }));
     }
     ngOnInit() {
         this.ourPageEvent = true;
         this.state.on(metaDataPageSizeChange(this.state), setPaginatorPageSize(this.paginator));
-        this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
         this.state.on(this.paginator.page, (pageEvent) => {
             this.state.updateState({ currentPage: pageEvent.pageIndex });
         });
@@ -4234,30 +4330,39 @@ class PaginatorComponent {
             this.ourPageEvent = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$", tableElRef: "tableElRef" }, 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}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PaginatorComponent, decorators: [{
+    showAll() {
+        this.updatePaginator();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$", tableElRef: "tableElRef" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
+  <div class="paginator-row">
+    @if(currentPageData$ | async; as pageData){
+      <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
+        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
+      </div>
+    }
+    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
+      [class]="{ 'hide' : $collapseFooter() }">
+    </mat-paginator>
+    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
+  </div>
+  `, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass], 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, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass, MatButtonModule], template: `
+  <div class="paginator-row">
+    @if(currentPageData$ | async; as pageData){
+      <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
+        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
+      </div>
+    }
+    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
+      [class]="{ 'hide' : $collapseFooter() }">
+    </mat-paginator>
+    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator, { static: true }]
@@ -4286,6 +4391,10 @@ class TableVirtualScrollStrategy {
         this.headerOffset = headerOffset;
         this.dataLength = 0;
         this.indexChange = new Subject();
+        this.contentScrolled$ = new Subject();
+        this.sub = subscriber(this.contentScrolled$.pipe(debounceTime(100)), () => {
+            this.updateContent();
+        });
         this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
     }
     attach(viewport) {
@@ -4293,7 +4402,7 @@ class TableVirtualScrollStrategy {
         this.onDataLengthChanged();
     }
     onContentScrolled() {
-        this.updateContent();
+        this.contentScrolled$.next();
     }
     onDataLengthChanged() {
         if (this.viewport) {
@@ -4344,63 +4453,82 @@ class TableVirtualScrollStrategy {
 class VirtualScrollContainer {
     constructor(state) {
         this.state = state;
+        this.viewport = viewChild(CdkVirtualScrollViewport);
         this.defaultOptions = new VirtualScrollOptions();
-        this.scrollStrategy = new TableVirtualScrollStrategy(this.state.tableSettings().useVirtualScroll.itemHeight || this.defaultOptions.itemHeight, this.state.tableSettings().useVirtualScroll.headerOffset || this.defaultOptions.headerOffset);
-        this.resizeHandler = () => {
-            if (this.viewport) {
-                this.setSize(this.viewport.elementRef);
+        this.scrollStrategy = new TableVirtualScrollStrategy(this.computedRowHeight(), this.computedHeaderHeight());
+        this.dataLength$ = this.state.state$.pipe(map$1(s => {
+            const paginated = s.notPersistedTableSettings.usePaginator && !s.showAll;
+            return paginated ? (s.userDefined.pageSize || s.pageSize) : s.dataLen;
+        }), distinctUntilChanged$1());
+        this.subscriber = subscriber(this.dataLength$, (dataLength) => {
+            this.scrollStrategy.setDataLength(dataLength);
+            if (this.viewport()) {
+                this.setSize(this.viewport().elementRef);
             }
-        };
-    }
-    ngOnInit() {
-        addEventListener('resize', this.resizeHandler);
-        setTimeout(() => {
-            this.setSize(this.viewport.elementRef);
-        }, 0);
-        if (this.state.tableSettings().usePaginator) {
-            this.state.on(this.state.select((s) => s.pageSize), (len) => this.scrollStrategy.setDataLength(len));
-        }
-        else {
-            this.state.on(this.state.select((s) => s.dataLen), (len) => this.scrollStrategy.setDataLength(len));
-        }
-        this.state.on(this.viewport.renderedRangeStream, (range) => {
-            this.state.updateState({
-                virtualStart: range.start,
-                virtualEnd: range.end,
-            });
         });
-        var offset$ = this.viewport.scrolledIndexChange.pipe(map$1(() => this.viewport.getOffsetToRenderedContentStart() ?? 0), distinctUntilChanged$1(), defaultShareReplay());
-        this.state.on(offset$, (offset) => {
-            this.state.updateState({ virtualScrollOffset: offset });
+        this._ = effect(() => {
+            const viewport = this.viewport();
+            untracked(() => {
+                if (!!viewport) {
+                    addEventListener('resize', this.resizeHandler);
+                    this.setSize(viewport.elementRef);
+                    this.subscriber.on(viewport.renderedRangeStream, (range) => {
+                        this.state.updateState({
+                            virtualEnds: {
+                                start: range.start,
+                                end: range.end,
+                            }
+                        });
+                    });
+                    var offset$ = viewport.scrolledIndexChange.pipe(map$1(() => viewport.getOffsetToRenderedContentStart() ?? 0), distinctUntilChanged$1(), defaultShareReplay());
+                    this.subscriber.on(offset$, (offset) => {
+                        this.state.updateState({ virtualScrollOffset: offset });
+                    });
+                }
+                ;
+            });
         });
+        this.resizeHandler = () => {
+            if (this.viewport()) {
+                this.setSize(this.viewport().elementRef);
+            }
+        };
     }
     ngOnDestroy() {
         removeEventListener('resize', this.resizeHandler);
     }
     setSize(el) {
         const vsViewport = el.nativeElement;
-        const vsContentWrapper = vsViewport?.children[0];
-        const hasHorizontalScrollBar = vsViewport?.scrollWidth > vsViewport?.clientWidth;
-        const rect = vsContentWrapper.getBoundingClientRect();
-        let wrapperHeight = 0;
-        if (rect.top >= 0) {
-            wrapperHeight = rect.bottom;
-        }
-        else {
-            wrapperHeight = rect.bottom + rect.top;
-        }
-        if (wrapperHeight < window.innerHeight) {
-            vsViewport.setAttribute('style', `height: ${vsContentWrapper.clientHeight + (hasHorizontalScrollBar ? 17 : 0)}px !important;`);
+        const virtualScrollOptions = this.state.tableSettings().useVirtualScroll;
+        const rowHeight = this.computedRowHeight();
+        let amountOfVisibleItems = (this.state.tableSettings().usePaginator && !this.state.state().showAll) ? (this.state.state().userDefined?.pageSize || this.state.state().pageSize) :
+            virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+        console.log(amountOfVisibleItems);
+        let height = (rowHeight * amountOfVisibleItems);
+        if (!this.state.tableSettings().hideHeader) {
+            const headerHeight = this.computedHeaderHeight();
+            height += headerHeight;
         }
-        else {
-            vsViewport.setAttribute('style', `height: ${window.innerHeight - el.nativeElement.offsetTop - (0 || 167)}px !important;`);
-        }
-        this.viewport?.checkViewportSize();
-        const virtualScrollOffset = this.viewport.getOffsetToRenderedContentStart() ?? 0;
+        console.log(height);
+        if (virtualScrollOptions?.maxViewPortHeight && virtualScrollOptions.maxViewPortHeight < height)
+            height = virtualScrollOptions.maxViewPortHeight;
+        vsViewport.setAttribute('style', `height: ${height}px !important;`);
+        this.viewport()?.checkViewportSize();
+        const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
         this.state.updateState({ virtualScrollOffset });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }], ngImport: i0, template: `
+    computedRowHeight() {
+        const virtualScrollOptions = this.state.tableSettings().useVirtualScroll;
+        const rowHeight = virtualScrollOptions?.rowHeight || (typeof this.state.tableSettings().rowHeight === 'number' && this.state.tableSettings().rowHeight) || this.defaultOptions.rowHeight;
+        return rowHeight;
+    }
+    computedHeaderHeight() {
+        const virtualScrollOptions = this.state.tableSettings().useVirtualScroll;
+        const headerHeight = virtualScrollOptions?.headerHeight || (typeof this.state.tableSettings().headerHeight === 'number' && this.state.tableSettings().headerHeight) || this.defaultOptions.headerHeight;
+        return headerHeight;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: VirtualScrollContainer, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
     <cdk-virtual-scroll-viewport>
       <ng-content/>
     </cdk-virtual-scroll-viewport>
@@ -4412,7 +4540,7 @@ class VirtualScrollContainer {
             },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: VirtualScrollContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: VirtualScrollContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-virtual-scroll-container',
@@ -4432,18 +4560,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: TableStore }], propDecorators: { viewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport, { static: true }]
-            }] } });
+        }], ctorParameters: () => [{ type: TableStore }] });
+
+class ProfilesMenuComponent {
+    constructor() {
+        this.stateService = inject(TableBuilderStateStore);
+        this.tableStore = inject(TableStore);
+        this.$tableId = input.required();
+        this.onSaveState = output();
+        this.trigger = viewChild('trigger');
+        this.allProfilesPanelOpened = signal(false);
+        this.newProfilePanelOpened = signal(false);
+        this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())());
+        this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())());
+        this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())());
+        this.defaultName = 'My Profile';
+        this.position$ = new Subject();
+        this.setPosition = (e) => {
+            const rect = e.getBoundingClientRect();
+            if (rect.top === 0)
+                return;
+            const a = {
+                right: `${(window.innerWidth - rect.right)}px`,
+                top: `${rect.top}px`,
+            };
+            return a;
+        };
+    }
+    saveState(key) {
+        const tableState = this.tableStore.getSavableStateSignal();
+        this.onSaveState.emit(null);
+        this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
+    }
+    addState(key, asDefault) {
+        const tableState = this.tableStore.getSavableStateSignal();
+        this.stateService.addNewStateToLocalAndStorage(this.$tableId(), key, tableState, asDefault);
+    }
+    setDefault(key) {
+        this.stateService.setDefaultInLocalAndStorage(this.$tableId(), key);
+    }
+    unsetDefault() {
+        this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #line let-key>\r\n\r\n\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-profiles-menu', standalone: true, imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput, DialogDirective, ClickEmitterDirective, NgTemplateOutlet,
+                        MatCheckbox, StopPropagationDirective, FunctionPipe, MatInputModule, AsyncPipe, FormsModule
+                    ], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #line let-key>\r\n\r\n\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
+        }] });
 
 const containerImports = [
     AsyncPipe, NgTemplateOutlet,
     PaginatorComponent,
     LetDirective,
     MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
-    SortMenuComponent, GenericTableComponent, StopPropagationDirective, ClickEmitterDirective, DialogDirective,
-    MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, MatInputModule, VirtualScrollContainer
+    SortMenuComponent, GenericTableComponent, StopPropagationDirective, ProfilesMenuComponent,
+    MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
 ];
 
 //The idea of this is that if filters were only added, and none were removed or changed, then we only need to tag more rows to not be shown. We don't need to remove any 'dont show' tags.
@@ -4741,38 +4916,28 @@ class TableBuilderDataSource extends MatTableDataSource {
         this.state = state;
         this.#viewableData$ = new Subject();
         this.viewableData$ = this.#viewableData$.pipe(mergeAll());
-    }
+        this.#viewType$ = this.state.state$.pipe(map$1(state => {
+            const showAll = state.showAll;
+            const isVirtual = state.notPersistedTableSettings.useVirtualScroll === true || state.notPersistedTableSettings.useVirtualScroll?.virtualAsDefault;
+            const usePaginator = state.notPersistedTableSettings.usePaginator;
+            return (showAll || (isVirtual && !usePaginator)) ? 'virtual' : usePaginator ? 'paginator' : 'all';
+        }), distinctUntilChanged$1(), defaultShareReplay());
+        this.#dataSize$ = this.#viewType$.pipe(switchMap$1(viewType => this.state.state$.pipe(map$1(s => viewType === 'all' ? ({ start: 0, end: s.dataLen })
+            : viewType === 'paginator' ? ({ start: s.virtualEnds.start, end: s.virtualEnds.start + s.pageSize })
+                : ({ ...s.virtualEnds }))))).pipe(distinctUntilChanged$1((a, b) => a.start === b.start && a.end === b.end), defaultShareReplay());
+        this.dataToShow$ = combineLatest([this.dataSrc, this.#dataSize$])
+            .pipe(map$1(([data, size]) => data.slice(size.start, size.end)))
+            .pipe(defaultShareReplay());
+    }
+    #viewType$;
+    #dataSize$;
     connect() {
         if (!this.subscription) {
-            let dataSource$ = this.dataSrc;
-            if (this.state.tableSettings().usePaginator) {
-                const currentPage$ = this.state.select(s => s.currentPage);
-                const pageSize$ = this.state.getPageSize;
-                dataSource$ = combineLatest([
-                    currentPage$,
-                    pageSize$,
-                    dataSource$
-                ]).pipe(map$1(([currentPage, pageSize, d]) => {
-                    const start = currentPage * pageSize;
-                    return d.slice(start, start + pageSize);
-                }));
-            }
-            if (this.state.tableSettings().useVirtualScroll) {
-                const start$ = this.state.select(s => s.virtualStart);
-                const end$ = this.state.select(s => s.virtualEnd);
-                dataSource$ = combineLatest([
-                    start$,
-                    end$,
-                    dataSource$
-                ]).pipe(map$1(([start, end, data]) => {
-                    return data.slice(start, end);
-                }));
-            }
-            this.subscription = dataSource$.subscribe((data) => {
+            this.subscription = this.dataToShow$.subscribe((data) => {
                 this.data = data;
             });
-            this.#viewableData$.next(dataSource$);
         }
+        this.#viewableData$.next(this.dataToShow$);
         return super.connect();
     }
     disconnect() {
@@ -4801,12 +4966,8 @@ class TableContainerComponent {
         this.config = inject(TableBuilderConfigToken);
         this.exportToCsvService = inject((ExportToCsvService));
         this.wrapper = inject(TableWrapperDirective, { optional: true });
-        this.store = inject(TableBuilderStateStore);
-        this._ = this.state.on(this.state.getSavableState().pipe(last()), finalState => {
-            if (this.tableId) {
-                this.store.setLocalProfile({ key: this.tableId, value: finalState });
-            }
-        });
+        this.stateService = inject(TableBuilderStateStore);
+        this.injector = inject(Injector);
         this.customFilters$ = new BehaviorSubject([]);
         this.expandAllGroups = () => {
             const groupHeaders = getAllGroupHeaderNames(this.$displayData());
@@ -4863,6 +5024,7 @@ class TableContainerComponent {
                 this.customFilters$.next(f);
             });
         };
+        this.$useVirtual = this.state.$isVirtual;
     }
     set indexColumn(val) {
         this.props.indexColumn = val;
@@ -4885,6 +5047,11 @@ class TableContainerComponent {
     set groupHeaderTemplate(template) {
         this.props.groupHeaderTemplate = template;
     }
+    ngOnDestroy() {
+        if (this.tableId) {
+            this.stateService.saveTableStateToLocal({ tableId: this.tableId, tableState: this.state.getSavableStateSignal() });
+        }
+    }
     firstPage() {
         this.paginatorComponent?.paginator?.firstPage();
     }
@@ -4901,12 +5068,12 @@ class TableContainerComponent {
         this.state.setTableSettings(this.tableBuilder.settings);
         this.state.runOnceWhen(stateIs(InitializationState.MetaDataLoaded), () => {
             if (this.tableId) {
-                const persistedState$ = this.store.selectLocalProfileState(this.tableId).pipe(tap(persistedState => {
+                const persistedState$ = toObservable(this.stateService.$selectLocalTableStateForView(this.tableId), { injector: this.injector }).pipe(tap(persistedState => {
                     if (!persistedState) {
                         this.state.setInitializationState(InitializationState.LoadedFromStore);
                     }
                 }), notNull());
-                this.state.updateStateFromPersistedState(persistedState$);
+                this.state.updateStateFromPersistedState(persistedState$.pipe(notNull()));
             }
             else {
                 this.state.setInitializationState(InitializationState.LoadedFromStore);
@@ -4938,28 +5105,11 @@ class TableContainerComponent {
             } });
         this.initializeState();
         this.initializeData();
-        if (this.tableId) {
-            this.stateKeys$ = this.store.selectLocalProfileKeys(this.tableId);
-            this.currentStateKey$ = this.store.selectLocalProfileCurrentKey(this.tableId);
-        }
     }
     exportToCsv() {
         const sorted = this.data.pipe(withLatestFrom(this.state.sort$), map(([data, sorted]) => sortData(data, sorted)));
         this.exportToCsvService.exportToCsv(sorted);
     }
-    saveState() {
-        this.state.getSavableState().pipe(first$1()).subscribe(tableState => {
-            this.onSaveState.next(null);
-            this.store.saveLocalProfile({ key: this.tableId, value: tableState, persist: true });
-            this.store.setLocalProfile({ key: this.tableId, value: tableState });
-        });
-    }
-    setProfileState(val) {
-        this.store.setLocalProfilesState({ key: this.tableId, current: val });
-    }
-    deleteProfileState(stateKey) {
-        this.store.deleteLocalProfile({ key: this.tableId, stateKey });
-    }
     ngAfterContentInit() {
         this.initializeColumns();
         this.state.runOnceWhen(stateIs(InitializationState.LoadedFromStore), state => {
@@ -4979,12 +5129,12 @@ class TableContainerComponent {
         this.state.setLinkMaps(this.tableBuilder.metaData$.pipe(map(createLinkCreatorDict)));
         this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })), defaultShareReplay());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", tableId: "tableId", tableBuilder: "tableBuilder", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\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      }\r\n\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if(!!tableSettings.useVirtualScroll) {\r\n    <tb-virtual-scroll-container>\r\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n    </tb-virtual-scroll-container>\r\n    }\r\n    @else {\r\n    <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n      (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n    }\r\n    @if(tableSettings.usePaginator) {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  </ng-template>\r\n\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    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (currentStateKey$ | async; as currentKey) {\r\n      @if (tableId) {\r\n        <button mat-menu-item (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      }\r\n    }\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      @for (key of stateKeys$ | async; track key) {\r\n        <button mat-menu-item (click)='setProfileState(key)'>\r\n          <span>{{key}}</span>\r\n          <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <ng-container *opDialog='add'>\r\n      <mat-form-field>\r\n        <input class=\"add-key\" matInput #addedKey />\r\n      </mat-form-field>\r\n      <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n        Add\r\n      </button>\r\n    </ng-container>\r\n  </ng-template>\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}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$4.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data$", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i15.MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", tableId: "tableId", tableBuilder: "tableBuilder", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\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      }\r\n\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n    }\r\n    @if(tableSettings.usePaginator)\r\n    {\r\n      <div class=\"paginator\">\r\n        <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n        <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n          (click)=\"state.toggleCollapseFooter()\">\r\n          {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n        </mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\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    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\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}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$4.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data$", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i14.MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\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      }\r\n\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if(!!tableSettings.useVirtualScroll) {\r\n    <tb-virtual-scroll-container>\r\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n    </tb-virtual-scroll-container>\r\n    }\r\n    @else {\r\n    <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n      (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n    }\r\n    @if(tableSettings.usePaginator) {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  </ng-template>\r\n\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    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (currentStateKey$ | async; as currentKey) {\r\n      @if (tableId) {\r\n        <button mat-menu-item (click)=\"saveState()\">\r\n          <mat-icon color=\"primary\">save</mat-icon>\r\n          <span>Save to {{currentKey}}</span>\r\n        </button>\r\n        <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n          <span>Choose Profile</span>\r\n        </button>\r\n      }\r\n    }\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      @for (key of stateKeys$ | async; track key) {\r\n        <button mat-menu-item (click)='setProfileState(key)'>\r\n          <span>{{key}}</span>\r\n          <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <ng-container *opDialog='add'>\r\n      <mat-form-field>\r\n        <input class=\"add-key\" matInput #addedKey />\r\n      </mat-form-field>\r\n      <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n        Add\r\n      </button>\r\n    </ng-container>\r\n  </ng-template>\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}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;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], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\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      }\r\n\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n    }\r\n    @if(tableSettings.usePaginator)\r\n    {\r\n      <div class=\"paginator\">\r\n        <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n        <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n          (click)=\"state.toggleCollapseFooter()\">\r\n          {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n        </mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\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    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\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}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }], propDecorators: { paginatorComponent: [{
                 type: ViewChild,
                 args: [PaginatorComponent]
@@ -5047,8 +5197,8 @@ class TableBuilderModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: TableBuilderModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: TableBuilderModule, imports: [CommonModule,
             MatDialogModule,
             MatNativeDateModule,
             RouterModule,
@@ -5080,7 +5230,7 @@ class TableBuilderModule {
             TableWrapperDirective,
             ResizeColumnDirective,
             UtilitiesModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableBuilderModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableBuilderModule, providers: [
             SpaceCasePipe,
             DatePipe,
             CurrencyPipe,
@@ -5097,7 +5247,7 @@ class TableBuilderModule {
             FilterComponent,
             UtilitiesModule, UtilitiesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TableBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: TableBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5169,15 +5319,15 @@ class MatTableObservableDataSource extends MatTableDataSource {
 }
 
 class TableBuilder {
-    constructor(data$, metaData$, settings = new GeneralTableSettings()) {
-        this.data$ = data$;
-        this.data$ = this.data$.pipe(defaultShareReplay());
-        this.metaData$ = metaData$ ?
-            (isObservable(metaData$) ? metaData$ : of(metaData$)).pipe(defaultShareReplay())
+    constructor(data, metaData, settings = new GeneralTableSettings()) {
+        this.settings = this.coerceSettingsToObservable(settings)
+            .pipe(map(sett => new GeneralTableSettings(sett)), defaultShareReplay());
+        this.data$ = this.coerceToObservable(data, this.settings)
+            .pipe(defaultShareReplay());
+        this.metaData$ = metaData ?
+            this.coerceToObservable(metaData, this.settings).pipe(defaultShareReplay())
             :
-                data$.pipe(first$1(), map(data => this.createMetaData(data[0])), defaultShareReplay());
-        const s = isObservable(settings) ? settings : of(settings);
-        this.settings = s.pipe(map(sett => new GeneralTableSettings(sett)), defaultShareReplay());
+                this.data$.pipe(first$1(), map(d => this.createMetaData(d[0])), defaultShareReplay());
     }
     getData$() {
         return this.metaData$.pipe(map(md => createDataCleaners(md)), switchMap(cleaner => this.data$.pipe(map((datas, ii) => {
@@ -5196,6 +5346,37 @@ class TableBuilder {
             order: -1
         }));
     }
+    coerceToObservable(arg, settings) {
+        if (isObservable(arg)) {
+            return arg;
+        }
+        else if (isSignal(arg)) {
+            return settings.pipe(switchMap(s => {
+                this.assertInjector(s);
+                return toObservable(arg, { injector: s.injector });
+            }));
+        }
+        else {
+            return of(arg);
+        }
+    }
+    coerceSettingsToObservable(settings) {
+        if (isObservable(settings)) {
+            return settings;
+        }
+        else if (isSignal(settings)) {
+            this.assertInjector(settings());
+            return toObservable(settings, { injector: settings().injector });
+        }
+        else {
+            return of(settings);
+        }
+    }
+    assertInjector(s) {
+        if (!s.injector) {
+            throw new Error('Injector must be provided when passing a signal to table builder');
+        }
+    }
 }
 const CreateTableBuilder = (reportDef$) => {
     reportDef$ = reportDef$.pipe(defaultShareReplay());
@@ -5242,12 +5423,12 @@ function actionStatusReducer(state = initialState, action) {
 }
 
 class NgrxExtModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i1$5.StoreFeatureModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i1$5.StoreFeatureModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
             StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgrxExtModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgrxExtModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -5265,10 +5446,10 @@ class ActionStateSpinnerComponent {
     ngOnInit() {
         this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { status$: [{
@@ -5276,11 +5457,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             }] } });
 
 class ActionStateUiModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ActionStateUiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ActionStateUiModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [