@one-paragon/angular-utilities 0.1.14 → 0.1.16-2

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

@@ -7,7 +7,7 @@ import { ComponentStore } from '@ngrx/component-store';
 import * as i4$4 from '@angular/material/table';
 import { MatColumnDef, MatTableDataSource, MatTable, MatTableModule, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
-import { flatten, get, merge as merge$1, sumBy, orderBy, cloneDeep, groupBy, flattenDeep, set } from 'lodash';
+import { flatten, get, merge as merge$1, sumBy, orderBy, groupBy, flattenDeep, cloneDeep, set } from 'lodash';
 import * as i9 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CDK_DROP_LIST, CdkDropList, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/common';
@@ -68,7 +68,7 @@ import * as i7$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i8$2 from '@angular/material/button-toggle';
 import * as i3$4 from '@ngrx/store';
-import { createSelector, createAction, props, select, createReducer, on, StoreModule, createFeatureSelector } from '@ngrx/store';
+import { createSelector, createAction, props, select, createReducer, on, StoreModule, createFeatureSelector, Store } from '@ngrx/store';
 import * as i1$3 from '@ngrx/effects';
 import { createEffect, ofType, concatLatestFrom, EffectsModule } from '@ngrx/effects';
 import { createEntityAdapter } from '@ngrx/entity';
@@ -367,7 +367,7 @@ HttpRequestModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         HttpErrorStateDirective,
         HttpInProgressStateDirective,
         HttpNotStartedStateDirective] });
-HttpRequestModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestModule, providers: [] });
+HttpRequestModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HttpRequestModule, decorators: [{
             type: NgModule,
             args: [{
@@ -948,7 +948,8 @@ MatSlideToggleGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0
 MatSlideToggleGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatSlideToggleGroupDirective, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[opMatSlideToggleGroup]', }]
+            args: [{ selector: '[opMatSlideToggleGroup]',
+                }]
         }], propDecorators: { allowMultiple: [{
                 type: Input
             }], toggles: [{
@@ -958,6 +959,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                 type: Output
             }] } });
 
+class TrimWhitespaceDirective {
+    constructor(elem) {
+        this.elem = elem;
+    }
+    onBlur() {
+        const inputString = this.elem.nativeElement.value;
+        if (inputString) {
+            const newValue = inputString.trim().replace(/\t/g, '');
+            if (inputString !== newValue) {
+                this.elem.nativeElement.value = newValue;
+                this.elem.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+    }
+}
+TrimWhitespaceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TrimWhitespaceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TrimWhitespaceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: TrimWhitespaceDirective, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[trimWhitespace]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 class FunctionPipe {
     transform(func, ...args) {
         if (typeof func === 'string') {
@@ -1046,6 +1074,7 @@ UtilitiesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         StylerDirective,
         PreventEnterDirective,
         AutoFocusDirective,
+        TrimWhitespaceDirective,
         ClickSubjectDirective,
         ClickEmitterDirective,
         DialogDirective,
@@ -1056,6 +1085,7 @@ UtilitiesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         PhoneNumberPipe,
         FunctionPipe,
         StopPropagationDirective,
+        TrimWhitespaceDirective,
         StylerDirective,
         PreventEnterDirective,
         AutoFocusDirective,
@@ -1078,6 +1108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                         PhoneNumberPipe,
                         FunctionPipe,
                         StopPropagationDirective,
+                        TrimWhitespaceDirective,
                         StylerDirective,
                         PreventEnterDirective,
                         AutoFocusDirective,
@@ -1095,6 +1126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                         StylerDirective,
                         PreventEnterDirective,
                         AutoFocusDirective,
+                        TrimWhitespaceDirective,
                         ClickSubjectDirective,
                         ClickEmitterDirective,
                         DialogDirective,
@@ -1262,7 +1294,9 @@ const defaultTableState = {
     persistedTableSettings: new PesrsistedTableSettings(),
     notPersisitedTableSettings: new NotPersisitedTableSettings(),
     pageSize: 10,
-    linkMaps: {}
+    linkMaps: {},
+    groupByKeys: [],
+    groups: []
 };
 
 var FilterType;
@@ -1698,6 +1732,20 @@ class TableStore extends ComponentStore {
             tableSettings.collapseFooter = !tableSettings.collapseFooter;
             return ({ ...state, persistedTableSettings: new PesrsistedTableSettings(tableSettings) });
         });
+        this.addGroupByKey = this.updater((state, groupByKey) => ({
+            ...state,
+            groupByKeys: [...state.groupByKeys, groupByKey]
+        }));
+        this.removeGroupByKey = this.updater((state, groupByKey) => ({
+            ...state,
+            groupByKeys: state.groupByKeys.filter(key => groupByKey != key)
+        }));
+        this.updateGroup = this.updater((state, group) => ({
+            ...state,
+            groups: [...state.groups.filter(g => g.groupName != group.groupName), group]
+        }));
+        this.groupByKeys$ = this.select(state => state.groupByKeys);
+        this.groups$ = this.select(state => state.groups);
         this.setTableSettings = this.updater((state, settings) => {
             const s = {
                 ...state,
@@ -2085,10 +2133,10 @@ class HeaderMenuComponent {
     }
 }
 HeaderMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
-HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: HeaderMenuComponent, 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 disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [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)=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)\">\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  style=\"display:block;padding: 0 16px\"  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\" style=\"padding: 0 16px\">\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()\">\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 style=\"padding: 0 16px\">\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>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\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 style=\"padding: 0 16px\">\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\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</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 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}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.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}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\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: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { 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: i6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$3.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: i4$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),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 });
+HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: HeaderMenuComponent, 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 disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [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)\">\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  style=\"display:block;padding: 0 16px\"  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\" style=\"padding: 0 16px\">\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()\">\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 style=\"padding: 0 16px\">\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>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\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 style=\"padding: 0 16px\">\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\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</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 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}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.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}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\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: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { 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: i6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$3.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: i4$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),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: "14.0.1", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [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)=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)\">\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  style=\"display:block;padding: 0 16px\"  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\" style=\"padding: 0 16px\">\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()\">\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 style=\"padding: 0 16px\">\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>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\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 style=\"padding: 0 16px\">\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\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</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 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}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.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}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"] }]
+            args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [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)\">\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  style=\"display:block;padding: 0 16px\"  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\" style=\"padding: 0 16px\">\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()\">\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 style=\"padding: 0 16px\">\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>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n                  [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\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 style=\"padding: 0 16px\">\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\">\r\n          <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n            <span matPrefix>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n                  arrow_forward_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }\">\r\n                  arrow_back_ios</mat-icon>\r\n              </button>\r\n              <button mat-icon-button disableRipple>\r\n                <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n                [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n                  =</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 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}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.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}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"] }]
         }], ctorParameters: function () { return [{ type: TableStore }]; }, propDecorators: { filter: [{
                 type: Input
             }], metaData: [{
@@ -2098,6 +2146,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                 args: [MatMenuTrigger]
             }] } });
 
+class Subjectifier extends Observable {
+    constructor(_source) {
+        super((obs) => {
+            const s = merge(_source, this._subj).subscribe(obs);
+            return s;
+        });
+        this._source = _source;
+        this._subj = new Subject();
+        this.merged = merge(this._source, this._subj);
+        this.next = this._subj.next.bind(this._subj);
+        this.newSubj = (...operations) => new Subjectifier(this.merged.pipe(...operations));
+    }
+}
+
 class ResizeColumnDirective {
     constructor(renderer, el, store) {
         this.renderer = renderer;
@@ -2351,7 +2413,7 @@ PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
   <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
     [ngClass]="{'hide' : (collapseFooter$ | async)}">
   </mat-paginator>
-  `, isInline: true, styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".mat-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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!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)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-paginator', template: `
@@ -2361,7 +2423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
   <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
     [ngClass]="{'hide' : (collapseFooter$ | async)}">
   </mat-paginator>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!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)}\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"] }]
         }], ctorParameters: function () { return [{ type: TableStore }]; }, propDecorators: { dataSource: [{
                 type: Input
             }], tableElRef: [{
@@ -2490,6 +2552,12 @@ class GenericTableComponent {
     isGroupFooter(_, row) {
         return row.isGroupFooter;
     }
+    updateGroup(group) {
+        this.state.updateGroup({
+            ...group,
+            isExpanded: !group.isExpanded
+        });
+    }
     addMetaData(column) {
         let columnBuilder = this.myColumns[column.metaData.key];
         if (columnBuilder) {
@@ -2519,10 +2587,10 @@ class GenericTableComponent {
     }
 }
 GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: GenericTableComponent, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", disableSort: "disableSort" }, outputs: { 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 }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  #table\n  [dataSource]=\"dataSource\"\n  [trackBy]='trackByFunction'\n  [styler]=\"tableWidth | async\"\n>\n\n    <ng-container matColumnDef=\"select\">\n\n        <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"!!(masterToggleChecked$ | async)\"\n                        [indeterminate]=\"masterToggleIndeterminate$ | async\">\n          </mat-checkbox>\n        </mat-header-cell>\n\n        <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n          <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </mat-cell>\n\n        <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n          {{ selection.selected.length }}\n        </mat-footer-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"index\">\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n          <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\n          <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n      </ng-container>\n\n      <ng-container matColumnDef=\"groupHeader\">\n        <mat-cell *matCellDef=\"let row\" class=\"group-header\">\n          {{row.groupHeaderName}}\n        </mat-cell>\n      </ng-container>\n\n  <ng-container *ngIf=\"showHeader$ | async\">\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  </ng-container>\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: lightgray;\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n  <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n  <tb-paginator #tbPaginator\n    [dataSource]=\"dataSource\"\n    [tableElRef]=\"tableElRef\"\n    [data$]=\"data$\">\n  </tb-paginator>\n\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n  </mat-icon>\n</div>\n", styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\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: "component", type: i4$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.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"], 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$"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: GenericTableComponent, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", disableSort: "disableSort" }, outputs: { 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\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  #table\n  [dataSource]=\"dataSource\"\n  [trackBy]='trackByFunction'\n  [styler]=\"tableWidth | async\"\n>\n\n    <ng-container matColumnDef=\"select\">\n\n        <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"!!(masterToggleChecked$ | async)\"\n                        [indeterminate]=\"masterToggleIndeterminate$ | async\">\n          </mat-checkbox>\n        </mat-header-cell>\n\n        <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n          <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </mat-cell>\n\n        <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n          {{ selection.selected.length }}\n        </mat-footer-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"index\">\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n          <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\n          <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n      </ng-container>\n\n      <ng-container matColumnDef=\"groupHeader\">\n        <mat-cell *matCellDef=\"let row\">\n          <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n            <button mat-icon-button (click)=\"updateGroup(row);\">\n              <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n              <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n            </button>\n            {{row.groupHeaderName}}\n          </div>\n          <div style=\"flex-grow: 1\">\n            <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n          </div>\n        </mat-cell>\n      </ng-container>\n\n  <ng-container *ngIf=\"showHeader$ | async\">\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  </ng-container>\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n  <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n  <tb-paginator #tbPaginator\n    [dataSource]=\"dataSource\"\n    [tableElRef]=\"tableElRef\"\n    [data$]=\"data$\">\n  </tb-paginator>\n\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n  </mat-icon>\n</div>\n", styles: [".mat-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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!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)}\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$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.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"], 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$"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  #table\n  [dataSource]=\"dataSource\"\n  [trackBy]='trackByFunction'\n  [styler]=\"tableWidth | async\"\n>\n\n    <ng-container matColumnDef=\"select\">\n\n        <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"!!(masterToggleChecked$ | async)\"\n                        [indeterminate]=\"masterToggleIndeterminate$ | async\">\n          </mat-checkbox>\n        </mat-header-cell>\n\n        <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n          <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </mat-cell>\n\n        <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n          {{ selection.selected.length }}\n        </mat-footer-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"index\">\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n          <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\n          <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n      </ng-container>\n\n      <ng-container matColumnDef=\"groupHeader\">\n        <mat-cell *matCellDef=\"let row\" class=\"group-header\">\n          {{row.groupHeaderName}}\n        </mat-cell>\n      </ng-container>\n\n  <ng-container *ngIf=\"showHeader$ | async\">\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  </ng-container>\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: lightgray;\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n  <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n  <tb-paginator #tbPaginator\n    [dataSource]=\"dataSource\"\n    [tableElRef]=\"tableElRef\"\n    [data$]=\"data$\">\n  </tb-paginator>\n\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n  </mat-icon>\n</div>\n", styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\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"] }]
+            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  #table\n  [dataSource]=\"dataSource\"\n  [trackBy]='trackByFunction'\n  [styler]=\"tableWidth | async\"\n>\n\n    <ng-container matColumnDef=\"select\">\n\n        <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"!!(masterToggleChecked$ | async)\"\n                        [indeterminate]=\"masterToggleIndeterminate$ | async\">\n          </mat-checkbox>\n        </mat-header-cell>\n\n        <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n          <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </mat-cell>\n\n        <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n          {{ selection.selected.length }}\n        </mat-footer-cell>\n      </ng-container>\n\n      <ng-container matColumnDef=\"index\">\n          <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n          <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>\n          <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n      </ng-container>\n\n      <ng-container matColumnDef=\"groupHeader\">\n        <mat-cell *matCellDef=\"let row\">\n          <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n            <button mat-icon-button (click)=\"updateGroup(row);\">\n              <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n              <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n            </button>\n            {{row.groupHeaderName}}\n          </div>\n          <div style=\"flex-grow: 1\">\n            <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n          </div>\n        </mat-cell>\n      </ng-container>\n\n  <ng-container *ngIf=\"showHeader$ | async\">\n    <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n  </ng-container>\n  <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"></mat-row>\n  <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n  <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n  <tb-paginator #tbPaginator\n    [dataSource]=\"dataSource\"\n    [tableElRef]=\"tableElRef\"\n    [data$]=\"data$\">\n  </tb-paginator>\n\n  <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n  </mat-icon>\n</div>\n", styles: [".mat-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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!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)}\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { data$: [{
                 type: Input
             }], IndexColumn: [{
@@ -2539,6 +2607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                 type: Input
             }], columnInfos: [{
                 type: Input
+            }], groupHeaderTemplate: [{
+                type: Input
             }], disableSort: [{
                 type: Input
             }], table: [{
@@ -2550,6 +2620,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
             }], tableElRef: [{
                 type: ViewChild,
                 args: ['table', { read: ElementRef }]
+            }], paginatorComponent: [{
+                type: ViewChild,
+                args: [PaginatorComponent]
             }], selection$: [{
                 type: Output
             }] } });
@@ -3806,6 +3879,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
             args: [{ selector: 'lib-filter-list', template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n    matTooltip=\"Close all Filters\">\n    <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n  </button>\n\n\n  <div *ngIf=\"currentFilters.length\" class=\"float\">\n    <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n      <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n    </div>\n  </div>\n\n  <mat-chip-list *ngrxLet=\"filters$ as filters\">\n    <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n      {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n      Clear All\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.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:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
         }], ctorParameters: function () { return [{ type: TableStore }, { type: WrapperFilterStore }]; } });
 
+class GroupByListComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+    }
+    ngOnInit() {
+    }
+}
+GroupByListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: GroupByListComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
+GroupByListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: GroupByListComponent, selector: "group-by-list", ngImport: i0, template: "<mat-chip-list *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n  <span *ngIf=\"groupByKeys?.length\" class=\"label\">Group By:</span>\n  <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\n    <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n      {{groupByKey}}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  </ng-container>\n</mat-chip-list>\n", styles: [".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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: GroupByListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'group-by-list', template: "<mat-chip-list *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n  <span *ngIf=\"groupByKeys?.length\" class=\"label\">Group By:</span>\n  <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\n    <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n      {{groupByKey}}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  </ng-container>\n</mat-chip-list>\n", styles: [".label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: TableStore }]; } });
+
 class TableContainerComponent {
     constructor(state, exportToCsvService, config, store, wrapper) {
         this.state = state;
@@ -3832,6 +3919,55 @@ class TableContainerComponent {
             return meta;
         };
         this.collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
+        this.tbGroupBy = (data, groupByKeys, parentGroupName) => {
+            let res = {};
+            res = groupBy(data, groupByKeys[0]);
+            const remainingGroupByKeys = groupByKeys.slice(1);
+            if (remainingGroupByKeys.length) {
+                Object.keys(res).forEach(key => res[key] = this.tbGroupBy(res[key], remainingGroupByKeys, key));
+            }
+            return flattenDeep(Object.keys(res).map(groupName => {
+                const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
+                return [
+                    {
+                        isGroupHeader: true,
+                        groupHeaderName: `${groupName} (${res[groupName]?.filter(row => !row.isGroupHeader)?.length})`,
+                        data: res[groupName],
+                        groupName: uniqName,
+                        padding: 0
+                    },
+                    res[groupName]?.map(d => ({ ...d, parentGroupName: d.parentGroupName || uniqName }))
+                ];
+            })).map(this.addIndentation);
+        };
+        this.addIndentation = (d) => {
+            if (d.isGroupHeader) {
+                if (d.padding) {
+                    d.padding += 20;
+                }
+                else {
+                    d.padding = 1;
+                }
+            }
+            return d;
+        };
+        this.setDisplay = (data, groups) => data
+            .map(d => ({
+            ...d,
+            shouldDisplay: !d.parentGroupName || this.shouldDisplay(groups.find(g => g.groupName == d.parentGroupName), groups),
+            isExpanded: groups.find(g => g.groupName == d.groupName)?.isExpanded
+        }))
+            .filter(d => d.shouldDisplay);
+        this.shouldDisplay = (currentGroup, groups) => {
+            if (!currentGroup?.isExpanded) {
+                return false;
+            }
+            const parentGroup = groups?.find(g => g.groupName == currentGroup.parentGroupName);
+            if (parentGroup) {
+                return this.shouldDisplay(parentGroup, groups);
+            }
+            return true;
+        };
         this.state.on(this.state.getSavableState().pipe(last()), finalState => {
             if (this.tableId) {
                 this.store.dispatch(setLocalProfile({ key: this.tableId, value: finalState }));
@@ -3842,6 +3978,12 @@ class TableContainerComponent {
     set pageSize(value) {
         this.state.setPageSize(value);
     }
+    firstPage() {
+        this.genericTableComponent?.paginatorComponent?.paginator?.firstPage();
+    }
+    lastPage() {
+        this.genericTableComponent?.paginatorComponent?.paginator?.lastPage();
+    }
     resetState() {
         this.customFilters.forEach(cf => cf.reset());
         this.filters.forEach(cf => cf.reset());
@@ -3872,7 +4014,7 @@ class TableContainerComponent {
         const filters$ = this.state.filters$.pipe(map(filters => Object.values(filters)));
         const data = new DataFilter(allFilters)
             .appendFilters(filters$)
-            .filterData(this.tableBuilder.getData$().pipe(switchMap(data => this.state.metaDataArray$.pipe(map(metaData => this.getData(data, metaData))))));
+            .filterData(this.tableBuilder.getData$()).pipe(switchMap(data => this.state.groupByKeys$.pipe(map(groupBy => this.getData(data, groupBy))).pipe(switchMap(data => this.state.groups$.pipe(map(groups => this.setDisplay(data, groups)))))));
         this.dataSubject.next(data);
     }
     ngOnInit() {
@@ -3962,44 +4104,29 @@ class TableContainerComponent {
         })));
         this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })));
     }
-    getData(data, metaData) {
-        const meta = metaData.find(m => m.additional?.grouping?.groupBy);
-        if (!meta) {
+    getData(data, groupByKeys) {
+        if (!groupByKeys.length) {
             this.disableSort = false;
             return data;
         }
         this.disableSort = true;
-        const grouped = groupBy(data, meta.key);
-        const withHeadersAndFooters = Object.keys(grouped).map(k => {
-            const header = {
-                isGroupHeader: true,
-                groupHeaderName: meta.additional?.grouping?.groupTitleFn ? meta.additional?.grouping?.groupTitleFn(k) : k
-            };
-            const sumCols = metaData.filter(md => md.additional?.grouping?.sum).map(md => md.key);
-            const totals = sumCols.reduce((acc, key) => {
-                acc[key] = sumBy(grouped[k], key);
-                return acc;
-            }, {});
-            const footer = {
-                isGroupFooter: true,
-                ...totals
-            };
-            return [header, grouped[k], footer];
-        });
-        return flattenDeep(withHeadersAndFooters);
+        return this.tbGroupBy(data, groupByKeys);
     }
 }
 TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$4.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"resetState()\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "disableSort"], outputs: ["selection$"] }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n        <group-by-list></group-by-list>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"resetState()\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "disableSort"], outputs: ["selection$"] }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"resetState()\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\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"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n        <group-by-list></group-by-list>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"resetState()\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\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"] }]
         }], ctorParameters: function () { return [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TableBuilderConfigToken]
                 }] }, { type: i3$4.Store }, { type: TableWrapperDirective, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { customFilters: [{
+                }] }]; }, propDecorators: { genericTableComponent: [{
+                type: ViewChild,
+                args: [GenericTableComponent]
+            }], customFilters: [{
                 type: ContentChildren,
                 args: [TableCustomFilterDirective, { descendants: true }]
             }], filters: [{
@@ -4021,6 +4148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                 type: Input
             }], inputFilters: [{
                 type: Input
+            }], groupHeaderTemplate: [{
+                type: Input
             }], selection$: [{
                 type: Output
             }], data: [{
@@ -4170,7 +4299,8 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         MatButtonToggleFilterDirective,
         TableFilterDirective,
         TableFilterStringContainsDirective,
-        TableWrapperDirective], imports: [CommonModule,
+        TableWrapperDirective,
+        GroupByListComponent], imports: [CommonModule,
         MaterialModule, i3$4.StoreFeatureModule, i1$3.EffectsFeatureModule, FormsModule,
         RouterModule,
         ReactiveComponentModule,
@@ -4191,7 +4321,8 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         MatButtonToggleFilterDirective,
         TableFilterDirective,
         TableFilterStringContainsDirective,
-        TableWrapperDirective] });
+        TableWrapperDirective,
+        GroupByListComponent] });
 TableBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TableBuilderModule, providers: [
         SpaceCasePipe,
         DatePipe,
@@ -4238,6 +4369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                         TableFilterDirective,
                         TableFilterStringContainsDirective,
                         TableWrapperDirective,
+                        GroupByListComponent,
                     ],
                     declarations: [
                         ColumnTotalPipe,
@@ -4272,6 +4404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                         TableFilterDirective,
                         TableFilterStringContainsDirective,
                         TableWrapperDirective,
+                        GroupByListComponent,
                     ],
                     providers: [
                         SpaceCasePipe,
@@ -4401,10 +4534,10 @@ class ActionStateSpinnerComponent {
     }
 }
 ActionStateSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionStateSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ActionStateSpinnerComponent, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "<div id=\"blocker\" *ngIf=\"(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress\">\n  <mat-spinner class=\"spinner\" [diameter]=\"200\"></mat-spinner>\n</div>\n", styles: ["#blocker{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+ActionStateSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ActionStateSpinnerComponent, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "<div id=\"blocker\" *ngIf=\"(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress\">\n  <mat-spinner class=\"spinner\" [diameter]=\"200\"></mat-spinner>\n</div>\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-state-spinner', template: "<div id=\"blocker\" *ngIf=\"(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress\">\n  <mat-spinner class=\"spinner\" [diameter]=\"200\"></mat-spinner>\n</div>\n", styles: ["#blocker{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'lib-action-state-spinner', template: "<div id=\"blocker\" *ngIf=\"(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress\">\n  <mat-spinner class=\"spinner\" [diameter]=\"200\"></mat-spinner>\n</div>\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { status$: [{
                 type: Input
             }] } });
@@ -4436,6 +4569,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
  * Public API Surface of action-state
  */
 
+class AppStoreCache {
+    constructor() {
+        this.cache = [];
+        this.isInCache = (props, actionableSelectorId) => {
+            if (typeof props != 'object')
+                props = { props };
+            const valueToCache = { ...props, actionableSelectorId$: actionableSelectorId };
+            if (this.cache.some(item => shallowEquals(item, valueToCache))) {
+                return true;
+            }
+            this.cache.push(valueToCache);
+            return false;
+        };
+    }
+}
+let _store;
+let _cache = new AppStoreCache();
+const setStore = (store) => {
+    if (store instanceof Store)
+        _store = store;
+};
+function setUpStoreFactory(store) {
+    return () => new Promise((resolve, reject) => {
+        setStore(store);
+        resolve(null);
+    });
+}
+/**
+ * Creates a selector that can dispatch an action if conditions are met.
+ * Note: The props of the selector factory must include the props of the action.
+ * @param selectorFactory A method that returns selector.
+ * @param action The action that will be dispatched when conditions are met.
+ * @param [dispatchIf = defaultFilter] Optional. A method that takes the result of the selector and returns a boolean. The actions gets dispatched
+ * if true is returned. If no method is passed in than the action will be dispatched if the selector returns undefined or null.
+ */
+const createActionableSelector = (selectorFactory, action, dispatchIf = defaultFilter) => {
+    const id = v4();
+    const slctr = (props) => createSelector(selectorFactory(props), (selected) => {
+        if (dispatchIf(selected) && !_cache.isInCache(props, id)) {
+            //Adding the null check for testing purposes. Otherwise it should never be null.
+            _store.dispatch(action(props));
+        }
+        return selected;
+    });
+    return slctr;
+};
+function defaultFilter(data) {
+    return data == null || data == undefined;
+}
+/**
+ * Returns a shallow clone without prop. Will not error if prop does not exist.
+ * @param prop name of property to be removed.
+ * @returns a shallow clone without prop
+ */
+const deleteProp = (t, prop) => {
+    const copy = { ...t };
+    delete copy[prop];
+    return copy;
+};
+const shallowEquals = (first, second) => {
+    const firstKeys = Object.keys(first);
+    const secondKeys = Object.keys(second);
+    if (firstKeys.length !== secondKeys.length) {
+        return false;
+    }
+    for (let index = 0; index < firstKeys.length; index++) {
+        const currentKey = firstKeys[index];
+        if (first[currentKey] !== second[currentKey]) {
+            return false;
+        }
+    }
+    return true;
+};
+
 /*
  * Public API Surface of http-request-state
  */
@@ -4444,5 +4651,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, UtilitiesModule, actionStatusReducer, chainRequest, combineArrays, createFailure, createSuccess, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, onceWhen, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, skipOneWhen, spaceCase, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, onceWhen, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map