@one-paragon/angular-utilities 2.3.16 → 2.3.17

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

@@ -4,7 +4,7 @@ import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switch
 import * as i1 from 'rxjs';
 import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, pipe, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp } from 'rxjs';
 import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-import * as i3$2 from '@angular/material/sort';
+import * as i3$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { merge as merge$1, sumBy, difference, groupBy, cloneDeep, intersection, set, get } from 'lodash';
 import { CdkColumnDef } from '@angular/cdk/table';
@@ -13,27 +13,27 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i8 from '@angular/material/radio';
 import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
 import { MatButtonToggle } from '@angular/material/button-toggle';
-import * as i1$2 from '@angular/material/checkbox';
+import * as i1$1 from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@angular/forms';
-import { NgControl, NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, FormsModule, NG_VALUE_ACCESSOR, NgForm, ControlContainer } from '@angular/forms';
 import { MatOption } from '@angular/material/core';
 import { DatePipe, CurrencyPipe, formatDate, formatCurrency, NgTemplateOutlet, DecimalPipe, formatNumber, CommonModule, AsyncPipe } from '@angular/common';
 import { MatDialog, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { ComponentStore } from '@ngrx/component-store';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDropList, CDK_DROP_LIST, transferArrayItem } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/material/input';
+import * as i1$2 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
-import * as i3 from '@angular/material/datepicker';
+import * as i2$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3$1 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
 import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/material/icon';
+import * as i2$2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -1265,7 +1265,6 @@ const FilterType = {
     DateTimeBetween: 'Between',
     BooleanEquals: 'Is',
     IsNull: 'Is Blank',
-    Or: 'Or',
     And: 'And',
     In: 'In',
     Custom: 'Custom',
@@ -2425,7 +2424,7 @@ function buildInAllValuesFilter(config, previousMeta, currentMeta, data, metaTim
 const blankValueFilter = '__tb_sp_blank';
 const blankValueAndEmptyStringFilter = '__tb_sp_BLANK';
 function buildFilter(data, metaData, config) {
-    const map = createTransformer(metaData, config, true, true);
+    const map = metaData.fieldType == FieldType.Currency ? (v => v == null ? v : v[metaData.key]) : createTransformer(metaData, config, true, true);
     const mapped = data.map(v => {
         const mappedV = map(v);
         return [mappedV?.toString(), mappedV];
@@ -2841,6 +2840,7 @@ class TableStore extends ComponentStore {
         this.$tableSettingsMinWidth = this.selectSignal(state => parseTbSizeToPixels(state.notPersistedTableSettings.minColumnWidth));
         this.$getUserDefinedWidth = (key) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
         this.$filters = this.selectSignal(state => state.filters);
+        this.$filtersArray = computed(() => Object.values(this.state().filters) || []);
         this.filters$ = this.select(state => state.filters);
         this.$getFilter = (filterId) => {
             return this.selectSignal(this.$filters, filters => filters[filterId]);
@@ -3225,24 +3225,6 @@ function sortsAreSame(a, b) {
     return true;
 }
 
-class DateFilterComponent {
-    constructor() {
-        this.FilterType = FilterType;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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{\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 preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.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: "20.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
-                        MatInputModule, FormsModule, MatDatepickerModule
-                    ], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull)\r\n{\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 preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
-        }], propDecorators: { info: [{
-                type: Input
-            }], CurrentFilterType: [{
-                type: Input
-            }] } });
-
 class InFilterComponent {
     constructor() {
         this.ref = inject(ChangeDetectorRef);
@@ -3287,7 +3269,7 @@ class InFilterComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InFilterComponent,
                 multi: true
-            }], ngImport: i0, template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input #input type=\"string\"\r\n          [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\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    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], ngImport: i0, template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else if($type() === FieldType.Date)\r\n      {\r\n        <input matInput name=\"filterValue\" [ngModel]=\"val\" [matDatepicker]=\"cal\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (dateChange)=\"onValueChange($index, $event.value)\"/>\r\n        <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n        <mat-datepicker #cal />\r\n      }\r\n      @else if($type() === FieldType.DateTime)\r\n      {\r\n        <input type=\"datetime-local\" preventEnter [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input type=\"string\"\r\n          [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\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    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".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}button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$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: "20.0.3", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
@@ -3296,45 +3278,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                             useExisting: InFilterComponent,
                             multi: true
                         }], imports: [
-                        FormsModule, AutoFocusDirective
-                    ], template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input #input type=\"string\"\r\n          [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\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    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
+                        FormsModule, AutoFocusDirective, MatDatepickerModule
+                    ], template: "<div class=inline>\r\n  @for (val of value; track $index)\r\n  {\r\n    <div>\r\n      @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n      {\r\n        <input type=\"number\" [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else if($type() === FieldType.Date)\r\n      {\r\n        <input matInput name=\"filterValue\" [ngModel]=\"val\" [matDatepicker]=\"cal\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (dateChange)=\"onValueChange($index, $event.value)\"/>\r\n        <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n        <mat-datepicker #cal />\r\n      }\r\n      @else if($type() === FieldType.DateTime)\r\n      {\r\n        <input type=\"datetime-local\" preventEnter [ngModel]=\"val\"\r\n          [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n      }\r\n      @else\r\n      {\r\n        <input type=\"string\"\r\n          [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n          [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\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    {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".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}button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [] });
 
-class NumberFilterComponent {
-    constructor() {
-        this.FilterType = FilterType;
-        this.FieldType = FieldType;
-        this.$currentFilterType = input.required({ alias: 'CurrentFilterType' });
-        this.$info = input.required({ alias: 'info' });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "CurrentFilterType", isSignal: true, isRequired: true, transformFunction: null }, $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let CurrentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In)\r\n{\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" type=\"number\" [ngModel]=\"info.filterValue\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" placeholder=\"Start\" type=\"number\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" placeholder=\"End\" type=\"number\" [ngModel]=\"info.filterValue?.End\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In)\r\n{\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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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: "20.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
-                        MatInputModule, FormsModule, InFilterComponent
-                    ], template: "@let CurrentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In)\r\n{\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" type=\"number\" [ngModel]=\"info.filterValue\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" placeholder=\"Start\" type=\"number\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" placeholder=\"End\" type=\"number\" [ngModel]=\"info.filterValue?.End\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In)\r\n{\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"] }]
-        }] });
-
-class DateTimeFilterComponent {
-    constructor() {
-        this.FilterType = FilterType;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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{\r\n  <input type=\"datetime-local\" preventEnter name=\"filterValue\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue\"/>\r\n}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <input type=\"datetime-local\" preventEnter name=\"Start\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    <input type=\"datetime-local\" preventEnter name=\"End\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.End\"/>\r\n  </ng-container>\r\n}", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
-                        FormsModule
-                    ], template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull)\r\n{\r\n  <input type=\"datetime-local\" preventEnter name=\"filterValue\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue\"/>\r\n}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <input type=\"datetime-local\" preventEnter name=\"Start\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    <input type=\"datetime-local\" preventEnter name=\"End\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.End\"/>\r\n  </ng-container>\r\n}", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
-        }], propDecorators: { info: [{
-                type: Input
-            }], CurrentFilterType: [{
-                type: Input
-            }] } });
-
 class InListFilterComponent {
     constructor() {
         this.ref = inject(ChangeDetectorRef);
@@ -3479,13 +3426,11 @@ class InListFilterComponent {
         }
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;max-height:max(50vh,400px);overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'tb-in-list-filter',
-                    template: `
+            args: [{ selector: 'tb-in-list-filter', template: `
     @if($specialBlank(); as specialBlank)
     {
       <div>
@@ -3552,17 +3497,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
         }
       }
     }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: InListFilterComponent,
                             multi: true
-                        }],
-                    imports: [
+                        }], imports: [
                         MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe, DatePipe, CurrencyPipe
-                    ]
-                }]
+                    ], styles: [":host{display:block;max-height:max(50vh,400px);overflow-y:auto}\n"] }]
+        }] });
+
+class DateFilterComponent {
+    constructor() {
+        this.FilterType = FilterType;
+        this.FieldType = FieldType;
+        this.$info = input.required({ alias: 'info' });
+        this.$currentFilterType = input.required({ alias: 'currentFilterType' });
+        this.state = inject(TableStore);
+        this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
+        this.$allValuesInMeta = computed(() => {
+            const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+            return filterable === 'all values' || filterable?.allValues === true;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null }, $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "currentFilterType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if (currentFilterType !== FilterType.DateBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\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 preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(currentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n  @if($allValuesInMeta())\r\n  {\r\n    <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n  @else\r\n  {\r\n    <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        MatInputModule, FormsModule, MatDatepickerModule, InFilterComponent, InListFilterComponent
+                    ], template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if (currentFilterType !== FilterType.DateBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\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 preventEnter [for]=\"cal\" />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(currentFilterType === FilterType.DateBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" placeholder=\"From\"  [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n      <mat-datepicker #fromVal />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" placeholder=\"To\"  [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n  @if($allValuesInMeta())\r\n  {\r\n    <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n  @else\r\n  {\r\n    <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+        }] });
+
+class NumberFilterComponent {
+    constructor() {
+        this.FilterType = FilterType;
+        this.FieldType = FieldType;
+        this.$currentFilterType = input.required({ alias: 'currentFilterType' });
+        this.$info = input.required({ alias: 'info' });
+        this.state = inject(TableStore);
+        this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
+        this.$allValuesInMeta = computed(() => {
+            const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+            return filterable === 'all values' || filterable?.allValues === true;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "currentFilterType", isSignal: true, isRequired: true, transformFunction: null }, $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(currentFilterType !== FilterType.NumberBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" type=\"number\" [ngModel]=\"info.filterValue\"/>\r\n  </mat-form-field>\r\n}\r\n@if(currentFilterType === FilterType.NumberBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" placeholder=\"Start\" type=\"number\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" placeholder=\"End\" type=\"number\" [ngModel]=\"info.filterValue?.End\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n  @if($allValuesInMeta())\r\n  {\r\n    <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n  @else\r\n  {\r\n    <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n  }\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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
+                    ], template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(currentFilterType !== FilterType.NumberBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" type=\"number\" [ngModel]=\"info.filterValue\"/>\r\n  </mat-form-field>\r\n}\r\n@if(currentFilterType === FilterType.NumberBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" placeholder=\"Start\" type=\"number\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" placeholder=\"End\" type=\"number\" [ngModel]=\"info.filterValue?.End\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n  @if($allValuesInMeta())\r\n  {\r\n    <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n  @else\r\n  {\r\n    <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
+        }] });
+
+class DateTimeFilterComponent {
+    constructor() {
+        this.FilterType = FilterType;
+        this.FieldType = FieldType;
+        this.$info = input.required({ alias: 'info' });
+        this.$currentFilterType = input.required({ alias: 'currentFilterType' });
+        this.state = inject(TableStore);
+        this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
+        this.$allValuesInMeta = computed(() => {
+            const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+            return filterable === 'all values' || filterable?.allValues === true;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null }, $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "currentFilterType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(currentFilterType !== FilterType.DateTimeBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\r\n  <input type=\"datetime-local\" preventEnter name=\"filterValue\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue\"/>\r\n}\r\n@if(currentFilterType === FilterType.DateTimeBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <input type=\"datetime-local\" preventEnter name=\"Start\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    <input type=\"datetime-local\" preventEnter name=\"End\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.End\"/>\r\n  </ng-container>\r\n}\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n  @if($allValuesInMeta())\r\n  {\r\n    <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n  @else\r\n  {\r\n    <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n}", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        FormsModule, InFilterComponent, InListFilterComponent
+                    ], template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(currentFilterType !== FilterType.DateTimeBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\r\n  <input type=\"datetime-local\" preventEnter name=\"filterValue\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue\"/>\r\n}\r\n@if(currentFilterType === FilterType.DateTimeBetween)\r\n{\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <input type=\"datetime-local\" preventEnter name=\"Start\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.Start\"/>\r\n    <input type=\"datetime-local\" preventEnter name=\"End\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.End\"/>\r\n  </ng-container>\r\n}\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n  @if($allValuesInMeta())\r\n  {\r\n    <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n  @else\r\n  {\r\n    <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n  }\r\n}", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }] });
 
 class FilterComponent {
@@ -3575,6 +3585,11 @@ class FilterComponent {
             alias: 'filter',
             transform: (f) => ({ ...f })
         });
+        this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)());
+        this.$allValuesInMeta = computed(() => {
+            const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+            return filterable === 'all values' || filterable?.allValues === true;
+        });
         this.close = output();
         this.$enteredFilterType = signal(undefined);
         this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType);
@@ -3592,7 +3607,7 @@ class FilterComponent {
         this.state.addFilter({ ...filter, filterBy: this.$filterBy() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\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 type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close.emit();\">\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\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\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 disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\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        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          <lib-in-filter name='filterValue' [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">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        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\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:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\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 type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close.emit();\">\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\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\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 disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\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        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          @if($allValuesInMeta())\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n          @else\r\n          {\r\n            <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">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        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\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:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -3601,7 +3616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         MatInputModule, MatSelectModule, NumberFilterComponent,
                         DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
                         NgTemplateOutlet
-                    ], template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\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 type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close.emit();\">\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\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\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 disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\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        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          <lib-in-filter name='filterValue' [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">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        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\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:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+                    ], template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\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 type=\"button\" [matTooltip]=\"'Close'\"\r\n              (click)=\"close.emit();\">\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\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n                    @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n                    {\r\n                      <mat-option [value]=\"kvp\">\r\n                        {{ kvp }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            @if(\r\n              filter.fieldType === FieldType.String\r\n              || filter.fieldType === FieldType.Array\r\n              || filter.fieldType === FieldType.Link\r\n              || filter.fieldType === FieldType.Unknown\r\n              || filter.fieldType === FieldType.PhoneNumber)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"String\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n            {\r\n              <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Boolean)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n            }\r\n            @else if(\r\n              filter.fieldType === FieldType.Date\r\n              || (\r\n                  filter.fieldType === FieldType.DateTime\r\n                  && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n                ))\r\n            {\r\n              <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.DateTime)\r\n            {\r\n              <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n            }\r\n            @else if(filter.fieldType === FieldType.Enum)\r\n            {\r\n              <ng-container *ngTemplateOutlet=\"Enum\" />\r\n            }\r\n\r\n            @if(currentFilterType === FilterType.IsNull)\r\n            {\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 disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\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        {\r\n          <mat-form-field class=\"my-filter\">\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n          </mat-form-field>\r\n        }\r\n        @else if(currentFilterType === FilterType.In)\r\n        {\r\n          @if($allValuesInMeta())\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n          @else\r\n          {\r\n            <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n          }\r\n        }\r\n      </ng-template>\r\n      \r\n      <ng-template #Boolean >\r\n        @if(currentFilterType === FilterType.BooleanEquals)\r\n        {\r\n          <div class=\"switch\">\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n              <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button preventEnter [value]=\"false\">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        {\r\n          <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\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:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}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{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }] });
 
 class GenColDisplayerComponent {
@@ -3628,7 +3643,7 @@ class GenColDisplayerComponent {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols)\r\n{\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button color=\"primary\" 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 color=\"primary\" 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 color=\"primary\" 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 stop-propagation [cdkDropListLockAxis]=\"'y'\" (cdkDropListDropped)=\"drop($event)\">\r\n      @for (col of displayCols; track col.key)\r\n      {\r\n        <button stop-propagation mat-menu-item cdkDrag [class.isHidden]=\"!col.isVisible\" [cdkDragData]=\"col\">\r\n        <div style=\"display: flex; align-items: center;\" (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\">\r\n          @if(col.isVisible)\r\n          {\r\n            <button color=\"primary\" mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          }\r\n          @else\r\n          {\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:var(tb-col-display-name);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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: i5.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: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols)\r\n{\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button color=\"primary\" 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 color=\"primary\" 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 color=\"primary\" 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 stop-propagation [cdkDropListLockAxis]=\"'y'\" (cdkDropListDropped)=\"drop($event)\">\r\n      @for (col of displayCols; track col.key)\r\n      {\r\n        <button stop-propagation mat-menu-item cdkDrag [class.isHidden]=\"!col.isVisible\" [cdkDragData]=\"col\">\r\n        <div style=\"display: flex; align-items: center;\" (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\">\r\n          @if(col.isVisible)\r\n          {\r\n            <button color=\"primary\" mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          }\r\n          @else\r\n          {\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:var(tb-col-display-name);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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: i5.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: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
@@ -3638,26 +3653,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                     ], template: "@if($columns(); as displayCols)\r\n{\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button color=\"primary\" 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 color=\"primary\" 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 color=\"primary\" 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 stop-propagation [cdkDropListLockAxis]=\"'y'\" (cdkDropListDropped)=\"drop($event)\">\r\n      @for (col of displayCols; track col.key)\r\n      {\r\n        <button stop-propagation mat-menu-item cdkDrag [class.isHidden]=\"!col.isVisible\" [cdkDragData]=\"col\">\r\n        <div style=\"display: flex; align-items: center;\" (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\">\r\n          @if(col.isVisible)\r\n          {\r\n            <button color=\"primary\" mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          }\r\n          @else\r\n          {\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:var(tb-col-display-name);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"] }]
         }] });
 
-class WrapperFilterStore extends ComponentStore {
+class WrapperFilterStore {
     constructor() {
-        super({ filterInfo: [] });
-        this.clearAll = this.updater(() => ({ filterInfo: [] }));
-        this.deleteByIndex = this.updater((state, index) => {
-            const arr = [...state.filterInfo];
-            arr.splice(index, 1);
-            return { filterInfo: arr };
-        });
-        this.$currentFilters = this.selectSignal(state => state.filterInfo);
-        this.addFilter = this.updater((state, filter) => {
-            return ({ ...state, filterInfo: [...state.filterInfo, filter] });
-        });
+        this.$filters = signal([]);
+        this.clearAll = () => this.$filters.set([]);
+        this.deleteByIndex = (index) => this.$filters.update(filters => filters.toSpliced(index, 1));
+        this.addFilter = (filter) => {
+            this.$filters.update(filters => [...filters, filter]);
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: WrapperFilterStore }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: WrapperFilterStore, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 class GenFilterDisplayerComponent {
     constructor() {
@@ -3676,7 +3686,7 @@ class GenFilterDisplayerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button color=\"primary\" 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(); track md.key)\r\n  {\r\n    <button mat-menu-item (click)=\"addFilter(md)\">\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{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{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: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: i4.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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button color=\"primary\" 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(); track md.key)\r\n  {\r\n    <button mat-menu-item (click)=\"addFilter(md)\">\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{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{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: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: i4.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: i2$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: "20.0.3", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
             type: Component,
@@ -3783,8 +3793,8 @@ class FilterChipsComponent {
     constructor() {
         this.tableState = inject(TableStore);
         this.filterStore = inject(WrapperFilterStore);
-        this.$filters = computed(() => Object.values(this.tableState.$filters()).filter(f => isFilterInfo(f) && !f._isExternallyManaged));
-        this.$currentFilters = this.filterStore.$currentFilters;
+        this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged));
+        this.$currentFilters = this.filterStore.$filters;
     }
     deleteByIndex(index) {
         this.filterStore.deleteByIndex(index);
@@ -3796,7 +3806,7 @@ class FilterChipsComponent {
         this.filterStore.clearAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\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      {\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>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1)\r\n    {\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{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{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: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\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      {\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>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1)\r\n    {\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{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{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: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$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$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: "20.0.3", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
@@ -4003,6 +4013,8 @@ class ColumnHeaderMenuComponent {
         this.$metaData = input.required({ alias: 'metaData' });
         this.$fieldType = computed(() => this.$metaData().fieldType);
         this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType());
+        this.$filterValue = computed(() => this.tableState.$filtersArray().filter(isFilterInfo)
+            .find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue);
         this.$trigger = viewChild(MatMenuTrigger);
         this.$metaFilterType = computed(() => {
             if (this.$metaData().additional?.filterOptions?.filterableValues) {
@@ -4062,14 +4074,14 @@ class ColumnHeaderMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<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 ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" 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 color=\"primary\" 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  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(filterFieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n        {\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>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === 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 (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n        {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n              (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n              (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n              (click)=\"setFilterType(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 (filterFieldType === FieldType.Boolean)\r\n        {\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 #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n        {\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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n            <mat-datepicker #calendar />\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-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;width:24px;color:#0000008a;font-size:21px;line-height:1.125}tb-in-list-filter{display:block;max-height:max(50vh,400px);overflow-y:auto}.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: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<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 ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" 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 color=\"primary\" 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  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @let filterValue = $filterValue();\r\n    <ng-template matMenuContent>\r\n      @if (filterFieldType !== FieldType.NotMapped)\r\n      {\r\n        <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n          @if(currentFilterType === FilterType.In)\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n          }\r\n          @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n          {\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>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n              <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n                <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                  <mat-icon [class]=\"{'chosen-icon': currentFilterType === 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 (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n          {\r\n            <mat-form-field class=\"auto-width\" stop-propagation>\r\n              <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n                (click)=\"setFilterType(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 (filterFieldType === FieldType.Boolean)\r\n          {\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 #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n              </mat-radio-group>\r\n            </div>\r\n          }\r\n          @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n          {\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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                  (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                  (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                  (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                  <span  class=\"suffix-icons underline\"> =</span>\r\n                </button>\r\n              </span>\r\n              <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n                currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n                (click)=\"calendar.open()\"/>\r\n              <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n              <mat-datepicker #calendar />\r\n            </mat-form-field>\r\n          }\r\n          <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n            Apply\r\n          </button>\r\n        </ng-form>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-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;width: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: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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", inputs: ["values", "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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$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: "20.0.3", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
                         MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule
-                    ], template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<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 ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" 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 color=\"primary\" 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  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @if (!(filterFieldType === FieldType.NotMapped))\r\n    {\r\n      <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In)\r\n        {\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]=\"undefined\"/>\r\n        }\r\n        @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n        {\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>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n            <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                <mat-icon [class]=\"{'chosen-icon': currentFilterType === 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 (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n        {\r\n          <mat-form-field class=\"auto-width\" stop-propagation>\r\n            <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n              (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n              (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n              (click)=\"setFilterType(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 (filterFieldType === FieldType.Boolean)\r\n        {\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 #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        }\r\n        @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n        {\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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n              currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n            <mat-datepicker #calendar />\r\n          </mat-form-field>\r\n        }\r\n        <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n          Apply\r\n        </button>\r\n      </ng-form>\r\n    }\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-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;width:24px;color:#0000008a;font-size:21px;line-height:1.125}tb-in-list-filter{display:block;max-height:max(50vh,400px);overflow-y:auto}.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: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<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 ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n  {\r\n    <button color=\"primary\" 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 color=\"primary\" 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  <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n    @let filterValue = $filterValue();\r\n    <ng-template matMenuContent>\r\n      @if (filterFieldType !== FieldType.NotMapped)\r\n      {\r\n        <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n          @if(currentFilterType === FilterType.In)\r\n          {\r\n            <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n          }\r\n          @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n          {\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>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n              <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n                <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n                  <mat-icon [class]=\"{'chosen-icon': currentFilterType === 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 (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n          {\r\n            <mat-form-field class=\"auto-width\" stop-propagation>\r\n              <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"undefined\" />\r\n              <span matPrefix class=\"tb-header-prefix\">\r\n                <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n                (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n                (click)=\"setFilterType(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 (filterFieldType === FieldType.Boolean)\r\n          {\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 #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n                <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n              </mat-radio-group>\r\n            </div>\r\n          }\r\n          @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n          {\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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n                  (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }\"\r\n                  (click)=\"setFilterType(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\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n                  (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n                  <span  class=\"suffix-icons underline\"> =</span>\r\n                </button>\r\n              </span>\r\n              <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n                currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n                (click)=\"calendar.open()\"/>\r\n              <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n              <mat-datepicker #calendar />\r\n            </mat-form-field>\r\n          }\r\n          <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n            Apply\r\n          </button>\r\n        </ng-form>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n\r\n</mat-menu>\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-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;width: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"] }]
         }] });
 
 class ColumnTotalPipe {
@@ -4235,7 +4247,7 @@ class ColumnBuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n  <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n    <!-- header -->\r\n    <ng-template #myHeader matHeaderCellDef>\r\n      <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\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 || !!metaData.sortLogic?.sortBy)\r\n              {\r\n                <div mat-sort-header style=\"width: 100%\" [disabled]=\"metaData.noSort\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @else if(metaData.fieldType === FieldType.NotMapped)\r\n              {\r\n                <div style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @if($showFilters())\r\n              {\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          }\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) : ''\" \r\n        [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'\r\n        (click)='cellClicked(element, metaData.key, $event)' >\r\n        <ng-container *ngTemplateOutlet=\"$innerTemplate()!;\r\n          context: {\r\n            value: ($transform()! | func : element),\r\n            element: element,\r\n            additional: $additional(),\r\n            innerStyles: styles.innerBody,\r\n            $implicit: element\r\n            }; 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      {\r\n        <ng-container\r\n        *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template;\r\n        context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n      }\r\n      @else\r\n      {\r\n        @let data = $data();\r\n        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n          @if(!!data?.length && metaData.additional?.footer)\r\n          {\r\n            <span class=\"bold\">\r\n              @switch (metaData.fieldType)\r\n              {\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: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.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: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$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: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n  <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n    <!-- header -->\r\n    <ng-template #myHeader matHeaderCellDef>\r\n      <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\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 || !!metaData.sortLogic?.sortBy)\r\n              {\r\n                <div mat-sort-header style=\"width: 100%\" [disabled]=\"metaData.noSort\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @else if(metaData.fieldType === FieldType.NotMapped)\r\n              {\r\n                <div style=\"width: 100%\">\r\n                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n                </div>\r\n              }\r\n              @if($showFilters())\r\n              {\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          }\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) : ''\" \r\n        [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'\r\n        (click)='cellClicked(element, metaData.key, $event)' >\r\n        <ng-container *ngTemplateOutlet=\"$innerTemplate()!;\r\n          context: {\r\n            value: ($transform()! | func : element),\r\n            element: element,\r\n            additional: $additional(),\r\n            innerStyles: styles.innerBody,\r\n            $implicit: element\r\n            }; 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      {\r\n        <ng-container\r\n        *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template;\r\n        context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n      }\r\n      @else\r\n      {\r\n        @let data = $data();\r\n        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n          @if(!!data?.length && metaData.additional?.footer)\r\n          {\r\n            <span class=\"bold\">\r\n              @switch (metaData.fieldType)\r\n              {\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: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.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: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$1.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: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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 }); }
 }
@@ -4761,7 +4773,7 @@ class GenericTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | 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 }\" />\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\" [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-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)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}: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"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.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: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | 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 }\" />\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\" [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-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)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}: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"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.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: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -5423,7 +5435,7 @@ class PaginatorComponent {
       </button>
     }
   </div>
-  `, isInline: true, styles: [":host{--mat-paginator-container-size: var(tb-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)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}: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$7.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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--mat-paginator-container-size: var(tb-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)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}: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$7.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.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -5546,7 +5558,7 @@ class GroupByListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupBy of $groups(); track groupBy.key)\r\n  {\r\n    @if($index > 0)\r\n    {\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupBy.key)\">\r\n      {{groupBy.name | 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{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupBy of $groups(); track groupBy.key)\r\n  {\r\n    @if($index > 0)\r\n    {\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupBy.key)\">\r\n      {{groupBy.name | 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{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$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: "20.0.3", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
@@ -5699,7 +5711,7 @@ class SortMenuComponent {
         this.store.setDirection(sort);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button color=\"primary\" 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      {\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\" stop-propagation\r\n      [class.apply-border]=\"dirty\" [disabled]=\"!dirty\"\r\n      (click)=\"apply()\">\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  {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div #sortedGroup=\"cdkDropList\"\r\n    class=\"list\"\r\n    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    {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1)\r\n      {\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 class=\"up-down-icon\" [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\">\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 class=\"up-down-icon\" [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\">\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  {\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 #notSortedGroup=\"cdkDropList\"\r\n    class=\"list\"\r\n    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    {\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", 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: i5.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: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n  <button color=\"primary\" 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      {\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\" stop-propagation\r\n      [class.apply-border]=\"dirty\" [disabled]=\"!dirty\"\r\n      (click)=\"apply()\">\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  {\r\n    <div class=\"tip\" >\r\n      Sorting List\r\n    </div>\r\n  }\r\n\r\n  <!-- Sorted Menu List -->\r\n  <div #sortedGroup=\"cdkDropList\"\r\n    class=\"list\"\r\n    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    {\r\n      <!-- Menu Item Headers -->\r\n      @if (sorted.length > 1)\r\n      {\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 class=\"up-down-icon\" [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\">\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 class=\"up-down-icon\" [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\">\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  {\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 #notSortedGroup=\"cdkDropList\"\r\n    class=\"list\"\r\n    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    {\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", 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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: i5.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: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SortMenuComponent, decorators: [{
             type: Component,
@@ -6467,7 +6479,7 @@ class TableContainerComponent {
     #setUpAllValuesFilters;
     static { this.headerId = 'tb-header-wrapper'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", 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: { 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 }, { propertyName: "$menu", first: true, predicate: MatMenu, 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      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\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' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\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        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\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      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\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 class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\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 && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.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}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\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: 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: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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 { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", 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: { 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 }, { propertyName: "$menu", first: true, predicate: MatMenu, 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      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\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' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\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        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\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      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\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 class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\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 && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.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}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\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: 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: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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: "20.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,