@dereekb/dbx-web 11.1.7 → 12.0.0

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

@@ -1,28 +1,23 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Injectable, inject, NgModule, Directive, Input } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { signal, Component, ChangeDetectionStrategy, Injectable, inject, computed, NgModule, input, Directive, effect } from '@angular/core';
+import { DatePipe, AsyncPipe } from '@angular/common';
 import { isSameDateDay } from '@dereekb/date';
-import { filterMaybe, beginLoading, valueFromLoadingState, SubscriptionObject, loadingStateContext } from '@dereekb/rxjs';
+import { filterMaybe, beginLoading, valueFromFinishedLoadingState, SubscriptionObject, maybeValueFromObservableOrValue, 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 i2$1 from '@angular/material/datepicker';
-import { DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
+import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, combineLatest, of, startWith, filter, throttleTime } from 'rxjs';
+import { DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDateRangeInput, MatDateRangePicker } from '@angular/material/datepicker';
 import { DateAdapter } from '@angular/material/core';
 import * as i1 from '@angular/forms';
-import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { format, addDays } from 'date-fns';
-import * as i3 from '@angular/material/button';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import * as i2$2 from '@dereekb/dbx-web';
-import { DbxLoadingModule } from '@dereekb/dbx-web';
-import * as i3$1 from '@angular/material/table';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { DbxInjectionComponent } from '@dereekb/dbx-core';
+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 * as i1$1 from '@dereekb/dbx-core';
-import { DbxInjectionComponentModule } from '@dereekb/dbx-core';
-import * as i4 from 'ngx-infinite-scroll';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 /**
  * A table header component used for rendering date values on the header.
@@ -30,34 +25,40 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 class DbxTableDateHeaderComponent {
     left = 'E';
     right = 'MMM d';
-    _date;
-    constructor() { }
+    _dateSignal = signal(undefined);
+    dateSignal = this._dateSignal.asReadonly();
     get date() {
-        return this._date;
+        return this._dateSignal();
     }
     set date(date) {
-        this._date = date;
+        this._dateSignal.set(date);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTableDateHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    @if (dateSignal()) {
+      <div class="dbx-table-date-column-header">
+        <span class="dbx-table-date-column-header-left">{{ dateSignal() | date: left }}</span>
+        <span>{{ dateSignal() | date: right }}</span>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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>
+    @if (dateSignal()) {
+      <div class="dbx-table-date-column-header">
+        <span class="dbx-table-date-column-header-left">{{ dateSignal() | date: left }}</span>
+        <span>{{ dateSignal() | date: right }}</span>
+      </div>
+    }
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DatePipe],
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 function dbxTableDateHeaderInjectionFactory() {
     return (column) => {
         const config = {
@@ -103,20 +104,20 @@ class DbxTableStore extends ComponentStore {
     }), shareReplay(1));
     data$ = this.dataState$.pipe(
     //
-    valueFromLoadingState(), distinctUntilChanged(), shareReplay(1));
+    valueFromFinishedLoadingState(), filterMaybe(), distinctUntilChanged(), shareReplay(1));
     columns$ = this.data$.pipe(map((x) => x.columns), shareReplay(1));
     itemsState$ = this.data$.pipe(switchMap((x) => x.items$), shareReplay(1));
-    items$ = this.itemsState$.pipe(valueFromLoadingState(), shareReplay(1));
+    items$ = this.itemsState$.pipe(valueFromFinishedLoadingState(), filterMaybe(), shareReplay(1));
     // MARK: State Changes
     setInput = this.updater((state, input) => ({ ...state, input }));
     setDataDelegate = this.updater((state, dataDelegate) => ({ ...state, dataDelegate }));
     setViewDelegate = this.updater((state, viewDelegate) => ({ ...state, viewDelegate }));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableStore, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy {
     _dateAdapter = inject((DateAdapter));
@@ -135,10 +136,10 @@ class DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy {
         }
         return new DateRange(null, null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy, decorators: [{
             type: Injectable
         }] });
 const DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG = { daysDistance: 6 };
@@ -150,25 +151,27 @@ class DbxTableDateRangeDayDistanceInputCellInputComponent {
     tableStore = inject((DbxTableStore));
     _syncSub = new SubscriptionObject();
     _valueSub = new SubscriptionObject();
-    _pickerOpened = new BehaviorSubject(false);
-    _config = new BehaviorSubject(DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG);
+    _pickerOpenedSignal = signal(false);
+    _configSignal = signal(DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG);
     range = new FormGroup({
         start: new FormControl(null),
         end: new FormControl(null)
     });
-    pickerOpened$ = this._pickerOpened.asObservable();
-    minDate$ = this._config.pipe(map((x) => x.minDate));
-    maxDate$ = this._config.pipe(map((x) => x.maxDate));
-    buttonFormat$ = this._config.pipe(map((x) => x.buttonFormat ?? DEFAULT_DBX_TABLE_DATE_RANGE_DAY_BUTTON_FORMAT));
+    pickerOpened$ = this.range.valueChanges.pipe(startWith(this.range.value));
+    minDateSignal = computed(() => this._configSignal().minDate);
+    maxDateSignal = computed(() => this._configSignal().maxDate);
+    buttonFormatSignal = computed(() => this._configSignal().buttonFormat ?? DEFAULT_DBX_TABLE_DATE_RANGE_DAY_BUTTON_FORMAT);
     rangeValue$ = this.range.valueChanges.pipe(startWith(this.range.value));
-    dateRangeString$ = combineLatest([this.buttonFormat$, this.rangeValue$]).pipe(map(([buttonFormat, { start, end }]) => {
+    dateRangeStringSignal = computed(() => {
+        const buttonFormat = this.buttonFormatSignal();
+        const { start, end } = this.range.value;
         if (start && end) {
             return `${format(start, buttonFormat)} - ${format(end, buttonFormat)}`;
         }
         else {
             return `Select Date`;
         }
-    }), distinctUntilChanged(), shareReplay(1));
+    });
     ngOnInit() {
         this._syncSub.subscription = this.tableStore.input$.subscribe((x) => {
             const start = x?.date ?? null;
@@ -178,17 +181,8 @@ class DbxTableDateRangeDayDistanceInputCellInputComponent {
                 end
             });
         });
-        this._valueSub.subscription = this._pickerOpened
-            .pipe(distinctUntilChanged(), switchMap((opened) => {
-            let obs;
-            if (opened) {
-                obs = of({});
-            }
-            else {
-                obs = this.rangeValue$;
-            }
-            return obs;
-        }), filter((x) => Boolean(x.start)), distinctUntilChanged((a, b) => isSameDateDay(a.start, b.start)), throttleTime(100, undefined, { trailing: true }))
+        this._valueSub.subscription = this.rangeValue$
+            .pipe(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 });
@@ -196,53 +190,51 @@ class DbxTableDateRangeDayDistanceInputCellInputComponent {
         });
     }
     ngOnDestroy() {
-        this._pickerOpened.complete();
-        this._config.complete();
         this._syncSub.destroy();
         this._valueSub.destroy();
     }
     get daysDistance() {
-        return this._config.value.daysDistance;
+        return this._configSignal().daysDistance;
     }
     get config() {
-        return this._config.value;
+        return this._configSignal();
     }
     set config(config) {
-        this._config.next(config || DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG);
+        this._configSignal.set(config || DEFAULT_DBX_TABLE_DATE_RANGE_DAY_DISTIANCE_INPUT_CELL_COMPONENT_CONFIG);
     }
     pickerOpened() {
-        this._pickerOpened.next(true);
+        this._pickerOpenedSignal.set(true);
     }
     pickerClosed() {
-        this._pickerOpened.next(false);
+        this._pickerOpenedSignal.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxTableDateRangeDayDistanceInputCellInputComponent, selector: "ng-component", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableDateRangeDayDistanceInputCellInputComponent, isStandalone: true, 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">
+      <mat-date-range-input class="dbx-table-date-range-distance-input" [min]="minDateSignal()" [max]="maxDateSignal()" [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>
+      <button mat-stroked-button color="primary" (click)="picker.open()">{{ dateRangeStringSignal() }}</button>
       <mat-date-range-picker #picker (opened)="pickerOpened()" (closed)="pickerClosed()"></mat-date-range-picker>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateRangeDayDistanceInputCellInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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">
+      <mat-date-range-input class="dbx-table-date-range-distance-input" [min]="minDateSignal()" [max]="maxDateSignal()" [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>
+      <button mat-stroked-button color="primary" (click)="picker.open()">{{ dateRangeStringSignal() }}</button>
       <mat-date-range-picker #picker (opened)="pickerOpened()" (closed)="pickerClosed()"></mat-date-range-picker>
     </div>
   `,
@@ -252,7 +244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useClass: DbxTableDateRangeDayDistanceInputCellInputRangeSelectionStrategy
                         }
                     ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [MatDateRangeInput, ReactiveFormsModule, MatButtonModule, MatDateRangePicker, AsyncPipe]
                 }]
         }] });
 function dbxTableDateRangeDayDistanceInputCellInput(componentConfig) {
@@ -265,78 +259,39 @@ function dbxTableDateRangeDayDistanceInputCellInput(componentConfig) {
     return config;
 }
 
-const declarations = [
-    //
-    DbxTableDateHeaderComponent,
-    DbxTableDateRangeDayDistanceInputCellInputComponent
-];
+const importsAndExports$1 = [DbxTableDateHeaderComponent, DbxTableDateRangeDayDistanceInputCellInputComponent];
 class DbxTableDateModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateModule, declarations: [
-            //
-            DbxTableDateHeaderComponent,
-            DbxTableDateRangeDayDistanceInputCellInputComponent], imports: [
-            //
-            CommonModule,
-            DbxLoadingModule,
-            DbxInjectionComponentModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatIconModule,
-            MatDatepickerModule,
-            MatButtonModule,
-            MatTableModule], exports: [
-            //
-            DbxTableDateHeaderComponent,
-            DbxTableDateRangeDayDistanceInputCellInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateModule, imports: [
-            //
-            CommonModule,
-            DbxLoadingModule,
-            DbxInjectionComponentModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatIconModule,
-            MatDatepickerModule,
-            MatButtonModule,
-            MatTableModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateModule, imports: [DbxTableDateHeaderComponent, DbxTableDateRangeDayDistanceInputCellInputComponent], exports: [DbxTableDateHeaderComponent, DbxTableDateRangeDayDistanceInputCellInputComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateModule, imports: [DbxTableDateRangeDayDistanceInputCellInputComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDateModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        //
-                        CommonModule,
-                        DbxLoadingModule,
-                        DbxInjectionComponentModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatIconModule,
-                        MatDatepickerModule,
-                        MatButtonModule,
-                        MatTableModule
-                    ],
-                    declarations,
-                    exports: declarations
+                    imports: importsAndExports$1,
+                    exports: importsAndExports$1
                 }]
         }] });
 
 class DbxTableActionCellComponent {
     tableStore = inject(DbxTableStore);
     config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.summaryRowEnd), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableActionCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    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: `
+    <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: "16.2.12", ngImport: i0, type: DbxTableActionCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableActionCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-action-cell',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent]
                 }]
         }] });
 
@@ -346,38 +301,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class DbxTableInputCellComponent {
     tableStore = inject(DbxTableStore);
     config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.inputHeader), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableInputCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableInputCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableInputCellComponent, isStandalone: true, selector: "dbx-table-input-cell", 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: "16.2.12", ngImport: i0, type: DbxTableInputCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableInputCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-input-cell',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent]
                 }]
         }] });
 
 class DbxTableSummaryEndCellComponent {
     tableStore = inject(DbxTableStore);
     config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.summaryRowEnd), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableSummaryEndCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableSummaryEndCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableSummaryEndCellComponent, isStandalone: true, selector: "dbx-table-summary-end-cell", 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: "16.2.12", ngImport: i0, type: DbxTableSummaryEndCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableSummaryEndCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-summary-end-cell',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent]
                 }]
         }] });
 
@@ -387,19 +348,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class DbxTableSummaryStartCellComponent {
     tableStore = inject(DbxTableStore);
     config$ = this.tableStore.viewDelegate$.pipe(map((x) => x.summaryRowHeader), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableSummaryStartCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableSummaryStartCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableSummaryStartCellComponent, isStandalone: true, selector: "dbx-table-summary-start-cell", 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: "16.2.12", ngImport: i0, type: DbxTableSummaryStartCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableSummaryStartCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-summary-start-cell',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent]
                 }]
         }] });
 
@@ -408,22 +372,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class AbstractDbxTableColumnDirective {
     tableStore = inject((DbxTableStore));
-    _column = new BehaviorSubject(undefined);
-    column$ = this._column.pipe(filterMaybe(), distinctUntilChanged());
-    set column(column) {
-        this._column.next(column);
-    }
-    ngOnDestroy() {
-        this._column.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractDbxTableColumnDirective, inputs: { column: "column" }, ngImport: i0 });
+    column = input();
+    column$ = toObservable(this.column).pipe(filterMaybe(), distinctUntilChanged());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractDbxTableColumnDirective, inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxTableColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableColumnDirective, decorators: [{
             type: Directive
-        }], propDecorators: { column: [{
-                type: Input
-            }] } });
+        }] });
 
 class DbxTableColumnHeaderComponent extends AbstractDbxTableColumnDirective {
     config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => {
@@ -435,19 +391,22 @@ class DbxTableColumnHeaderComponent extends AbstractDbxTableColumnDirective {
             return of(undefined);
         }
     }), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableColumnHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableColumnHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableColumnHeaderComponent, isStandalone: true, selector: "dbx-table-column-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: "16.2.12", ngImport: i0, type: DbxTableColumnHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableColumnHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-column-header',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent]
                 }]
         }] });
 
@@ -461,19 +420,22 @@ class DbxTableColumnFooterComponent extends AbstractDbxTableColumnDirective {
             return of(undefined);
         }
     }), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableColumnFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableColumnFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableColumnFooterComponent, isStandalone: true, selector: "dbx-table-column-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: "16.2.12", ngImport: i0, type: DbxTableColumnFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableColumnFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-column-footer',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent]
                 }]
         }] });
 
@@ -482,93 +444,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class AbstractDbxTableElementDirective {
     tableStore = inject((DbxTableStore));
-    _element = new BehaviorSubject(undefined);
-    element$ = this._element.pipe(filterMaybe(), distinctUntilChanged());
-    set element(element) {
-        this._element.next(element);
-    }
-    ngOnDestroy() {
-        this._element.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxTableElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractDbxTableElementDirective, inputs: { element: "element" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxTableElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxTableElementDirective, decorators: [{
             type: Directive
-        }], propDecorators: { element: [{
-                type: Input
-            }] } });
+        }] });
 
 class DbxTableItemCellComponent extends AbstractDbxTableElementDirective {
-    _column = new BehaviorSubject(undefined);
-    column$ = this._column.pipe(filterMaybe(), distinctUntilChanged());
-    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();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableItemCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    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());
+    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: `
+    <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: "16.2.12", ngImport: i0, type: DbxTableItemCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableItemCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-item-cell',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxInjectionComponent],
+                    standalone: true
                 }]
-        }], propDecorators: { column: [{
-                type: Input
-            }] } });
+        }] });
 
 class DbxTableItemHeaderComponent extends AbstractDbxTableElementDirective {
-    config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => this.element$.pipe(map((x) => viewDelegate.itemHeader(x)))), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableItemHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+    config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => this.element$.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: `
+    <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: "16.2.12", ngImport: i0, type: DbxTableItemHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableItemHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-item-header',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxInjectionComponent],
+                    standalone: true
                 }]
         }] });
 
 class DbxTableItemActionComponent extends AbstractDbxTableElementDirective {
-    config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => {
+    config$ = this.tableStore.viewDelegate$.pipe(map((viewDelegate) => {
         const itemAction = viewDelegate.itemAction;
+        let obs = undefined;
         if (itemAction) {
-            return this.element$.pipe(map((x) => itemAction(x)));
-        }
-        else {
-            return of(undefined);
+            obs = this.element$.pipe(map((x) => itemAction(x)));
         }
-    }), distinctUntilChanged());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableItemActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 });
+        return obs;
+    }), maybeValueFromObservableOrValue(), distinctUntilChanged());
+    configSignal = toSignal(this.config$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableItemActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxTableItemActionComponent, isStandalone: true, selector: "dbx-table-item-action", 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: "16.2.12", ngImport: i0, type: DbxTableItemActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableItemActionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-table-item-action',
                     template: `
-    <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-injection [config]="configSignal()"></dbx-injection>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxInjectionComponent],
+                    standalone: true
                 }]
         }] });
 
@@ -582,31 +534,37 @@ class DbxTableViewComponent {
     DEFAULT_TRACK_BY_FUNCTION = (index) => {
         return index;
     };
-    scrollDistance = 0.5;
-    throttleScroll = 50;
+    scrollDistance = input(0.5);
+    throttleScroll = input(50);
     itemsColumnName = DBX_TABLE_ITEMS_COLUMN_NAME;
     actionsColumnName = DBX_TABLE_ACTIONS_COLUMN_NAME;
     innerColumns$ = this.tableStore.columns$;
     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$;
     displayedColumns$ = this.innerColumnNames$.pipe(map((columnNames) => {
         return [this.itemsColumnName, ...columnNames, this.actionsColumnName];
     }), shareReplay(1));
+    displayedColumnsSignal = computed(() => {
+        const columnNames = this.innerColumnNamesSignal() || [];
+        return [this.itemsColumnName, ...columnNames, this.actionsColumnName];
+    });
     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 });
     context = loadingStateContext({ obs: this.tableStore.dataState$ });
     dataLoadingContext = loadingStateContext({ obs: this.tableStore.itemsState$ });
-    ngOnDestroy() {
-        this.context.destroy();
-    }
+    contextSignal = toSignal(this.context.state$);
+    dataLoadingContextSignal = toSignal(this.dataLoadingContext.state$);
     onScrollDown() {
         this.tableStore.loadMore();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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: i2$2.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i4.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 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
+            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" }]
         }] });
 
 /**
@@ -614,85 +572,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class DbxTableDirective {
     tableStore = inject((DbxTableStore));
-    set dbxTableInput(input) {
-        this.tableStore.setInput(input);
-    }
-    set dbxTableViewDelegate(dbxTableViewDelegate) {
-        this.tableStore.setViewDelegate(dbxTableViewDelegate);
-    }
-    set dbxTableDataDelegate(dbxTableDataDelegate) {
-        this.tableStore.setDataDelegate(dbxTableDataDelegate);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxTableDirective, selector: "[dbxTable]", inputs: { dbxTableInput: "dbxTableInput", dbxTableViewDelegate: "dbxTableViewDelegate", dbxTableDataDelegate: "dbxTableDataDelegate" }, providers: [DbxTableStore], ngImport: i0 });
+    dbxTableInput = input();
+    dbxTableViewDelegate = input();
+    dbxTableDataDelegate = input();
+    _setOnTableStoreEffect = effect(() => {
+        this.tableStore.setInput(this.dbxTableInput());
+        this.tableStore.setViewDelegate(this.dbxTableViewDelegate());
+        this.tableStore.setDataDelegate(this.dbxTableDataDelegate());
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxTableDirective, isStandalone: true, selector: "[dbxTable]", inputs: { dbxTableInput: { classPropertyName: "dbxTableInput", publicName: "dbxTableInput", isSignal: true, isRequired: false, transformFunction: null }, dbxTableViewDelegate: { classPropertyName: "dbxTableViewDelegate", publicName: "dbxTableViewDelegate", isSignal: true, isRequired: false, transformFunction: null }, dbxTableDataDelegate: { classPropertyName: "dbxTableDataDelegate", publicName: "dbxTableDataDelegate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DbxTableStore], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxTable]',
-                    providers: [DbxTableStore]
+                    providers: [DbxTableStore],
+                    standalone: true
                 }]
-        }], 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
-];
+const importsAndExports = [DbxTableDirective, DbxTableViewComponent, DbxTableColumnHeaderComponent, DbxTableColumnFooterComponent, DbxTableInputCellComponent, DbxTableActionCellComponent, DbxTableItemCellComponent, DbxTableItemHeaderComponent, DbxTableItemActionComponent, DbxTableSummaryStartCellComponent, DbxTableSummaryEndCellComponent];
+/**
+ * @deprecated import DbxTableDirective and DbxTableViewComponent directly instead.
+ */
 class DbxTableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.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] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableModule, imports: [
-            //
-            CommonModule,
-            DbxLoadingModule,
-            DbxInjectionComponentModule,
-            MatTableModule,
-            InfiniteScrollModule] });
+    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] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        //
-                        CommonModule,
-                        DbxLoadingModule,
-                        DbxInjectionComponentModule,
-                        MatTableModule,
-                        InfiniteScrollModule
-                    ],
-                    declarations: [...exports, ...internalDeclarations],
-                    exports
+                    imports: importsAndExports,
+                    exports: importsAndExports
                 }]
         }] });