@elderbyte/ngx-starter 22.3.0 → 22.4.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -6,7 +6,7 @@ import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal as Temporal$1 } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, of, throwError, switchMap, combineLatest, EMPTY, merge, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, tap as tap$1, takeUntil as takeUntil$1, NEVER } from 'rxjs';
+import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, of, throwError, switchMap, combineLatest, EMPTY, merge, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, tap as tap$1, takeUntil as takeUntil$1, NEVER } from 'rxjs';
 import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, combineLatestWith, startWith, skip, delay, share, debounce, timeout, skipWhile } from 'rxjs/operators';
 import { Temporal } from '@js-temporal/polyfill';
 import * as i1$1 from '@angular/common/http';
@@ -54,7 +54,7 @@ import * as i1$a from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { MatSelect, MatOption as MatOption$1, MatSelectModule } from '@angular/material/select';
-import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
+import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatNoDataRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
 import * as i1$7 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
@@ -16715,9 +16715,10 @@ class DataViewDndGroupControllerService {
          */
         this.itemDropped$ = new Subject();
         this._dropViews$
-            .pipe(takeUntilDestroyed(), 
-        // merge all itemDropEvent streams from each child into one main itemDropEvent stream
-        mergeMap$1((views) => this.getItemDropObservables(views)), mergeAll())
+            .pipe(
+        // Merge all itemDropEvent streams from each child into one main itemDropEvent stream.
+        // Replace previous subscriptions whenever the group's drop views change.
+        switchMap$1((views) => merge(...this.getItemDropObservables(views))), takeUntilDestroyed())
             .subscribe((event) => this.handleItemDrop(event));
     }
     /***************************************************************************
@@ -18075,6 +18076,11 @@ class ElderTableDropListConnectorDirective {
             this.dndController.register(cdkDropList);
         }
     }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
     ngOnInit() {
         // Explicitly set the ID for drag-drop connection.
         // cdkDropList uses the HTML id as fallback if not provided.
@@ -18083,6 +18089,14 @@ class ElderTableDropListConnectorDirective {
             this.cdkDropList.id = id;
         }
     }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get hasDragAndDropSupport() {
+        return this.dndController != null;
+    }
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
@@ -18258,6 +18272,8 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.dropListConnector = viewChild(ElderTableDropListConnectorDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropListConnector" }] : /* istanbul ignore next */ []));
         /**
          * Load next chunk after current is done
          */
@@ -18332,6 +18348,9 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
+    get hasDragAndDropSupport() {
+        return untracked(this.dropListConnector)?.hasDragAndDropSupport ?? false;
+    }
     set data(data) {
         this.autoCleanUp();
         let dc;
@@ -18449,7 +18468,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
                 provide: ELDER_DATA_VIEW,
                 useExisting: forwardRef(() => ElderTableComponent),
             },
-        ], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, hostDirectives: [{ directive: DataViewInteractionControllerDirective }], ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n        [tableDropListConntectorId]=\"id()\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderDataViewItemDrag]", inputs: ["elderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]", inputs: ["tableDropListConntectorId"] }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }, { kind: "component", type: ElderDataNavigationComponent, selector: "elder-data-navigation" }] }); }
+        ], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "dropListConnector", first: true, predicate: ElderTableDropListConnectorDirective, descendants: true, isSignal: true }, { propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, hostDirectives: [{ directive: DataViewInteractionControllerDirective }], ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n        [tableDropListConntectorId]=\"id()\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        <!-- Dummy row is needed as drop target (dnd) in case no data is available and no table header is displayed -->\n        <ng-template matNoDataRow>\n          @if (hasDragAndDropSupport) {\n            <tr class=\"elder-empty-drop-row\">\n              <td [attr.colspan]=\"displayedColumnsInner()?.length || 1\"></td>\n            </tr>\n          }\n        </ng-template>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-empty-drop-row{height:48px}.elder-empty-drop-row td{padding:0;border:0}.elder-mat-inner-table:has(.cdk-drag-placeholder) .elder-empty-drop-row{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderDataViewItemDrag]", inputs: ["elderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]", inputs: ["tableDropListConntectorId"] }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }, { kind: "component", type: ElderDataNavigationComponent, selector: "elder-data-navigation" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
@@ -18476,6 +18495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
                         MatHeaderRow,
                         MatRowDef,
                         MatRow,
+                        MatNoDataRow,
                         ElderTableRowDirective,
                         MatFooterRowDef,
                         MatFooterRow,
@@ -18485,7 +18505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
                         ElderTableDropListConnectorDirective,
                         ElderTableSelectionCellComponent,
                         ElderDataNavigationComponent,
-                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n        [tableDropListConntectorId]=\"id()\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
+                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n        [tableDropListConntectorId]=\"id()\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        <!-- Dummy row is needed as drop target (dnd) in case no data is available and no table header is displayed -->\n        <ng-template matNoDataRow>\n          @if (hasDragAndDropSupport) {\n            <tr class=\"elder-empty-drop-row\">\n              <td [attr.colspan]=\"displayedColumnsInner()?.length || 1\"></td>\n            </tr>\n          }\n        </ng-template>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-empty-drop-row{height:48px}.elder-empty-drop-row td{padding:0;border:0}.elder-mat-inner-table:has(.cdk-drag-placeholder) .elder-empty-drop-row{display:none}\n"] }]
         }], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: ElderDataViewOptionsProvider, decorators: [{
@@ -18494,7 +18514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
                     type: SkipSelf
                 }] }, { type: i4.MatSort, decorators: [{
                     type: Optional
-                }] }, { type: i0.NgZone }, { type: DataViewInteractionControllerDirective }], propDecorators: { matTable: [{
+                }] }, { type: i0.NgZone }, { type: DataViewInteractionControllerDirective }], propDecorators: { dropListConnector: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ElderTableDropListConnectorDirective), { isSignal: true }] }], matTable: [{
                 type: ViewChild,
                 args: [MatTable, { static: true }]
             }], columnDefs: [{