spiderly 19.11.6 → 19.11.8

package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, EventEmitter, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslocoService } from '@jsverse/transloco';
 import { SelectItem, SortMeta } from 'primeng/api';
@@ -14,7 +14,7 @@ import { ConfigServiceBase } from '../../services/config.service.base';
 import { SpiderlyMessageService } from '../../services/spiderly-message.service';
 import { SpiderlyFormControl } from '../spiderly-form-control/spiderly-form-control';
 import * as i0 from "@angular/core";
-export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit, OnDestroy {
+export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private router;
     private dialogService;
     private route;
@@ -38,6 +38,8 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     tableIcon: string;
     items: any[];
     rows: number;
+    /** Paginator page-size choices; merge rules and persistence: CLAUDE.md → "Rows-per-page". */
+    rowsPerPageOptions: number[];
     cols: Column[];
     /** Whether the paginator is shown. Pass only when `hasLazyLoad === false`. Defaults to `true`. */
     showPaginator: boolean;
@@ -63,6 +65,9 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     isAllSelected: boolean;
     fakeIsAllSelected: boolean;
     isFirstTimeLazyLoad: boolean;
+    /** Shift-range selection state — model and invariants: CLAUDE.md → "Shift-click range selection". */
+    private rangeAnchorId;
+    private pendingShift;
     onIsAllSelectedChange: EventEmitter<AllClickEvent>;
     selectedLazyLoadObservableMethod: (tableFilter: Filter) => Observable<LazyLoadSelectedIdsResult>;
     additionalFilterIdLong: number;
@@ -133,6 +138,16 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
      */
     getCellTemplate(col: Column): TemplateRef<CellTemplateContext> | null;
     private setupRemovableSort;
+    /**
+     * A page size PrimeNG will actually apply but that is missing from `rowsPerPageOptions` leaves
+     * the paginator dropdown blank — so both the effective `rows` and the persisted pick (which
+     * `restoreState` applies after init) are merged in. Runs again on input changes because a
+     * consumer may resolve `[rows]` asynchronously. Storage is user-writable, hence the shape and
+     * ceiling check: a hand-edited `{"rows": 100000}` must not become an offered choice, since the
+     * backend `.Take`s whatever it is sent.
+     */
+    private mergeActivePageSizesIntoOptions;
+    ngOnChanges(): void;
     ngOnInit(): void;
     /**
      * User visibility choices (field → visible), holding only fields the user explicitly
@@ -224,7 +239,16 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     getColMatchMode(filterType: string): any;
     isDropOrMulti(filterType: string): boolean;
     navigateToDetails(rowId: number): void;
-    onRowClick(row: any): void;
+    /**
+     * Handle row click event. Arbitration between "this click navigates the row" and "this click
+     * belongs to a control inside the row" happens HERE, once, rather than in each interactive
+     * surface: anything marked `.row-interactive` (the selection cell, the actions column, editable
+     * cells, opted-in `onCellClick` cells) owns its own click and never navigates. Per-surface
+     * `stopPropagation` used to be the mechanism and was structurally lossy — the actions column
+     * never had one, so a Delete click opened the dialog AND navigated away. Mark new interactive
+     * cells with the class; don't add another stop.
+     */
+    onRowClick(row: any, event: MouseEvent): void;
     onCellClick(col: Column, rowData: any, event: MouseEvent): void;
     private buildClickEvent;
     deleteObject(rowId: number): void;
@@ -246,13 +270,36 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     clear(table: Table): void;
     setFakeIsAllSelected(): void;
     selectAll(checked: boolean): void;
+    /**
+     * Captures the shift state for the checkbox change this press produces — id-paired so an
+     * aborted press can never leak into a later toggle (see CLAUDE.md). Also stops shift+click
+     * from extending the browser text selection, which starts at mousedown.
+     */
+    onSelectionCellMouseDown(event: MouseEvent, id: number): void;
+    /**
+     * The rows the user can currently see, in display order — PrimeNG's own answer, so it cannot
+     * drift from what the table paints (it applies `filteredValue` and the paginator slice, and
+     * caps lazy pages at `rows` even when the server overshoots). Resolving a range over raw
+     * `items` would sweep filtered-out or off-page rows sitting between two visually adjacent
+     * ones. An anchor outside this window misses and the shift-click degrades to a plain toggle.
+     */
+    private renderedRows;
     selectRow(id: number, index: number): void;
+    /** Single-row toggle — the plain-click path. */
+    private toggleRow;
+    /**
+     * Applies `select` to every row between the two positions in `rows` (inclusive), skipping rows
+     * already in the target state; each change goes through `toggleRow` so the delta model and
+     * per-row events stay identical to manual clicks (see CLAUDE.md). The event payload keeps
+     * `row.index` for parity with what the single-click template binding passes.
+     */
+    private applyRange;
     isRowSelected(id: number): boolean;
     rowSelect(id: number): void;
     rowUnselect(id: number): void;
     getFormArrayControlByIndex(formControlName: string, index: number): SpiderlyFormControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyDataTableComponent, "spiderly-data-table", never, { "tableTitle": { "alias": "tableTitle"; "required": false; }; "tableIcon": { "alias": "tableIcon"; "required": false; }; "items": { "alias": "items"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "showCardWrapper": { "alias": "showCardWrapper"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "getPaginatedListObservableMethod": { "alias": "getPaginatedListObservableMethod"; "required": false; }; "exportListToExcelObservableMethod": { "alias": "exportListToExcelObservableMethod"; "required": false; }; "deleteItemFromTableObservableMethod": { "alias": "deleteItemFromTableObservableMethod"; "required": false; }; "deleteListFromTableObservableMethod": { "alias": "deleteListFromTableObservableMethod"; "required": false; }; "newlySelectedItems": { "alias": "newlySelectedItems"; "required": false; }; "unselectedItems": { "alias": "unselectedItems"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectedLazyLoadObservableMethod": { "alias": "selectedLazyLoadObservableMethod"; "required": false; }; "additionalFilterIdLong": { "alias": "additionalFilterIdLong"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "showExportToExcelButton": { "alias": "showExportToExcelButton"; "required": false; }; "showReloadTableButton": { "alias": "showReloadTableButton"; "required": false; }; "getFormArrayItems": { "alias": "getFormArrayItems"; "required": false; }; "hasLazyLoad": { "alias": "hasLazyLoad"; "required": false; }; "stateKey": { "alias": "stateKey"; "required": false; }; "stateStorage": { "alias": "stateStorage"; "required": false; }; "defaultSortField": { "alias": "defaultSortField"; "required": false; }; "defaultSortOrder": { "alias": "defaultSortOrder"; "required": false; }; "getAlreadySelectedItemIds": { "alias": "getAlreadySelectedItemIds"; "required": false; }; "getAlreadySelectedItems": { "alias": "getAlreadySelectedItems"; "required": false; }; "getFormControl": { "alias": "getFormControl"; "required": false; }; "additionalIndexes": { "alias": "additionalIndexes"; "required": false; }; "navigateOnRowClick": { "alias": "navigateOnRowClick"; "required": false; }; "rowNavigationPath": { "alias": "rowNavigationPath"; "required": false; }; }, { "onTotalRecordsChange": "onTotalRecordsChange"; "onLazyLoad": "onLazyLoad"; "onIsAllSelectedChange": "onIsAllSelectedChange"; "onRowSelect": "onRowSelect"; "onRowUnselect": "onRowUnselect"; }, ["actionsTemplate", "cellTemplates"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyDataTableComponent, "spiderly-data-table", never, { "tableTitle": { "alias": "tableTitle"; "required": false; }; "tableIcon": { "alias": "tableIcon"; "required": false; }; "items": { "alias": "items"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "showCardWrapper": { "alias": "showCardWrapper"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "getPaginatedListObservableMethod": { "alias": "getPaginatedListObservableMethod"; "required": false; }; "exportListToExcelObservableMethod": { "alias": "exportListToExcelObservableMethod"; "required": false; }; "deleteItemFromTableObservableMethod": { "alias": "deleteItemFromTableObservableMethod"; "required": false; }; "deleteListFromTableObservableMethod": { "alias": "deleteListFromTableObservableMethod"; "required": false; }; "newlySelectedItems": { "alias": "newlySelectedItems"; "required": false; }; "unselectedItems": { "alias": "unselectedItems"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectedLazyLoadObservableMethod": { "alias": "selectedLazyLoadObservableMethod"; "required": false; }; "additionalFilterIdLong": { "alias": "additionalFilterIdLong"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "showExportToExcelButton": { "alias": "showExportToExcelButton"; "required": false; }; "showReloadTableButton": { "alias": "showReloadTableButton"; "required": false; }; "getFormArrayItems": { "alias": "getFormArrayItems"; "required": false; }; "hasLazyLoad": { "alias": "hasLazyLoad"; "required": false; }; "stateKey": { "alias": "stateKey"; "required": false; }; "stateStorage": { "alias": "stateStorage"; "required": false; }; "defaultSortField": { "alias": "defaultSortField"; "required": false; }; "defaultSortOrder": { "alias": "defaultSortOrder"; "required": false; }; "getAlreadySelectedItemIds": { "alias": "getAlreadySelectedItemIds"; "required": false; }; "getAlreadySelectedItems": { "alias": "getAlreadySelectedItems"; "required": false; }; "getFormControl": { "alias": "getFormControl"; "required": false; }; "additionalIndexes": { "alias": "additionalIndexes"; "required": false; }; "navigateOnRowClick": { "alias": "navigateOnRowClick"; "required": false; }; "rowNavigationPath": { "alias": "rowNavigationPath"; "required": false; }; }, { "onTotalRecordsChange": "onTotalRecordsChange"; "onLazyLoad": "onLazyLoad"; "onIsAllSelectedChange": "onIsAllSelectedChange"; "onRowSelect": "onRowSelect"; "onRowUnselect": "onRowUnselect"; }, ["actionsTemplate", "cellTemplates"], never, true, never>;
 }
 export declare class Action {
     name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spiderly",
-  "version": "19.11.6",
+  "version": "19.11.8",
   "author": "Filip Trivan",
   "license": "MIT",
   "description": "Spiderly Angular Library to use in combination with Spiderly.",

package/public-api.d.ts

@@ -25,7 +25,6 @@ export * from './lib/components/auth/partials/login-verification.component';
 export * from './lib/components/auth/partials/verification-wrapper.component';
 export * from './lib/components/base-form/base-form.component';
 export * from './lib/components/card-skeleton/card-skeleton.component';
-export * from './lib/components/footer/footer.component';
 export * from './lib/components/index-card/index-card.component';
 export * from './lib/components/info-card/info-card.component';
 export * from './lib/components/layout/layout.component';

package/styles/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -73,6 +73,11 @@
     text-decoration: underline;
   }
 
+  // Belt to onSelectionCellMouseDown's preventDefault (shift+click text-selection suppression).
+  td.selection-cell {
+    user-select: none;
+  }
+
   ::ng-deep {
     .p-datatable-thead {
       position: unset !important;

package/styles/styles/layout/_content.scss

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  justify-content: space-between;
   padding: 7rem 2rem 2rem 4rem;
   transition: margin-left $transitionDuration;
 }

package/styles/styles/layout/layout.scss

@@ -5,7 +5,6 @@
 @use "./_topbar";
 @use "./_menu";
 @use "./_content";
-@use "./_footer";
 @use "./_responsive";
 @use "./_utils";
 @use "./_typography";

package/lib/components/footer/footer.component.d.ts

@@ -1,9 +0,0 @@
-import { ConfigServiceBase } from '../../services/config.service.base';
-import * as i0 from "@angular/core";
-export declare class FooterComponent {
-    private config;
-    companyName: string;
-    constructor(config: ConfigServiceBase);
-    static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "footer", never, {}, {}, never, never, true, never>;
-}

package/styles/styles/layout/_footer.scss

@@ -1,11 +0,0 @@
-@use "./_variables" as *;
-
-.layout-footer {
-  transition: margin-left $transitionDuration;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--surface-border);
-  margin-top: 2rem;
-}