@saydar/table-builder 1.0.14 → 1.0.15-beta.1

package/fesm2022/saydar-table-builder.mjs

@@ -1444,29 +1444,56 @@ const isNull = (filterInfo) => {
     return func;
 };
 
+// Splits on comma, tab, newline, or carriage return (consecutive delimiters collapse).
+// Plain space is deliberately excluded: legitimate filter values often contain spaces
+// (company names, addresses, descriptions) and a user can't accidentally type tab or
+// newline into a single-line input — so these are unambiguous "I copy-pasted multiple
+// values" signals.
+const DELIMITERS = /[,\t\n\r]+/;
 function splitCommaValue(value) {
-    if (typeof value === 'string' && value.includes(',')) {
-        return value.split(',').map(s => s.trim()).filter(s => s);
+    if (typeof value === 'string' && DELIMITERS.test(value)) {
+        return value.split(DELIMITERS).map(s => s.trim()).filter(s => s);
     }
     return value;
 }
 
-const makeStringFunc = (op) => (filterInfo) => {
-    const filterValue = splitCommaValue(filterInfo.filterValue);
-    if (Array.isArray(filterValue)) {
-        const vals = filterValue.map((v) => prepareForStringCompare(v));
-        return (val) => vals.some((v) => op(prepareForStringCompare(val), v));
+function hasWildcard(s) {
+    return typeof s === 'string' && /[*?]/.test(s);
+}
+function wildcardToRegex(pattern, anchor) {
+    const escaped = pattern
+        .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+        .replace(/\*/g, '.*')
+        .replace(/\?/g, '.');
+    const prefix = anchor === 'start' || anchor === 'both' ? '^' : '';
+    const suffix = anchor === 'end' || anchor === 'both' ? '$' : '';
+    return new RegExp(prefix + escaped + suffix, 'i');
+}
+
+const makeSegmentMatcher = (segment, anchor, literalOp) => {
+    const prepped = prepareForStringCompare(segment);
+    if (hasWildcard(prepped)) {
+        const re = wildcardToRegex(prepped, anchor);
+        return (val) => re.test(val);
     }
-    const fv = prepareForStringCompare(filterValue);
-    return (val) => op(prepareForStringCompare(val), fv);
+    return (val) => literalOp(val, prepped);
+};
+const makeStringFunc = (anchor, literalOp) => (filterInfo) => {
+    const filterValue = splitCommaValue(filterInfo.filterValue);
+    const segments = Array.isArray(filterValue) ? filterValue : [filterValue];
+    const matchers = segments.map(seg => makeSegmentMatcher(seg, anchor, literalOp));
+    return (val) => {
+        const prepped = prepareForStringCompare(val) ?? '';
+        return matchers.some(m => m(prepped));
+    };
 };
-const stringEqualFunc = makeStringFunc((a, b) => a === b);
-const stringContainsFunc = makeStringFunc((a, b) => a.includes(b));
-const stringStartsWithFunc = makeStringFunc((a, b) => a.startsWith(b));
-const stringEndsWithFunc = makeStringFunc((a, b) => a.endsWith(b));
+const stringEqualFunc = makeStringFunc('both', (a, b) => a === b);
+const stringContainsFunc = makeStringFunc('none', (a, b) => a.includes(b));
+const stringStartsWithFunc = makeStringFunc('start', (a, b) => a.startsWith(b));
+const stringEndsWithFunc = makeStringFunc('end', (a, b) => a.endsWith(b));
 const stringDoesNotContainFunc = (filterInfo) => {
-    const doesNotContainVal = prepareForStringCompare(filterInfo.filterValue);
-    return ((val) => !prepareForStringCompare(val)?.includes(doesNotContainVal));
+    const match = makeSegmentMatcher(filterInfo.filterValue, 'none', (a, b) => a.includes(b));
+    return (val) => !match(prepareForStringCompare(val) ?? '');
 };
 const multipleStringValuesEqualsFunc = (filterInfo) => {
     const filterVals = filterInfo.filterValue.map((v) => prepareForStringCompare(v));
@@ -2753,11 +2780,11 @@ class GenericTableComponent {
             this.selection.select(...this.dataSource.data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <mat-table\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\">\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\">\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>\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        </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      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <mat-table\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\">\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\">\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>\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        </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\" class=\"group-header-row\" 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      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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\">\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\">\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>\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        </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      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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\">\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\">\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>\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        </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\" class=\"group-header-row\" 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      (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
                 type: Input
             }], IndexColumn: [{
@@ -2805,11 +2832,11 @@ class GenericTableVsComponent extends GenericTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n    <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\">\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\">\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>\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        </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  </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i13.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n    <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\">\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\">\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>\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        </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\" class=\"group-header-row\" 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  </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i13.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n    <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\">\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\">\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>\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        </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  </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
+            args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "  <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n    <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\">\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\">\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>\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        </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\" class=\"group-header-row\" 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  </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
         }] });
 
 // here is how to use it
@@ -2954,6 +2981,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 type: Input
             }] } });
 
+// Helpers for preserving multi-line / tab-separated paste content into single-line
+// <input> elements. Browsers replace `\n` with a space when pasting into a single-line
+// input, which destroys the structure of an Excel column paste before any framework code
+// can see it. The trick is to intercept the `paste` event, read the raw clipboard text,
+// and write it directly into the input's value via the prototype setter so frameworks
+// (Angular's ngModel, etc.) still get a synthetic input event.
+function hasPreservableDelimiters(text) {
+    return !!text && /[\n\r\t]/.test(text);
+}
+function injectPasteText(input, text) {
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    const newValue = input.value.slice(0, start) + text + input.value.slice(end);
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+    setter?.call(input, newValue);
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+/**
+ * Apply to any single-line `<input>` to keep tab and newline characters from being
+ * silently replaced with spaces on paste. The pasted text is injected via the native
+ * value setter so Angular's ngModel still sees the change.
+ *
+ * Pair with `splitCommaValue` (or any predicate that handles `[,\t\n\r]+` delimiters)
+ * for the multi-value semantics. Plain typed input with regular spaces is untouched.
+ */
+class PreservePasteDelimitersDirective {
+    constructor(host) {
+        this.host = host;
+    }
+    onPaste(e) {
+        const text = e.clipboardData?.getData('text/plain');
+        if (!hasPreservableDelimiters(text))
+            return;
+        e.preventDefault();
+        // Single-line <input> sanitizes its `.value` by stripping newlines per HTML spec,
+        // so injecting raw newlines would lose them. Convert tab/newline runs to commas
+        // before injection — splitter handles commas, and the user sees the normalized
+        // value as visible confirmation of how their paste was interpreted.
+        const normalized = text.replace(/[\t\n\r]+/g, ',');
+        injectPasteText(this.host.nativeElement, normalized);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreservePasteDelimitersDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: PreservePasteDelimitersDirective, isStandalone: false, selector: "input[tbPreservePasteDelimiters]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreservePasteDelimitersDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[tbPreservePasteDelimiters]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+
 class InFilterComponent {
     constructor(ref) {
         this.ref = ref;
@@ -2988,8 +3071,8 @@ class InFilterComponent {
     }
     onValueChange(i, value) {
         this.value = [...this.value];
-        if (typeof value === 'string' && value.includes(',')) {
-            const parts = value.split(',').map(s => s.trim());
+        if (typeof value === 'string' && /[,\t\n\r]/.test(value)) {
+            const parts = value.split(/[,\t\n\r]+/).map(s => s.trim());
             const leading = parts.slice(0, -1).filter(s => s);
             const last = parts[parts.length - 1];
             this.value.splice(i, 1, ...leading, last);
@@ -3005,7 +3088,7 @@ class InFilterComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: InFilterComponent,
                 multi: true
-            }], ngImport: i0, template: "<div class=inline>\n    <div *ngFor=\"let val of value; index as i\">\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        #input [autoFocus]=\"i === value.length - 1\" />\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    </div>\n</div>\n", styles: [".inline{display:inline-block}\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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], ngImport: i0, template: "<div class=inline>\n    <div *ngFor=\"let val of value; index as i\">\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        tbPreservePasteDelimiters\n        #input [autoFocus]=\"i === value.length - 1\" />\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    </div>\n</div>\n", styles: [".inline{display:inline-block}\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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }, { kind: "directive", type: PreservePasteDelimitersDirective, selector: "input[tbPreservePasteDelimiters]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InFilterComponent, decorators: [{
             type: Component,
@@ -3013,7 +3096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: InFilterComponent,
                             multi: true
-                        }], standalone: false, template: "<div class=inline>\n    <div *ngFor=\"let val of value; index as i\">\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        #input [autoFocus]=\"i === value.length - 1\" />\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    </div>\n</div>\n", styles: [".inline{display:inline-block}\n"] }]
+                        }], standalone: false, template: "<div class=inline>\n    <div *ngFor=\"let val of value; index as i\">\n      <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n      <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n        [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n        [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n        tbPreservePasteDelimiters\n        #input [autoFocus]=\"i === value.length - 1\" />\n      <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n      <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n    </div>\n</div>\n", styles: [".inline{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }] } });
@@ -3071,11 +3154,11 @@ class FilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterComponent, isStandalone: false, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\n<mat-card\n  appearance=\"outlined\"\n  class=\"filter-card\"\n>\n  <mat-card-content>\n    <form\n      #form=\"ngForm\"\n      (keydown.enter)=\"onEnter(form.value,$event)\"\n      (keydown.escape)=\"close.emit()\"\n    >\n      <input\n        type=\"hidden\"\n        name=\"filterId\"\n        [ngModel]=\"filter.filterId\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"key\"\n        [ngModel]=\"filter.key\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"fieldType\"\n        [ngModel]=\"filter.fieldType\"\n      />\n      <div class=\"head-row\">\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n        <button\n          class=\"cancel-button small-button\"\n          color=\"primary\"\n          mat-icon-button\n          (click)=\"close.emit();\"\n          type=\"button\"\n          matTooltip=\"Close\"\n        >\n          <mat-icon\n            class=\"cancel-button\"\n            color=\"primary\"\n          >close</mat-icon>\n        </button>\n      </div>\n      <div class=\"filter-row\">\n        <div class=\"inline\">\n          <mat-form-field class=\"my-filter\">\n            <mat-select\n              placeholder=\"Select Filter Type\"\n              name=\"filterType\"\n              [(ngModel)]=\"currentFilterType\"\n            >\n              @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n              <mat-option [value]=\"$any(kvp.value)[0]\">\n                {{ kvp.key }}\n              </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        @switch (true) {\n        @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n        filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n        <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n        <tb-number-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-number-filter>\n        }\n        @case (filter.fieldType === FieldType.Boolean) {\n        <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Date) {\n        <tb-date-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-filter>\n        }\n        @case (filter.fieldType === FieldType.DateTime) {\n        <tb-date-time-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-time-filter>\n        }\n        @case (filter.fieldType === FieldType.Enum) {\n        <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n        }\n        }\n        @if (currentFilterType === FilterType.IsNull) {\n        <mat-radio-group\n          name=\"filterValue\"\n          [ngModel]=\"filter.filterValue\"\n        >\n          <mat-radio-button [value]=\"true\">True</mat-radio-button>\n          <mat-radio-button [value]=\"false\">False</mat-radio-button>\n        </mat-radio-group>\n        }\n      </div>\n      <button\n        mat-button\n        (click)=\"state.addFilter(form.value)\"\n        disableRipple\n        [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n      >\n        Apply\n      </button>\n\n\n      <ng-template #String>\n        @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n        <mat-form-field class=\"my-filter\">\n          <input\n            matInput\n            name=\"filterValue\"\n            [ngModel]=\"filter.filterValue\"\n          />\n        </mat-form-field>\n        }\n        @if (currentFilterType === FilterType.In) {\n        <lib-in-filter\n          [type]=\"FieldType.String\"\n          name='filterValue'\n          [(ngModel)]=\"filter.filterValue\"\n        ></lib-in-filter>\n        }\n      </ng-template>\n\n      <ng-template #Boolean>\n        @if (currentFilterType === FilterType.BooleanEquals) {\n        <div class=\"switch\">\n          <mat-radio-group\n            name=\"filterValue\"\n            [ngModel]=\"filter.filterValue\"\n          >\n            <mat-radio-button\n              [value]=\"true\"\n              preventEnter\n            >True</mat-radio-button>\n            <mat-radio-button\n              [value]=\"false\"\n              preventEnter\n            >False</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        }\n      </ng-template>\n      <ng-template #Enum>\n        @if (currentFilterType === FilterType.In) {\n        <tb-in-list-filter\n          [key]='filter.key'\n          name='filterValue'\n          [(ngModel)]='filter.filterValue'\n        ></tb-in-list-filter>\n        }\n      </ng-template>\n    </form>\n  </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterComponent, isStandalone: false, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\n<mat-card\n  appearance=\"outlined\"\n  class=\"filter-card\"\n>\n  <mat-card-content>\n    <form\n      #form=\"ngForm\"\n      (keydown.enter)=\"onEnter(form.value,$event)\"\n      (keydown.escape)=\"close.emit()\"\n    >\n      <input\n        type=\"hidden\"\n        name=\"filterId\"\n        [ngModel]=\"filter.filterId\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"key\"\n        [ngModel]=\"filter.key\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"fieldType\"\n        [ngModel]=\"filter.fieldType\"\n      />\n      <div class=\"head-row\">\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n        <button\n          class=\"cancel-button small-button\"\n          color=\"primary\"\n          mat-icon-button\n          (click)=\"close.emit();\"\n          type=\"button\"\n          matTooltip=\"Close\"\n        >\n          <mat-icon\n            class=\"cancel-button\"\n            color=\"primary\"\n          >close</mat-icon>\n        </button>\n      </div>\n      <div class=\"filter-row\">\n        <div class=\"inline\">\n          <mat-form-field class=\"my-filter\">\n            <mat-select\n              placeholder=\"Select Filter Type\"\n              name=\"filterType\"\n              [(ngModel)]=\"currentFilterType\"\n            >\n              @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n              <mat-option [value]=\"$any(kvp.value)[0]\">\n                {{ kvp.key }}\n              </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        @switch (true) {\n        @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n        filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n        <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n        <tb-number-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-number-filter>\n        }\n        @case (filter.fieldType === FieldType.Boolean) {\n        <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Date) {\n        <tb-date-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-filter>\n        }\n        @case (filter.fieldType === FieldType.DateTime) {\n        <tb-date-time-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-time-filter>\n        }\n        @case (filter.fieldType === FieldType.Enum) {\n        <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n        }\n        }\n        @if (currentFilterType === FilterType.IsNull) {\n        <mat-radio-group\n          name=\"filterValue\"\n          [ngModel]=\"filter.filterValue\"\n        >\n          <mat-radio-button [value]=\"true\">True</mat-radio-button>\n          <mat-radio-button [value]=\"false\">False</mat-radio-button>\n        </mat-radio-group>\n        }\n      </div>\n      <button\n        mat-button\n        (click)=\"state.addFilter(form.value)\"\n        disableRipple\n        [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n      >\n        Apply\n      </button>\n\n\n      <ng-template #String>\n        @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n        <mat-form-field class=\"my-filter\">\n          <input\n            matInput\n            name=\"filterValue\"\n            tbPreservePasteDelimiters\n            [ngModel]=\"filter.filterValue\"\n          />\n        </mat-form-field>\n        }\n        @if (currentFilterType === FilterType.In) {\n        <lib-in-filter\n          [type]=\"FieldType.String\"\n          name='filterValue'\n          [(ngModel)]=\"filter.filterValue\"\n        ></lib-in-filter>\n        }\n      </ng-template>\n\n      <ng-template #Boolean>\n        @if (currentFilterType === FilterType.BooleanEquals) {\n        <div class=\"switch\">\n          <mat-radio-group\n            name=\"filterValue\"\n            [ngModel]=\"filter.filterValue\"\n          >\n            <mat-radio-button\n              [value]=\"true\"\n              preventEnter\n            >True</mat-radio-button>\n            <mat-radio-button\n              [value]=\"false\"\n              preventEnter\n            >False</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        }\n      </ng-template>\n      <ng-template #Enum>\n        @if (currentFilterType === FilterType.In) {\n        <tb-in-list-filter\n          [key]='filter.key'\n          name='filterValue'\n          [(ngModel)]='filter.filterValue'\n        ></tb-in-list-filter>\n        }\n      </ng-template>\n    </form>\n  </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "directive", type: PreservePasteDelimitersDirective, selector: "input[tbPreservePasteDelimiters]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (filter) {\n<mat-card\n  appearance=\"outlined\"\n  class=\"filter-card\"\n>\n  <mat-card-content>\n    <form\n      #form=\"ngForm\"\n      (keydown.enter)=\"onEnter(form.value,$event)\"\n      (keydown.escape)=\"close.emit()\"\n    >\n      <input\n        type=\"hidden\"\n        name=\"filterId\"\n        [ngModel]=\"filter.filterId\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"key\"\n        [ngModel]=\"filter.key\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"fieldType\"\n        [ngModel]=\"filter.fieldType\"\n      />\n      <div class=\"head-row\">\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n        <button\n          class=\"cancel-button small-button\"\n          color=\"primary\"\n          mat-icon-button\n          (click)=\"close.emit();\"\n          type=\"button\"\n          matTooltip=\"Close\"\n        >\n          <mat-icon\n            class=\"cancel-button\"\n            color=\"primary\"\n          >close</mat-icon>\n        </button>\n      </div>\n      <div class=\"filter-row\">\n        <div class=\"inline\">\n          <mat-form-field class=\"my-filter\">\n            <mat-select\n              placeholder=\"Select Filter Type\"\n              name=\"filterType\"\n              [(ngModel)]=\"currentFilterType\"\n            >\n              @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n              <mat-option [value]=\"$any(kvp.value)[0]\">\n                {{ kvp.key }}\n              </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        @switch (true) {\n        @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n        filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n        <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n        <tb-number-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-number-filter>\n        }\n        @case (filter.fieldType === FieldType.Boolean) {\n        <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Date) {\n        <tb-date-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-filter>\n        }\n        @case (filter.fieldType === FieldType.DateTime) {\n        <tb-date-time-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-time-filter>\n        }\n        @case (filter.fieldType === FieldType.Enum) {\n        <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n        }\n        }\n        @if (currentFilterType === FilterType.IsNull) {\n        <mat-radio-group\n          name=\"filterValue\"\n          [ngModel]=\"filter.filterValue\"\n        >\n          <mat-radio-button [value]=\"true\">True</mat-radio-button>\n          <mat-radio-button [value]=\"false\">False</mat-radio-button>\n        </mat-radio-group>\n        }\n      </div>\n      <button\n        mat-button\n        (click)=\"state.addFilter(form.value)\"\n        disableRipple\n        [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n      >\n        Apply\n      </button>\n\n\n      <ng-template #String>\n        @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n        <mat-form-field class=\"my-filter\">\n          <input\n            matInput\n            name=\"filterValue\"\n            [ngModel]=\"filter.filterValue\"\n          />\n        </mat-form-field>\n        }\n        @if (currentFilterType === FilterType.In) {\n        <lib-in-filter\n          [type]=\"FieldType.String\"\n          name='filterValue'\n          [(ngModel)]=\"filter.filterValue\"\n        ></lib-in-filter>\n        }\n      </ng-template>\n\n      <ng-template #Boolean>\n        @if (currentFilterType === FilterType.BooleanEquals) {\n        <div class=\"switch\">\n          <mat-radio-group\n            name=\"filterValue\"\n            [ngModel]=\"filter.filterValue\"\n          >\n            <mat-radio-button\n              [value]=\"true\"\n              preventEnter\n            >True</mat-radio-button>\n            <mat-radio-button\n              [value]=\"false\"\n              preventEnter\n            >False</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        }\n      </ng-template>\n      <ng-template #Enum>\n        @if (currentFilterType === FilterType.In) {\n        <tb-in-list-filter\n          [key]='filter.key'\n          name='filterValue'\n          [(ngModel)]='filter.filterValue'\n        ></tb-in-list-filter>\n        }\n      </ng-template>\n    </form>\n  </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
+            args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (filter) {\n<mat-card\n  appearance=\"outlined\"\n  class=\"filter-card\"\n>\n  <mat-card-content>\n    <form\n      #form=\"ngForm\"\n      (keydown.enter)=\"onEnter(form.value,$event)\"\n      (keydown.escape)=\"close.emit()\"\n    >\n      <input\n        type=\"hidden\"\n        name=\"filterId\"\n        [ngModel]=\"filter.filterId\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"key\"\n        [ngModel]=\"filter.key\"\n      />\n      <input\n        type=\"hidden\"\n        name=\"fieldType\"\n        [ngModel]=\"filter.fieldType\"\n      />\n      <div class=\"head-row\">\n        <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n        <button\n          class=\"cancel-button small-button\"\n          color=\"primary\"\n          mat-icon-button\n          (click)=\"close.emit();\"\n          type=\"button\"\n          matTooltip=\"Close\"\n        >\n          <mat-icon\n            class=\"cancel-button\"\n            color=\"primary\"\n          >close</mat-icon>\n        </button>\n      </div>\n      <div class=\"filter-row\">\n        <div class=\"inline\">\n          <mat-form-field class=\"my-filter\">\n            <mat-select\n              placeholder=\"Select Filter Type\"\n              name=\"filterType\"\n              [(ngModel)]=\"currentFilterType\"\n            >\n              @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n              <mat-option [value]=\"$any(kvp.value)[0]\">\n                {{ kvp.key }}\n              </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        @switch (true) {\n        @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n        filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n        <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n        <tb-number-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-number-filter>\n        }\n        @case (filter.fieldType === FieldType.Boolean) {\n        <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n        }\n        @case (filter.fieldType === FieldType.Date) {\n        <tb-date-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-filter>\n        }\n        @case (filter.fieldType === FieldType.DateTime) {\n        <tb-date-time-filter\n          [info]=\"filter\"\n          [CurrentFilterType]=\"currentFilterType!\"\n        ></tb-date-time-filter>\n        }\n        @case (filter.fieldType === FieldType.Enum) {\n        <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n        }\n        }\n        @if (currentFilterType === FilterType.IsNull) {\n        <mat-radio-group\n          name=\"filterValue\"\n          [ngModel]=\"filter.filterValue\"\n        >\n          <mat-radio-button [value]=\"true\">True</mat-radio-button>\n          <mat-radio-button [value]=\"false\">False</mat-radio-button>\n        </mat-radio-group>\n        }\n      </div>\n      <button\n        mat-button\n        (click)=\"state.addFilter(form.value)\"\n        disableRipple\n        [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n      >\n        Apply\n      </button>\n\n\n      <ng-template #String>\n        @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n        <mat-form-field class=\"my-filter\">\n          <input\n            matInput\n            name=\"filterValue\"\n            tbPreservePasteDelimiters\n            [ngModel]=\"filter.filterValue\"\n          />\n        </mat-form-field>\n        }\n        @if (currentFilterType === FilterType.In) {\n        <lib-in-filter\n          [type]=\"FieldType.String\"\n          name='filterValue'\n          [(ngModel)]=\"filter.filterValue\"\n        ></lib-in-filter>\n        }\n      </ng-template>\n\n      <ng-template #Boolean>\n        @if (currentFilterType === FilterType.BooleanEquals) {\n        <div class=\"switch\">\n          <mat-radio-group\n            name=\"filterValue\"\n            [ngModel]=\"filter.filterValue\"\n          >\n            <mat-radio-button\n              [value]=\"true\"\n              preventEnter\n            >True</mat-radio-button>\n            <mat-radio-button\n              [value]=\"false\"\n              preventEnter\n            >False</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        }\n      </ng-template>\n      <ng-template #Enum>\n        @if (currentFilterType === FilterType.In) {\n        <tb-in-list-filter\n          [key]='filter.key'\n          name='filterValue'\n          [(ngModel)]='filter.filterValue'\n        ></tb-in-list-filter>\n        }\n      </ng-template>\n    </form>\n  </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
                 type: Input
             }], close: [{
@@ -4127,6 +4210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
             args: [{ selector: 'group-by-list', standalone: false, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n  <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-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 | spaceCase}}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n  </ng-container>\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
         }], ctorParameters: () => [{ type: TableStore }] });
 
+const BLANK_GROUP_LABEL = '(Blank)';
 class TableContainerComponent {
     set isVs(val) {
         if (val || val === '') {
@@ -4167,7 +4251,15 @@ class TableContainerComponent {
         this.collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
         this.tbGroupBy = (data, groupByKeys, parentGroupName) => {
             let res = {};
-            res = groupBy(data, groupByKeys[0]);
+            const key = groupByKeys[0];
+            res = groupBy(data, (row) => {
+                const v = row?.[key];
+                const isBlank = v === null
+                    || v === undefined
+                    || (typeof v === 'string' && v.trim() === '')
+                    || (Array.isArray(v) && v.length === 0);
+                return isBlank ? BLANK_GROUP_LABEL : v;
+            });
             const remainingGroupByKeys = groupByKeys.slice(1);
             if (remainingGroupByKeys.length) {
                 Object.keys(res).forEach(key => res[key] = this.tbGroupBy(res[key], remainingGroupByKeys, key));
@@ -4551,7 +4643,8 @@ class TableBuilderModule {
             TableFilterStringContainsDirective,
             TableWrapperDirective,
             GroupByListComponent,
-            DateTimeFilterComponent], imports: [CommonModule,
+            DateTimeFilterComponent,
+            PreservePasteDelimitersDirective], imports: [CommonModule,
             MaterialModule, i3$4.StoreFeatureModule, i1$3.EffectsFeatureModule, FormsModule,
             RouterModule,
             LetDirective,
@@ -4576,7 +4669,8 @@ class TableBuilderModule {
             TableFilterDirective,
             TableFilterStringContainsDirective,
             TableWrapperDirective,
-            GroupByListComponent] }); }
+            GroupByListComponent,
+            PreservePasteDelimitersDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableBuilderModule, providers: [
             SpaceCasePipe,
             DatePipe,
@@ -4629,6 +4723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         TableFilterStringContainsDirective,
                         TableWrapperDirective,
                         GroupByListComponent,
+                        PreservePasteDelimitersDirective,
                     ],
                     declarations: [
                         ColumnTotalPipe,
@@ -4667,6 +4762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         TableWrapperDirective,
                         GroupByListComponent,
                         DateTimeFilterComponent,
+                        PreservePasteDelimitersDirective,
                     ],
                     providers: [
                         SpaceCasePipe,
@@ -5015,5 +5111,5 @@ const shallowEquals = (first, second) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, 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, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollViewportDirective, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreservePasteDelimitersDirective, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollViewportDirective, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
 //# sourceMappingURL=saydar-table-builder.mjs.map