@sumaris-net/ngx-components 18.22.22 → 18.23.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "18.22.22",
+  "version": "18.23.0-beta.0",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/app/core/table/column/actions-column.component.d.ts

@@ -3,7 +3,7 @@ import { AsyncTableElement, TableElement } from '@e-is/ngx-material-table';
 import { MatColumnDef, MatTable } from '@angular/material/table';
 import { MatMenuTrigger } from '@angular/material/menu';
 import * as i0 from "@angular/core";
-export declare class ActionsColumnComponent<T extends TableElement<any> | AsyncTableElement<any> = TableElement<any>> implements OnInit, OnDestroy {
+export declare class ActionsColumnComponent<T extends TableElement<any> | AsyncTableElement<any>> implements OnInit, OnDestroy {
     private table;
     private cd;
     columnDef: MatColumnDef;

package/src/app/core/table/table.pipes.d.ts

@@ -6,10 +6,11 @@ import { Subscription } from 'rxjs';
 import { AppAsyncTable } from './async-table.class';
 import * as i0 from "@angular/core";
 export type AppTableRowCountProperty = 'visibleRowCount' | 'totalRowCount';
-export declare abstract class AbstractTableSelectionPipe<R, O, T extends AppTable<any> | AppAsyncTable<any> = AppTable<any> | AppAsyncTable<any>> extends AbstractSelectionModelPipe<any, R, O> {
+export declare abstract class AbstractTableSelectionPipe<R, O, T extends AppTable<any> | AppAsyncTable<any> = AppTable<any> | AppAsyncTable<any>> extends AbstractSelectionModelPipe<any, R, O> implements PipeTransform, OnDestroy {
     private _onRowsChanges;
     protected constructor(_ref: ChangeDetectorRef);
     transform(selectionOrTable: SelectionModel<any> | T, tableOrOpts?: T | O, opts?: O): R;
+    private isTable;
     protected _subscribe(selection: SelectionModel<any>, table?: T, opts?: O): Subscription;
     protected _dispose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractTableSelectionPipe<any, any, any>, never>;

package/src/app/core/table/testing/table.testing.module.d.ts

@@ -7,8 +7,10 @@ import * as i5 from "../../core.module";
 import * as i6 from "@ngx-translate/core";
 import * as i7 from "@angular/forms";
 import * as i8 from "../../../shared/directives/resizable/resizable.module";
+import * as i9 from "../../../shared/directives/cell-selection/cell-identifier.directive";
+import * as i10 from "../../../shared/directives/cell-selection/cell-selection.directive";
 export declare class TableTestingModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TableTestingModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TableTestingModule, [typeof i1.TableTestPage, typeof i2.Table2TestPage], [typeof i3.CommonModule, typeof i4.SharedModule, typeof i5.CoreModule, typeof i6.TranslateModule, typeof i7.FormsModule, typeof i8.ResizableModule], [typeof i1.TableTestPage, typeof i2.Table2TestPage, typeof i6.TranslateModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TableTestingModule, [typeof i1.TableTestPage, typeof i2.Table2TestPage], [typeof i3.CommonModule, typeof i4.SharedModule, typeof i5.CoreModule, typeof i6.TranslateModule, typeof i7.FormsModule, typeof i8.ResizableModule, typeof i9.CellIdentifierDirective, typeof i10.CellSelectionDirective], [typeof i1.TableTestPage, typeof i2.Table2TestPage, typeof i6.TranslateModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TableTestingModule>;
 }

package/src/app/core/table/testing/table2.testing.d.ts

@@ -1,5 +1,4 @@
 import { AfterViewInit, Injector, OnDestroy, OnInit } from '@angular/core';
-import { AppTable } from '../table.class';
 import { Referential } from '../../services/model/referential.model';
 import { IonInfiniteScroll } from '@ionic/angular';
 import { InMemoryEntitiesService } from '../../../shared/services/memory-entity-service.class';
@@ -7,8 +6,10 @@ import { AppValidatorService } from '../../services/validator/base.validator.cla
 import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ReferentialFilter } from '../../services/testing/referential-filter.model';
 import { MatExpansionPanel } from '@angular/material/expansion';
+import { AppAsyncTable } from '../async-table.class';
+import { CellSelectionEvent, ICellId } from '../../../shared/directives/cell-selection/cell-selection.service';
 import * as i0 from "@angular/core";
-export declare class Table2TestPage extends AppTable<Referential, ReferentialFilter> implements OnInit, OnDestroy, AfterViewInit {
+export declare class Table2TestPage extends AppAsyncTable<Referential, ReferentialFilter> implements OnInit, OnDestroy, AfterViewInit {
     protected validatorService: AppValidatorService;
     protected formBuilder: UntypedFormBuilder;
     static readonly maxRowCount = 100;
@@ -26,6 +27,7 @@ export declare class Table2TestPage extends AppTable<Referential, ReferentialFil
     get hasMoreData(): boolean;
     filterExpansionPanel: MatExpansionPanel;
     infiniteScroll: IonInfiniteScroll;
+    protected readonly selectableColumns: string[];
     get dataService(): InMemoryEntitiesService<Referential>;
     constructor(injector: Injector, validatorService: AppValidatorService, formBuilder: UntypedFormBuilder);
     ngOnInit(): void;
@@ -41,8 +43,10 @@ export declare class Table2TestPage extends AppTable<Referential, ReferentialFil
     toggleFilterPanelFloating(): void;
     applyFilterAndClosePanel(event?: Event): void;
     closeFilterPanel(): void;
-    resetFilter(_?: Event): void;
+    resetFilter(event?: Event): Promise<void>;
     protected generateData(offset?: number, size?: number): Referential[];
+    protected onCellSelectionChange(event: CellSelectionEvent<ICellId>): void;
+    protected onCellRightClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Table2TestPage, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<Table2TestPage, "app-table2-testing", never, { "filterPanelFloating": { "alias": "filterPanelFloating"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; "stickyEnd": { "alias": "stickyEnd"; "required": false; }; }, {}, never, ["[suffix]"], false, never>;
 }

package/src/app/shared/directives/cell-selection/cell-identifier.directive.d.ts

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+import { ICellId } from './cell-selection.service';
+import * as i0 from "@angular/core";
+export declare class CellIdentifierDirective<C extends ICellId = ICellId> implements OnInit {
+    cellId: import("@angular/core").InputSignal<C>;
+    protected isCellSelected: boolean;
+    protected isDragging: boolean;
+    private readonly service;
+    private readonly destroyRef;
+    ngOnInit(): void;
+    protected handleMouseDown(event: MouseEvent): Promise<void>;
+    protected handleMouseEnter(event: MouseEvent): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CellIdentifierDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CellIdentifierDirective<any>, "[appCellId]", never, { "cellId": { "alias": "appCellId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/src/app/shared/directives/cell-selection/cell-selection.directive.d.ts

@@ -0,0 +1,28 @@
+import { OnInit } from '@angular/core';
+import { CellSelectionEvent, ICellId } from './cell-selection.service';
+import * as i0 from "@angular/core";
+export declare class CellSelectionDirective<C extends ICellId = ICellId> implements OnInit {
+    selectableColumns: import("@angular/core").InputSignal<string[]>;
+    selectionChange: import("@angular/core").OutputEmitterRef<CellSelectionEvent<C>>;
+    rightClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    protected service: import("./cell-selection.service").CellSelectionService<ICellId>;
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private overlayElements;
+    constructor();
+    ngOnInit(): void;
+    private setupServiceConfiguration;
+    private setupGlobalMouseEvents;
+    private setupCopyListener;
+    addCellsOverlay(cells: C[]): void;
+    removeCellsOverlay(): void;
+    private groupContiguousCells;
+    private getAdjacentCells;
+    private getNextColumnName;
+    private getCellKey;
+    private calculateSelectionBounds;
+    private createOverlayElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CellSelectionDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CellSelectionDirective<any>, "[appCellSelection]", never, { "selectableColumns": { "alias": "appSelectableColumns"; "required": true; "isSignal": true; }; }, { "selectionChange": "appCellSelectionChange"; "rightClick": "appCellRightClick"; }, never, never, true, never>;
+}

package/src/app/shared/directives/cell-selection/cell-selection.service.d.ts

@@ -0,0 +1,62 @@
+import { InjectionToken } from '@angular/core';
+import { Subject } from 'rxjs';
+import { EqualsFn } from '../../types';
+import * as i0 from "@angular/core";
+export declare const APP_CELL_SELECTION_SERVICE_TOKEN: InjectionToken<CellSelectionService<ICellId>>;
+export declare const APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN: InjectionToken<CellSelectionServiceConfig<any>>;
+export interface ICellId {
+    rowId: number;
+    columnName: string;
+}
+export interface CellSelectionEvent<C extends ICellId> {
+    selectedCells: C[];
+    isRangeSelection: boolean;
+    isToggleSelection: boolean;
+}
+export interface CellSelectionServiceConfig<C extends ICellId> {
+    equals: EqualsFn<C>;
+    new: (cellId: ICellId) => C;
+}
+/**
+ * Service to manage cell selection state across multiple directive instances.
+ * This service should be provided at the component level (not root) to ensure
+ * proper isolation between different table instances.
+ */
+export declare class CellSelectionService<C extends ICellId = ICellId> {
+    config: CellSelectionServiceConfig<any>;
+    selectableColumns: string[];
+    selectedCells: C[];
+    private selectionStartCell;
+    private isSelecting;
+    draggedCells: C[];
+    private dragStartCell;
+    private isDragging;
+    readonly selectionChangeSubject: Subject<CellSelectionEvent<C>>;
+    readonly selectionRightClickSubject: Subject<MouseEvent>;
+    private readonly _equals;
+    private readonly _new;
+    constructor();
+    equals(cell1: C, cell2: C): boolean;
+    new(cellId: ICellId): C;
+    isCellSelected(cellId: C): boolean;
+    isCellDragged(cellId: C): boolean;
+    handleCellMouseDown(event: MouseEvent, cellId: C): Promise<void>;
+    handleCellMouseEnter(event: MouseEvent, cellId: C): Promise<void>;
+    endMouseMove(): void;
+    private startSelection;
+    private startDragSelection;
+    private toggleCellSelection;
+    private selectRange;
+    private updateSelection;
+    private updateDraggedCells;
+    private emitSelection;
+    calculateRangeCells(endCell: C): C[];
+    calculateRangeBetweenCells(startCell: C, endCell: C): C[];
+    resetSelectionState(): void;
+    resetDragState(): void;
+    private findFirstSelectedCell;
+    private findLastSelectedCell;
+    private findSelectedCell;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CellSelectionService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CellSelectionService<any>>;
+}

package/src/app/shared/functions.d.ts

@@ -6,7 +6,7 @@ export declare function isNotNil<T>(obj: T | null | undefined): boolean;
 export declare function isNotNilOrBlank<T>(obj: T | null | undefined): boolean;
 export declare function isNotNilOrNaN<T>(obj: T | null | undefined): boolean;
 export declare function isNilOrNaN<T>(obj: T | null | undefined): boolean;
-export declare function isNotEmptyArray<T>(obj: T[] | null | undefined): boolean;
+export declare function isNotEmptyArray<T>(obj: T[] | readonly T[] | null | undefined): boolean;
 export declare function firstArrayValue<T>(obj: T[] | null | undefined): T | undefined;
 export declare function lastArrayValue<T>(obj: T[] | null | undefined): T | undefined;
 export declare function isEmptyArray<T>(obj: T[] | null | undefined): boolean;

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "18.22.22",
+  "version": "18.22.23",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_ngx-components.table.scss

@@ -249,7 +249,6 @@
 
   .mat-mdc-row,
   .mat-mdc-footer-row {
-
     // Disabled row
     &.mat-mdc-row-disabled *,
     &.mat-row-disabled * {
@@ -550,8 +549,52 @@
     border-bottom-width: var(--mat-table-row-item-outline-width, 1px) !important;
     border-bottom-style: solid !important;
   }
-}
 
+  // Cell selection
+  td.cell-selected {
+    background-color: rgba(102, 51, 153, 0.2) !important;
+  }
+
+  td.cell-dragging {
+    background-color: rgba(102, 51, 153, 0.3) !important;
+  }
+
+  div.cell-selection-overlay {
+    --border-color: var(--ion-color-accent, gray);
+    position: absolute;
+    z-index: 5;
+    animation: linearGradientMove 0.3s infinite linear;
+    background:
+      linear-gradient(90deg, var(--border-color) 50%, transparent 0) repeat-x,
+      linear-gradient(90deg, var(--border-color) 50%, transparent 0) repeat-x,
+      linear-gradient(0deg, var(--border-color) 50%, transparent 0) repeat-y,
+      linear-gradient(0deg, var(--border-color) 50%, transparent 0) repeat-y;
+    background-size:
+      4px 2px,
+      4px 2px,
+      2px 4px,
+      2px 4px;
+    background-position:
+      0 0,
+      0 100%,
+      0 0,
+      100% 0;
+    background-color: unset;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  // Animated dashed border keyframes
+  @keyframes linearGradientMove {
+    100% {
+      background-position:
+        4px 0,
+        -4px 100%,
+        0 -4px,
+        100% 4px;
+    }
+  }
+}
 
 // Paginator
 .mat-mdc-paginator {