@one-paragon/angular-utilities 1.2.3 → 1.2.4

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

@@ -2614,13 +2614,13 @@ class DateFilterComponent {
     info;
     CurrentFilterType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\n  <mat-form-field>\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\n    <mat-datepicker #cal />\n  </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.DateBetween){\n  <ng-container ngModelGroup=\"filterValue\">\n    <mat-form-field class=\"my-filter\" >\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\n          (click)=\"fromVal.open()\"/>\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\n      <mat-datepicker #fromVal></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\n      <mat-datepicker #toVal />\n    </mat-form-field>\n  </ng-container>\n}\n\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "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"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         MatInputModule, FormsModule, MatDatepickerModule, PreventEnterDirective
-                    ], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\n  <mat-form-field>\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\n    <mat-datepicker #cal />\n  </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.DateBetween){\n  <ng-container ngModelGroup=\"filterValue\">\n    <mat-form-field class=\"my-filter\" >\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\n          (click)=\"fromVal.open()\"/>\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\n      <mat-datepicker #fromVal></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field>\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\n      <mat-datepicker #toVal />\n    </mat-form-field>\n  </ng-container>\n}\n\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+                    ], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\r\n  <mat-form-field>\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n    <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\r\n    <mat-datepicker #cal />\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.DateBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\r\n      <mat-datepicker #toVal />\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }], propDecorators: { info: [{
                 type: Input
             }], CurrentFilterType: [{
@@ -2671,7 +2671,7 @@ class InFilterComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InFilterComponent,
                 multi: true
-            }], ngImport: i0, template: "<div class=inline>\n  @for (val of value; track $index) {\n    <div>\n      @if(type === FieldType.Number || type === FieldType.Currency){\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\n      }\n      @else {\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        #input [autoFocus]=\"$index === value.length - 1\" />\n      }\n    </div>\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\n    @if ($index === value.length - 1) {\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    }\n    \n  }\n</div>\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], ngImport: i0, template: "<div class=inline>\r\n  @for (val of value; track $index) {\r\n    <div>\r\n      @if(type === FieldType.Number || type === FieldType.Currency){\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n      }\r\n      @else {\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"$index === value.length - 1\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1) {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n    \r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
@@ -2681,7 +2681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             multi: true
                         }], standalone: true, imports: [
                         FormsModule, AutoFocusDirective
-                    ], template: "<div class=inline>\n  @for (val of value; track $index) {\n    <div>\n      @if(type === FieldType.Number || type === FieldType.Currency){\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\n      }\n      @else {\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        #input [autoFocus]=\"$index === value.length - 1\" />\n      }\n    </div>\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\n    @if ($index === value.length - 1) {\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    }\n    \n  }\n</div>\n", styles: [".inline{display:inline-block}\n"] }]
+                    ], template: "<div class=inline>\r\n  @for (val of value; track $index) {\r\n    <div>\r\n      @if(type === FieldType.Number || type === FieldType.Currency){\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n      }\r\n      @else {\r\n        <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n        [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n        #input [autoFocus]=\"$index === value.length - 1\" />\r\n      }\r\n    </div>\r\n    <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n    @if ($index === value.length - 1) {\r\n      <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n    }\r\n    \r\n  }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }] } });
@@ -2692,13 +2692,13 @@ class NumberFilterComponent {
     CurrentFilterType;
     info;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\n  <mat-form-field class=\"my-filter\">\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n  </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.NumberBetween){\n  <ng-container ngModelGroup=\"filterValue\"  >\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n    </mat-form-field>\n  </ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\n}\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"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         MatInputModule, FormsModule, InFilterComponent
-                    ], template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\n  <mat-form-field class=\"my-filter\">\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n  </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.NumberBetween){\n  <ng-container ngModelGroup=\"filterValue\"  >\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n    </mat-form-field>\n    <mat-form-field class=\"my-filter\">\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n    </mat-form-field>\n  </ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\n}\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
+                    ], template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n  <mat-form-field class=\"my-filter\">\r\n    <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n  </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n  <ng-container ngModelGroup=\"filterValue\"  >\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"my-filter\">\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n    </mat-form-field>\r\n  </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n  <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
         }], propDecorators: { CurrentFilterType: [{
                 type: Input
             }], info: [{
@@ -2710,13 +2710,13 @@ class DateTimeFilterComponent {
     info;
     CurrentFilterType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n}\n@if(CurrentFilterType === FilterType.DateTimeBetween){\n  <ng-container ngModelGroup=\"filterValue\">\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n  </ng-container>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\r\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\r\n  </ng-container>\r\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         FormsModule, PreventEnterDirective
-                    ], template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n}\n@if(CurrentFilterType === FilterType.DateTimeBetween){\n  <ng-container ngModelGroup=\"filterValue\">\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n  </ng-container>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+                    ], template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\r\n  <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween){\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\r\n    <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\r\n  </ng-container>\r\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }], propDecorators: { info: [{
                 type: Input
             }], CurrentFilterType: [{
@@ -2775,30 +2775,30 @@ class InListFilterComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InListFilterComponent,
                 multi: true
-            }], ngImport: i0, template: `
-  @for (item of keyValues$ | async| keyvalue; track item.key) {
-    <div>
-      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
-        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
-      </mat-checkbox>
-    </div>
-  }
-
+            }], ngImport: i0, template: `
+  @for (item of keyValues$ | async| keyvalue; track item.key) {
+    <div>
+      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      </mat-checkbox>
+    </div>
+  }
+
   `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-in-list-filter , [tb-in-list-filter]',
-                    template: `
-  @for (item of keyValues$ | async| keyvalue; track item.key) {
-    <div>
-      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
-        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
-      </mat-checkbox>
-    </div>
-  }
-
+                    template: `
+  @for (item of keyValues$ | async| keyvalue; track item.key) {
+    <div>
+      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      </mat-checkbox>
+    </div>
+  }
+
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{
@@ -2836,7 +2836,7 @@ class FilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", 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();\n@let currentFilterType = $currentFilterType();\n\n@if (filter) {\n<mat-card appearance=\"outlined\" class=\"filter-card\">\n  <mat-card-content>\n    <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n      <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n      <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n      <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n      <div class=\"head-row\" >\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n        <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n            matTooltip=\"Close\">\n          <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n        </button>\n      </div>\n      <div class=\"filter-row\">\n          <div class=\"inline\">\n            <mat-form-field class=\"my-filter\" >\n                <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" (ngModelChange)=\"$enteredFilterType.set($event)\" [panelWidth]=\"null\">\n                  @for (kvp of filterTypes[filter.fieldType]; track kvp) {\n                    <mat-option [value]=\"kvp\">\n                      {{ kvp }}\n                    </mat-option>\n                  }\n                </mat-select>\n            </mat-form-field>\n          </div>\n          @if(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n            <ng-container *ngTemplateOutlet=\"String\" />\n          }\n          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\n            <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n          }\n          @else if(filter.fieldType === FieldType.Boolean){\n            <ng-container *ngTemplateOutlet=\"Boolean\" />\n          }\n          @else if(filter.fieldType === FieldType.Date){\n            <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n          }\n          @else if(filter.fieldType === FieldType.DateTime){\n            <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n          }\n          @else if(filter.fieldType === FieldType.Enum){\n            <ng-container *ngTemplateOutlet=\"Enum\" />\n          }\n\n          @if(currentFilterType === FilterType.IsNull){\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\n              <mat-radio-button [value]=\"true\">True</mat-radio-button>\n              <mat-radio-button [value]=\"false\">False</mat-radio-button>\n            </mat-radio-group>\n          }\n      </div>\n      <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n        Apply\n      </button>\n    \n    \n    <ng-template #String>\n      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\n        <mat-form-field class=\"my-filter\">\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n        </mat-form-field>\n      } @else if(currentFilterType === FilterType.In) {\n        <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\n      }\n    </ng-template>\n    \n    <ng-template #Boolean >\n      @if(currentFilterType === FilterType.BooleanEquals){\n        <div class=\"switch\">\n          <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n            <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n            <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n          </mat-radio-group>\n        </div>\n      }\n    </ng-template>\n    <ng-template #Enum>\n      @if(currentFilterType === FilterType.In){\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n\n      }\n    </ng-template>\n    </form>\n  </mat-card-content>\n</mat-card>\n}\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.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: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.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 , [tb-in-list-filter]", inputs: ["key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", 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<mat-card appearance=\"outlined\" class=\"filter-card\">\r\n  <mat-card-content>\r\n    <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\r\n      <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n      <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n      <div class=\"head-row\" >\r\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n        <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\r\n            matTooltip=\"Close\">\r\n          <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div class=\"filter-row\">\r\n          <div class=\"inline\">\r\n            <mat-form-field class=\"my-filter\" >\r\n                <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" (ngModelChange)=\"$enteredFilterType.set($event)\" [panelWidth]=\"null\">\r\n                  @for (kvp of filterTypes[filter.fieldType]; track kvp) {\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(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\r\n          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\r\n            <ng-container *ngTemplateOutlet=\"String\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\r\n            <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Boolean){\r\n            <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Date){\r\n            <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.DateTime){\r\n            <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Enum){\r\n            <ng-container *ngTemplateOutlet=\"Enum\" />\r\n          }\r\n\r\n          @if(currentFilterType === FilterType.IsNull){\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n              <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n            </mat-radio-group>\r\n          }\r\n      </div>\r\n      <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\r\n        Apply\r\n      </button>\r\n    \r\n    \r\n    <ng-template #String>\r\n      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\r\n        <mat-form-field class=\"my-filter\">\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n        </mat-form-field>\r\n      } @else if(currentFilterType === FilterType.In) {\r\n        <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\r\n      }\r\n    </ng-template>\r\n    \r\n    <ng-template #Boolean >\r\n      @if(currentFilterType === FilterType.BooleanEquals){\r\n        <div class=\"switch\">\r\n          <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n            <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\r\n            <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n    </ng-template>\r\n    <ng-template #Enum>\r\n      @if(currentFilterType === FilterType.In){\r\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n\r\n      }\r\n    </ng-template>\r\n    </form>\r\n  </mat-card-content>\r\n</mat-card>\r\n}\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: 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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.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: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.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 , [tb-in-list-filter]", inputs: ["key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -2845,7 +2845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         MatInputModule, MatSelectModule, KeyValuePipe, NumberFilterComponent,
                         DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
                         PreventEnterDirective, NgTemplateOutlet
-                    ], template: "@let filter = $filter();\n@let currentFilterType = $currentFilterType();\n\n@if (filter) {\n<mat-card appearance=\"outlined\" class=\"filter-card\">\n  <mat-card-content>\n    <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n      <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n      <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n      <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n      <div class=\"head-row\" >\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n        <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n            matTooltip=\"Close\">\n          <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n        </button>\n      </div>\n      <div class=\"filter-row\">\n          <div class=\"inline\">\n            <mat-form-field class=\"my-filter\" >\n                <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" (ngModelChange)=\"$enteredFilterType.set($event)\" [panelWidth]=\"null\">\n                  @for (kvp of filterTypes[filter.fieldType]; track kvp) {\n                    <mat-option [value]=\"kvp\">\n                      {{ kvp }}\n                    </mat-option>\n                  }\n                </mat-select>\n            </mat-form-field>\n          </div>\n          @if(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n            <ng-container *ngTemplateOutlet=\"String\" />\n          }\n          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\n            <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n          }\n          @else if(filter.fieldType === FieldType.Boolean){\n            <ng-container *ngTemplateOutlet=\"Boolean\" />\n          }\n          @else if(filter.fieldType === FieldType.Date){\n            <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n          }\n          @else if(filter.fieldType === FieldType.DateTime){\n            <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n          }\n          @else if(filter.fieldType === FieldType.Enum){\n            <ng-container *ngTemplateOutlet=\"Enum\" />\n          }\n\n          @if(currentFilterType === FilterType.IsNull){\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\n              <mat-radio-button [value]=\"true\">True</mat-radio-button>\n              <mat-radio-button [value]=\"false\">False</mat-radio-button>\n            </mat-radio-group>\n          }\n      </div>\n      <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n        Apply\n      </button>\n    \n    \n    <ng-template #String>\n      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\n        <mat-form-field class=\"my-filter\">\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n        </mat-form-field>\n      } @else if(currentFilterType === FilterType.In) {\n        <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\n      }\n    </ng-template>\n    \n    <ng-template #Boolean >\n      @if(currentFilterType === FilterType.BooleanEquals){\n        <div class=\"switch\">\n          <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n            <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n            <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n          </mat-radio-group>\n        </div>\n      }\n    </ng-template>\n    <ng-template #Enum>\n      @if(currentFilterType === FilterType.In){\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n\n      }\n    </ng-template>\n    </form>\n  </mat-card-content>\n</mat-card>\n}\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+                    ], template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter) {\r\n<mat-card appearance=\"outlined\" class=\"filter-card\">\r\n  <mat-card-content>\r\n    <form #form=\"ngForm\"  (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\r\n      <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n      <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n      <div class=\"head-row\" >\r\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n        <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\r\n            matTooltip=\"Close\">\r\n          <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div class=\"filter-row\">\r\n          <div class=\"inline\">\r\n            <mat-form-field class=\"my-filter\" >\r\n                <mat-select  placeholder=\"Select Filter Type\" name=\"filterType\"  [ngModel]=\"$currentFilterType()\" (ngModelChange)=\"$enteredFilterType.set($event)\" [panelWidth]=\"null\">\r\n                  @for (kvp of filterTypes[filter.fieldType]; track kvp) {\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(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\r\n          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\r\n            <ng-container *ngTemplateOutlet=\"String\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\r\n            <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Boolean){\r\n            <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Date){\r\n            <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.DateTime){\r\n            <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n          }\r\n          @else if(filter.fieldType === FieldType.Enum){\r\n            <ng-container *ngTemplateOutlet=\"Enum\" />\r\n          }\r\n\r\n          @if(currentFilterType === FilterType.IsNull){\r\n            <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n              <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n              <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n            </mat-radio-group>\r\n          }\r\n      </div>\r\n      <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\r\n        Apply\r\n      </button>\r\n    \r\n    \r\n    <ng-template #String>\r\n      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\r\n        <mat-form-field class=\"my-filter\">\r\n          <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n        </mat-form-field>\r\n      } @else if(currentFilterType === FilterType.In) {\r\n        <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\r\n      }\r\n    </ng-template>\r\n    \r\n    <ng-template #Boolean >\r\n      @if(currentFilterType === FilterType.BooleanEquals){\r\n        <div class=\"switch\">\r\n          <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n            <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\r\n            <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\r\n          </mat-radio-group>\r\n        </div>\r\n      }\r\n    </ng-template>\r\n    <ng-template #Enum>\r\n      @if(currentFilterType === FilterType.In){\r\n        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n\r\n      }\r\n    </ng-template>\r\n    </form>\r\n  </mat-card-content>\r\n</mat-card>\r\n}\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }] });
 
 class GenColDisplayerComponent {
@@ -2874,14 +2874,14 @@ class GenColDisplayerComponent {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\n  <span matTooltip=\"Show/hide columns\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\n    </button>\n  </span>\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n    <button mat-menu-item>\n      <span matTooltip=\"Close\">\n        <button class=\"filter-button\" mat-icon-button>\n          <mat-icon>close</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <button mat-menu-item stop-propagation>\n      <span matTooltip=\"Show all columns\">\n        <button mat-icon-button (click)=\"reset(displayCols)\">\n          <mat-icon color=\"primary\">done_all</mat-icon>\n        </button>\n      </span>\n\n      <span matTooltip=\"Hide all columns\">\n        <button mat-icon-button (click)=\"unset(displayCols)\">\n          <mat-icon color=\"primary\">cancel</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\n      @for (col of displayCols; track col.key) {\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\n          @if(col.isVisible){\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\n              <mat-icon color=\"primary\">check_box</mat-icon>\n            </button>\n          } @else {\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n              <mat-icon>indeterminate_check_box</mat-icon>\n            </button>\n          }\n          \n          <p class=\"label\">\n            {{col.displayName || (col.key | spaceCase) }}\n          </p>\n\n        </div>\n      </button>\n      }\n\n    </div>\n  </mat-menu>\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "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: "18.2.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
                         DragDropModule, SpaceCasePipe
-                    ], template: "@if(columns$ | async; as displayCols){\n  <span matTooltip=\"Show/hide columns\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\n    </button>\n  </span>\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n    <button mat-menu-item>\n      <span matTooltip=\"Close\">\n        <button class=\"filter-button\" mat-icon-button>\n          <mat-icon>close</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <button mat-menu-item stop-propagation>\n      <span matTooltip=\"Show all columns\">\n        <button mat-icon-button (click)=\"reset(displayCols)\">\n          <mat-icon color=\"primary\">done_all</mat-icon>\n        </button>\n      </span>\n\n      <span matTooltip=\"Hide all columns\">\n        <button mat-icon-button (click)=\"unset(displayCols)\">\n          <mat-icon color=\"primary\">cancel</mat-icon>\n        </button>\n      </span>\n    </button>\n\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\n      @for (col of displayCols; track col.key) {\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\n          @if(col.isVisible){\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\n              <mat-icon color=\"primary\">check_box</mat-icon>\n            </button>\n          } @else {\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n              <mat-icon>indeterminate_check_box</mat-icon>\n            </button>\n          }\n          \n          <p class=\"label\">\n            {{col.displayName || (col.key | spaceCase) }}\n          </p>\n\n        </div>\n      </button>\n      }\n\n    </div>\n  </mat-menu>\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
+                    ], template: "@if(columns$ | async; as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class WrapperFilterStore extends ComponentStore {
@@ -2917,14 +2917,14 @@ class GenFilterDisplayerComponent {
         this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  @for (md of filterCols$ | async; track md.key) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  @for (md of filterCols$ | async; track md.key) {\r\n    <button (click)=\"addFilter(md)\" mat-menu-item>\r\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
                         AsyncPipe, SpaceCasePipe
-                    ], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  @for (md of filterCols$ | async; track md.key) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+                    ], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  @for (md of filterCols$ | async; track md.key) {\r\n    <button (click)=\"addFilter(md)\" mat-menu-item>\r\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [] });
 
 class KeyDisplayPipe {
@@ -3004,14 +3004,14 @@ class FilterChipsComponent {
     }
     currentFilters$ = this.filterStore.currentFilters$;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n    <div class=\"float\">\n      @for (filter of currentFilters; track filter.key) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\n    @for (filter of filters; track filter.key) {\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n    @if (filters.length > 1) {\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  @if (currentFilters.length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of currentFilters; track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    @for (filter of filters; track filter.key) {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if (filters.length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
                         MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
-                    ], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n    <div class=\"float\">\n      @for (filter of currentFilters; track filter.key) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\n    @for (filter of filters; track filter.key) {\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n    @if (filters.length > 1) {\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+                    ], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  @if (currentFilters.length) {\r\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of currentFilters; track filter.key) {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    @for (filter of filters; track filter.key) {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if (filters.length > 1) {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }] });
 
 function isPipe(o) {
@@ -3114,16 +3114,16 @@ class RouterLinkColumnComponent {
     queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()));
     routerLinkOptions = computed(() => this.additional().routerLinkOptions);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: RouterLinkColumnComponent, isStandalone: true, selector: "tb-router-link-column", inputs: { additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-  <a target="{{additional().target}}"
-    [routerLink]=" [link()]"
-    [queryParams]="queryParams()"
-    [fragment]="routerLinkOptions().fragment"
-    [preserveFragment]="routerLinkOptions().preserveFragment"
-    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
-  >
-    {{value()}}
-  </a>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: RouterLinkColumnComponent, isStandalone: true, selector: "tb-router-link-column", inputs: { additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+  <a target="{{additional().target}}"
+    [routerLink]=" [link()]"
+    [queryParams]="queryParams()"
+    [fragment]="routerLinkOptions().fragment"
+    [preserveFragment]="routerLinkOptions().preserveFragment"
+    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
+  >
+    {{value()}}
+  </a>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
@@ -3135,16 +3135,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     imports: [
                         RouterModule
                     ],
-                    template: `
-  <a target="{{additional().target}}"
-    [routerLink]=" [link()]"
-    [queryParams]="queryParams()"
-    [fragment]="routerLinkOptions().fragment"
-    [preserveFragment]="routerLinkOptions().preserveFragment"
-    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
-  >
-    {{value()}}
-  </a>
+                    template: `
+  <a target="{{additional().target}}"
+    [routerLink]=" [link()]"
+    [queryParams]="queryParams()"
+    [fragment]="routerLinkOptions().fragment"
+    [preserveFragment]="routerLinkOptions().preserveFragment"
+    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
+  >
+    {{value()}}
+  </a>
   `
                 }]
         }] });
@@ -3154,11 +3154,11 @@ class LinkColumnComponent {
     additional = input.required();
     link = computed(() => this.additional().link(this.element()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-  <a target="{{additional().target}}"
-      href="{{link()}}">
-      {{value()}}
-  </a>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+  <a target="{{additional().target}}"
+      href="{{link()}}">
+      {{value()}}
+  </a>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: LinkColumnComponent, decorators: [{
@@ -3167,11 +3167,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     selector: "tb-link-column",
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-  <a target="{{additional().target}}"
-      href="{{link()}}">
-      {{value()}}
-  </a>
+                    template: `
+  <a target="{{additional().target}}"
+      href="{{link()}}">
+      {{value()}}
+  </a>
   `
                 }]
         }] });
@@ -3236,14 +3236,14 @@ class InitializationComponent {
     defaultTemplate;
     defaultWithIcon;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\n</ng-template>\n\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\n</ng-template>\n\n<ng-template #imageUrl  let-value='value'>\n  <span>\n    <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\n  </span>\n</ng-template>\n\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-new-line-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-comma-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #default let-value='value'>\n  <span>{{ value }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon  let-value='value'>\n  <mat-icon>{{ value}}</mat-icon>\n</ng-template>\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["value", "element", "additional"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "value"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value'>\r\n  <span>{{ value }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value'>\r\n  <mat-icon>{{ value}}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["value", "element", "additional"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "value"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InitializationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'initialization', standalone: true, imports: [
                         LinkColumnComponent, ArrayCommaColumnComponent, MatIconModule, FunctionPipe,
                         RouterLinkColumnComponent, ArrayNewLineColumnComponent
-                    ], template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\n</ng-template>\n\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\n</ng-template>\n\n<ng-template #imageUrl  let-value='value'>\n  <span>\n    <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\n  </span>\n</ng-template>\n\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-new-line-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\n  <tb-comma-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #default let-value='value'>\n  <span>{{ value }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon  let-value='value'>\n  <mat-icon>{{ value}}</mat-icon>\n</ng-template>\n" }]
+                    ], template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional'/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value'>\r\n  <span>{{ value }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value'>\r\n  <mat-icon>{{ value}}</mat-icon>\r\n</ng-template>\r\n" }]
         }], propDecorators: { linkTemplate: [{
                 type: ViewChild,
                 args: ['link', { static: true }]
@@ -3553,7 +3553,7 @@ class ColumnBuilderComponent {
     };
     additional;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles() as styles\" >\n\n  <!-- header -->\n  <ng-template matHeaderCellDef #myHeader>\n    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\n      [class]='metaData.additional?.columnPartClasses?.header'>\n      <div class=\"header-container\" cdkDragHandle>\n        @if(!customCell?.columnDef?.headerCell)\n        {\n            @if(metaData.fieldType !== FieldType.NotMapped){\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n              </div>\n            } @else if(metaData.fieldType === FieldType.NotMapped){\n              <div style=\"width: 100%\">\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n              </div>\n            }\n            @if(!customCell?.columnDef?.cell && (showFilters$ | async)){\n              <tb-header-menu #menu [metaData]='metaData' />\n            }\n        }\n        @else\n        {\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\n          </ng-container>\n        }\n      </div>\n    </mat-header-cell>\n  </ng-template>\n\n  <!-- body -->\n  <ng-container *matCellDef=\"let element;\">\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\n  </ng-container>\n  <ng-template #body let-element='element' >\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\n    </mat-cell>\n  </ng-template>\n\n  <!-- footer -->\n  <ng-template matFooterCellDef>\n    @if(customCell?.columnDef?.footerCell){\n      <ng-container\n      *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\n    } @else {\n      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\n        @if(!!data?.length && metaData.additional?.footer){\n          <span class=\"bold\">\n            @switch (metaData.fieldType) {\n              @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\n              @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\n            }\n          </span>\n        }\n\n      </mat-footer-cell>\n    }\n  </ng-template>\n</ng-container>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#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$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.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: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles() as styles\" >\r\n\r\n  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n      [class]='metaData.additional?.columnPartClasses?.header'>\r\n      <div class=\"header-container\" cdkDragHandle>\r\n        @if(!customCell?.columnDef?.headerCell)\r\n        {\r\n            @if(metaData.fieldType !== FieldType.NotMapped){\r\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            } @else if(metaData.fieldType === FieldType.NotMapped){\r\n              <div style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            }\r\n            @if(!customCell?.columnDef?.cell && (showFilters$ | async)){\r\n              <tb-header-menu #menu [metaData]='metaData' />\r\n            }\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    </mat-header-cell>\r\n  </ng-template>\r\n\r\n  <!-- body -->\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n  </ng-container>\r\n  <ng-template #body let-element='element' >\r\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\r\n    </mat-cell>\r\n  </ng-template>\r\n\r\n  <!-- footer -->\r\n  <ng-template matFooterCellDef>\r\n    @if(customCell?.columnDef?.footerCell){\r\n      <ng-container\r\n      *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n    } @else {\r\n      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\r\n        @if(!!data?.length && metaData.additional?.footer){\r\n          <span class=\"bold\">\r\n            @switch (metaData.fieldType) {\r\n              @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n              @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n            }\r\n          </span>\r\n        }\r\n\r\n      </mat-footer-cell>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.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: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
             { provide: CDK_DROP_LIST, useExisting: CdkDropList },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3565,7 +3565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
                         ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
                         AsyncPipe, MatTooltipModule, LetDirective, ColumnTotalPipe, CurrencyPipe, DecimalPipe
-                    ], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles() as styles\" >\n\n  <!-- header -->\n  <ng-template matHeaderCellDef #myHeader>\n    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\n      [class]='metaData.additional?.columnPartClasses?.header'>\n      <div class=\"header-container\" cdkDragHandle>\n        @if(!customCell?.columnDef?.headerCell)\n        {\n            @if(metaData.fieldType !== FieldType.NotMapped){\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n              </div>\n            } @else if(metaData.fieldType === FieldType.NotMapped){\n              <div style=\"width: 100%\">\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\n              </div>\n            }\n            @if(!customCell?.columnDef?.cell && (showFilters$ | async)){\n              <tb-header-menu #menu [metaData]='metaData' />\n            }\n        }\n        @else\n        {\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\n          </ng-container>\n        }\n      </div>\n    </mat-header-cell>\n  </ng-template>\n\n  <!-- body -->\n  <ng-container *matCellDef=\"let element;\">\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\n  </ng-container>\n  <ng-template #body let-element='element' >\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\n    </mat-cell>\n  </ng-template>\n\n  <!-- footer -->\n  <ng-template matFooterCellDef>\n    @if(customCell?.columnDef?.footerCell){\n      <ng-container\n      *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\n    } @else {\n      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\n        @if(!!data?.length && metaData.additional?.footer){\n          <span class=\"bold\">\n            @switch (metaData.fieldType) {\n              @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\n              @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\n            }\n          </span>\n        }\n\n      </mat-footer-cell>\n    }\n  </ng-template>\n</ng-container>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#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"] }]
+                    ], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles() as styles\" >\r\n\r\n  <!-- header -->\r\n  <ng-template matHeaderCellDef #myHeader>\r\n    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\r\n      [class]='metaData.additional?.columnPartClasses?.header'>\r\n      <div class=\"header-container\" cdkDragHandle>\r\n        @if(!customCell?.columnDef?.headerCell)\r\n        {\r\n            @if(metaData.fieldType !== FieldType.NotMapped){\r\n              <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            } @else if(metaData.fieldType === FieldType.NotMapped){\r\n              <div style=\"width: 100%\">\r\n                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n              </div>\r\n            }\r\n            @if(!customCell?.columnDef?.cell && (showFilters$ | async)){\r\n              <tb-header-menu #menu [metaData]='metaData' />\r\n            }\r\n        }\r\n        @else\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    </mat-header-cell>\r\n  </ng-template>\r\n\r\n  <!-- body -->\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n  </ng-container>\r\n  <ng-template #body let-element='element' >\r\n    <mat-cell  [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\r\n    </mat-cell>\r\n  </ng-template>\r\n\r\n  <!-- footer -->\r\n  <ng-template matFooterCellDef>\r\n    @if(customCell?.columnDef?.footerCell){\r\n      <ng-container\r\n      *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n    } @else {\r\n      <mat-footer-cell  [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\r\n        @if(!!data?.length && metaData.additional?.footer){\r\n          <span class=\"bold\">\r\n            @switch (metaData.fieldType) {\r\n              @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n              @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n            }\r\n          </span>\r\n        }\r\n\r\n      </mat-footer-cell>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
         }], propDecorators: { columnDef: [{
                 type: ViewChild,
                 args: [MatColumnDef]
@@ -3811,14 +3811,14 @@ class GenericTableComponent {
     });
     $stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, displayData$: { classPropertyName: "displayData$", publicName: "displayData$", isSignal: false, isRequired: false, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, columnInfos: { classPropertyName: "columnInfos", publicName: "columnInfos", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  [class]=\"(showFooterRow$ | async)\"\n  #table\n  [dataSource]=\"state.props().dataSource!\"\n  [trackBy]=\"trackByFunction\"\n  [style]=\"tableWidth | async \"\n>\n\n  <!-- select column -->\n  <ng-container matColumnDef=\"select\">\n\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\n      </mat-checkbox>\n    </mat-header-cell>\n\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n      <mat-checkbox\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"$event ? selection.toggle(row) : null\"\n        [checked]=\"selection.isSelected(row)\"/>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\n      {{ selection.selected.length }}\n    </mat-footer-cell>\n  </ng-container>\n\n\n  <!-- index column -->\n  <ng-container matColumnDef=\"index\">\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n      {{ 1 + i + offsetIndex }}\n    </mat-cell>\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n  </ng-container>\n\n  <!-- Grouping -->\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\n          @if (!expanded) {\n            <mat-icon>chevron_right</mat-icon>\n          } @else {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  @if (showHeader$ | async) {\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n                    *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n  }\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: keys; let i = index\"/>\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n                  *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n                  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.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", "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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, displayData$: { classPropertyName: "displayData$", publicName: "displayData$", isSignal: false, isRequired: false, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, columnInfos: { classPropertyName: "columnInfos", publicName: "columnInfos", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async \"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef 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;\" class=\"index-column\">\r\n      {{ 1 + i + offsetIndex }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n          @if (!expanded) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if (showHeader$ | async) {\r\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n                    *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n  }\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: keys; let i = index\"/>\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n                  *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\r\n                  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\r\n\r\n</mat-table>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.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", "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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
                         MatTooltipModule, AsyncPipe, FunctionPipe,
-                    ], template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  [class]=\"(showFooterRow$ | async)\"\n  #table\n  [dataSource]=\"state.props().dataSource!\"\n  [trackBy]=\"trackByFunction\"\n  [style]=\"tableWidth | async \"\n>\n\n  <!-- select column -->\n  <ng-container matColumnDef=\"select\">\n\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\n      </mat-checkbox>\n    </mat-header-cell>\n\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n      <mat-checkbox\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"$event ? selection.toggle(row) : null\"\n        [checked]=\"selection.isSelected(row)\"/>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\n      {{ selection.selected.length }}\n    </mat-footer-cell>\n  </ng-container>\n\n\n  <!-- index column -->\n  <ng-container matColumnDef=\"index\">\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n      {{ 1 + i + offsetIndex }}\n    </mat-cell>\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n  </ng-container>\n\n  <!-- Grouping -->\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\n          @if (!expanded) {\n            <mat-icon>chevron_right</mat-icon>\n          } @else {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  @if (showHeader$ | async) {\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n                    *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n  }\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: keys; let i = index\"/>\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n                  *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n                  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"] }]
+                    ], template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  [class]=\"(showFooterRow$ | async)\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async \"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef 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;\" class=\"index-column\">\r\n      {{ 1 + i + offsetIndex }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n          @if (!expanded) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  @if (showHeader$ | async) {\r\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n                    *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n  }\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: keys; let i = index\"/>\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n                  *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\r\n                  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\r\n\r\n</mat-table>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { trackBy: [{
                 type: Input
             }], displayData$: [{
@@ -4148,13 +4148,13 @@ const defaultStorageState = {
 class GroupByListComponent {
     tableStore = inject(TableStore);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n  <span class=\"tb-group-label\">Group By:</span>\n  @for (groupByKey of groupByKeys; track groupByKey) {\n    @if($index > 0){\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\n    }\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n      {{groupByKey | spaceCase}}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of groupByKeys; track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'group-by-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatChipsModule, LetDirective, MatIconModule, SpaceCasePipe
-                    ], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n  <span class=\"tb-group-label\">Group By:</span>\n  @for (groupByKey of groupByKeys; track groupByKey) {\n    @if($index > 0){\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\n    }\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n      {{groupByKey | spaceCase}}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
+                    ], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span class=\"tb-group-label\">Group By:</span>\r\n  @for (groupByKey of groupByKeys; track groupByKey) {\r\n    @if($index > 0){\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
         }] });
 
 class SortMenuComponentStore extends ComponentStore {
@@ -4245,14 +4245,14 @@ class SortMenuComponent {
         this.store.setDirection(sort);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n  @if(sorted$ | async; as sorted){\n    @if (notSorted$ | async; as notSorted) {\n      <!-- Menu Trigger -->\n      <span matTooltip=\"Sort\">\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon color=\"primary\">swap_vert</mat-icon>\n        </button>\n      </span>\n\n      <!-- Menu -->\n      <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\n        <div mat-menu-item class=\"menu-button\">\n          <div class=\"close-button-wrapper\">\n            <span matTooltip=\"Close\">\n              <mat-icon>close</mat-icon>\n            </span>\n            @if(dirty){\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n                <mat-icon>undo</mat-icon>\n              </span>\n            }\n            \n          </div>\n        </div>\n\n        <!-- Apply Button -->\n        <div class=\"apply-button-wrapper\">\n          <button mat-button color=\"primary\" (click)=\"apply(null)\"\n            stop-propagation [class.apply-border]=\"dirty\"\n            [disabled]=\"!dirty\">\n              Apply @if (dirty) { Unsaved Changes }\n          </button>\n        </div>\n\n        <!-- Default Sorting Text -->\n        @if (!sorted.length) {\n          <div class=\"tip\" >\n            Sorting List\n          </div>\n        }\n\n        <!-- Sorted Menu List -->\n        <div class=\"list\"\n          cdkDropList\n          #sortedGroup=\"cdkDropList\"\n          [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n          [cdkDropListData]=\"sorted\"\n          (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n          <!-- Menu Item Wrapper -->\n          @for (sort of sorted; track sort.active) {\n            <!-- Menu Item Headers -->\n            @if (sorted.length > 1) {\n              <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\n            }\n  \n            <!-- Menu Item -->\n            <div mat-menu-item   cdkDrag class=\"menu-item\">\n              <div class=\"sort-item\">\n                <span class=\"sorted-name\">\n                  {{sort.displayName || (sort.active | spaceCase)}}\n                  <span class=\"direction-text\">{{sort.direction}}</span>\n                </span>\n  \n                <!-- Sort Direction Buttons -->\n                <div class=\"up-down-buttons-wrapper\">\n                  <button  class=\"up-down-button up-button\" stop-propagation\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n                    <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                    arrow_upward\n                    </mat-icon>\n                  </button>\n  \n                  <button class=\"up-down-button\" stop-propagation\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n                    <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                      arrow_downward\n                    </mat-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n\n        </div>\n\n        <!-- Default Not Sorted Text -->\n        @if(!notSorted.length){\n          <div class=\"tip\" >\n            Not Sorted List\n          </div>\n        }\n\n        <!-- Not Sorted Menu List -->\n        <div class=\"list\"\n          cdkDropList\n          #notSortedGroup=\"cdkDropList\"\n          [cdkDropListConnectedTo]=\"[sortedGroup]\"\n          [cdkDropListData]=\"notSorted\"\n          (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n          @for (sort of notSorted; track sort.active) {\n            <div mat-menu-item class=\"menu-item\" cdkDrag>\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n            </div>\n          }\n        </div>\n      </mat-menu>\n    }\n  }\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n  @if(sorted$ | async; as sorted){\r\n    @if (notSorted$ | async; as notSorted) {\r\n      <!-- Menu Trigger -->\r\n      <span matTooltip=\"Sort\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n          <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <!-- Menu -->\r\n      <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n        <div mat-menu-item class=\"menu-button\">\r\n          <div class=\"close-button-wrapper\">\r\n            <span matTooltip=\"Close\">\r\n              <mat-icon>close</mat-icon>\r\n            </span>\r\n            @if(dirty){\r\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n                <mat-icon>undo</mat-icon>\r\n              </span>\r\n            }\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Apply Button -->\r\n        <div class=\"apply-button-wrapper\">\r\n          <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n            stop-propagation [class.apply-border]=\"dirty\"\r\n            [disabled]=\"!dirty\">\r\n              Apply @if (dirty) { Unsaved Changes }\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Default Sorting Text -->\r\n        @if (!sorted.length) {\r\n          <div class=\"tip\" >\r\n            Sorting List\r\n          </div>\r\n        }\r\n\r\n        <!-- Sorted Menu List -->\r\n        <div class=\"list\"\r\n          cdkDropList\r\n          #sortedGroup=\"cdkDropList\"\r\n          [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n          [cdkDropListData]=\"sorted\"\r\n          (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n          <!-- Menu Item Wrapper -->\r\n          @for (sort of sorted; track sort.active) {\r\n            <!-- Menu Item Headers -->\r\n            @if (sorted.length > 1) {\r\n              <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n            }\r\n  \r\n            <!-- Menu Item -->\r\n            <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n              <div class=\"sort-item\">\r\n                <span class=\"sorted-name\">\r\n                  {{sort.displayName || (sort.active | spaceCase)}}\r\n                  <span class=\"direction-text\">{{sort.direction}}</span>\r\n                </span>\r\n  \r\n                <!-- Sort Direction Buttons -->\r\n                <div class=\"up-down-buttons-wrapper\">\r\n                  <button  class=\"up-down-button up-button\" stop-propagation\r\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n                    <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                    arrow_upward\r\n                    </mat-icon>\r\n                  </button>\r\n  \r\n                  <button class=\"up-down-button\" stop-propagation\r\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n                    <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                      arrow_downward\r\n                    </mat-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n\r\n        <!-- Default Not Sorted Text -->\r\n        @if(!notSorted.length){\r\n          <div class=\"tip\" >\r\n            Not Sorted List\r\n          </div>\r\n        }\r\n\r\n        <!-- Not Sorted Menu List -->\r\n        <div class=\"list\"\r\n          cdkDropList\r\n          #notSortedGroup=\"cdkDropList\"\r\n          [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n          [cdkDropListData]=\"notSorted\"\r\n          (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n          @for (sort of notSorted; track sort.active) {\r\n            <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n    }\r\n  }\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: SortMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         LetDirective, MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
                         SpaceCasePipe, NgClass, AsyncPipe
-                    ], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n  @if(sorted$ | async; as sorted){\n    @if (notSorted$ | async; as notSorted) {\n      <!-- Menu Trigger -->\n      <span matTooltip=\"Sort\">\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon color=\"primary\">swap_vert</mat-icon>\n        </button>\n      </span>\n\n      <!-- Menu -->\n      <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\n        <div mat-menu-item class=\"menu-button\">\n          <div class=\"close-button-wrapper\">\n            <span matTooltip=\"Close\">\n              <mat-icon>close</mat-icon>\n            </span>\n            @if(dirty){\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n                <mat-icon>undo</mat-icon>\n              </span>\n            }\n            \n          </div>\n        </div>\n\n        <!-- Apply Button -->\n        <div class=\"apply-button-wrapper\">\n          <button mat-button color=\"primary\" (click)=\"apply(null)\"\n            stop-propagation [class.apply-border]=\"dirty\"\n            [disabled]=\"!dirty\">\n              Apply @if (dirty) { Unsaved Changes }\n          </button>\n        </div>\n\n        <!-- Default Sorting Text -->\n        @if (!sorted.length) {\n          <div class=\"tip\" >\n            Sorting List\n          </div>\n        }\n\n        <!-- Sorted Menu List -->\n        <div class=\"list\"\n          cdkDropList\n          #sortedGroup=\"cdkDropList\"\n          [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n          [cdkDropListData]=\"sorted\"\n          (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n          <!-- Menu Item Wrapper -->\n          @for (sort of sorted; track sort.active) {\n            <!-- Menu Item Headers -->\n            @if (sorted.length > 1) {\n              <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\n            }\n  \n            <!-- Menu Item -->\n            <div mat-menu-item   cdkDrag class=\"menu-item\">\n              <div class=\"sort-item\">\n                <span class=\"sorted-name\">\n                  {{sort.displayName || (sort.active | spaceCase)}}\n                  <span class=\"direction-text\">{{sort.direction}}</span>\n                </span>\n  \n                <!-- Sort Direction Buttons -->\n                <div class=\"up-down-buttons-wrapper\">\n                  <button  class=\"up-down-button up-button\" stop-propagation\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n                    <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                    arrow_upward\n                    </mat-icon>\n                  </button>\n  \n                  <button class=\"up-down-button\" stop-propagation\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n                    <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n                      arrow_downward\n                    </mat-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n\n        </div>\n\n        <!-- Default Not Sorted Text -->\n        @if(!notSorted.length){\n          <div class=\"tip\" >\n            Not Sorted List\n          </div>\n        }\n\n        <!-- Not Sorted Menu List -->\n        <div class=\"list\"\n          cdkDropList\n          #notSortedGroup=\"cdkDropList\"\n          [cdkDropListConnectedTo]=\"[sortedGroup]\"\n          [cdkDropListData]=\"notSorted\"\n          (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n          @for (sort of notSorted; track sort.active) {\n            <div mat-menu-item class=\"menu-item\" cdkDrag>\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n            </div>\n          }\n        </div>\n      </mat-menu>\n    }\n  }\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
+                    ], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n  @if(sorted$ | async; as sorted){\r\n    @if (notSorted$ | async; as notSorted) {\r\n      <!-- Menu Trigger -->\r\n      <span matTooltip=\"Sort\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n          <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <!-- Menu -->\r\n      <mat-menu #menu=\"matMenu\"  class=\"my-mat-menu\" (closed)=\"reset()\">\r\n        <div mat-menu-item class=\"menu-button\">\r\n          <div class=\"close-button-wrapper\">\r\n            <span matTooltip=\"Close\">\r\n              <mat-icon>close</mat-icon>\r\n            </span>\r\n            @if(dirty){\r\n              <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n                <mat-icon>undo</mat-icon>\r\n              </span>\r\n            }\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Apply Button -->\r\n        <div class=\"apply-button-wrapper\">\r\n          <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n            stop-propagation [class.apply-border]=\"dirty\"\r\n            [disabled]=\"!dirty\">\r\n              Apply @if (dirty) { Unsaved Changes }\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Default Sorting Text -->\r\n        @if (!sorted.length) {\r\n          <div class=\"tip\" >\r\n            Sorting List\r\n          </div>\r\n        }\r\n\r\n        <!-- Sorted Menu List -->\r\n        <div class=\"list\"\r\n          cdkDropList\r\n          #sortedGroup=\"cdkDropList\"\r\n          [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n          [cdkDropListData]=\"sorted\"\r\n          (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n          <!-- Menu Item Wrapper -->\r\n          @for (sort of sorted; track sort.active) {\r\n            <!-- Menu Item Headers -->\r\n            @if (sorted.length > 1) {\r\n              <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n            }\r\n  \r\n            <!-- Menu Item -->\r\n            <div mat-menu-item   cdkDrag class=\"menu-item\">\r\n              <div class=\"sort-item\">\r\n                <span class=\"sorted-name\">\r\n                  {{sort.displayName || (sort.active | spaceCase)}}\r\n                  <span class=\"direction-text\">{{sort.direction}}</span>\r\n                </span>\r\n  \r\n                <!-- Sort Direction Buttons -->\r\n                <div class=\"up-down-buttons-wrapper\">\r\n                  <button  class=\"up-down-button up-button\" stop-propagation\r\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n                    <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                    arrow_upward\r\n                    </mat-icon>\r\n                  </button>\r\n  \r\n                  <button class=\"up-down-button\" stop-propagation\r\n                  (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n                    <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n                      arrow_downward\r\n                    </mat-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n\r\n        <!-- Default Not Sorted Text -->\r\n        @if(!notSorted.length){\r\n          <div class=\"tip\" >\r\n            Not Sorted List\r\n          </div>\r\n        }\r\n\r\n        <!-- Not Sorted Menu List -->\r\n        <div class=\"list\"\r\n          cdkDropList\r\n          #notSortedGroup=\"cdkDropList\"\r\n          [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n          [cdkDropListData]=\"notSorted\"\r\n          (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n          @for (sort of notSorted; track sort.active) {\r\n            <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n              <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n    }\r\n  }\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
         }], ctorParameters: () => [] });
 
 class PaginatorComponent {
@@ -4290,34 +4290,34 @@ class PaginatorComponent {
         this.updatePaginator();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$", tableElRef: "tableElRef" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
-  <div class="paginator-row">
-    @if(currentPageData$ | async; as pageData){
-      <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
-        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
-      </div>
-    }
-    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
-      [class]="{ 'hide' : $collapseFooter() }">
-    </mat-paginator>
-    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
-  </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$", tableElRef: "tableElRef" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
+  <div class="paginator-row">
+    @if(currentPageData$ | async; as pageData){
+      <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
+        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
+      </div>
+    }
+    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
+      [class]="{ 'hide' : $collapseFooter() }">
+    </mat-paginator>
+    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
+  </div>
   `, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass, MatButtonModule], template: `
-  <div class="paginator-row">
-    @if(currentPageData$ | async; as pageData){
-      <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
-        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
-      </div>
-    }
-    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
-      [class]="{ 'hide' : $collapseFooter() }">
-    </mat-paginator>
-    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
-  </div>
+            args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass, MatButtonModule], template: `
+  <div class="paginator-row">
+    @if(currentPageData$ | async; as pageData){
+      <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
+        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
+      </div>
+    }
+    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
+      [class]="{ 'hide' : $collapseFooter() }">
+    </mat-paginator>
+    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
+  </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }], propDecorators: { paginator: [{
                 type: ViewChild,
@@ -4472,10 +4472,10 @@ class VirtualScrollContainer {
         return headerHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <cdk-virtual-scroll-viewport>
-      <ng-content/>
-    </cdk-virtual-scroll-viewport>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <cdk-virtual-scroll-viewport>
+      <ng-content/>
+    </cdk-virtual-scroll-viewport>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i1$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], viewProviders: [
             {
                 provide: VIRTUAL_SCROLL_STRATEGY,
@@ -4488,10 +4488,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             type: Component,
             args: [{
                     selector: 'tb-virtual-scroll-container',
-                    template: `
-    <cdk-virtual-scroll-viewport>
-      <ng-content/>
-    </cdk-virtual-scroll-viewport>
+                    template: `
+    <cdk-virtual-scroll-viewport>
+      <ng-content/>
+    </cdk-virtual-scroll-viewport>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
@@ -4545,13 +4545,13 @@ class ProfilesMenuComponent {
         return a;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\n  <mat-icon color=\"primary\">people</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\n  @if(!!$currentProfile())\n  {\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\n      <mat-icon color=\"primary\">save</mat-icon>\n      <span>{{$currentProfile()}}</span>\n    </div>\n  }\n  @else\n  {\n    <div class=\"profile-line\">\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\n      </button>\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\n      </button>\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\n    </div>\n  }\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\n  <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\n    @for (key of $keys() ; track key) {\n      <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\n          <span>{{key}}</span>\n        </button>\n        @if(key !== $defaultProfile())\n        {\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\n          </button>\n        }\n        @else\n        {\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\n            <mat-icon style=\"color: green;\">star</mat-icon>\n          </button>\n        }\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\n          <mat-icon color='warn'>delete_forever</mat-icon>\n        </button>\n      </div>\n    }\n    <hr class=\"divider\"/>\n  </div>\n  @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\n  <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\n    <div class=\"profile-line\" stop-propagation>\n      <div class=\"new-name-input\">\n        <i class=\"input-hint\">Enter New Name</i>\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\n      </div>\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\n      </button>\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\n    </div>\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\n      Add\n    </button>\n  </div>\n</mat-menu>\n\n<ng-template #line let-key>\n\n\n</ng-template>\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #line let-key>\r\n\r\n\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-profiles-menu', standalone: true, imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput, DialogDirective, ClickEmitterDirective, NgTemplateOutlet,
                         MatCheckbox, StopPropagationDirective, FunctionPipe, MatInputModule, AsyncPipe, FormsModule
-                    ], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\n  <mat-icon color=\"primary\">people</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\n  @if(!!$currentProfile())\n  {\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\n      <mat-icon color=\"primary\">save</mat-icon>\n      <span>{{$currentProfile()}}</span>\n    </div>\n  }\n  @else\n  {\n    <div class=\"profile-line\">\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\n      </button>\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\n      </button>\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\n    </div>\n  }\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\n  <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\n    @for (key of $keys() ; track key) {\n      <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\n          <span>{{key}}</span>\n        </button>\n        @if(key !== $defaultProfile())\n        {\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\n          </button>\n        }\n        @else\n        {\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\n            <mat-icon style=\"color: green;\">star</mat-icon>\n          </button>\n        }\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\n          <mat-icon color='warn'>delete_forever</mat-icon>\n        </button>\n      </div>\n    }\n    <hr class=\"divider\"/>\n  </div>\n  @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\n  <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\n    <div class=\"profile-line\" stop-propagation>\n      <div class=\"new-name-input\">\n        <i class=\"input-hint\">Enter New Name</i>\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\n      </div>\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\n      </button>\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\n    </div>\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\n      Add\n    </button>\n  </div>\n</mat-menu>\n\n<ng-template #line let-key>\n\n\n</ng-template>\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
+                    ], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\r\n  <mat-icon color=\"primary\">people</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key) {\r\n      <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\r\n        <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\r\n      </div>\r\n      <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #line let-key>\r\n\r\n\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
         }] });
 
 const containerImports = [
@@ -5086,11 +5086,11 @@ class TableContainerComponent {
     };
     $useVirtual = this.state.$isVirtual;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n  <div class=\"header-wrapper\">\n    <div class=\"title\">\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n        <ng-content select=\".tb-header-title\"/>\n      }\n      @if((state.groupByKeys$ | async)?.length){\n        <group-by-list />\n      }\n    </div>\n    <div class=\"flx-row-end\">\n      <lib-filter-list />\n      @if (!tableSettings.hideHeader) {\n        @if (!(collapseHeader$ | async)) {\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #mainMenu='matMenu'>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        @else {\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n          <mat-menu #mainMenu='matMenu'>\n            <div class=\"flex-column\">\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n            </div>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n          (click)=\"state.toggleCollapseHeader()\">\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n        </mat-icon>\n      }\n\n    </div>\n  </div>\n  <div class=\"table-wrapper\">\n    @if($useVirtual())\n    {\n      <tb-virtual-scroll-container>\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n      </tb-virtual-scroll-container>\n    }\n    @else\n    {\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n    }\n\n  </div>\n  @if(tableSettings.usePaginator)\n  {\n    <div class=\"paginator\">\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n        (click)=\"state.toggleCollapseFooter()\">\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n      </mat-icon>\n    </div>\n  }\n\n  <ng-template #headerMenu>\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n  </ng-template>\n\n  <ng-template #headerMenuExtra>\n    <button mat-menu-item (click)=\"resetState()\">\n      <mat-icon color=\"primary\">autorenew</mat-icon>\n      <span>Reset table</span>\n    </button>\n    @if (!tableSettings.hideExport) {\n      <button mat-menu-item (click)=\"exportToCsv()\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n    }\n    @if (tableId) {\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n        <mat-icon color=\"primary\">people</mat-icon>\n        <span>Profiles</span>\n      </button>\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n    }\n  </ng-template>\n</ng-container>\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"table-wrapper\">\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n    }\r\n\r\n  </div>\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n  <div class=\"header-wrapper\">\n    <div class=\"title\">\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n        <ng-content select=\".tb-header-title\"/>\n      }\n      @if((state.groupByKeys$ | async)?.length){\n        <group-by-list />\n      }\n    </div>\n    <div class=\"flx-row-end\">\n      <lib-filter-list />\n      @if (!tableSettings.hideHeader) {\n        @if (!(collapseHeader$ | async)) {\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #mainMenu='matMenu'>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        @else {\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n          <mat-menu #mainMenu='matMenu'>\n            <div class=\"flex-column\">\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n            </div>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n          (click)=\"state.toggleCollapseHeader()\">\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n        </mat-icon>\n      }\n\n    </div>\n  </div>\n  <div class=\"table-wrapper\">\n    @if($useVirtual())\n    {\n      <tb-virtual-scroll-container>\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n      </tb-virtual-scroll-container>\n    }\n    @else\n    {\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n    }\n\n  </div>\n  @if(tableSettings.usePaginator)\n  {\n    <div class=\"paginator\">\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n        (click)=\"state.toggleCollapseFooter()\">\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n      </mat-icon>\n    </div>\n  }\n\n  <ng-template #headerMenu>\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n  </ng-template>\n\n  <ng-template #headerMenuExtra>\n    <button mat-menu-item (click)=\"resetState()\">\n      <mat-icon color=\"primary\">autorenew</mat-icon>\n      <span>Reset table</span>\n    </button>\n    @if (!tableSettings.hideExport) {\n      <button mat-menu-item (click)=\"exportToCsv()\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n    }\n    @if (tableId) {\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n        <mat-icon color=\"primary\">people</mat-icon>\n        <span>Profiles</span>\n      </button>\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n    }\n  </ng-template>\n</ng-container>\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"table-wrapper\">\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\r\n    }\r\n\r\n  </div>\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }], propDecorators: { paginatorComponent: [{
                 type: ViewChild,
                 args: [PaginatorComponent]
@@ -5414,11 +5414,11 @@ class ActionStateSpinnerComponent {
         this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\n  <div id=\"blocker\">\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\n  </div>\n}\n\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\n  <div id=\"blocker\">\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\n  </div>\n}\n\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { status$: [{
                 type: Input
             }] } });