@saydar/table-builder 1.0.7 → 1.0.9-beta.0

package/fesm2022/saydar-table-builder.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Input, Directive, NgModule, Injectable, InjectionToken, Pipe, HostListener, Component, EventEmitter, Output, ContentChildren, Inject, ChangeDetectionStrategy, ViewChild, Injector, ElementRef, Optional, inject } from '@angular/core';
-import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, last, takeUntil, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1, distinctUntilChanged, withLatestFrom, mergeAll, scan as scan$1 } from 'rxjs/operators';
+import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, last, take, takeUntil, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1, distinctUntilChanged, withLatestFrom, mergeAll, scan as scan$1 } from 'rxjs/operators';
 import * as i3$4 from 'rxjs';
 import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap as concatMap$1, merge, delay, switchMap as switchMap$1, scan, fromEvent, asyncScheduler, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, from } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
-import * as i4$2 from '@angular/material/table';
+import * as i4$1 from '@angular/material/table';
 import { MatColumnDef, MatTableDataSource, MatTable, MatTableModule, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as _ from 'lodash';
@@ -33,7 +33,7 @@ import * as i6$1 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i4$1 from '@angular/material/datepicker';
+import * as i4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i5 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -45,9 +45,6 @@ import * as i3$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgForm, ControlContainer, FormsModule } from '@angular/forms';
 import * as i7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import * as i4 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
 import * as i13 from 'ng-table-virtual-scroll';
 import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
 import * as i3$3 from '@angular/material/paginator';
@@ -57,6 +54,9 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i1$2 from '@angular/cdk/table';
 import * as i7$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import * as i4$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i7$2 from '@angular/material/core';
@@ -2211,88 +2211,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 type: Input
             }] } });
 
-class ChipFilterInputComponent {
-    constructor(ref) {
-        this.ref = ref;
-        this.FieldType = FieldType;
-        this.values = [];
-        this.separatorKeyCodes = [COMMA, ENTER];
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-    }
-    writeValue(obj) {
-        if (Array.isArray(obj)) {
-            this.values = obj.filter(v => v != null && v !== '');
-        }
-        else if (obj != null && obj !== '') {
-            this.values = [obj];
-        }
-        else {
-            this.values = [];
-        }
-        this.ref.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    add(event) {
-        const raw = (event.value || '').trim();
-        if (!raw) {
-            event.chipInput.clear();
-            return;
-        }
-        if (this.isNumericType()) {
-            const num = Number(raw);
-            if (isNaN(num)) {
-                event.chipInput.clear();
-                return;
-            }
-            this.values = [...this.values, num];
-        }
-        else {
-            this.values = [...this.values, raw];
-        }
-        event.chipInput.clear();
-        this.emitValue();
-    }
-    remove(index) {
-        this.values = [...this.values];
-        this.values.splice(index, 1);
-        this.emitValue();
-    }
-    onKeydown(event) {
-        if (event.key === 'Enter') {
-            event.stopPropagation();
-        }
-    }
-    emitValue() {
-        this.ref.markForCheck();
-        this.onChange(this.values.length > 0 ? this.values : undefined);
-    }
-    isNumericType() {
-        return this.type === FieldType.Number || this.type === FieldType.Currency;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ChipFilterInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ChipFilterInputComponent, isStandalone: false, selector: "tb-chip-filter-input", inputs: { type: "type" }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: ChipFilterInputComponent,
-                multi: true
-            }], ngImport: i0, template: "<mat-form-field class=\"chip-filter-field\">\r\n  <mat-chip-grid #chipGrid>\r\n    @for (val of values; track $index) {\r\n      <mat-chip-row (removed)=\"remove($index)\">\r\n        {{val}}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input matInput\r\n         [matChipInputFor]=\"chipGrid\"\r\n         [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\r\n         [matChipInputAddOnBlur]=\"true\"\r\n         (matChipInputTokenEnd)=\"add($event)\"\r\n         (keydown)=\"onKeydown($event)\"\r\n         placeholder=\"Type and press comma...\" />\r\n</mat-form-field>\r\n", styles: [".chip-filter-field{width:100%}\n"], dependencies: [{ kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ChipFilterInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tb-chip-filter-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: ChipFilterInputComponent,
-                            multi: true
-                        }], standalone: false, template: "<mat-form-field class=\"chip-filter-field\">\r\n  <mat-chip-grid #chipGrid>\r\n    @for (val of values; track $index) {\r\n      <mat-chip-row (removed)=\"remove($index)\">\r\n        {{val}}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input matInput\r\n         [matChipInputFor]=\"chipGrid\"\r\n         [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\r\n         [matChipInputAddOnBlur]=\"true\"\r\n         (matChipInputTokenEnd)=\"add($event)\"\r\n         (keydown)=\"onKeydown($event)\"\r\n         placeholder=\"Type and press comma...\" />\r\n</mat-form-field>\r\n", styles: [".chip-filter-field{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
-                type: Input
-            }] } });
-
 class HeaderMenuComponent {
     constructor(tableState) {
         this.tableState = tableState;
@@ -2336,33 +2254,37 @@ class HeaderMenuComponent {
     }
     setStringFilterType() {
         this.myFilterType = this.myFilterType === FilterType.StringContains ? FilterType.StringDoesNotContain : FilterType.StringContains;
-        this.filter.filterValue = undefined;
     }
     setFilterType(filterType) {
-        const wasEquals = this.myFilterType === FilterType.NumberEquals;
-        const isEquals = filterType === FilterType.NumberEquals;
         if (filterType === this.myFilterType) {
             this.resetFilterType();
         }
         else {
             this.myFilterType = filterType;
         }
-        if (wasEquals !== isEquals) {
-            this.filter.filterValue = undefined;
-        }
+    }
+    onMenuOpened() {
+        this.tableState.getFilter$('header-column-' + this.metaData.key).pipe(take(1)).subscribe(existing => {
+            if (!existing) {
+                this.filter.filterValue = undefined;
+            }
+        });
     }
     onEnter(filter) {
         if (filter.filterValue != undefined && filter.filterType) {
+            if (typeof filter.filterValue === 'string' && filter.filterValue.includes(',')) {
+                filter.filterValue = filter.filterValue.split(',').map((s) => s.trim()).filter((s) => s);
+            }
             this.tableState.addFilter(filter);
             this.trigger.closeMenu();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: HeaderMenuComponent, isStandalone: false, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n          </tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          @if (myFilterType === FilterType.StringDoesNotContain) {\r\n            <mat-form-field stop-propagation class=\"font auto-width\">\r\n              <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n              <mat-label>Does Not Contain...</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n              <span matSuffix matTooltip=\"Contains\">\r\n                <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                  <mat-icon class=\"chosen-icon\">block</mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          } @else {\r\n            <tb-chip-filter-input stop-propagation [type]=\"metaData.fieldType\" name=\"filterValue\" [(ngModel)]=\"filter.filterValue\"></tb-chip-filter-input>\r\n            <span [matTooltip]=\"'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon>block</mat-icon>\r\n              </button>\r\n            </span>\r\n          }\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          @if (myFilterType === FilterType.NumberEquals) {\r\n            <tb-chip-filter-input stop-propagation [type]=\"metaData.fieldType\" name=\"filterValue\" [(ngModel)]=\"filter.filterValue\"></tb-chip-filter-input>\r\n          } @else {\r\n            <mat-form-field class=\"auto-width\"  stop-propagation>\r\n              <mat-label>{{myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            </mat-form-field>\r\n          }\r\n          <span class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "component", type: ChipFilterInputComponent, selector: "tb-chip-filter-input", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: HeaderMenuComponent, isStandalone: false, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n          </tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          <mat-form-field class=\"auto-width\"  stop-propagation>\r\n           \r\n            <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n          </tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          @if (myFilterType === FilterType.StringDoesNotContain) {\r\n            <mat-form-field stop-propagation class=\"font auto-width\">\r\n              <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n              <mat-label>Does Not Contain...</mat-label>\r\n              <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n              <span matSuffix matTooltip=\"Contains\">\r\n                <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                  <mat-icon class=\"chosen-icon\">block</mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-form-field>\r\n          } @else {\r\n            <tb-chip-filter-input stop-propagation [type]=\"metaData.fieldType\" name=\"filterValue\" [(ngModel)]=\"filter.filterValue\"></tb-chip-filter-input>\r\n            <span [matTooltip]=\"'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon>block</mat-icon>\r\n              </button>\r\n            </span>\r\n          }\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          @if (myFilterType === FilterType.NumberEquals) {\r\n            <tb-chip-filter-input stop-propagation [type]=\"metaData.fieldType\" name=\"filterValue\" [(ngModel)]=\"filter.filterValue\"></tb-chip-filter-input>\r\n          } @else {\r\n            <mat-form-field class=\"auto-width\"  stop-propagation>\r\n              <mat-label>{{myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n              <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            </mat-form-field>\r\n          }\r\n          <span class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n  <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n  <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n    <mat-icon color=\"primary\">group</mat-icon>\r\n    <span>Group By</span>\r\n  </button>\r\n  <button mat-menu-item (click)=hideField(metaData.key)>\r\n    <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    <span>Hide Column</span>\r\n  </button>\r\n  <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n      <input type=\"hidden\" name=\"filterId\"  [ngModel]=\"'header-column-' + metaData.key\" />\r\n      <input type=\"hidden\" name=\"filterType\"  [ngModel]=\"myFilterType\" />\r\n      <input type=\"hidden\" name=\"key\"  [ngModel]=\"metaData.key\" />\r\n      <input type=\"hidden\" name=\"fieldType\"  [ngModel]=\"metaData.fieldType\" />\r\n\r\n      <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n          </tb-in-list-filter>\r\n      </ng-container>\r\n\r\n\r\n      <ng-template #defaultFilter>\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n          <mat-form-field stop-propagation class=\"font auto-width\">\r\n            <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n            <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n              <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n                <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n                  block\r\n                </mat-icon>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n          <mat-form-field class=\"auto-width\"  stop-propagation>\r\n           \r\n            <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n            <input matInput type='number'  name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                <mat-icon  class=\"suffix-icons\"\r\n                  >\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n                <mat-icon  class=\"suffix-icons\"\r\n                >\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n              [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n                <span class=\"suffix-icons\"\r\n                >\r\n                  =</span>\r\n              </button>\r\n            </span>\r\n          </mat-form-field>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n          <div>\r\n            <label>\r\n              <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n            </label>\r\n            <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n              <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n            </mat-radio-group>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime\">\r\n          <mat-form-field class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix class=\"tb-header-prefix\">\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                <mat-icon  class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                <span  class=\"suffix-icons underline\"> =</span>\r\n              </button>\r\n            </span>\r\n            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n            <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n              (click)=\"calendar.open()\"/>\r\n            <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n            <mat-datepicker #calendar></mat-datepicker>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n    <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n      Apply\r\n    </button>\r\n  </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
                 type: Input
             }], metaData: [{
@@ -2553,8 +2475,8 @@ class ColumnBuilderComponent {
             this.metaData.click(element, key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$2.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: ColumnBuilderComponent, isStandalone: false, selector: "tb-column-builder", inputs: { metaData: "metaData", customCell: "customCell", data$: "data$" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\">\r\n        </ng-container>\r\n    </mat-cell>\r\n\r\n  </ng-template>\r\n\r\n  <ng-template matHeaderCellDef #myHeader>\r\n\r\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\r\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #header>\r\n\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\r\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n          </div>\r\n          <ng-template #headerWithoutMenu >\r\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          </ng-template>\r\n          <tb-header-menu\r\n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\r\n          </tb-header-menu>\r\n        </div>\r\n      </mat-header-cell>\r\n\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template matFooterCellDef>\r\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #footer>\r\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\r\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\r\n          <span *ngSwitchCase=\"FieldType.Currency\">\r\n            {{ data | columnTotal: metaData | currency }}\r\n          </span>\r\n          <span *ngSwitchCase=\"FieldType.Number\">\r\n            {{ data | columnTotal: metaData | number }}\r\n          </span>\r\n        </span>\r\n      </mat-footer-cell>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }], viewProviders: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$1.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: ColumnBuilderComponent, isStandalone: false, selector: "tb-column-builder", inputs: { metaData: "metaData", customCell: "customCell", data$: "data$" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\">\r\n        </ng-container>\r\n    </mat-cell>\r\n\r\n  </ng-template>\r\n\r\n  <ng-template matHeaderCellDef #myHeader>\r\n\r\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\r\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #header>\r\n\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\r\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n          </div>\r\n          <ng-template #headerWithoutMenu >\r\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          </ng-template>\r\n          <tb-header-menu\r\n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\r\n          </tb-header-menu>\r\n        </div>\r\n      </mat-header-cell>\r\n\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template matFooterCellDef>\r\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #footer>\r\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\r\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\r\n          <span *ngSwitchCase=\"FieldType.Currency\">\r\n            {{ data | columnTotal: metaData | currency }}\r\n          </span>\r\n          <span *ngSwitchCase=\"FieldType.Number\">\r\n            {{ data | columnTotal: metaData | number }}\r\n          </span>\r\n        </span>\r\n      </mat-footer-cell>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }], viewProviders: [
             { provide: CDK_DROP_LIST, useExisting: CdkDropList },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2563,7 +2485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
             args: [{ selector: 'tb-column-builder', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
                     ], standalone: false, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n  <ng-template #body let-element='element' >\r\n      <mat-cell  [matTooltip]=\"metaData.toolTip ?? ''\"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n        <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\">\r\n        </ng-container>\r\n    </mat-cell>\r\n\r\n  </ng-template>\r\n\r\n  <ng-template matHeaderCellDef #myHeader>\r\n\r\n    <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\r\n      <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} \">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #header>\r\n\r\n      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\"   class=\"column-head drag-header\" #headref >\r\n        <div class=\"header-container\" cdkDragHandle>\r\n          <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\r\n            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n          </div>\r\n          <ng-template #headerWithoutMenu >\r\n            <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\r\n              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}\r\n            </div>\r\n          </ng-template>\r\n          <tb-header-menu\r\n            *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\r\n          </tb-header-menu>\r\n        </div>\r\n      </mat-header-cell>\r\n\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *matCellDef=\"let element;\">\r\n    <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template matFooterCellDef>\r\n    <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #footer>\r\n      <mat-footer-cell  [styler]='styles.footer' *ngrxLet=\"data$ as data\">\r\n        <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\r\n          <span *ngSwitchCase=\"FieldType.Currency\">\r\n            {{ data | columnTotal: metaData | currency }}\r\n          </span>\r\n          <span *ngSwitchCase=\"FieldType.Number\">\r\n            {{ data | columnTotal: metaData | number }}\r\n          </span>\r\n        </span>\r\n      </mat-footer-cell>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
-        }], ctorParameters: () => [{ type: TransformCreator }, { type: i4$2.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { metaData: [{
+        }], ctorParameters: () => [{ type: TransformCreator }, { type: i4$1.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { metaData: [{
                 type: Input
             }], customCell: [{
                 type: Input
@@ -2857,7 +2779,7 @@ class GenericTableComponent {
             this.selection.select(...this.dataSource.data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\"\r\n      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\"\r\n      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -2909,7 +2831,7 @@ class GenericTableVsComponent extends GenericTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\r\n\r\n    <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i13.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\r\n\r\n    <mat-table\r\n    cdkDropList\r\n    cdkDropListLockAxis='x'\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"table-drag-list\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n    [trackBy]='trackByFunction'\r\n    [styler]=\"tableWidth | async\"\r\n  >\r\n\r\n      <ng-container matColumnDef=\"select\">\r\n\r\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                          [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                          [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n            </mat-checkbox>\r\n          </mat-header-cell>\r\n\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <mat-checkbox *ngIf=\"!row.isGroupFooter\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? selection.toggle(row) : null\"\r\n                          [checked]=\"selection.isSelected(row)\">\r\n            </mat-checkbox>\r\n          </mat-cell>\r\n\r\n          <mat-footer-cell *matFooterCellDef>\r\n            {{ selection.selected.length }}\r\n          </mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"index\">\r\n            <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n            <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\r\n            <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"groupHeader\">\r\n          <mat-cell *matCellDef=\"let row\">\r\n            <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n              <button mat-icon-button (click)=\"updateGroup(row);\">\r\n                <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\r\n                <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\r\n              </button>\r\n              {{row.groupHeaderName}}\r\n            </div>\r\n            <div style=\"flex-grow: 1\">\r\n              <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n            </div>\r\n          </mat-cell>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"showHeader$ | async\">\r\n          <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\r\n        </ng-container>\r\n        <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\r\n        <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\r\n        <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\r\n\r\n    </mat-table>\r\n\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <div class=\"flx-row-end sticky\">\r\n    <tb-paginator #tbPaginator\r\n      [dataSource]=\"dataSource\"\r\n      [tableElRef]=\"tableElRef\"\r\n      [data$]=\"data$\">\r\n    </tb-paginator>\r\n\r\n    <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n      {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n    </mat-icon>\r\n  </div>\r\n\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i13.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, decorators: [{
             type: Component,
@@ -3047,7 +2969,7 @@ class DateFilterComponent {
         this.FilterType = FilterType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateFilterComponent, isStandalone: false, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\r\n  <mat-form-field>\r\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n      <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #cal></mat-datepicker>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #toVal></mat-datepicker>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateFilterComponent, isStandalone: false, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\r\n  <mat-form-field>\r\n      <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n      <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #cal></mat-datepicker>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\r\n  <ng-container ngModelGroup=\"filterValue\">\r\n    <mat-form-field class=\"my-filter\" >\r\n      <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\"  placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n          (click)=\"fromVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #fromVal></mat-datepicker>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\"  placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n      <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\r\n      <mat-datepicker #toVal></mat-datepicker>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, decorators: [{
             type: Component,
@@ -3058,6 +2980,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 type: Input
             }] } });
 
+class ChipFilterInputComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.FieldType = FieldType;
+        this.values = [];
+        this.separatorKeyCodes = [COMMA, ENTER];
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    writeValue(obj) {
+        if (Array.isArray(obj)) {
+            this.values = obj.filter(v => v != null && v !== '');
+        }
+        else if (obj != null && obj !== '') {
+            this.values = [obj];
+        }
+        else {
+            this.values = [];
+        }
+        this.ref.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    add(event) {
+        const raw = (event.value || '').trim();
+        if (!raw) {
+            event.chipInput.clear();
+            return;
+        }
+        if (this.isNumericType()) {
+            const num = Number(raw);
+            if (isNaN(num)) {
+                event.chipInput.clear();
+                return;
+            }
+            this.values = [...this.values, num];
+        }
+        else {
+            this.values = [...this.values, raw];
+        }
+        event.chipInput.clear();
+        this.emitValue();
+    }
+    remove(index) {
+        this.values = [...this.values];
+        this.values.splice(index, 1);
+        this.emitValue();
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            event.stopPropagation();
+        }
+    }
+    emitValue() {
+        this.ref.markForCheck();
+        this.onChange(this.values.length > 0 ? this.values : undefined);
+    }
+    isNumericType() {
+        return this.type === FieldType.Number || this.type === FieldType.Currency;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ChipFilterInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ChipFilterInputComponent, isStandalone: false, selector: "tb-chip-filter-input", inputs: { type: "type" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: ChipFilterInputComponent,
+                multi: true
+            }], ngImport: i0, template: "<mat-form-field class=\"chip-filter-field\">\r\n  <mat-chip-grid #chipGrid>\r\n    @for (val of values; track $index) {\r\n      <mat-chip-row (removed)=\"remove($index)\">\r\n        {{val}}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input matInput\r\n         [matChipInputFor]=\"chipGrid\"\r\n         [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\r\n         [matChipInputAddOnBlur]=\"true\"\r\n         (matChipInputTokenEnd)=\"add($event)\"\r\n         (keydown)=\"onKeydown($event)\"\r\n         />\r\n</mat-form-field>\r\n", styles: [".chip-filter-field{width:100%}\n"], dependencies: [{ kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ChipFilterInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tb-chip-filter-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: ChipFilterInputComponent,
+                            multi: true
+                        }], standalone: false, template: "<mat-form-field class=\"chip-filter-field\">\r\n  <mat-chip-grid #chipGrid>\r\n    @for (val of values; track $index) {\r\n      <mat-chip-row (removed)=\"remove($index)\">\r\n        {{val}}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input matInput\r\n         [matChipInputFor]=\"chipGrid\"\r\n         [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\r\n         [matChipInputAddOnBlur]=\"true\"\r\n         (matChipInputTokenEnd)=\"add($event)\"\r\n         (keydown)=\"onKeydown($event)\"\r\n         />\r\n</mat-form-field>\r\n", styles: [".chip-filter-field{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+                type: Input
+            }] } });
+
 class NumberFilterComponent {
     constructor() {
         this.FilterType = FilterType;
@@ -3470,12 +3474,6 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
         super(model, wrapper);
         this.filterType = FilterType.StringContains;
         this.fieldType = FieldType.String;
-        this.effect(() => {
-            return model.valueChanges.pipe(tap$1(val => {
-                this.filterValue = val;
-                this.update();
-            }));
-        });
     }
     reset() {
         if (this.model) {
@@ -3484,6 +3482,9 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
         super.reset();
     }
     setFilter(filter) {
+        if (typeof filter.filterValue === 'string' && filter.filterValue.includes(',')) {
+            filter.filterValue = filter.filterValue.split(',').map((s) => s.trim()).filter((s) => s);
+        }
         filter.active = filter.filterValue && this._userActive;
         super.setFilter(filter);
     }
@@ -4148,7 +4149,7 @@ class FilterChipsComponent {
         this.filterStore.clearAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n    matTooltip=\"Close all Filters Cards\">\r\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n  </button>\r\n\r\n\r\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n      Clear All\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.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.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n    matTooltip=\"Close all Filters Cards\">\r\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n  </button>\r\n\r\n\r\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n      Clear All\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
@@ -4162,7 +4163,7 @@ class GroupByListComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GroupByListComponent, isStandalone: false, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\r\n  <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\r\n    <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </ng-container>\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.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.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GroupByListComponent, isStandalone: false, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n  <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\r\n  <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\r\n    <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n      {{groupByKey | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  </ng-container>\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,