@dereekb/dbx-web 9.20.20 → 9.22.0

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

@@ -0,0 +1,738 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, NgModule, Directive, Input } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { isSameDateDay } from '@dereekb/date';
+import { filterMaybe, beginLoading, valueFromLoadingState, SubscriptionObject, loadingStateContext } from '@dereekb/rxjs';
+import { ComponentStore } from '@ngrx/component-store';
+import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, combineLatest, of, BehaviorSubject, startWith, filter, throttleTime } from 'rxjs';
+import * as i4 from '@angular/material/datepicker';
+import { DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
+import * as i1 from '@angular/material/core';
+import * as i3 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { format, addDays } from 'date-fns';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$1 from '@dereekb/dbx-web';
+import { DbxLoadingModule } from '@dereekb/dbx-web';
+import * as i4$1 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i1$1 from '@dereekb/dbx-core';
+import { DbxInjectionComponentModule } from '@dereekb/dbx-core';
+import * as i5$1 from 'ngx-infinite-scroll';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
+/**
+ * A table header component used for rendering date values on the header.
+ */
+class DbxTableDateHeaderComponent {
+    constructor() {
+        this.left = 'E';
+        this.right = 'MMM d';
+    }
+    get date() {
+        return this._date;
+    }
+    set date(date) {
+        this._date = date;
+    }
+}
+DbxTableDateHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxTableDateHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableDateHeaderComponent, selector: "ng-component", ngImport: i0, template: `
+    <div *ngIf="date" class="dbx-table-date-column-header">
+      <span class="dbx-table-date-column-header-left">{{ date | date: left }}</span>
+      <span>{{ date | date: right }}</span>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div *ngIf="date" class="dbx-table-date-column-header">
+      <span class="dbx-table-date-column-header-left">{{ date | date: left }}</span>
+      <span>{{ date | date: right }}</span>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return []; } });
+function dbxTableDateHeaderInjectionFactory() {
+    return (column) => {
+        const config = {
+            componentClass: DbxTableDateHeaderComponent,
+            init: (x) => {
+                x.date = column.meta;
+            }
+        };
+        return config;
+    };
+}
+
+class DbxTableStore extends ComponentStore {
+    constructor() {
+        super({
+            input: null,
+            dataDelegate: null,
+            viewDelegate: null
+        });
+        // MARK: Effects
+        this.loadMore = this.effect((input) => {
+            return input.pipe(switchMap(() => this.data$.pipe(first(), tap((x) => {
+                if (x.loadMore) {
+                    x.loadMore();
+                }
+            }))));
+        });
+        // MARK: Accessors
+        this.input$ = this.state$.pipe(map((x) => x.input), distinctUntilChanged(), shareReplay(1));
+        this.dataDelegate$ = this.state$.pipe(map((x) => x.dataDelegate), distinctUntilChanged(), shareReplay(1));
+        this.currentViewDelegate$ = this.state$.pipe(map((x) => x.viewDelegate), distinctUntilChanged(), shareReplay(1));
+        this.viewDelegate$ = this.currentViewDelegate$.pipe(filterMaybe());
+        this.dataState$ = combineLatest([this.input$, this.dataDelegate$]).pipe(switchMap(([input, dataDelegate]) => {
+            let obs;
+            if (input && dataDelegate) {
+                obs = dataDelegate.loadData(input);
+            }
+            else {
+                obs = of(beginLoading());
+            }
+            return obs;
+        }), shareReplay(1));
+        this.data$ = this.dataState$.pipe(
+        //
+        valueFromLoadingState(), distinctUntilChanged(), shareReplay(1));
+        this.columns$ = this.data$.pipe(map((x) => x.columns), shareReplay(1));
+        this.itemsState$ = this.data$.pipe(switchMap((x) => x.items$), shareReplay(1));
+        this.items$ = this.itemsState$.pipe(valueFromLoadingState(), shareReplay(1));
+        // MARK: State Changes
+        this.setInput = this.updater((state, input) => ({ ...state, input }));
+        this.setDataDelegate = this.updater((state, dataDelegate) => ({ ...state, dataDelegate }));
+        this.setViewDelegate = this.updater((state, viewDelegate) => ({ ...state, viewDelegate }));
+    }
+}
+DbxTableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DbxTableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy {
+    constructor(_dateAdapter, dbxTableDateRangeDayDistanceInputCellInputComponent) {
+        this._dateAdapter = _dateAdapter;
+        this.dbxTableDateRangeDayDistanceInputCellInputComponent = dbxTableDateRangeDayDistanceInputCellInputComponent;
+    }
+    selectionFinished(date) {
+        return this._createFiveDayRange(date);
+    }
+    createPreview(activeDate) {
+        return this._createFiveDayRange(activeDate);
+    }
+    _createFiveDayRange(date) {
+        if (date) {
+            const start = date;
+            const end = this._dateAdapter.addCalendarDays(date, this.dbxTableDateRangeDayDistanceInputCellInputComponent.daysDistance);
+            return new DateRange(start, end);
+        }
+        return new DateRange(null, null);
+    }
+}
+DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, deps: [{ token: i1.DateAdapter }, { token: DbxTableDateRangeDayDistanceInputCellInputComponent }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DbxTableDateRangeDayDistanceInputCellInputComponent }]; } });
+const DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG = { daysDistance: 6 };
+const DEFAULT_DBX_TABLE_DATE_RANGE_DAY_BUTTON_FORMAT = 'MMM dd';
+/**
+ * Cell input for a DateRangeDayDistanceInput value.
+ */
+class DbxTableDateRangeDayDistanceInputCellInputComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this._syncSub = new SubscriptionObject();
+        this._valueSub = new SubscriptionObject();
+        this._pickerOpened = new BehaviorSubject(false);
+        this._config = new BehaviorSubject(DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG);
+        this.range = new FormGroup({
+            start: new FormControl(null),
+            end: new FormControl(null)
+        });
+        this.pickerOpened$ = this._pickerOpened.asObservable();
+        this.minDate$ = this._config.pipe(map((x) => x.minDate));
+        this.maxDate$ = this._config.pipe(map((x) => x.maxDate));
+        this.buttonFormat$ = this._config.pipe(map((x) => x.buttonFormat ?? DEFAULT_DBX_TABLE_DATE_RANGE_DAY_BUTTON_FORMAT));
+        this.dateRangeString$ = combineLatest([this.buttonFormat$, this.range.valueChanges]).pipe(map(([buttonFormat, { start, end }]) => {
+            if (start && end) {
+                return `${format(start, buttonFormat)} - ${format(end, buttonFormat)}`;
+            }
+            else {
+                return `Select Date`;
+            }
+        }));
+    }
+    ngOnInit() {
+        this._syncSub.subscription = this.tableStore.input$.subscribe((x) => {
+            const start = x?.date ?? null;
+            const end = start ? addDays(start, this.daysDistance) : undefined;
+            this.range.setValue({
+                start,
+                end
+            });
+        });
+        this._valueSub.subscription = this._pickerOpened
+            .pipe(distinctUntilChanged(), switchMap((opened) => {
+            let obs;
+            if (opened) {
+                obs = of({});
+            }
+            else {
+                obs = this.range.valueChanges.pipe(startWith(this.range.value));
+            }
+            return obs;
+        }), filter((x) => Boolean(x.start)), distinctUntilChanged((a, b) => isSameDateDay(a.start, b.start)), throttleTime(100, undefined, { trailing: true }))
+            .subscribe((x) => {
+            if (x.start) {
+                this.tableStore.setInput({ date: x.start, distance: this.daysDistance });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._pickerOpened.complete();
+        this._config.complete();
+        this._syncSub.destroy();
+        this._valueSub.destroy();
+    }
+    get daysDistance() {
+        return this._config.value.daysDistance;
+    }
+    get config() {
+        return this._config.value;
+    }
+    set config(config) {
+        this._config.next(config || DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG);
+    }
+    pickerOpened() {
+        this._pickerOpened.next(true);
+    }
+    pickerClosed() {
+        this._pickerOpened.next(false);
+    }
+}
+DbxTableDateRangeDayDistanceInputCellInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputComponent, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxTableDateRangeDayDistanceInputCellInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableDateRangeDayDistanceInputCellInputComponent, selector: "ng-component", providers: [
+        {
+            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+            useClass: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy
+        }
+    ], ngImport: i0, template: `
+    <div class="dbx-table-date-range-distance-input-cell">
+      <mat-date-range-input class="dbx-table-date-range-distance-input" [min]="minDate$ | async" [max]="maxDate$ | async" [formGroup]="range" [rangePicker]="picker">
+        <input matStartDate formControlName="start" placeholder="Start date" />
+        <input matEndDate formControlName="end" placeholder="End date" />
+      </mat-date-range-input>
+      <button mat-stroked-button color="primary" (click)="picker.open()">{{ dateRangeString$ | async }}</button>
+      <mat-date-range-picker #picker (opened)="pickerOpened()" (closed)="pickerClosed()"></mat-date-range-picker>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="dbx-table-date-range-distance-input-cell">
+      <mat-date-range-input class="dbx-table-date-range-distance-input" [min]="minDate$ | async" [max]="maxDate$ | async" [formGroup]="range" [rangePicker]="picker">
+        <input matStartDate formControlName="start" placeholder="Start date" />
+        <input matEndDate formControlName="end" placeholder="End date" />
+      </mat-date-range-input>
+      <button mat-stroked-button color="primary" (click)="picker.open()">{{ dateRangeString$ | async }}</button>
+      <mat-date-range-picker #picker (opened)="pickerOpened()" (closed)="pickerClosed()"></mat-date-range-picker>
+    </div>
+  `,
+                    providers: [
+                        {
+                            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+                            useClass: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy
+                        }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; } });
+function dbxTableDateRangeDayDistanceInputCellInput(componentConfig) {
+    const config = {
+        componentClass: DbxTableDateRangeDayDistanceInputCellInputComponent,
+        init: (x) => {
+            x.config = componentConfig;
+        }
+    };
+    return config;
+}
+
+const declarations = [
+    //
+    DbxTableDateHeaderComponent,
+    DbxTableDateRangeDayDistanceInputCellInputComponent
+];
+class DbxTableDateModule {
+}
+DbxTableDateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxTableDateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateModule, declarations: [
+        //
+        DbxTableDateHeaderComponent,
+        DbxTableDateRangeDayDistanceInputCellInputComponent], imports: [
+        //
+        CommonModule,
+        DbxLoadingModule,
+        DbxInjectionComponentModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatDatepickerModule,
+        MatButtonModule,
+        MatTableModule], exports: [
+        //
+        DbxTableDateHeaderComponent,
+        DbxTableDateRangeDayDistanceInputCellInputComponent] });
+DbxTableDateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateModule, imports: [
+        //
+        CommonModule,
+        DbxLoadingModule,
+        DbxInjectionComponentModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatDatepickerModule,
+        MatButtonModule,
+        MatTableModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        //
+                        CommonModule,
+                        DbxLoadingModule,
+                        DbxInjectionComponentModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatDatepickerModule,
+                        MatButtonModule,
+                        MatTableModule
+                    ],
+                    declarations,
+                    exports: declarations
+                }]
+        }] });
+
+class DbxTableActionCellComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this.config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.summaryRowEnd), distinctUntilChanged());
+    }
+}
+DbxTableActionCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableActionCellComponent, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxTableActionCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableActionCellComponent, selector: "dbx-table-action-cell", ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableActionCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-action-cell',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; } });
+
+/**
+ * A table header component used for injecting the input picker view.
+ */
+class DbxTableInputCellComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this.config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.inputHeader), distinctUntilChanged());
+    }
+}
+DbxTableInputCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableInputCellComponent, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxTableInputCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableInputCellComponent, selector: "dbx-table-input-cell", ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableInputCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-input-cell',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; } });
+
+class DbxTableSummaryEndCellComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this.config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.summaryRowEnd), distinctUntilChanged());
+    }
+}
+DbxTableSummaryEndCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableSummaryEndCellComponent, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxTableSummaryEndCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableSummaryEndCellComponent, selector: "dbx-table-summary-end-cell", ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableSummaryEndCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-summary-end-cell',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; } });
+
+/**
+ * A table header component used for injecting the input picker view.
+ */
+class DbxTableSummaryStartCellComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this.config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.summaryRowHeader), distinctUntilChanged());
+    }
+}
+DbxTableSummaryStartCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableSummaryStartCellComponent, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxTableSummaryStartCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableSummaryStartCellComponent, selector: "dbx-table-summary-start-cell", ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableSummaryStartCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-summary-start-cell',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; } });
+
+/**
+ * Abstract directive that has a column input.
+ */
+class AbstractDbxTableColumnDirective {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this._column = new BehaviorSubject(undefined);
+        this.column$ = this._column.pipe(filterMaybe(), distinctUntilChanged());
+    }
+    set column(column) {
+        this._column.next(column);
+    }
+    ngOnDestroy() {
+        this._column.complete();
+    }
+}
+AbstractDbxTableColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxTableColumnDirective, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxTableColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractDbxTableColumnDirective, inputs: { column: "column" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxTableColumnDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; }, propDecorators: { column: [{
+                type: Input
+            }] } });
+
+class DbxTableColumnHeaderComponent extends AbstractDbxTableColumnDirective {
+    constructor() {
+        super(...arguments);
+        this.config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => {
+            const columnHeader = viewDelegate.columnHeader;
+            if (columnHeader) {
+                return this.column$.pipe(map((x) => columnHeader(x)));
+            }
+            else {
+                return of(undefined);
+            }
+        }), distinctUntilChanged());
+    }
+}
+DbxTableColumnHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableColumnHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxTableColumnHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableColumnHeaderComponent, selector: "dbx-table-column-header", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableColumnHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-column-header',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class DbxTableColumnFooterComponent extends AbstractDbxTableColumnDirective {
+    constructor() {
+        super(...arguments);
+        this.config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => {
+            const columnFooter = viewDelegate.columnFooter;
+            if (columnFooter) {
+                return this.column$.pipe(map((x) => columnFooter(x)));
+            }
+            else {
+                return of(undefined);
+            }
+        }), distinctUntilChanged());
+    }
+}
+DbxTableColumnFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableColumnFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxTableColumnFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableColumnFooterComponent, selector: "dbx-table-column-footer", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableColumnFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-column-footer',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Abstract directive that has an element input.
+ */
+class AbstractDbxTableElementDirective {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this._element = new BehaviorSubject(undefined);
+        this.element$ = this._element.pipe(filterMaybe(), distinctUntilChanged());
+    }
+    set element(element) {
+        this._element.next(element);
+    }
+    ngOnDestroy() {
+        this._element.complete();
+    }
+}
+AbstractDbxTableElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxTableElementDirective, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxTableElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractDbxTableElementDirective, inputs: { element: "element" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxTableElementDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; }, propDecorators: { element: [{
+                type: Input
+            }] } });
+
+class DbxTableItemCellComponent extends AbstractDbxTableElementDirective {
+    constructor() {
+        super(...arguments);
+        this._column = new BehaviorSubject(undefined);
+        this.column$ = this._column.pipe(filterMaybe(), distinctUntilChanged());
+        this.config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => combineLatest([this.column$, this.element$]).pipe(map(([column, element]) => viewDelegate.itemCell(column, element)))), distinctUntilChanged());
+    }
+    set column(column) {
+        this._column.next(column);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._column.complete();
+    }
+}
+DbxTableItemCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableItemCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxTableItemCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableItemCellComponent, selector: "dbx-table-item-cell", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableItemCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-item-cell',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { column: [{
+                type: Input
+            }] } });
+
+class DbxTableItemHeaderComponent extends AbstractDbxTableElementDirective {
+    constructor() {
+        super(...arguments);
+        this.config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => this.element$.pipe(map((x) => viewDelegate.itemHeader(x)))), distinctUntilChanged());
+    }
+}
+DbxTableItemHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableItemHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxTableItemHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableItemHeaderComponent, selector: "dbx-table-item-header", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableItemHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-item-header',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class DbxTableItemActionComponent extends AbstractDbxTableElementDirective {
+    constructor() {
+        super(...arguments);
+        this.config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => {
+            const itemAction = viewDelegate.itemAction;
+            if (itemAction) {
+                return this.element$.pipe(map((x) => itemAction(x)));
+            }
+            else {
+                return of(undefined);
+            }
+        }), distinctUntilChanged());
+    }
+}
+DbxTableItemActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableItemActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxTableItemActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableItemActionComponent, selector: "dbx-table-item-action", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableItemActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-table-item-action',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+const DBX_TABLE_ITEMS_COLUMN_NAME = '_items';
+const DBX_TABLE_ACTIONS_COLUMN_NAME = '_actions';
+/**
+ * A table with fixed content
+ */
+class DbxTableViewComponent {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+        this.DEFAULT_TRACK_BY_FUNCTION = (index) => {
+            return index;
+        };
+        this.scrollDistance = 0.5;
+        this.throttleScroll = 50;
+        this.itemsColumnName = DBX_TABLE_ITEMS_COLUMN_NAME;
+        this.actionsColumnName = DBX_TABLE_ACTIONS_COLUMN_NAME;
+        this.innerColumns$ = this.tableStore.columns$;
+        this.innerColumnNames$ = this.innerColumns$.pipe(map((x) => x.map((y) => y.columnName)), shareReplay(1));
+        this.elements$ = this.tableStore.items$;
+        this.displayedColumns$ = this.innerColumnNames$.pipe(map((columnNames) => {
+            return [this.itemsColumnName, ...columnNames, this.actionsColumnName];
+        }), shareReplay(1));
+        this.trackByFunction$ = this.tableStore.viewDelegate$.pipe(map((x) => x.trackBy ?? this.DEFAULT_TRACK_BY_FUNCTION), shareReplay(1));
+        this.context = loadingStateContext({ obs: this.tableStore.dataState$ });
+        this.dataLoadingContext = loadingStateContext({ obs: this.tableStore.itemsState$ });
+    }
+    ngOnDestroy() {
+        this.context.destroy();
+    }
+    onScrollDown() {
+        this.tableStore.loadMore();
+    }
+}
+DbxTableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableViewComponent, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxTableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableViewComponent, selector: "dbx-table-view", 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]=\"(trackByFunction$ | async) || 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      <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\" *ngFor=\"let column of innerColumns$ | async\">\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      <!-- 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=\"displayedColumns$ | async; sticky: true\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns$ | async\"></tr>\n\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns$ | async; sticky: true\"></tr>\n    </table>\n  </section>\n</dbx-loading>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { 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: ["sticky", "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: "directive", type: i5$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: DbxTableColumnHeaderComponent, selector: "dbx-table-column-header" }, { kind: "component", type: DbxTableColumnFooterComponent, selector: "dbx-table-column-footer" }, { kind: "component", type: DbxTableInputCellComponent, selector: "dbx-table-input-cell" }, { kind: "component", type: DbxTableActionCellComponent, selector: "dbx-table-action-cell" }, { kind: "component", type: DbxTableItemCellComponent, selector: "dbx-table-item-cell", inputs: ["column"] }, { kind: "component", type: DbxTableItemHeaderComponent, selector: "dbx-table-item-header" }, { kind: "component", type: DbxTableItemActionComponent, selector: "dbx-table-item-action" }, { kind: "component", type: DbxTableSummaryStartCellComponent, selector: "dbx-table-summary-start-cell" }, { kind: "component", type: DbxTableSummaryEndCellComponent, selector: "dbx-table-summary-end-cell" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-table-view', changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"(trackByFunction$ | async) || 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      <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\" *ngFor=\"let column of innerColumns$ | async\">\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      <!-- 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=\"displayedColumns$ | async; sticky: true\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns$ | async\"></tr>\n\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns$ | async; sticky: true\"></tr>\n    </table>\n  </section>\n</dbx-loading>\n" }]
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; } });
+
+/**
+ * Directive for providing and configuring a DbxTableStore
+ */
+class DbxTableDirective {
+    constructor(tableStore) {
+        this.tableStore = tableStore;
+    }
+    set dbxTableInput(input) {
+        this.tableStore.setInput(input);
+    }
+    set dbxTableViewDelegate(dbxTableViewDelegate) {
+        this.tableStore.setViewDelegate(dbxTableViewDelegate);
+    }
+    set dbxTableDataDelegate(dbxTableDataDelegate) {
+        this.tableStore.setDataDelegate(dbxTableDataDelegate);
+    }
+}
+DbxTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDirective, deps: [{ token: DbxTableStore }], target: i0.ɵɵFactoryTarget.Directive });
+DbxTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxTableDirective, selector: "[dbxTable]", inputs: { dbxTableInput: "dbxTableInput", dbxTableViewDelegate: "dbxTableViewDelegate", dbxTableDataDelegate: "dbxTableDataDelegate" }, providers: [DbxTableStore], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxTable]',
+                    providers: [DbxTableStore]
+                }]
+        }], ctorParameters: function () { return [{ type: DbxTableStore }]; }, propDecorators: { dbxTableInput: [{
+                type: Input
+            }], dbxTableViewDelegate: [{
+                type: Input
+            }], dbxTableDataDelegate: [{
+                type: Input
+            }] } });
+
+const exports = [DbxTableDirective, DbxTableViewComponent];
+const internalDeclarations = [
+    //
+    DbxTableColumnHeaderComponent,
+    DbxTableColumnFooterComponent,
+    DbxTableInputCellComponent,
+    DbxTableActionCellComponent,
+    DbxTableItemCellComponent,
+    DbxTableItemHeaderComponent,
+    DbxTableItemActionComponent,
+    DbxTableSummaryStartCellComponent,
+    DbxTableSummaryEndCellComponent
+];
+class DbxTableModule {
+}
+DbxTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxTableModule, declarations: [DbxTableDirective, DbxTableViewComponent, 
+        //
+        DbxTableColumnHeaderComponent,
+        DbxTableColumnFooterComponent,
+        DbxTableInputCellComponent,
+        DbxTableActionCellComponent,
+        DbxTableItemCellComponent,
+        DbxTableItemHeaderComponent,
+        DbxTableItemActionComponent,
+        DbxTableSummaryStartCellComponent,
+        DbxTableSummaryEndCellComponent], imports: [
+        //
+        CommonModule,
+        DbxLoadingModule,
+        DbxInjectionComponentModule,
+        MatTableModule,
+        InfiniteScrollModule], exports: [DbxTableDirective, DbxTableViewComponent] });
+DbxTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableModule, imports: [
+        //
+        CommonModule,
+        DbxLoadingModule,
+        DbxInjectionComponentModule,
+        MatTableModule,
+        InfiniteScrollModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        //
+                        CommonModule,
+                        DbxLoadingModule,
+                        DbxInjectionComponentModule,
+                        MatTableModule,
+                        InfiniteScrollModule
+                    ],
+                    declarations: [...exports, ...internalDeclarations],
+                    exports
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=dereekb-dbx-web-table.mjs.map