@elderbyte/ngx-starter 19.4.2 → 19.6.0

package/lib/components/data-view/common/drag-and-drop/local-data/elder-local-dnd-support.directive.d.ts

@@ -0,0 +1,54 @@
+import { DataViewDndControllerService } from '../data-view-dnd-controller.service';
+import { IElderDataView } from '../../../base/elder-data-view';
+import { DataViewDndGroupControllerService } from '../grouping/data-view-dnd-group-controller.service';
+import { ElderDataViewDndDirective } from '../elder-data-view-dnd.directive';
+import { ElderDataViewDndGroupDirective } from '../grouping/elder-data-view-dnd-group.directive';
+import * as i0 from "@angular/core";
+/**
+ * Adds support for automatic model updates
+ * according to occurring drag and drop on data views.
+ */
+export declare class ElderLocalDndSupportDirective<T> {
+    readonly dropView: ElderDataViewDndDirective<T>;
+    readonly dropGroup: ElderDataViewDndGroupDirective<T>;
+    readonly dropViewController: DataViewDndControllerService<T>;
+    readonly dropGroupController: DataViewDndGroupControllerService<T>;
+    readonly _dataView: IElderDataView<T>;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    private dataContext;
+    private dataSource;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dropView: ElderDataViewDndDirective<T>, dropGroup: ElderDataViewDndGroupDirective<T>, dropViewController: DataViewDndControllerService<T>, dropGroupController: DataViewDndGroupControllerService<T>, _dataView: IElderDataView<T>);
+    /***************************************************************************
+     *                                                                         *
+     * Single Drop View Mode                                                   *
+     *                                                                         *
+     **************************************************************************/
+    private initSingleDropViewModelTracking;
+    private handleItemDrop;
+    private isSortDefined;
+    /***************************************************************************
+     *                                                                         *
+     * Drop Group Mode                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private initDropGroupModelTracking;
+    private handleGroupDrop;
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private updateModel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderLocalDndSupportDirective<any>, [{ optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderLocalDndSupportDirective<any>, "[elderLocalDndSupport]", never, {}, {}, never, never, true, never>;
+}

package/lib/components/data-view/common/drag-and-drop/local-data/public_api.d.ts

@@ -0,0 +1,2 @@
+export * from './data-view-dnd-model-util';
+export * from './elder-local-dnd-support.directive';

package/lib/components/data-view/common/drag-and-drop/public_api.d.ts

@@ -0,0 +1,7 @@
+export * from './events/public_api';
+export * from './grouping/public_api';
+export * from './local-data/public_api';
+export * from './elder-data-view-dnd.directive';
+export * from './elder-data-view-item-drag.directive';
+export * from './local-data/elder-local-dnd-support.directive';
+export * from './data-view-dnd-controller.service';

package/lib/components/data-view/common/elder-continuator/elder-continuator.component.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class ElderContinuatorComponent {
+    readonly loadedCount: import("@angular/core").InputSignal<number>;
+    readonly total: import("@angular/core").InputSignal<string | number>;
+    readonly canLoadMore: import("@angular/core").InputSignal<boolean>;
+    readonly chunkSizeOptions: import("@angular/core").InputSignal<number[]>;
+    readonly chunkSize: import("@angular/core").InputSignal<number>;
+    readonly canModifyChunkSize: import("@angular/core").Signal<boolean>;
+    readonly loadMoreRequested: import("@angular/core").OutputEmitterRef<void>;
+    readonly chunkSizeChange: import("@angular/core").OutputEmitterRef<number>;
+    onChunkSizeChange(newSize: undefined | number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderContinuatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderContinuatorComponent, "elder-continuator", never, { "loadedCount": { "alias": "loadedCount"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "canLoadMore": { "alias": "canLoadMore"; "required": false; "isSignal": true; }; "chunkSizeOptions": { "alias": "chunkSizeOptions"; "required": false; "isSignal": true; }; "chunkSize": { "alias": "chunkSize"; "required": false; "isSignal": true; }; }, { "loadMoreRequested": "loadMoreRequested"; "chunkSizeChange": "chunkSizeChange"; }, never, never, true, never>;
+}

package/lib/components/data-view/common/elder-data-common.module.d.ts

@@ -11,16 +11,21 @@ import * as i9 from "@angular/material/progress-bar";
 import * as i10 from "@angular/material/dialog";
 import * as i11 from "@angular/material/tooltip";
 import * as i12 from "@ngx-translate/core";
-import * as i13 from "../../badge/elder-badge.module";
-import * as i14 from "./elder-data-toolbar/elder-data-toolbar.component";
-import * as i15 from "./elder-single-sort/elder-single-sort.component";
-import * as i16 from "./composite-sort/elder-composite-sort/elder-composite-sort.component";
-import * as i17 from "./composite-sort/composite-sort-dc.directive";
-import * as i18 from "./selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component";
-import * as i19 from "./selection/data-context-selection.directive";
-import * as i20 from "./data-context-state-indicator/data-context-state-indicator.component";
+import * as i13 from "@angular/cdk/drag-drop";
+import * as i14 from "../../badge/elder-badge.module";
+import * as i15 from "./elder-data-toolbar/elder-data-toolbar.component";
+import * as i16 from "./elder-single-sort/elder-single-sort.component";
+import * as i17 from "./composite-sort/elder-composite-sort/elder-composite-sort.component";
+import * as i18 from "./composite-sort/composite-sort-dc.directive";
+import * as i19 from "./selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component";
+import * as i20 from "./selection/data-context-selection.directive";
+import * as i21 from "./data-context-state-indicator/data-context-state-indicator.component";
+import * as i22 from "./drag-and-drop/elder-data-view-dnd.directive";
+import * as i23 from "./drag-and-drop/elder-data-view-item-drag.directive";
+import * as i24 from "./drag-and-drop/local-data/elder-local-dnd-support.directive";
+import * as i25 from "./drag-and-drop/grouping/elder-data-view-dnd-group.directive";
 export declare class ElderDataCommonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataCommonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderDataCommonModule, never, [typeof i1.CommonModule, typeof i2.RouterModule, typeof i3.MatDividerModule, typeof i4.MatCheckboxModule, typeof i5.MatMenuModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.MatBadgeModule, typeof i9.MatProgressBarModule, typeof i10.MatDialogModule, typeof i11.MatTooltipModule, typeof i12.TranslateModule, typeof i13.ElderBadgeModule, typeof i14.ElderDataToolbarComponent, typeof i14.ElderToolbarContentDirective, typeof i15.ElderSingleSortComponent, typeof i16.ElderCompositeSortComponent, typeof i17.ElderCompositeSortDcDirective, typeof i18.ElderSelectionMasterCheckboxComponent, typeof i19.DataContextSelectionDirective, typeof i20.DataContextStateIndicatorComponent], [typeof i14.ElderDataToolbarComponent, typeof i14.ElderToolbarContentDirective, typeof i15.ElderSingleSortComponent, typeof i16.ElderCompositeSortComponent, typeof i17.ElderCompositeSortDcDirective, typeof i18.ElderSelectionMasterCheckboxComponent, typeof i19.DataContextSelectionDirective, typeof i20.DataContextStateIndicatorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderDataCommonModule, never, [typeof i1.CommonModule, typeof i2.RouterModule, typeof i3.MatDividerModule, typeof i4.MatCheckboxModule, typeof i5.MatMenuModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.MatBadgeModule, typeof i9.MatProgressBarModule, typeof i10.MatDialogModule, typeof i11.MatTooltipModule, typeof i12.TranslateModule, typeof i13.DragDropModule, typeof i14.ElderBadgeModule, typeof i15.ElderDataToolbarComponent, typeof i15.ElderToolbarContentDirective, typeof i16.ElderSingleSortComponent, typeof i17.ElderCompositeSortComponent, typeof i18.ElderCompositeSortDcDirective, typeof i19.ElderSelectionMasterCheckboxComponent, typeof i20.DataContextSelectionDirective, typeof i21.DataContextStateIndicatorComponent, typeof i22.ElderDataViewDndDirective, typeof i23.ElderDataViewItemDragDirective, typeof i24.ElderLocalDndSupportDirective, typeof i25.ElderDataViewDndGroupDirective], [typeof i15.ElderDataToolbarComponent, typeof i15.ElderToolbarContentDirective, typeof i16.ElderSingleSortComponent, typeof i17.ElderCompositeSortComponent, typeof i18.ElderCompositeSortDcDirective, typeof i19.ElderSelectionMasterCheckboxComponent, typeof i20.DataContextSelectionDirective, typeof i21.DataContextStateIndicatorComponent, typeof i22.ElderDataViewDndDirective, typeof i23.ElderDataViewItemDragDirective, typeof i24.ElderLocalDndSupportDirective, typeof i25.ElderDataViewDndGroupDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderDataCommonModule>;
 }

package/lib/components/data-view/common/public_api.d.ts

@@ -8,4 +8,6 @@ export { MasterSelectionState } from './selection/master-selection-state';
 export { DataContextSelectionDirective } from './selection/data-context-selection.directive';
 export { DataContextStateIndicatorComponent } from './data-context-state-indicator/data-context-state-indicator.component';
 export * from './activation/public_api';
+export * from './drag-and-drop/public_api';
 export { ElderDataCommonModule } from './elder-data-common.module';
+export { ElderContinuatorComponent } from './elder-continuator/elder-continuator.component';

package/lib/components/data-view/common/selection/data-context-selection.directive.d.ts

@@ -1,5 +1,6 @@
 import { Signal } from '@angular/core';
 import { SelectionModel } from '../../../../common/selection/selection-model';
+import { Observable } from 'rxjs';
 import { IDataContext } from '../../../../common/data/data-context/data-context';
 import { MasterSelectionState } from './master-selection-state';
 import * as i0 from "@angular/core";
@@ -10,7 +11,7 @@ export declare class DataContextSelectionDirective {
      *                                                                         *
      **************************************************************************/
     private readonly log;
-    private readonly selectionModel$;
+    private readonly _selectionModel$;
     private readonly dataContext$;
     readonly selectionState: Signal<MasterSelectionState>;
     /***************************************************************************
@@ -25,6 +26,7 @@ export declare class DataContextSelectionDirective {
      *                                                                         *
      **************************************************************************/
     set selectionModel(model: SelectionModel<any>);
+    get selectionModel$(): Observable<SelectionModel<any>>;
     get selectionModel(): SelectionModel<any>;
     set dataContext(dataContext: IDataContext<any>);
     /** Whether the number of selected elements matches the totalSnapshot number of selectable rows. */

package/lib/components/data-view/grid/elder-grid/elder-grid.component.d.ts

@@ -9,6 +9,7 @@ import { ElderDataViewOptionsProvider } from '../../base/elder-data-view-options
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CompositeSort } from '../../common/composite-sort/composite-sort';
 import { ElderTileComponent } from '../elder-tile/elder-tile.component';
+import { ElderContinuatorComponent } from '../../common/elder-continuator/elder-continuator.component';
 import * as i0 from "@angular/core";
 declare class GridRow<T> {
     readonly id: string;
@@ -51,9 +52,9 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     dataRows$: Observable<GridRow<T>[]>;
     tileTemplateQuery: TemplateRef<any>;
     private _tileTemplate;
-    toolbarVisible: boolean;
-    footerVisible: boolean;
-    itemHeight: number;
+    readonly toolbarVisible: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly footerVisible: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly itemHeight: import("@angular/core").InputSignal<number>;
     readonly tileOutlined: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly responsiveColumnCount: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     virtualScrollViewPort: CdkVirtualScrollViewport;
@@ -63,8 +64,9 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     sortTranslationPrefix: string;
     hiddenField: string;
     selectionVisible: boolean;
-    pageSizeOptions: number[];
+    readonly pageSizeOptions: import("@angular/core").InputSignal<number[]>;
     matPaginator: MatPaginator;
+    elderContinuator: ElderContinuatorComponent;
     toolbarTemplateQuery: TemplateRef<any>;
     private _toolbarTemplate;
     readonly activeColumnCount$: Observable<number>;
@@ -116,6 +118,6 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     private initialColumnCount;
     private getTileForItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderGridComponent<any>, [{ optional: true; }, { optional: true; skipSelf: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderGridComponent<any>, "elder-grid", never, { "toolbarVisible": { "alias": "toolbarVisible"; "required": false; }; "footerVisible": { "alias": "footerVisible"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "tileOutlined": { "alias": "tileOutlined"; "required": false; "isSignal": true; }; "responsiveColumnCount": { "alias": "responsiveColumnCount"; "required": false; "isSignal": true; }; "availableSorts": { "alias": "availableSorts"; "required": false; }; "sortTranslationPrefix": { "alias": "sortTranslationPrefix"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "tileTemplate": { "alias": "tileTemplate"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columnCount": { "alias": "columnCount"; "required": false; }; }, {}, ["tileTemplateQuery", "toolbarTemplateQuery"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderGridComponent<any>, "elder-grid", never, { "toolbarVisible": { "alias": "toolbarVisible"; "required": false; "isSignal": true; }; "footerVisible": { "alias": "footerVisible"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "tileOutlined": { "alias": "tileOutlined"; "required": false; "isSignal": true; }; "responsiveColumnCount": { "alias": "responsiveColumnCount"; "required": false; "isSignal": true; }; "availableSorts": { "alias": "availableSorts"; "required": false; }; "sortTranslationPrefix": { "alias": "sortTranslationPrefix"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "tileTemplate": { "alias": "tileTemplate"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columnCount": { "alias": "columnCount"; "required": false; }; }, {}, ["tileTemplateQuery", "toolbarTemplateQuery"], never, true, never>;
 }
 export {};

package/lib/components/data-view/table/columns/elder-table-selection-cell/elder-table-selection-cell.component.d.ts

@@ -0,0 +1,30 @@
+import { Signal } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { DataContextSelectionDirective } from '../../../common/selection/data-context-selection.directive';
+import * as i0 from "@angular/core";
+export declare class ElderTableSelectionCellComponent<T = any> {
+    readonly dataContextSelection: DataContextSelectionDirective;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    readonly entity: import("@angular/core").InputSignal<T>;
+    readonly selected: Signal<boolean>;
+    readonly selectable: Signal<boolean>;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dataContextSelection: DataContextSelectionDirective);
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    onCheckboxChange(event: MatCheckboxChange): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableSelectionCellComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTableSelectionCellComponent<any>, "elder-table-selection-cell", never, { "entity": { "alias": "entity"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/data-view/table/drag-and-drop/elder-table-drop-list-connector.directive.d.ts

@@ -0,0 +1,37 @@
+import { DataViewDndControllerService } from '../../common/drag-and-drop/data-view-dnd-controller.service';
+import { CdkDropList } from '@angular/cdk/drag-drop';
+import { ElderTableComponent } from '../elder-table/elder-table.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/drag-drop";
+/**
+ * Directive which defines its host table as a CdkDropList and connects
+ * it with the drag and drop controller service of the parent data view.
+ *
+ * This is needed since our elder-table wraps the mat-table.
+ * If we someday switch to a more composition-based approach we might not need this anymore.
+ */
+export declare class ElderTableDropListConnectorDirective<T> {
+    private readonly dndController;
+    readonly elderTable: ElderTableComponent;
+    readonly cdkDropList: CdkDropList;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dndController: DataViewDndControllerService<T>, elderTable: ElderTableComponent, cdkDropList: CdkDropList);
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private disableDrag;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableDropListConnectorDirective<any>, [{ optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTableDropListConnectorDirective<any>, "[elderTableDropListConnector]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
+}

package/lib/components/data-view/table/drag-and-drop/public_api.d.ts

@@ -0,0 +1 @@
+export * from './elder-table-drop-list-connector.directive';

package/lib/components/data-view/table/elder-table/elder-table.component.d.ts

@@ -12,6 +12,7 @@ import { ElderTableModel } from '../model/elder-table-model';
 import { ElderTableExtensionDirective } from '../elder-table-extension.directive';
 import { ElderTableColumnDirective } from '../elder-table-column.directive';
 import { ElderDataViewOptionsProvider } from '../../base/elder-data-view-options-provider';
+import { ElderContinuatorComponent } from '../../common/elder-continuator/elder-continuator.component';
 import * as i0 from "@angular/core";
 export declare class ElderTableComponent<T = any> extends ElderDataViewBaseComponent<T> implements OnInit, AfterContentInit, AfterViewInit {
     readonly tableModel: ElderTableModel;
@@ -29,11 +30,17 @@ export declare class ElderTableComponent<T = any> extends ElderDataViewBaseCompo
      */
     private loadNextQueued;
     matTable: CdkTable<any>;
+    readonly pageSizeOptions: import("@angular/core").InputSignal<number[]>;
     matPaginator: MatPaginator;
+    elderContinuator: ElderContinuatorComponent;
     private readonly _matSort;
     columnDefs: QueryList<CdkColumnDef>;
     elderColumns: QueryList<ElderTableColumnDirective>;
     rowDefs: QueryList<CdkRowDef<any>>;
+    /**
+     * ID of table component.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
     /**
      * Field to identify the data records (ID field).
      * Note: This property is only considered in case the
@@ -57,10 +64,9 @@ export declare class ElderTableComponent<T = any> extends ElderDataViewBaseCompo
      *
      */
     hiddenField: string;
-    pageSizeOptions: number[];
-    keepSelection: boolean;
-    showFooter: boolean;
-    denseHorizontal: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly keepSelection: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly showFooter: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly denseHorizontal: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     /**
      * The table toolbar
      */
@@ -128,5 +134,5 @@ export declare class ElderTableComponent<T = any> extends ElderDataViewBaseCompo
     private setupSelectionLifeCycle;
     private getRowForItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableComponent<any>, [null, { optional: true; }, { optional: true; skipSelf: true; }, { optional: true; }, { optional: true; skipSelf: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTableComponent<any>, "elder-table", never, { "idField": { "alias": "idField"; "required": false; }; "removingField": { "alias": "removingField"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "denseHorizontal": { "alias": "denseHorizontal"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; }, {}, ["columnDefs", "elderColumns", "rowDefs", "toolbarRowTemplateQuery"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTableComponent<any>, "elder-table", ["elderTable"], { "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "idField": { "alias": "idField"; "required": false; }; "removingField": { "alias": "removingField"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "denseHorizontal": { "alias": "denseHorizontal"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; }, {}, ["columnDefs", "elderColumns", "rowDefs", "toolbarRowTemplateQuery"], never, true, never>;
 }

package/lib/components/data-view/table/elder-table-row.directive.d.ts

@@ -1,10 +1,13 @@
-import { ElementRef, Renderer2 } from '@angular/core';
+import { DestroyRef, ElementRef, OnInit, Renderer2 } from '@angular/core';
 import { ActivationModel } from '../common/activation/model/activation-model';
+import { DataContextSelectionDirective } from '../common/selection/data-context-selection.directive';
 import * as i0 from "@angular/core";
-export declare class ElderTableRowDirective<T> {
+export declare class ElderTableRowDirective<T> implements OnInit {
     private readonly rowRef;
+    private readonly destroyRef;
     private readonly renderer;
     private readonly activationModel;
+    private readonly dataContextSelection;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -12,17 +15,24 @@ export declare class ElderTableRowDirective<T> {
      **************************************************************************/
     private readonly logger;
     private _activated;
-    private _model;
+    readonly entity: import("@angular/core").InputSignal<T>;
+    readonly highlightSelection: import("@angular/core").InputSignal<boolean>;
     private readonly _focused;
+    private readonly highlightSelection$;
+    private readonly entity$;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(rowRef: ElementRef<HTMLTableRowElement>, renderer: Renderer2, activationModel: ActivationModel);
-    private handleActivationEvent;
-    private isItemActive;
-    private updateRowActivation;
+    constructor(rowRef: ElementRef<HTMLTableRowElement>, destroyRef: DestroyRef, renderer: Renderer2, activationModel: ActivationModel, dataContextSelection: DataContextSelectionDirective);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit(): void;
+    private bindHighlightSelection;
     /***************************************************************************
      *                                                                         *
      * Host Listener                                                           *
@@ -43,8 +53,6 @@ export declare class ElderTableRowDirective<T> {
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    set model(model: T);
-    get model(): T;
     get hasFocus(): boolean;
     /***************************************************************************
      *                                                                         *
@@ -58,8 +66,11 @@ export declare class ElderTableRowDirective<T> {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private handleActivationEvent;
+    private isItemActive;
+    private updateRowActivation;
     private enableRowFocus;
-    private activatedClassEnabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableRowDirective<any>, [null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTableRowDirective<any>, "tr[elderTableRow]", ["elderTableRow"], { "model": { "alias": "elderTableRow"; "required": false; }; }, {}, never, never, true, never>;
+    private updateHostClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableRowDirective<any>, [null, null, null, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTableRowDirective<any>, "tr[elderTableRow]", ["elderTableRow"], { "entity": { "alias": "elderTableRow"; "required": true; "isSignal": true; }; "highlightSelection": { "alias": "highlightSelection"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/components/data-view/table/elder-table.module.d.ts

@@ -9,33 +9,37 @@ import * as i7 from "@angular/material/icon";
 import * as i8 from "@angular/material/badge";
 import * as i9 from "@angular/material/progress-bar";
 import * as i10 from "@angular/cdk/table";
-import * as i11 from "@angular/material/table";
-import * as i12 from "@angular/material/paginator";
-import * as i13 from "@angular/material/sort";
-import * as i14 from "@angular/material/dialog";
-import * as i15 from "@angular/material/tooltip";
-import * as i16 from "@angular/material/menu";
-import * as i17 from "@ngx-translate/core";
-import * as i18 from "../common/elder-data-common.module";
-import * as i19 from "../../infinitescroll/elder-infinite-scroll.module";
-import * as i20 from "../../forms/directives/elder-forms-directives.module";
-import * as i21 from "@angular/material/card";
-import * as i22 from "./elder-table/elder-table.component";
-import * as i23 from "./elder-table/elder-table-toolbar.directive";
-import * as i24 from "./elder-table-sort.directive";
-import * as i25 from "./elder-center-cell.directive";
-import * as i26 from "./elder-number-cell.directive";
-import * as i27 from "./activation/elder-table-activation.directive";
-import * as i28 from "./elder-table-row.directive";
-import * as i29 from "./elder-table-extension.directive";
-import * as i30 from "./elder-table-column.directive";
-import * as i31 from "./elder-table-root.directive";
-import * as i32 from "./activation/elder-delete-active.directive";
+import * as i11 from "@angular/cdk/drag-drop";
+import * as i12 from "@angular/material/table";
+import * as i13 from "@angular/material/paginator";
+import * as i14 from "@angular/material/sort";
+import * as i15 from "@angular/material/dialog";
+import * as i16 from "@angular/material/tooltip";
+import * as i17 from "@angular/material/menu";
+import * as i18 from "@ngx-translate/core";
+import * as i19 from "../common/elder-data-common.module";
+import * as i20 from "../../infinitescroll/elder-infinite-scroll.module";
+import * as i21 from "../../forms/directives/elder-forms-directives.module";
+import * as i22 from "@angular/material/card";
+import * as i23 from "./elder-table/elder-table.component";
+import * as i24 from "./elder-table/elder-table-toolbar.directive";
+import * as i25 from "./elder-table-sort.directive";
+import * as i26 from "./elder-center-cell.directive";
+import * as i27 from "./elder-number-cell.directive";
+import * as i28 from "./activation/elder-table-activation.directive";
+import * as i29 from "./elder-table-row.directive";
+import * as i30 from "./elder-table-extension.directive";
+import * as i31 from "./elder-table-column.directive";
+import * as i32 from "./elder-table-root.directive";
+import * as i33 from "./activation/elder-delete-active.directive";
+import * as i34 from "./drag-and-drop/elder-table-drop-list-connector.directive";
 export * from './model/elder-table-model';
+export * from './columns/elder-table-selection-cell/elder-table-selection-cell.component';
 export * from './model/elder-table-model-provider';
 export * from './model/elder-table-model-cdk-table-binding';
 export * from './model/elder-table-model-query-group';
 export * from './activation/public_api';
+export * from './drag-and-drop/public_api';
 export * from './elder-number-cell.directive';
 export * from './elder-center-cell.directive';
 export * from './elder-table/elder-table.component';
@@ -45,6 +49,6 @@ export * from './elder-table-extension.directive';
 export * from './elder-table-root.directive';
 export declare class ElderTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderTableModule, never, [typeof i1.CommonModule, typeof i2.RouterModule, typeof i3.FormsModule, typeof i4.MatDividerModule, typeof i5.MatCheckboxModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.MatBadgeModule, typeof i9.MatProgressBarModule, typeof i10.CdkTableModule, typeof i11.MatTableModule, typeof i12.MatPaginatorModule, typeof i13.MatSortModule, typeof i14.MatDialogModule, typeof i15.MatTooltipModule, typeof i16.MatMenuModule, typeof i17.TranslateModule, typeof i18.ElderDataCommonModule, typeof i19.ElderInfiniteScrollModule, typeof i20.ElderFormsDirectivesModule, typeof i21.MatCardModule, typeof i22.ElderTableComponent, typeof i23.ElderTableToolbarDirective, typeof i24.ElderTableSortDirective, typeof i25.ElderCenterCellDirective, typeof i26.ElderNumberCellDirective, typeof i27.ElderTableActivationDirective, typeof i28.ElderTableRowDirective, typeof i29.ElderTableExtensionDirective, typeof i30.ElderTableColumnDirective, typeof i31.ElderTableRootDirective, typeof i32.ElderDeleteActiveDirective], [typeof i22.ElderTableComponent, typeof i23.ElderTableToolbarDirective, typeof i18.ElderDataCommonModule, typeof i24.ElderTableSortDirective, typeof i25.ElderCenterCellDirective, typeof i26.ElderNumberCellDirective, typeof i27.ElderTableActivationDirective, typeof i29.ElderTableExtensionDirective, typeof i31.ElderTableRootDirective, typeof i32.ElderDeleteActiveDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderTableModule, never, [typeof i1.CommonModule, typeof i2.RouterModule, typeof i3.FormsModule, typeof i4.MatDividerModule, typeof i5.MatCheckboxModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.MatBadgeModule, typeof i9.MatProgressBarModule, typeof i10.CdkTableModule, typeof i11.DragDropModule, typeof i12.MatTableModule, typeof i13.MatPaginatorModule, typeof i14.MatSortModule, typeof i15.MatDialogModule, typeof i16.MatTooltipModule, typeof i17.MatMenuModule, typeof i18.TranslateModule, typeof i19.ElderDataCommonModule, typeof i20.ElderInfiniteScrollModule, typeof i21.ElderFormsDirectivesModule, typeof i22.MatCardModule, typeof i23.ElderTableComponent, typeof i24.ElderTableToolbarDirective, typeof i25.ElderTableSortDirective, typeof i26.ElderCenterCellDirective, typeof i27.ElderNumberCellDirective, typeof i28.ElderTableActivationDirective, typeof i29.ElderTableRowDirective, typeof i30.ElderTableExtensionDirective, typeof i31.ElderTableColumnDirective, typeof i32.ElderTableRootDirective, typeof i33.ElderDeleteActiveDirective, typeof i34.ElderTableDropListConnectorDirective], [typeof i23.ElderTableComponent, typeof i24.ElderTableToolbarDirective, typeof i19.ElderDataCommonModule, typeof i25.ElderTableSortDirective, typeof i26.ElderCenterCellDirective, typeof i27.ElderNumberCellDirective, typeof i28.ElderTableActivationDirective, typeof i30.ElderTableExtensionDirective, typeof i32.ElderTableRootDirective, typeof i33.ElderDeleteActiveDirective, typeof i34.ElderTableDropListConnectorDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderTableModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.4.2",
+  "version": "19.6.0",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

package/src/lib/components/data-view/common/elder-continuator/elder-continuator.component.scss

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+
+.loaded-info-text {
+  color: var(--md-sys-color-outline);
+}
+
+.elder-chunk-size-select.mat-mdc-form-field {
+  width: 84px;
+  @include mat.form-field-density(-5);
+
+  .mat-mdc-select {
+    --mat-select-trigger-text-size: var(
+      --mat-paginator-container-text-size,
+      var(--mat-sys-body-small-size)
+    );
+  }
+}

package/theming/components/_elder-table-theme.scss

@@ -126,6 +126,30 @@
       @include _inner-table($pad, $pad-right);
     }
   }
+
+  @include table-row-drag-and-drop;
+}
+
+@mixin table-row-drag-and-drop {
+  // styles the element visible while dragging (aka drag preview)
+  .elder-table-row.elder-table-row.cdk-drag-preview {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    td {
+      flex: 1 1 auto;
+      border: none;
+    }
+  }
+
+  // styles the element that shows where the drag-element will be placed when dropped (aka drag placeholder)
+  .elder-table .cdk-drop-list-dragging {
+    .cdk-drag-placeholder {
+      opacity: 0.4;
+      color: transparent;
+      background-color: var(--md-sys-color-primary-container);
+    }
+  }
 }
 
 @mixin _inner-table($pad, $pad-right) {