@elderbyte/ngx-starter 22.7.1 → 22.7.3

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -5889,7 +5889,7 @@ class DataContextAutoStarter extends DataContextLifeCycleBinding {
     subscribe() {
         const startedTrue$ = this._dataContext.isStarted$.pipe(filter((t) => t));
         this._subscription = this._autoStartConditionFulfilled$
-            .pipe(takeUntil(startedTrue$), tap((fulfilled) => this.logger.debug(`Got fulfilled event: ${fulfilled}`)), filter((fulfilled) => !!fulfilled), switchMap$1(() => this.awaitFirstNonNull(this._autoStartSpec.initialSort)))
+            .pipe(takeUntil(startedTrue$), tap((fulfilled) => this.logger.debug(`Got fulfilled event: ${fulfilled}`)), filter((fulfilled) => !!fulfilled), switchMap$1(() => this.lazySorts(this._autoStartSpec.initialSort)))
             .subscribe((sorts) => this.startDataContext(sorts));
     }
     /***************************************************************************
@@ -5897,6 +5897,14 @@ class DataContextAutoStarter extends DataContextLifeCycleBinding {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    lazySorts(initialSort) {
+        if (initialSort) {
+            return this.awaitFirstNonNull(initialSort);
+        }
+        else {
+            return of(undefined);
+        }
+    }
     buildRequiredFilterConditionObservable(requiredFilters) {
         return this.awaitFirstNonNull(requiredFilters).pipe(switchMap$1((activeFiltersStructure) => {
             return RequiredFilterEvaluator.observeMatch(this._dataContext.filter, activeFiltersStructure).pipe(map((event) => event.isValid));
@@ -5907,9 +5915,6 @@ class DataContextAutoStarter extends DataContextLifeCycleBinding {
         this._dataContext.start(initialSort);
     }
     awaitFirstNonNull(filters) {
-        if (!filters) {
-            return of([]);
-        }
         return filters.pipe(filter((f) => f != null), take(1));
     }
 }
@@ -18520,7 +18525,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: "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" }] }); }
+        ], 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()) && !hasDragAndDropSupport) {\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,
@@ -18557,7 +18562,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        <!-- 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"] }]
+                    ], 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()) && !hasDragAndDropSupport) {\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: [{
@@ -33834,66 +33839,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
                 type: Input
             }] } });
 
-/**
- * Search name adapter for input controls.
- */
-class ElderInitialValueDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(ngModel) {
-        //TODO: The debounce time is a hacky workaround, find a proper way to set initial value.
-        // ngModel regular and two way binding differ in initial value, which led to this solution
-        this.ngModel = ngModel;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-        this.initialValue$ = new BehaviorSubject(null);
-        this.initialDone$ = new Subject();
-        const ngModelValue$ = of('dummy').pipe(delay(10), map(() => this.ngModel.model));
-        ngModelValue$
-            .pipe(takeUntilDestroyed(), combineLatestWith$1(this.initialValue$), takeUntil(this.initialDone$))
-            .subscribe(([ngModelValue, initialValue]) => {
-            if (initialValue) {
-                ngModel.control.setValue(initialValue);
-            }
-            this.initialDone$.next();
-            this.initialDone$.complete();
-        });
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    get valueChanges$() {
-        return this.ngModel.control.valueChanges;
-    }
-    setValue(value) {
-        if (value) {
-            this.ngModel.control.setValue(value);
-        }
-        this.initialValue$.next(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ElderInitialValueDirective, deps: [{ token: i1$3.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.2", type: ElderInitialValueDirective, isStandalone: true, selector: "[elderInitialValue]", exportAs: ["elderInitialValue"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ElderInitialValueDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderInitialValue]',
-                    exportAs: 'elderInitialValue',
-                }]
-        }], ctorParameters: () => [{ type: i1$3.NgModel, decorators: [{
-                    type: Host
-                }] }] });
-
 class DefaultInputFilterConverter {
     /***************************************************************************
      *                                                                         *
@@ -33938,6 +33883,32 @@ class DefaultInputFilterConverter {
     }
 }
 
+class NgModelInitialValueFix {
+    constructor(ngModel) {
+        //TODO: The debounce time is a hacky workaround, find a proper way to set initial value.
+        // ngModel regular and two way binding differ in initial value, which led to this solution
+        this.ngModel = ngModel;
+        this.initialValue$ = new BehaviorSubject(null);
+        this.initialDone$ = new Subject();
+        const ngModelValue$ = of('dummy').pipe(delay(10), map(() => this.ngModel.model));
+        ngModelValue$
+            .pipe(takeUntilDestroyed(), combineLatestWith$1(this.initialValue$), takeUntil(this.initialDone$))
+            .subscribe(([ngModelValue, initialValue]) => {
+            if (initialValue) {
+                ngModel.control.setValue(initialValue);
+            }
+            this.initialDone$.next();
+            this.initialDone$.complete();
+        });
+    }
+    setValue(value) {
+        if (value) {
+            this.ngModel.control.setValue(value);
+        }
+        this.initialValue$.next(value);
+    }
+}
+
 /**
  * Binds the control value (ngModel) to a SearchContexts Filter.
  */
@@ -33959,7 +33930,7 @@ class ElderSearchInputDirective {
         this.log = LoggerFactory.getLogger(this.constructor.name);
         this._queryKey$ = new BehaviorSubject(null);
         this._inputConverter = DefaultInputFilterConverter.of(() => this.queryKey);
-        this._initialValueDirective = new ElderInitialValueDirective(ngModel);
+        this._initialValueDirective = new NgModelInitialValueFix(ngModel);
         this._state$ = this.buildInputStateObservable();
         this._state = toSignal(this._state$);
     }
@@ -34693,7 +34664,6 @@ class ElderSearchModule {
             ElderSearchContextDirective,
             ElderSearchUrlDirective,
             ElderSearchInputDirective,
-            ElderInitialValueDirective,
             ElderSearchBoxComponent,
             ElderSearchPanelComponent], exports: [ElderSearchContextDirective,
             ElderSearchUrlDirective,
@@ -34729,7 +34699,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
                         ElderSearchContextDirective,
                         ElderSearchUrlDirective,
                         ElderSearchInputDirective,
-                        ElderInitialValueDirective,
                         ElderSearchBoxComponent,
                         ElderSearchPanelComponent,
                     ],