spiderly 19.8.7 → 19.8.9

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslocoService } from '@jsverse/transloco';
 import { SelectItem } from 'primeng/api';
@@ -23,6 +23,11 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     private locale;
     private readonly destroy$;
     table: Table;
+    /**
+     * Custom toolbar content projected via `<ng-template spiderlyDataTableActions>`.
+     * Rendered in the caption action area ahead of the built-in buttons.
+     */
+    actionsTemplate: TemplateRef<any>;
     tableTitle: string;
     tableIcon: string;
     items: any[];
@@ -109,6 +114,8 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     isDropOrMulti(filterType: string): boolean;
     navigateToDetails(rowId: number): void;
     onRowClick(row: any): void;
+    onCellClick(col: Column, rowData: any, event: MouseEvent): void;
+    private buildClickEvent;
     deleteObject(rowId: number): void;
     deleteSelectedObjects(): void;
     private openDeleteConfirmation;
@@ -134,7 +141,7 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     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; }; "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"; }, never, 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; }; "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; }; "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"], never, true, never>;
 }
 export declare class Action {
     name?: string;
@@ -174,7 +181,17 @@ export declare class Column<T = any> {
     showTime?: boolean;
     decimalPlaces?: number;
     sortable?: boolean;
-    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, }?: {
+    /**
+     * Fired when this column's cell is clicked. Receives a {@link CellClickEvent} with the row id,
+     * the column field, the full row, the raw and formatted cell value, the clicked `<td>` element
+     * (use it to anchor an overlay/popover), and the original `MouseEvent`.
+     *
+     * Setting this makes the cell visibly clickable (cursor + hover) and the click no longer bubbles
+     * up to row navigation. The mirror of {@link Action.onClick}, but for plain value cells.
+     * Not applied to editable cells — those belong to their inline input.
+     */
+    onCellClick?: (event: CellClickEvent) => void;
+    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, onCellClick, }?: {
         name?: string;
         field?: string & keyof T;
         filterField?: string & keyof T;
@@ -188,6 +205,7 @@ export declare class Column<T = any> {
         showTime?: boolean;
         decimalPlaces?: number;
         sortable?: boolean;
+        onCellClick?: (event: CellClickEvent) => void;
     });
 }
 /**
@@ -208,6 +226,19 @@ export interface ActionClickEvent {
     /** The original DOM click event. */
     originalEvent: MouseEvent;
 }
+/**
+ * Payload passed to {@link Column.onCellClick} when a cell is clicked. A superset of
+ * {@link ActionClickEvent} (same `id` / `row` / `element` / `originalEvent`) plus the cell's
+ * column and value. Every field is populated by the data table.
+ */
+export interface CellClickEvent extends ActionClickEvent {
+    /** The clicked column's `field`. */
+    field: string;
+    /** The cell's raw value (`row[field]`). */
+    value: any;
+    /** The formatted value shown in the cell (what the table renders via `getRowData`). */
+    displayValue: string;
+}
 export declare class RowClickEvent {
     index?: number;
     id?: number;

package/lib/directives/spiderly-data-table-actions.directive.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from "@angular/core";
+/**
+ * Marks an `<ng-template>` projected into `spiderly-data-table` as custom toolbar
+ * content. The template is rendered in the table's caption action area, ahead of the
+ * built-in Clear Filters / Export to Excel / Reload / Delete Selected buttons, so its
+ * position stays stable regardless of selection state.
+ *
+ * The projected template binds to the consumer component (so `(click)` handlers call
+ * the consumer's methods), and inherits the action row's spacing and responsive
+ * stacking. No table state is passed as context — read it via the table's outputs
+ * (`onLazyLoad`, `onTotalRecordsChange`, `onRowSelect`) when needed.
+ *
+ * @example
+ * ```html
+ * <spiderly-data-table [cols]="cols" [getPaginatedListObservableMethod]="...">
+ *   <ng-template spiderlyDataTableActions>
+ *     <button pButton class="p-button-outlined" style="flex: none"
+ *             icon="pi pi-check" [label]="t('ApproveAll')" (click)="approveAll()"></button>
+ *   </ng-template>
+ * </spiderly-data-table>
+ * ```
+ */
+export declare class SpiderlyDataTableActionsDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyDataTableActionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SpiderlyDataTableActionsDirective, "[spiderlyDataTableActions]", never, {}, {}, never, never, true, never>;
+}

package/lib/services/helper-functions.d.ts

@@ -26,6 +26,7 @@ export declare function getFileNameFromContentDisposition(resp: HttpResponse<Blo
 export declare function toCommaSeparatedString<T>(input: T[]): string;
 export declare function isFileImageType(mimeType: string): boolean;
 export declare function isExcelFileType(mimeType: string): boolean;
+export declare function saveResponseAsFile(res: HttpResponse<Blob>, fallbackName: string): void;
 export declare function exportListToExcel(exportListToExcelObservableMethod: (filter: Filter) => Observable<any>, filter: Filter): void;
 export declare function getPrimengNamebookOptions(namebookList: Namebook[]): PrimengOption[];
 export declare function getPrimengDropdownNamebookOptions(getDropdownListObservable: (parentEntityId?: number) => Observable<Namebook[]>, parentEntityId?: number): Observable<PrimengOption[]>;

package/package.json

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

package/public-api.d.ts

@@ -90,4 +90,5 @@ export * from './lib/services/helper-functions';
 export * from './lib/services/spiderly-message.service';
 export * from './lib/services/spiderly-transloco-loader';
 export * from './lib/services/validator-abstract.service';
+export * from './lib/directives/spiderly-data-table-actions.directive';
 export * from './lib/directives/template-type.directive';

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

@@ -34,6 +34,15 @@
 }
 
 :host {
+  // The `.clickable` affordance is shared: clickable rows (navigateOnRowClick) and opt-in cells
+  // (Column.onCellClick) both get a pointer cursor; cells additionally underline on hover.
+  ::ng-deep .clickable {
+    cursor: pointer;
+  }
+  ::ng-deep td.clickable:hover {
+    text-decoration: underline;
+  }
+
   ::ng-deep {
     .p-datatable-thead {
       position: unset !important;