@one-paragon/angular-utilities 2.0.0-beta.1 → 2.0.0-beta.11

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, linkedSignal, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
+import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, linkedSignal, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
 import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, observeOn, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
 import * as i1 from 'rxjs';
-import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, animationFrameScheduler, timestamp, BehaviorSubject } from 'rxjs';
+import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, animationFrameScheduler, debounceTime, timestamp, BehaviorSubject } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
 import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as i1$8 from '@angular/common';
@@ -11,6 +11,7 @@ import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { merge as merge$1, get, sumBy, difference, intersection, groupBy, orderBy, set, isFunction as isFunction$1 } from 'lodash';
 import { CdkColumnDef } from '@angular/cdk/table';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i10 from '@angular/material/radio';
 import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
@@ -786,9 +787,10 @@ class TableColumnHeaderSettings {
     noHeader = false;
 }
 class TableSettings {
-    usePaginator = true;
+    usePaginator = undefined;
     useVirtualScroll = undefined;
-    includeAllInPaginatorOptions = false;
+    paginatorSettings = undefined;
+    virtualScrollSettings = undefined;
     rowHeight = undefined;
     groupHeaderHeight = undefined;
     minColumnWidth;
@@ -824,22 +826,32 @@ class NotPersistedTableSettings {
             newNpts.hideColumnHeaderFilters = tableSettings.columnHeaderSettings?.noFilters ?? newNpts.hideColumnHeaderFilters;
             newNpts.hideColumnHeader = tableSettings.columnHeaderSettings?.noHeader ?? newNpts.hideColumnHeader;
             newNpts.usePaginator = tableSettings.tableSettings?.usePaginator ?? newNpts.usePaginator;
-            newNpts.useVirtualScroll = tableSettings.tableSettings?.useVirtualScroll ?? newNpts.useVirtualScroll;
-            newNpts.includeAllInPaginatorOptions = tableSettings.tableSettings?.includeAllInPaginatorOptions ?? newNpts.includeAllInPaginatorOptions;
+            newNpts.useVirtualScroll = tableSettings.tableSettings?.useVirtualScroll != undefined ? tableSettings.tableSettings?.useVirtualScroll :
+                tableSettings.tableSettings?.virtualScrollSettings ? true
+                    : newNpts.useVirtualScroll;
             newNpts.rowHeight = tableSettings.tableSettings?.rowHeight ?? newNpts.rowHeight;
             newNpts.headerHeight = tableSettings.headerSettings?.headerHeight ?? newNpts.headerHeight;
             newNpts.groupHeaderHeight = tableSettings.tableSettings?.groupHeaderHeight ?? newNpts.groupHeaderHeight;
             newNpts.minColumnWidth = tableSettings.tableSettings?.minColumnWidth ?? newNpts.minColumnWidth;
-            if (tableSettings.tableSettings?.useVirtualScroll) {
-                const currVirt = tableSettings.tableSettings.useVirtualScroll === true ? new VirtualScrollOptions() : tableSettings.tableSettings.useVirtualScroll;
-                if (!currVirt.headerHeight || tableSettings.tableSettings.useVirtualScroll === true) {
+            if (tableSettings.tableSettings?.virtualScrollSettings) {
+                const currVirt = tableSettings.tableSettings?.virtualScrollSettings || newNpts.virtualSettings;
+                if (!currVirt.headerHeight) {
                     currVirt.headerHeight = (typeof tableSettings.headerSettings?.headerHeight === 'number' ? tableSettings.headerSettings?.headerHeight : DefaultVirtualScrollOptions.headerHeight);
                 }
-                if (!currVirt.rowHeight || tableSettings.tableSettings.useVirtualScroll === true) {
+                if (!currVirt.rowHeight) {
                     currVirt.rowHeight = (typeof tableSettings.tableSettings?.rowHeight === 'number' ? tableSettings.tableSettings?.rowHeight : DefaultVirtualScrollOptions.rowHeight);
                 }
-                this.useVirtualScroll = { ...new VirtualScrollOptions(), ...currVirt };
+                newNpts.virtualSettings = { ...new VirtualScrollOptions(), ...currVirt };
+            }
+            else
+                newNpts.virtualSettings ??= new VirtualScrollOptions();
+            if (tableSettings.tableSettings?.paginatorSettings) {
+                const currPag = tableSettings.tableSettings?.paginatorSettings ? merge$1(newNpts.paginatorSettings, tableSettings.tableSettings?.paginatorSettings) : (newNpts.paginatorSettings ?? new PaginatorOptions());
+                currPag.includeAllInOptions = (currPag.defaultAll && currPag.includeAllInOptions !== false) || currPag.includeAllInOptions;
+                newNpts.paginatorSettings = { ...new PaginatorOptions(), ...currPag };
             }
+            else
+                newNpts.paginatorSettings ??= new PaginatorOptions();
         }
         return newNpts;
     }
@@ -852,15 +864,15 @@ class NotPersistedTableSettings {
     hideColumnHeaderFilters = false;
     hideColumnHeader = false;
     usePaginator = true;
-    useVirtualScroll = undefined;
-    includeAllInPaginatorOptions = false;
+    useVirtualScroll = false;
+    paginatorSettings = undefined;
+    virtualSettings = undefined;
     groupHeaderHeight = undefined;
     rowHeight;
     headerHeight = undefined;
     minColumnWidth;
 }
 class VirtualScrollOptions {
-    virtualAsDefault = true;
     rowHeight = 48;
     enforceRowHeight = true;
     headerHeight = 56;
@@ -870,6 +882,17 @@ class VirtualScrollOptions {
      * This will win over `amountOfVisibleItems`
      */
     maxViewPortHeight = undefined;
+    /**
+     * Will try to bring the table to the bottom of the screen
+     * If `amountOfVisibleItems` is set that will be the minimum number of rows
+     * If `maxViewPortHeight` is set that will be the max table size
+     */
+    dynamicHeight = false;
+}
+class PaginatorOptions {
+    pageSize = undefined;
+    defaultAll = false;
+    includeAllInOptions = false;
 }
 const DefaultVirtualScrollOptions = {
     rowHeight: 48,
@@ -937,7 +960,7 @@ class CustomCellDirective {
     templateRef = inject(TemplateRef, { optional: true });
     columnDef = inject(CdkColumnDef, { optional: true });
     $customCell = input.required({ alias: 'customCell' });
-    $displayName = input(undefined, { alias: 'displayName' });
+    $displayName = input(undefined, { alias: 'customCellDisplayName' });
     $preSort = input(undefined, { alias: 'preSort' });
     $templateRef = input(this.templateRef || undefined, { alias: 'templateRef' });
     $customCellOrder = input(undefined, { alias: 'customCellOrder' });
@@ -949,7 +972,7 @@ class CustomCellDirective {
     /**
      * true if column not mapped to a property in the data source. Default is false.
      */
-    $customCellNotMapped = input(false, { alias: 'customCellNotMapped' });
+    $customCellNotMapped = input(false, { alias: 'customCellNotMapped', transform: coerceBooleanProperty });
     $metaData = computed(() => {
         const c = this.$customCell();
         if (!c)
@@ -965,11 +988,15 @@ class CustomCellDirective {
             noExport: true,
         });
     });
+    $inited = signal(false);
+    ngOnInit() {
+        this.$inited.set(true);
+    }
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CustomCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { $customCell: { classPropertyName: "$customCell", publicName: "customCell", isSignal: true, isRequired: true, transformFunction: null }, $displayName: { classPropertyName: "$displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, $preSort: { classPropertyName: "$preSort", publicName: "preSort", isSignal: true, isRequired: false, transformFunction: null }, $templateRef: { classPropertyName: "$templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellOrder: { classPropertyName: "$customCellOrder", publicName: "customCellOrder", isSignal: true, isRequired: false, transformFunction: null }, $customCellWidth: { classPropertyName: "$customCellWidth", publicName: "customCellWidth", isSignal: true, isRequired: false, transformFunction: null }, $customCellTableRef: { classPropertyName: "$customCellTableRef", publicName: "customCellTableRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellNotMapped: { classPropertyName: "$customCellNotMapped", publicName: "customCellNotMapped", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { $customCell: { classPropertyName: "$customCell", publicName: "customCell", isSignal: true, isRequired: true, transformFunction: null }, $displayName: { classPropertyName: "$displayName", publicName: "customCellDisplayName", isSignal: true, isRequired: false, transformFunction: null }, $preSort: { classPropertyName: "$preSort", publicName: "preSort", isSignal: true, isRequired: false, transformFunction: null }, $templateRef: { classPropertyName: "$templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellOrder: { classPropertyName: "$customCellOrder", publicName: "customCellOrder", isSignal: true, isRequired: false, transformFunction: null }, $customCellWidth: { classPropertyName: "$customCellWidth", publicName: "customCellWidth", isSignal: true, isRequired: false, transformFunction: null }, $customCellTableRef: { classPropertyName: "$customCellTableRef", publicName: "customCellTableRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellNotMapped: { classPropertyName: "$customCellNotMapped", publicName: "customCellNotMapped", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CustomCellDirective, decorators: [{
             type: Directive,
@@ -1830,11 +1857,14 @@ class TableStore extends ComponentStore {
             notPersistedTableSettings: new NotPersistedTableSettings().merge(config.defaultTableSettings),
         };
         if (config.defaultTableSettings?.pageSize) {
-            settingsFromConfig['pageSize'] = config.defaultTableSettings?.pageSize;
+            settingsFromConfig.notPersistedTableSettings.paginatorSettings.pageSize = config.defaultTableSettings?.pageSize;
         }
-        super({ ...defaultTableState, ...settingsFromConfig });
+        const pageSize = settingsFromConfig.notPersistedTableSettings.paginatorSettings.pageSize || defaultTableState.pageSize;
+        const showAll = settingsFromConfig.notPersistedTableSettings.paginatorSettings.defaultAll || defaultTableState.showAll;
+        super({ ...defaultTableState, ...settingsFromConfig, pageSize, showAll });
     }
-    getSavableStateSignal = computed(() => {
+    $initializationState = this.selectSignal(state => state.initializationState);
+    $savableState = computed(() => {
         const state = this.state();
         return mapSaveableState(state);
     });
@@ -1867,7 +1897,6 @@ class TableStore extends ComponentStore {
         .pipe(switchMap(() => this.selectSorted$));
     $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
     getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
-    $getPageSize = this.selectSignal(state => state.userDefined.pageSize || state.pageSize);
     $footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
     $headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
     $groupBy = this.selectSignal(state => state.groupBy);
@@ -1886,6 +1915,7 @@ class TableStore extends ComponentStore {
     };
     $currentPage = this.selectSignal(state => state.currentPage);
     $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
+    $showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
     $tableSettings = this.selectSignal(state => {
         const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
         return ts;
@@ -1893,13 +1923,17 @@ class TableStore extends ComponentStore {
     tableSettings$ = toObservable(this.$tableSettings);
     $props = this.selectSignal(s => s.props);
     $getLinkInfo = (md) => this.selectSignal(state => state.linkMaps[md.key]);
-    $isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll === true || state.notPersistedTableSettings.useVirtualScroll?.virtualAsDefault || state.showAll);
+    $isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll
+        || state.showAll
+        || state.userDefined?.showAll);
     $viewType = this.selectSignal(state => {
         const usePaginator = state.notPersistedTableSettings.usePaginator;
-        if (state.showAll || (this.$isVirtual() && !usePaginator)) {
+        const showAll = state.showAll || state.userDefined?.showAll;
+        const useVirtualScroll = state.notPersistedTableSettings.useVirtualScroll;
+        if (showAll || (useVirtualScroll && !usePaginator)) {
             return 'virtual all';
         }
-        else if (this.$isVirtual() && usePaginator) {
+        else if (useVirtualScroll && usePaginator) {
             return 'virtual paginator';
         }
         else if (usePaginator) {
@@ -1929,8 +1963,11 @@ class TableStore extends ComponentStore {
         const s = {
             ...state,
             persistedTableSettings: state.persistedTableSettings.merge(settings),
-            notPersistedTableSettings: state.notPersistedTableSettings.merge(settings)
+            notPersistedTableSettings: state.notPersistedTableSettings.merge(settings),
+            initializationState: InitializationState.Ready
         };
+        s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
+        s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
         return s;
     });
     setMetaData = this.updater((state, md) => {
@@ -1981,12 +2018,6 @@ class TableStore extends ComponentStore {
     addFilter = this.updater((state, filter) => {
         return this.addFiltersToState(state, [filter]);
     });
-    // readonly patchPredicate = this.updater((state, {filterId, predicate}: {filterId: string, predicate: (data: any) => boolean}) => {
-    //   const filtersCopy = { ...state.filters };
-    //   const filter = filtersCopy[filterId] as CustomFilter;
-    //   filter.predicate = predicate;
-    //   return ({...state, filters: filtersCopy });
-    // });
     addFilters = this.updater((state, filters) => {
         return this.addFiltersToState(state, filters);
     });
@@ -2041,7 +2072,9 @@ class TableStore extends ComponentStore {
         };
     });
     setCurrentPage = this.updater((state, currentPage) => ({ ...state, currentPage }));
-    setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize, userDefined: { ...state.userDefined, pageSize } }));
+    setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize }));
+    setUserDefinedPageSize = this.updater((state, pageSize) => ({ ...state, userDefined: { ...state.userDefined, pageSize } }));
+    setUserDefinedShowAll = this.updater((state, showAll) => ({ ...state, showAll, userDefined: { ...state.userDefined, showAll } }));
     setProps = this.updater((state, props) => {
         return ({ ...state, props });
     });
@@ -3052,14 +3085,19 @@ class TransformCreator {
     currencyPipe = inject(CurrencyPipe);
     phonePipe = inject(PhoneNumberPipe);
     config = inject(TableBuilderConfigToken);
-    createTransformer(metaData, noIcons = false) {
+    createTransformer(metaData, noIcons = false, forItem = false) {
         const nested = metaData.key.includes('.');
         const defaultFunc = nested ? (value) => get(value, metaData.key) : (value) => value[metaData.key];
-        if (metaData.map) {
+        if (metaData.map && !forItem) {
             return (value) => {
                 return metaData.map(value);
             };
         }
+        if (metaData.mapItem) {
+            return (value) => {
+                return metaData.mapItem(defaultFunc(value));
+            };
+        }
         if (metaData.transform) {
             if (isPipe(metaData.transform)) {
                 return (value) => metaData.transform.transform(defaultFunc(value));
@@ -3870,15 +3908,15 @@ class GenericTableComponent {
         if (val == undefined || val === 'null')
             return '';
         try {
-            return this.transformCreator.createTransformer(this.$columns[key].metaData, true)({ [key]: val });
+            return this.transformCreator.createTransformer(this.state.$getMetaData(key)(), true, true)(val);
         }
         catch (error) {
             return val;
         }
     };
     $rowHeight = this.state.selectSignal(s => {
-        if (this.state.$isVirtual() && s.notPersistedTableSettings.useVirtualScroll?.enforceRowHeight) {
-            const height = s.notPersistedTableSettings.useVirtualScroll.rowHeight;
+        if (this.state.$isVirtual() && s.notPersistedTableSettings.virtualSettings?.enforceRowHeight) {
+            const height = s.notPersistedTableSettings.virtualSettings.rowHeight;
             return height + 'px';
         }
         if (typeof s.notPersistedTableSettings.rowHeight === 'number') {
@@ -3887,8 +3925,8 @@ class GenericTableComponent {
         return s.notPersistedTableSettings.rowHeight;
     });
     $headerHeight = this.state.selectSignal(s => {
-        if (this.state.$isVirtual() && s.notPersistedTableSettings.useVirtualScroll?.enforceHeaderHeight) {
-            const height = s.notPersistedTableSettings.useVirtualScroll.headerHeight;
+        if (this.state.$isVirtual() && s.notPersistedTableSettings.virtualSettings?.enforceHeaderHeight) {
+            const height = s.notPersistedTableSettings.virtualSettings.headerHeight;
             return height + 'px';
         }
         if (typeof s.notPersistedTableSettings.headerHeight === 'number') {
@@ -4347,9 +4385,10 @@ class PaginatorComponent {
     });
     onPageSizeEffect = effect(() => {
         const size = this.$pageSizeChangeEvent();
-        if (!size)
+        const initialized = this.state.$initializationState() >= InitializationState.Ready;
+        if (!size || !initialized)
             return;
-        untracked(() => this.state.setPageSize(size));
+        untracked(() => this.state.setUserDefinedPageSize(size));
     });
     onMetaPageSizeEffect = effect(() => {
         const paginator = this.$paginator();
@@ -4368,11 +4407,10 @@ class PaginatorComponent {
         });
     });
     $collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)() || this.$showAll());
-    $showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.includeAllInPaginatorOptions);
-    $showAll = this.state.selectSignal(s => s.showAll);
-    updatePaginator = this.state.updater(state => ({ ...state, showAll: !state.showAll }));
+    $showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
+    $showAll = this.state.$showAll;
     showAll() {
-        this.updatePaginator();
+        this.state.setUserDefinedShowAll(!this.$showAll());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", viewQueries: [{ propertyName: "$paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -4385,7 +4423,7 @@ class PaginatorComponent {
     <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons
       [class]="{ 'hide' : $collapseFooter() }">
     </mat-paginator>
-    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
+    @if ($showAllOption()) {<button mat-button (click)="showAll()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
   </div>
   `, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.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: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -4401,7 +4439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
     <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons
       [class]="{ 'hide' : $collapseFooter() }">
     </mat-paginator>
-    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
+    @if ($showAllOption()) {<button mat-button (click)="showAll()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
   </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }] });
@@ -4473,13 +4511,18 @@ class VirtualScrollContainer {
     dataStore = inject(DataStore);
     viewport = viewChild(CdkVirtualScrollViewport);
     genericTable = contentChild(GenericTableComponent);
+    tableContainer = inject(TableContainerComponent);
     defaultOptions = new VirtualScrollOptions();
     scrollStrategy = new TableVirtualScrollStrategy(this.computedRowHeight(), this.computedHeaderHeight());
     $usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
     $pageSize = this.state.$pageSize;
     $currentPage = this.state.$currentPage;
-    $showAll = this.state.selectSignal(s => s.showAll);
+    $showAll = this.state.$showAll;
     $stateDataLength = this.dataStore.selectSignal(s => s.dataLen);
+    viewPort$ = toObservable(this.viewport).pipe(notNull());
+    $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
+    $renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
+    $virtualScrollOptions = computed(() => this.state.$tableSettings().virtualSettings);
     $dataLength = computed(() => {
         const paginated = this.$usePaginator() && !this.$showAll();
         const pageSize = this.$pageSize();
@@ -4528,9 +4571,6 @@ class VirtualScrollContainer {
             this.dataStore.patchState({ virtualScrollOffset: offset });
         });
     });
-    viewPort$ = toObservable(this.viewport).pipe(notNull());
-    $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
-    $renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
     $offset = computed(() => {
         const viewport = this.viewport();
         const scrolledIndexChange = this.$scrolledIndexChange();
@@ -4542,40 +4582,78 @@ class VirtualScrollContainer {
         removeEventListener('resize', this.resizeHandler);
     }
     setSize(el) {
-        const vsViewport = el.nativeElement;
-        const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll;
+        const virtualScrollOptions = this.$virtualScrollOptions();
+        if (virtualScrollOptions.dynamicHeight) {
+            this.calcDynamic(el);
+            return;
+        }
         const rowHeight = this.computedRowHeight();
         let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
-        virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
         amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
         let height = (rowHeight * amountOfVisibleItems);
-        height += parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
-        if (!this.state.$tableSettings().hideHeader) {
-            const headerHeight = this.computedHeaderHeight();
-            height += headerHeight;
-        }
+        const footerHeight = this.computedFooterHeight();
+        const headerHeight = this.computedHeaderHeight();
+        height += (footerHeight + headerHeight);
         if (virtualScrollOptions?.maxViewPortHeight && virtualScrollOptions.maxViewPortHeight < height)
             height = virtualScrollOptions.maxViewPortHeight;
+        this.setHeight(height, el);
+    }
+    calcDynamic$ = new Subject();
+    $calcDynamic = toSignal(this.calcDynamic$.pipe(debounceTime(300)));
+    #onCalcDynamicEffect = effect(() => {
+        const el = this.$calcDynamic();
+        if (!el)
+            return;
+        this.calcDynamic(el);
+    });
+    calcDynamic(el) {
+        const virtualScrollOptions = this.$virtualScrollOptions();
+        const t = this.tableContainer.elementRef.nativeElement.querySelector(`#${TableContainerComponent.headerId}`);
+        const rect = t?.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const distanceFromBottom = viewportHeight - rect.bottom;
+        const rowHeight = this.computedRowHeight();
+        const footerHeight = this.computedFooterHeight();
+        const headerHeight = this.computedHeaderHeight();
+        let tableSize = distanceFromBottom;
+        if (virtualScrollOptions?.maxViewPortHeight && virtualScrollOptions.maxViewPortHeight < tableSize) {
+            tableSize = virtualScrollOptions.maxViewPortHeight;
+        }
+        const available = (distanceFromBottom - footerHeight) - headerHeight;
+        const amountOfRowsThatWillFit = Math.floor(available / rowHeight);
+        const minAmountOfRows = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+        const amountOfVisibleItems = Math.min(Math.max(amountOfRowsThatWillFit, minAmountOfRows), this.$dataLength());
+        let height = (rowHeight * amountOfVisibleItems);
+        height += (footerHeight + headerHeight) - 10;
+        this.setHeight(height, el);
+    }
+    setHeight(height, el) {
+        const vsViewport = el.nativeElement;
         vsViewport.setAttribute('style', `height: ${height}px !important;`);
         this.viewport()?.checkViewportSize();
         const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
         this.dataStore.patchState({ virtualScrollOffset });
     }
     resizeHandler = () => {
-        if (this.viewport()) {
+        if (this.viewport() && this.$virtualScrollOptions().dynamicHeight) {
             this.setSize(this.viewport().elementRef);
         }
     };
     computedRowHeight() {
-        const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll;
+        const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
         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;
+        if (this.state.$tableSettings().hideHeader)
+            return 0;
+        const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
         const headerHeight = virtualScrollOptions?.headerHeight || (typeof this.state.$tableSettings().headerHeight === 'number' && this.state.$tableSettings().headerHeight) || this.defaultOptions.headerHeight;
         return headerHeight;
     }
+    computedFooterHeight() {
+        return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
     <cdk-virtual-scroll-viewport>
@@ -4622,12 +4700,12 @@ class ProfilesMenuComponent {
     $defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())());
     $keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())());
     saveState(key) {
-        const tableState = this.tableStore.getSavableStateSignal();
+        const tableState = this.tableStore.$savableState();
         this.onSaveState.emit(null);
         this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
     }
     addState(key, asDefault) {
-        const tableState = this.tableStore.getSavableStateSignal();
+        const tableState = this.tableStore.$savableState();
         this.stateService.addNewStateToLocalAndStorage(this.$tableId(), key, tableState, asDefault);
     }
     setDefault(key) {
@@ -4876,6 +4954,7 @@ const createDataCleaners = (metadatas, mutate = false) => {
 };
 const createCleaners = (metadatas) => {
     return metadatas.reduce((transforms, metaData) => {
+        const notNestedKey = metaData.key;
         switch (metaData.fieldType) {
             case FieldType.Currency:
             case FieldType.Number: {
@@ -4885,14 +4964,13 @@ const createCleaners = (metadatas) => {
                         const val = get(t, metaData.key);
                         const num = Number(val);
                         set(t, metaData.key, isNaN(num) || val == null ? null : num);
-                        t[metaData.key] = (isNaN(num) || val == null ? null : num);
                     });
                 }
                 else {
                     transforms.push((t) => {
-                        const val = t[metaData.key];
+                        const val = t[notNestedKey];
                         const num = Number(val);
-                        t[metaData.key] = (isNaN(num) || val == null ? null : num);
+                        t[notNestedKey] = (isNaN(num) || val == null ? null : num);
                     });
                 }
                 break;
@@ -4914,15 +4992,15 @@ const createCleaners = (metadatas) => {
                 }
                 else {
                     transforms.push((t) => {
-                        const val = t[metaData.key];
+                        const val = t[notNestedKey];
                         const date = Date.parse(val);
                         if (isNaN(date)) {
-                            t[metaData.key] = null;
+                            t[notNestedKey] = null;
                             return;
                         }
                         const d = new Date(date);
                         d.setHours(0, 0, 0, 0);
-                        t[metaData.key] = d;
+                        t[notNestedKey] = d;
                     });
                 }
                 break;
@@ -4953,24 +5031,24 @@ const createCleaners = (metadatas) => {
                 }
                 else {
                     transforms.push((t) => {
-                        const val = t[metaData.key];
+                        const val = t[notNestedKey];
                         const dateTime = Date.parse(val);
                         if (isNaN(dateTime)) {
-                            t[metaData.key] = null;
+                            t[notNestedKey] = null;
                             return;
                         }
                         const dt = new Date(dateTime);
                         if (metaData.additional?.dateTimeOptions?.includeMilliseconds) {
-                            t[metaData.key] = dt;
+                            t[notNestedKey] = dt;
                             return;
                         }
                         if (metaData.additional?.dateTimeOptions?.includeSeconds) {
                             dt.setMilliseconds(0);
-                            t[metaData.key] = dt;
+                            t[notNestedKey] = dt;
                             return;
                         }
                         dt.setSeconds(0, 0);
-                        t[metaData.key] = dt;
+                        t[notNestedKey] = dt;
                     });
                 }
             }
@@ -5053,11 +5131,11 @@ function mergeCustomCellMetaData(metaData1, metaData2) {
 class TableContainerComponent {
     state = inject(TableStore);
     dataStore = inject(DataStore);
-    config = inject(TableBuilderConfigToken);
     exportToCsvService = inject((ExportToCsvService));
     wrapper = inject(TableWrapperDirective, { optional: true });
     stateService = inject(TableBuilderStateStore);
     injector = inject(Injector);
+    elementRef = inject(ElementRef);
     dataSource = new TableBuilderDataSource(this.state, this.dataStore);
     $filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
     $customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
@@ -5078,7 +5156,7 @@ class TableContainerComponent {
     $stickyFooter = input(false, { alias: 'stickyFooter' });
     $groupHeaderTemplate = input(undefined, { alias: 'groupHeaderTemplate' });
     $groupHeaderHeight = input(undefined, { alias: 'groupHeaderHeight' });
-    $pageSize = input(undefined, { alias: 'pageSizes' });
+    $pageSize = input(undefined, { alias: 'pageSize' });
     $props = computed(() => {
         const indexColumn = this.$indexColumn();
         const selectionColumn = this.$selectionColumn();
@@ -5091,11 +5169,11 @@ class TableContainerComponent {
     selection$ = output({ alias: 'selection' });
     onStateReset$ = output({ alias: 'onStateReset' });
     onSaveState$ = output({ alias: 'onSaveState' });
-    _state$ = toObservable(this.state.getSavableStateSignal);
+    _state$ = toObservable(this.state.$savableState);
     state$ = outputFromObservable(this._state$, { alias: 'state' });
-    data$ = new BehaviorSubject([]);
-    _data$ = outputFromObservable(this.data$, { alias: 'data' });
-    $data = toSignal(this.data$, { initialValue: [] });
+    _data$ = new BehaviorSubject([]);
+    data$ = outputFromObservable(this._data$, { alias: 'data' });
+    $data = toSignal(this._data$, { initialValue: [] });
     clearSelections() {
         this.$genericTable()?.$selection().clear(true);
     }
@@ -5111,7 +5189,10 @@ class TableContainerComponent {
     };
     collapseAllGroups = () => this.state.collapseAll();
     $myColumns = computed(() => {
-        return this.state.$metaDataArray().map(metaData => ({ metaData, customCell: this.$customCells().find(cc => cc.$customCell() === metaData.key) }));
+        return this.state.$metaDataArray().map(metaData => ({
+            metaData,
+            customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
+        }));
     });
     $useVirtual = this.state.$isVirtual;
     $collapsedFooter = this.state.$footerCollapsed;
@@ -5137,7 +5218,7 @@ class TableContainerComponent {
                 persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
                 this.state.updateStateFromPersistedState(persistedState);
             }
-            this.state.setInitializationState(InitializationState.Ready);
+            this.state.setInitializationState(InitializationState.LoadedFromStore);
         });
     });
     #setPageSizeFromInputEffect = effect(() => {
@@ -5227,7 +5308,7 @@ class TableContainerComponent {
         const tableBuilderMetaData = this.$tableBuilderMetaData();
         if (!tableBuilderMetaData)
             return;
-        const customCellMetaDatas = this.$customCells().map(cc => cc.$metaData()).filter(d => !!d);
+        const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d);
         const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
         return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
     });
@@ -5235,7 +5316,7 @@ class TableContainerComponent {
     ngOnDestroy() {
         const tableId = this.$tableId();
         if (tableId) {
-            this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.getSavableStateSignal() });
+            this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.$savableState() });
         }
     }
     initializeData() {
@@ -5250,7 +5331,7 @@ class TableContainerComponent {
         const sortedAndFilteredData$ = sortAndFilterData(this.$tableBuilder().getData$(), sortsState$, filters$);
         const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp$1()), this.state.groupByKeys$.pipe(timestamp$1()), this.state.expandedGroups$.pipe(timestamp$1())]).pipe(scan$1(updateGroupByState, initialGroupByState), map(({ displayData }) => displayData), defaultShareReplay());
         this.state.on(sortedAndFilteredData$, (data) => {
-            this.data$.next(data);
+            this._data$.next(data);
             this.dataStore.patchState({ dataLen: data.length });
         });
         this.state.on(flatGrouped$, (data) => {
@@ -5259,12 +5340,14 @@ class TableContainerComponent {
         });
     }
     $isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
+    static headerId = 'tb-header-wrapper';
+    headerId = TableContainerComponent.headerId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumn: { classPropertyName: "$indexColumn", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumn: { classPropertyName: "$selectionColumn", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $isSticky: { classPropertyName: "$isSticky", publicName: "isSticky", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooter: { classPropertyName: "$stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $inputFilters: "inputFiltersChange", selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", _data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().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 (!$collapsedHeader()) {\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]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\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: [".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: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { 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: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumn: { classPropertyName: "$indexColumn", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumn: { classPropertyName: "$selectionColumn", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $isSticky: { classPropertyName: "$isSticky", publicName: "isSticky", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooter: { classPropertyName: "$stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $inputFilters: "inputFiltersChange", selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().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 (!$collapsedHeader()) {\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]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\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: [".tb-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: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { 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: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$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: "19.0.0", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: containerImports, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().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 (!$collapsedHeader()) {\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]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\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: [".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"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: containerImports, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if(state.$groupByKeys().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 (!$collapsedHeader()) {\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]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\"  [dataSource]=\"dataSource\" />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\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: [".tb-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"] }]
         }] });
 
 class TableBuilderModule {
@@ -5677,5 +5760,5 @@ const setUpStoreFactory = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterTypes, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterTypes, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PaginatorOptions, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map