@dereekb/dbx-web 12.1.7 → 12.1.9

package/fesm2022/dereekb-dbx-web-table.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { signal, Component, ChangeDetectionStrategy, Injectable, inject, computed, NgModule, input, Directive, effect } from '@angular/core';
-import { DatePipe } from '@angular/common';
+import { DatePipe, NgClass } from '@angular/common';
 import { isSameDateDay } from '@dereekb/date';
-import { filterMaybe, beginLoading, valueFromFinishedLoadingState, SubscriptionObject, maybeValueFromObservableOrValue, loadingStateContext } from '@dereekb/rxjs';
+import { filterMaybe, beginLoading, valueFromFinishedLoadingState, mapLoadingStateValueWithOperator, asObservable, SubscriptionObject, maybeValueFromObservableOrValue, loadingStateContext } from '@dereekb/rxjs';
 import { ComponentStore } from '@ngrx/component-store';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, combineLatest, of, startWith, filter, throttleTime } from 'rxjs';
 import * as i1 from '@angular/material/datepicker';
@@ -19,6 +19,7 @@ import { DbxLoadingComponent } from '@dereekb/dbx-web';
 import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import * as i1$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
+import { pushArrayItemsIntoArray } from '@dereekb/util';
 
 /**
  * A table header component used for rendering date values on the header.
@@ -72,6 +73,16 @@ function dbxTableDateHeaderInjectionFactory() {
     };
 }
 
+const NO_GROUPS_ID = 'none';
+function defaultDbxTableItemGroup(items) {
+    return {
+        groupId: NO_GROUPS_ID,
+        items,
+        meta: undefined,
+        default: true
+    };
+}
+
 class DbxTableStore extends ComponentStore {
     constructor() {
         super({
@@ -109,6 +120,19 @@ class DbxTableStore extends ComponentStore {
     columns$ = this.data$.pipe(map((x) => x.columns), shareReplay(1));
     itemsState$ = this.data$.pipe(switchMap((x) => x.items$), shareReplay(1));
     items$ = this.itemsState$.pipe(valueFromFinishedLoadingState(), filterMaybe(), shareReplay(1));
+    groupsState$ = this.itemsState$.pipe(mapLoadingStateValueWithOperator(switchMap((x) => {
+        return this.viewDelegate$.pipe(switchMap((viewDelegate) => {
+            let groups;
+            if (viewDelegate.groupBy) {
+                groups = asObservable(viewDelegate.groupBy(x));
+            }
+            else {
+                groups = of([defaultDbxTableItemGroup(x)]);
+            }
+            return groups;
+        }));
+    })), shareReplay(1));
+    groups$ = this.groupsState$.pipe(valueFromFinishedLoadingState(), filterMaybe(), shareReplay(1));
     // MARK: State Changes
     setInput = this.updater((state, input) => ({ ...state, input }));
     setDataDelegate = this.updater((state, dataDelegate) => ({ ...state, dataDelegate }));
@@ -276,7 +300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class DbxTableActionCellComponent {
     tableStore = inject(DbxTableStore);
-    config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.summaryRowEnd), distinctUntilChanged());
+    config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.actionHeader), distinctUntilChanged());
     configSignal = toSignal(this.config$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableActionCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableActionCellComponent, isStandalone: true, selector: "dbx-table-action-cell", ngImport: i0, template: `
@@ -443,20 +467,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Abstract directive that has an element input.
  */
-class AbstractDbxTableElementDirective {
+class AbstractDbxTableItemDirective {
     tableStore = inject((DbxTableStore));
-    element = input();
-    element$ = toObservable(this.element).pipe(filterMaybe(), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractDbxTableElementDirective, inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    item = input();
+    item$ = toObservable(this.item).pipe(filterMaybe(), distinctUntilChanged());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractDbxTableItemDirective, inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableItemDirective, decorators: [{
             type: Directive
         }] });
 
-class DbxTableItemCellComponent extends AbstractDbxTableElementDirective {
+class DbxTableItemCellComponent extends AbstractDbxTableItemDirective {
     column = input();
-    config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => combineLatest([toObservable(this.column).pipe(filterMaybe()), this.element$]).pipe(map(([column, element]) => viewDelegate.itemCell(column, element)))), maybeValueFromObservableOrValue(), distinctUntilChanged());
+    config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => combineLatest([toObservable(this.column).pipe(filterMaybe()), this.item$]).pipe(map(([column, item]) => viewDelegate.itemCell(column, item)))), maybeValueFromObservableOrValue(), distinctUntilChanged());
     configSignal = toSignal(this.config$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableItemCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxTableItemCellComponent, isStandalone: true, selector: "dbx-table-item-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
@@ -476,8 +500,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class DbxTableItemHeaderComponent extends AbstractDbxTableElementDirective {
-    config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => this.element$.pipe(map((x) => viewDelegate.itemHeader(x)))), maybeValueFromObservableOrValue(), distinctUntilChanged());
+class DbxTableItemHeaderComponent extends AbstractDbxTableItemDirective {
+    config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => this.item$.pipe(map((x) => viewDelegate.itemHeader(x)))), maybeValueFromObservableOrValue(), distinctUntilChanged());
     configSignal = toSignal(this.config$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableItemHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableItemHeaderComponent, isStandalone: true, selector: "dbx-table-item-header", usesInheritance: true, ngImport: i0, template: `
@@ -497,12 +521,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class DbxTableItemActionComponent extends AbstractDbxTableElementDirective {
+class DbxTableItemActionComponent extends AbstractDbxTableItemDirective {
     config$ = this.tableStore.viewDelegate$.pipe(map((viewDelegate) => {
         const itemAction = viewDelegate.itemAction;
         let obs = undefined;
         if (itemAction) {
-            obs = this.element$.pipe(map((x) => itemAction(x)));
+            obs = this.item$.pipe(map((x) => itemAction(x)));
         }
         return obs;
     }), maybeValueFromObservableOrValue(), distinctUntilChanged());
@@ -525,8 +549,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+/**
+ * Abstract directive that has an element input.
+ */
+class AbstractDbxTableGroupDirective {
+    tableStore = inject((DbxTableStore));
+    group = input();
+    group$ = toObservable(this.group).pipe(filterMaybe(), distinctUntilChanged());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractDbxTableGroupDirective, inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableGroupDirective, decorators: [{
+            type: Directive
+        }] });
+
+class DbxTableGroupHeaderComponent extends AbstractDbxTableGroupDirective {
+    config$ = this.tableStore.viewDelegate$.pipe(map((viewDelegate) => {
+        const groupHeader = viewDelegate.groupHeader;
+        let obs = undefined;
+        if (groupHeader) {
+            obs = this.group$.pipe(map((x) => groupHeader(x)));
+        }
+        return obs;
+    }), maybeValueFromObservableOrValue(), distinctUntilChanged());
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableGroupHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableGroupHeaderComponent, isStandalone: true, selector: "dbx-table-group-header", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableGroupHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-group-header',
+                    template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxInjectionComponent],
+                    standalone: true
+                }]
+        }] });
+
+class DbxTableGroupFooterComponent extends AbstractDbxTableGroupDirective {
+    config$ = this.tableStore.viewDelegate$.pipe(map((viewDelegate) => {
+        const groupFooter = viewDelegate.groupFooter;
+        let obs = undefined;
+        if (groupFooter) {
+            obs = this.group$.pipe(map((x) => groupFooter(x)));
+        }
+        return obs;
+    }), maybeValueFromObservableOrValue(), distinctUntilChanged());
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableGroupFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableGroupFooterComponent, isStandalone: true, selector: "dbx-table-group-footer", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableGroupFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-group-footer',
+                    template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxInjectionComponent],
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * A table header component used for injecting the input picker view.
+ */
+class DbxTableFullSummaryRowComponent {
+    tableStore = inject(DbxTableStore);
+    config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.fullSummaryRow), distinctUntilChanged());
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableFullSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableFullSummaryRowComponent, isStandalone: true, selector: "dbx-table-full-summary-row", host: { classAttribute: "dbx-h100 dbx-flex-bar" }, ngImport: i0, template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableFullSummaryRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-full-summary-row',
+                    template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent],
+                    host: {
+                        class: 'dbx-h100 dbx-flex-bar'
+                    }
+                }]
+        }] });
+
 const DBX_TABLE_ITEMS_COLUMN_NAME = '_items';
 const DBX_TABLE_ACTIONS_COLUMN_NAME = '_actions';
+function isDbxTableViewGroupElement(element) {
+    return element.type === 'group';
+}
+function isDbxTableViewItemElement(element) {
+    return element.type === 'item';
+}
 /**
  * A table with fixed content
  */
@@ -543,7 +671,48 @@ class DbxTableViewComponent {
     innerColumnNames$ = this.innerColumns$.pipe(map((x) => x.map((y) => y.columnName)), shareReplay(1));
     innerColumnsSignal = toSignal(this.innerColumns$);
     innerColumnNamesSignal = toSignal(this.innerColumnNames$);
-    elements$ = this.tableStore.items$;
+    elementsState$ = this.tableStore.groupsState$.pipe(mapLoadingStateValueWithOperator(switchMap((groups) => {
+        return this.tableStore.viewDelegate$.pipe(map((viewDelegate) => {
+            const { groupHeader: inputGroupHeader, groupFooter: inputGroupFooter } = viewDelegate;
+            const hasGroupHeader = inputGroupHeader != null ? (group) => inputGroupHeader(group) != null : () => false;
+            const hasGroupFooter = inputGroupFooter != null ? (group) => inputGroupFooter(group) != null : () => false;
+            return groups
+                .map((group) => {
+                const { items } = group;
+                const itemElements = items.map((item) => ({
+                    type: 'item',
+                    item
+                }));
+                let elements;
+                if (group.default) {
+                    elements = itemElements;
+                }
+                else {
+                    const header = hasGroupHeader(group);
+                    const footer = hasGroupFooter(group);
+                    elements = [];
+                    if (header) {
+                        elements.push({
+                            type: 'group',
+                            location: 'header',
+                            group
+                        });
+                    }
+                    pushArrayItemsIntoArray(elements, itemElements);
+                    if (footer) {
+                        elements.push({
+                            type: 'group',
+                            location: 'footer',
+                            group
+                        });
+                    }
+                }
+                return elements;
+            })
+                .flat();
+        }));
+    })), shareReplay(1));
+    elements$ = this.elementsState$.pipe(valueFromFinishedLoadingState([]), shareReplay(1));
     displayedColumns$ = this.innerColumnNames$.pipe(map((columnNames) => {
         return [this.itemsColumnName, ...columnNames, this.actionsColumnName];
     }), shareReplay(1));
@@ -551,21 +720,60 @@ class DbxTableViewComponent {
         const columnNames = this.innerColumnNamesSignal() || [];
         return [this.itemsColumnName, ...columnNames, this.actionsColumnName];
     });
+    visibleColumnsSignal = computed(() => {
+        const displayedColumns = this.displayedColumnsSignal();
+        // TODO: Every time the table is rendered/size changes/etc we should recompute width of the first n columns that span the viewport
+        // in order to calculate a colspan for the group header/footer that is not greater than span of the table for a given view size
+        // I.E. if the screen shrinks to only show the first 4 columns, then the colspan should be 4.
+        // as a temporary measure, we just show half the columns
+        return displayedColumns.length / 2;
+    });
     trackByFunction$ = this.tableStore.viewDelegate$.pipe(map((x) => x.trackBy ?? this.DEFAULT_TRACK_BY_FUNCTION), shareReplay(1));
-    trackByFunctionSignal = toSignal(this.trackByFunction$, { initialValue: this.DEFAULT_TRACK_BY_FUNCTION });
+    inputTrackByFunctionSignal = toSignal(this.trackByFunction$, { initialValue: this.DEFAULT_TRACK_BY_FUNCTION });
+    trackElementByFunctionSignal = computed(() => {
+        const trackByFunction = this.inputTrackByFunctionSignal();
+        const fn = (index, element) => {
+            if (element.type === 'item') {
+                return `i_${trackByFunction(index, element.item)}`;
+            }
+            else {
+                return `g_${element.group.groupId}`;
+            }
+        };
+        return fn;
+    });
     context = loadingStateContext({ obs: this.tableStore.dataState$ });
-    dataLoadingContext = loadingStateContext({ obs: this.tableStore.itemsState$ });
+    dataLoadingContext = loadingStateContext({ obs: this.elementsState$ });
     contextSignal = toSignal(this.context.state$);
     dataLoadingContextSignal = toSignal(this.dataLoadingContext.state$);
+    viewDelegateSignal = toSignal(this.tableStore.viewDelegate$);
     onScrollDown() {
         this.tableStore.loadMore();
     }
+    showItemRow(_, row) {
+        return row.type === 'item';
+    }
+    showGroupHeaderRow(_, row) {
+        return row.type === 'group' && row.location === 'header';
+    }
+    showGroupFooterRow(_, row) {
+        return row.type === 'group' && row.location === 'footer';
+    }
+    showFooterRowSignal = computed(() => {
+        const viewDelegate = this.viewDelegateSignal();
+        const showFooterRow = viewDelegate && (viewDelegate.summaryRowHeader != null || viewDelegate.columnFooter != null || viewDelegate.summaryRowEnd != null);
+        return showFooterRow;
+    });
+    showFullSummaryRowSignal = computed(() => {
+        const viewDelegate = this.viewDelegateSignal();
+        return viewDelegate?.fullSummaryRow != null;
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTableViewComponent, isStandalone: true, selector: "dbx-table-view", inputs: { scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, throttleScroll: { classPropertyName: "throttleScroll", publicName: "throttleScroll", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <dbx-loading class=\"dbx-table-view-loading\" [linear]=\"true\" [context]=\"dataLoadingContext\"></dbx-loading>\n  <section class=\"dbx-table-view\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance()\" [infiniteScrollThrottle]=\"throttleScroll()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\">\n    <table class=\"dbx-table-view-table\" mat-table [dataSource]=\"elements$\" [trackBy]=\"trackByFunctionSignal() || DEFAULT_TRACK_BY_FUNCTION\">\n      <!-- Header/Item column -->\n      <ng-container [matColumnDef]=\"itemsColumnName\" [sticky]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-input-cell></dbx-table-input-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <dbx-table-item-header [element]=\"element\"></dbx-table-item-header>\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-start-cell></dbx-table-summary-start-cell>\n        </td>\n      </ng-container>\n\n      <!-- Column Definitions -->\n      @for (column of innerColumnsSignal(); track column.columnName) {\n        <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\">\n          <th mat-header-cell *matHeaderCellDef>\n            <dbx-table-column-header [column]=\"column\"></dbx-table-column-header>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <dbx-table-item-cell [element]=\"element\" [column]=\"column\"></dbx-table-item-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <dbx-table-column-footer [column]=\"column\"></dbx-table-column-footer>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Tail/Action column -->\n      <ng-container [matColumnDef]=\"actionsColumnName\" [stickyEnd]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-action-cell></dbx-table-action-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <dbx-table-item-action [element]=\"element\"></dbx-table-item-action>\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-end-cell></dbx-table-summary-end-cell>\n        </td>\n      </ng-container>\n\n      <!-- Table View -->\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumnsSignal()\"></tr>\n\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n    </table>\n  </section>\n</dbx-loading>\n", dependencies: [{ kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DbxTableInputCellComponent, selector: "dbx-table-input-cell" }, { kind: "component", type: DbxTableItemHeaderComponent, selector: "dbx-table-item-header" }, { kind: "component", type: DbxTableItemCellComponent, selector: "dbx-table-item-cell", inputs: ["column"] }, { kind: "component", type: DbxTableItemActionComponent, selector: "dbx-table-item-action" }, { kind: "component", type: DbxTableActionCellComponent, selector: "dbx-table-action-cell" }, { kind: "component", type: DbxTableColumnHeaderComponent, selector: "dbx-table-column-header" }, { kind: "component", type: DbxTableColumnFooterComponent, selector: "dbx-table-column-footer" }, { kind: "component", type: DbxTableSummaryStartCellComponent, selector: "dbx-table-summary-start-cell" }, { kind: "component", type: DbxTableSummaryEndCellComponent, selector: "dbx-table-summary-end-cell" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTableViewComponent, isStandalone: true, selector: "dbx-table-view", inputs: { scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, throttleScroll: { classPropertyName: "throttleScroll", publicName: "throttleScroll", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <dbx-loading class=\"dbx-table-view-loading\" [linear]=\"true\" [context]=\"dataLoadingContext\"></dbx-loading>\n  <section class=\"dbx-table-view\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance()\" [infiniteScrollThrottle]=\"throttleScroll()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\">\n    <table class=\"dbx-table-view-table\" mat-table [dataSource]=\"elements$\" [trackBy]=\"trackElementByFunctionSignal()\" multiTemplateDataRows>\n      <!-- Groups -->\n      <!-- Group Header column -->\n      <ng-container matColumnDef=\"groupHeaderColumn\" [sticky]=\"true\">\n        <td mat-cell [attr.colspan]=\"visibleColumnsSignal()\" *matCellDef=\"let element\">\n          <dbx-table-group-header [group]=\"element.group\"></dbx-table-group-header>\n        </td>\n      </ng-container>\n\n      <!-- Group Footer column -->\n      <ng-container matColumnDef=\"groupFooterColumn\" [sticky]=\"true\">\n        <td mat-cell [attr.colspan]=\"visibleColumnsSignal()\" *matCellDef=\"let element\">\n          <dbx-table-group-footer [group]=\"element.group\"></dbx-table-group-footer>\n        </td>\n      </ng-container>\n\n      <!-- Items -->\n      <!-- Header/Item column -->\n      <ng-container [matColumnDef]=\"itemsColumnName\" [sticky]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-input-cell></dbx-table-input-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          @if (element.item) {\n            <dbx-table-item-header [item]=\"element.item\"></dbx-table-item-header>\n          }\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-start-cell></dbx-table-summary-start-cell>\n        </td>\n      </ng-container>\n\n      <!-- Column Definitions -->\n      @for (column of innerColumnsSignal(); track column.columnName) {\n        <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\">\n          <th mat-header-cell *matHeaderCellDef>\n            <dbx-table-column-header [column]=\"column\"></dbx-table-column-header>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            @if (element.item) {\n              <dbx-table-item-cell [item]=\"element.item\" [column]=\"column\"></dbx-table-item-cell>\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <dbx-table-column-footer [column]=\"column\"></dbx-table-column-footer>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Tail/Action column -->\n      <ng-container [matColumnDef]=\"actionsColumnName\" [stickyEnd]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-action-cell></dbx-table-action-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          @if (element.item) {\n            <dbx-table-item-action [item]=\"element.item\"></dbx-table-item-action>\n          }\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-end-cell></dbx-table-summary-end-cell>\n        </td>\n      </ng-container>\n\n      <!-- Table View -->\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: ['groupHeaderColumn']; when: showGroupHeaderRow\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumnsSignal(); when: showItemRow\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: ['groupFooterColumn']; when: showGroupFooterRow\"></tr>\n\n      <tr [ngClass]=\"{ 'dbx-hide': !showFooterRowSignal() }\" mat-footer-row *matFooterRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n    </table>\n  </section>\n  <!-- Full summary row -->\n  @if (showFullSummaryRowSignal()) {\n    <div class=\"mat-mdc-table dbx-table-view-full-summary-row-container\">\n      <div class=\"mdc-data-table__cell mat-mdc-row\">\n        <dbx-table-full-summary-row></dbx-table-full-summary-row>\n      </div>\n    </div>\n  }\n</dbx-loading>\n", dependencies: [{ kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DbxTableInputCellComponent, selector: "dbx-table-input-cell" }, { kind: "component", type: DbxTableItemHeaderComponent, selector: "dbx-table-item-header" }, { kind: "component", type: DbxTableItemCellComponent, selector: "dbx-table-item-cell", inputs: ["column"] }, { kind: "component", type: DbxTableItemActionComponent, selector: "dbx-table-item-action" }, { kind: "component", type: DbxTableActionCellComponent, selector: "dbx-table-action-cell" }, { kind: "component", type: DbxTableColumnHeaderComponent, selector: "dbx-table-column-header" }, { kind: "component", type: DbxTableColumnFooterComponent, selector: "dbx-table-column-footer" }, { kind: "component", type: DbxTableSummaryStartCellComponent, selector: "dbx-table-summary-start-cell" }, { kind: "component", type: DbxTableSummaryEndCellComponent, selector: "dbx-table-summary-end-cell" }, { kind: "component", type: DbxTableGroupHeaderComponent, selector: "dbx-table-group-header" }, { kind: "component", type: DbxTableGroupFooterComponent, selector: "dbx-table-group-footer" }, { kind: "component", type: DbxTableFullSummaryRowComponent, selector: "dbx-table-full-summary-row" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-table-view', imports: [DbxLoadingComponent, InfiniteScrollDirective, MatTableModule, DbxTableInputCellComponent, DbxTableItemHeaderComponent, DbxTableItemCellComponent, DbxTableItemActionComponent, DbxTableActionCellComponent, DbxTableColumnHeaderComponent, DbxTableColumnFooterComponent, DbxTableSummaryStartCellComponent, DbxTableSummaryEndCellComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<dbx-loading [context]=\"context\">\n  <dbx-loading class=\"dbx-table-view-loading\" [linear]=\"true\" [context]=\"dataLoadingContext\"></dbx-loading>\n  <section class=\"dbx-table-view\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance()\" [infiniteScrollThrottle]=\"throttleScroll()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\">\n    <table class=\"dbx-table-view-table\" mat-table [dataSource]=\"elements$\" [trackBy]=\"trackByFunctionSignal() || DEFAULT_TRACK_BY_FUNCTION\">\n      <!-- Header/Item column -->\n      <ng-container [matColumnDef]=\"itemsColumnName\" [sticky]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-input-cell></dbx-table-input-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <dbx-table-item-header [element]=\"element\"></dbx-table-item-header>\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-start-cell></dbx-table-summary-start-cell>\n        </td>\n      </ng-container>\n\n      <!-- Column Definitions -->\n      @for (column of innerColumnsSignal(); track column.columnName) {\n        <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\">\n          <th mat-header-cell *matHeaderCellDef>\n            <dbx-table-column-header [column]=\"column\"></dbx-table-column-header>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <dbx-table-item-cell [element]=\"element\" [column]=\"column\"></dbx-table-item-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <dbx-table-column-footer [column]=\"column\"></dbx-table-column-footer>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Tail/Action column -->\n      <ng-container [matColumnDef]=\"actionsColumnName\" [stickyEnd]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-action-cell></dbx-table-action-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <dbx-table-item-action [element]=\"element\"></dbx-table-item-action>\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-end-cell></dbx-table-summary-end-cell>\n        </td>\n      </ng-container>\n\n      <!-- Table View -->\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumnsSignal()\"></tr>\n\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n    </table>\n  </section>\n</dbx-loading>\n" }]
+            args: [{ selector: 'dbx-table-view', imports: [DbxLoadingComponent, NgClass, InfiniteScrollDirective, MatTableModule, DbxTableInputCellComponent, DbxTableItemHeaderComponent, DbxTableItemCellComponent, DbxTableItemActionComponent, DbxTableActionCellComponent, DbxTableColumnHeaderComponent, DbxTableColumnFooterComponent, DbxTableSummaryStartCellComponent, DbxTableSummaryEndCellComponent, DbxTableGroupHeaderComponent, DbxTableGroupFooterComponent, DbxTableFullSummaryRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<dbx-loading [context]=\"context\">\n  <dbx-loading class=\"dbx-table-view-loading\" [linear]=\"true\" [context]=\"dataLoadingContext\"></dbx-loading>\n  <section class=\"dbx-table-view\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance()\" [infiniteScrollThrottle]=\"throttleScroll()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\">\n    <table class=\"dbx-table-view-table\" mat-table [dataSource]=\"elements$\" [trackBy]=\"trackElementByFunctionSignal()\" multiTemplateDataRows>\n      <!-- Groups -->\n      <!-- Group Header column -->\n      <ng-container matColumnDef=\"groupHeaderColumn\" [sticky]=\"true\">\n        <td mat-cell [attr.colspan]=\"visibleColumnsSignal()\" *matCellDef=\"let element\">\n          <dbx-table-group-header [group]=\"element.group\"></dbx-table-group-header>\n        </td>\n      </ng-container>\n\n      <!-- Group Footer column -->\n      <ng-container matColumnDef=\"groupFooterColumn\" [sticky]=\"true\">\n        <td mat-cell [attr.colspan]=\"visibleColumnsSignal()\" *matCellDef=\"let element\">\n          <dbx-table-group-footer [group]=\"element.group\"></dbx-table-group-footer>\n        </td>\n      </ng-container>\n\n      <!-- Items -->\n      <!-- Header/Item column -->\n      <ng-container [matColumnDef]=\"itemsColumnName\" [sticky]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-input-cell></dbx-table-input-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          @if (element.item) {\n            <dbx-table-item-header [item]=\"element.item\"></dbx-table-item-header>\n          }\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-start-cell></dbx-table-summary-start-cell>\n        </td>\n      </ng-container>\n\n      <!-- Column Definitions -->\n      @for (column of innerColumnsSignal(); track column.columnName) {\n        <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\">\n          <th mat-header-cell *matHeaderCellDef>\n            <dbx-table-column-header [column]=\"column\"></dbx-table-column-header>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            @if (element.item) {\n              <dbx-table-item-cell [item]=\"element.item\" [column]=\"column\"></dbx-table-item-cell>\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <dbx-table-column-footer [column]=\"column\"></dbx-table-column-footer>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Tail/Action column -->\n      <ng-container [matColumnDef]=\"actionsColumnName\" [stickyEnd]=\"true\">\n        <th mat-header-cell *matHeaderCellDef>\n          <dbx-table-action-cell></dbx-table-action-cell>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          @if (element.item) {\n            <dbx-table-item-action [item]=\"element.item\"></dbx-table-item-action>\n          }\n        </td>\n        <td mat-footer-cell *matFooterCellDef>\n          <dbx-table-summary-end-cell></dbx-table-summary-end-cell>\n        </td>\n      </ng-container>\n\n      <!-- Table View -->\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: ['groupHeaderColumn']; when: showGroupHeaderRow\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumnsSignal(); when: showItemRow\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: ['groupFooterColumn']; when: showGroupFooterRow\"></tr>\n\n      <tr [ngClass]=\"{ 'dbx-hide': !showFooterRowSignal() }\" mat-footer-row *matFooterRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n    </table>\n  </section>\n  <!-- Full summary row -->\n  @if (showFullSummaryRowSignal()) {\n    <div class=\"mat-mdc-table dbx-table-view-full-summary-row-container\">\n      <div class=\"mdc-data-table__cell mat-mdc-row\">\n        <dbx-table-full-summary-row></dbx-table-full-summary-row>\n      </div>\n    </div>\n  }\n</dbx-loading>\n" }]
         }] });
 
 /**
@@ -595,14 +803,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const importsAndExports = [DbxTableDirective, DbxTableViewComponent, DbxTableColumnHeaderComponent, DbxTableColumnFooterComponent, DbxTableInputCellComponent, DbxTableActionCellComponent, DbxTableItemCellComponent, DbxTableItemHeaderComponent, DbxTableItemActionComponent, DbxTableSummaryStartCellComponent, DbxTableSummaryEndCellComponent];
-/**
- * @deprecated import DbxTableDirective and DbxTableViewComponent directly instead.
- */
+const importsAndExports = [DbxTableDirective, DbxTableViewComponent];
 class DbxTableModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxTableModule, imports: [DbxTableDirective, DbxTableViewComponent, DbxTableColumnHeaderComponent, DbxTableColumnFooterComponent, DbxTableInputCellComponent, DbxTableActionCellComponent, DbxTableItemCellComponent, DbxTableItemHeaderComponent, DbxTableItemActionComponent, DbxTableSummaryStartCellComponent, DbxTableSummaryEndCellComponent], exports: [DbxTableDirective, DbxTableViewComponent, DbxTableColumnHeaderComponent, DbxTableColumnFooterComponent, DbxTableInputCellComponent, DbxTableActionCellComponent, DbxTableItemCellComponent, DbxTableItemHeaderComponent, DbxTableItemActionComponent, DbxTableSummaryStartCellComponent, DbxTableSummaryEndCellComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableModule, imports: [DbxTableViewComponent, DbxTableColumnHeaderComponent, DbxTableColumnFooterComponent, DbxTableInputCellComponent, DbxTableActionCellComponent, DbxTableItemCellComponent, DbxTableItemHeaderComponent, DbxTableItemActionComponent, DbxTableSummaryStartCellComponent, DbxTableSummaryEndCellComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxTableModule, imports: [DbxTableDirective, DbxTableViewComponent], exports: [DbxTableDirective, DbxTableViewComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableModule, imports: [DbxTableViewComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableModule, decorators: [{
             type: NgModule,
@@ -616,5 +821,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDbxTableColumnDirective, AbstractDbxTableElementDirective, DBX_TABLE_ACTIONS_COLUMN_NAME, DBX_TABLE_ITEMS_COLUMN_NAME, DEFAULT_DBX_TABLE_DATE_RANGE_DAY_BUTTON_FORMAT, DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG, DbxTableActionCellComponent, DbxTableColumnFooterComponent, DbxTableColumnHeaderComponent, DbxTableDateHeaderComponent, DbxTableDateModule, DbxTableDateRangeDayDistanceInputCellInputComponent, DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, DbxTableDirective, DbxTableInputCellComponent, DbxTableItemActionComponent, DbxTableItemCellComponent, DbxTableItemHeaderComponent, DbxTableModule, DbxTableStore, DbxTableSummaryEndCellComponent, DbxTableSummaryStartCellComponent, DbxTableViewComponent, dbxTableDateHeaderInjectionFactory, dbxTableDateRangeDayDistanceInputCellInput };
+export { AbstractDbxTableColumnDirective, AbstractDbxTableGroupDirective, AbstractDbxTableItemDirective, DBX_TABLE_ACTIONS_COLUMN_NAME, DBX_TABLE_ITEMS_COLUMN_NAME, DEFAULT_DBX_TABLE_DATE_RANGE_DAY_BUTTON_FORMAT, DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG, DbxTableActionCellComponent, DbxTableColumnFooterComponent, DbxTableColumnHeaderComponent, DbxTableDateHeaderComponent, DbxTableDateModule, DbxTableDateRangeDayDistanceInputCellInputComponent, DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, DbxTableDirective, DbxTableGroupFooterComponent, DbxTableGroupHeaderComponent, DbxTableInputCellComponent, DbxTableItemActionComponent, DbxTableItemCellComponent, DbxTableItemHeaderComponent, DbxTableModule, DbxTableStore, DbxTableSummaryEndCellComponent, DbxTableSummaryStartCellComponent, DbxTableViewComponent, NO_GROUPS_ID, dbxTableDateHeaderInjectionFactory, dbxTableDateRangeDayDistanceInputCellInput, defaultDbxTableItemGroup, isDbxTableViewGroupElement, isDbxTableViewItemElement };
 //# sourceMappingURL=dereekb-dbx-web-table.mjs.map