@tekus/design-system 5.40.0 → 5.41.0

package/types/tekus-design-system-components-table.d.ts

@@ -1,10 +1,12 @@
 import * as _angular_core from '@angular/core';
 import { Table } from 'primeng/table';
 import { TagSeverity } from '@tekus/design-system/components/tag';
+import { BadgeSeverity } from '@tekus/design-system/components/badge';
+import { IconColors } from '@tekus/design-system/components/icon';
 import { SortEvent } from 'primeng/api';
 import { TkAction } from '@tekus/design-system/components/action-group';
 
-type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox' | 'action-group' | 'connection-status' | 'image' | 'counter';
+type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox' | 'action-group' | 'connection-status' | 'image' | 'counter' | 'toggle';
 interface TableColumn<T = unknown> {
     field?: string;
     header: string;
@@ -12,6 +14,19 @@ interface TableColumn<T = unknown> {
     filterable?: boolean;
     type?: TableColumnType;
     width?: string;
+    /**
+     * Icon rendered before the value of a `'text'` (or default) cell.
+     * Uses the design system's IconCatalog names (same as `tk-icon`).
+     */
+    icon?: (row: T) => string;
+    /** Color of `icon`. Falls back to `tk-icon`'s own default. */
+    iconColor?: (row: T) => IconColors;
+    /**
+     * Truncates a `'text'` (or default) cell with an ellipsis instead of
+     * overflowing or wrapping. Uses `width` as the truncation point,
+     * falling back to `200px` when `width` is not set.
+     */
+    truncate?: boolean;
     tagSeverity?: (row: T) => TagSeverity;
     connectionStatusSeverity?: (row: T) => 'success' | 'warn' | 'danger' | 'gray';
     connectionStatusTooltipText?: (row: T) => string;
@@ -32,6 +47,17 @@ interface TableColumn<T = unknown> {
     imageHeight?: string;
     imageFallback?: string;
     imageAction?: (row: T) => void;
+    /**
+     * Total number of images available for the row (e.g. multiple evidence shots
+     * behind one thumbnail). When it resolves to more than 1, the cell overlays
+     * a `tk-badge` on the top-right corner of the thumbnail showing the count.
+     */
+    imageCount?: (row: T) => number;
+    /**
+     * Severity (color) of the `imageCount` overlay badge.
+     * @default 'primary'
+     */
+    imageCountSeverity?: (row: T) => BadgeSeverity;
     counterMin?: number;
     counterMax?: number;
     counterStep?: number;
@@ -45,6 +71,19 @@ interface TableColumn<T = unknown> {
      * The hook to persist a quantity change.
      */
     counterChange?: (row: T, value: number) => void;
+    toggleDisabled?: boolean | ((row: T) => boolean);
+    /** Optional label rendered next to the switch. Falls back to no label. */
+    toggleLabel?: (row: T) => string;
+    /**
+     * Called after the cell has written the new value into `row[field]`.
+     * The hook to persist a toggle change.
+     */
+    toggleChange?: (row: T, value: boolean) => void;
+    /**
+     * Tooltip text identifying the switch's current state, wrapping it in a
+     * `tk-tooltip`. Receives the row and the current (pre-toggle) value.
+     */
+    toggleTooltip?: (row: T, value: boolean) => string;
 }
 
 declare class TableComponent<T = unknown> {
@@ -104,6 +143,16 @@ declare class TableComponent<T = unknown> {
      * Property name to uniquely identify a row.
      */
     dataKey: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {InputSignal<string | null>} minTableWidth
+     * @description
+     * CSS `min-width` applied to the underlying PrimeNG table. Pass `null` to
+     * remove the minimum entirely (e.g. inside a narrow container such as a
+     * wizard step or modal) so the table can shrink to fit instead of forcing
+     * horizontal overflow.
+     * @default '60rem'
+     */
+    minTableWidth: _angular_core.InputSignal<string | null>;
     readonly initialData: _angular_core.WritableSignal<T[]>;
     readonly internalData: _angular_core.WritableSignal<T[]>;
     readonly isSorted: _angular_core.WritableSignal<boolean | null>;
@@ -249,6 +298,36 @@ declare class TableComponent<T = unknown> {
      * @param value {number} - The new, clamped value.
      */
     onCounterChange(col: TableColumn<T>, row: T, value: number): void;
+    /**
+     * @method isToggleDisabled
+     * @description
+     * Resolves a toggle column's `toggleDisabled`, which may be a boolean or a
+     * per-row predicate — the same shape `isCounterDisabled` already accepts.
+     * @param col {TableColumn<T>} - The toggle column definition.
+     * @param row {T} - The data row being rendered.
+     * @returns Whether this row's toggle should be disabled.
+     */
+    isToggleDisabled(col: TableColumn<T>, row: T): boolean;
+    /**
+     * @method onToggleChange
+     * @description
+     * Writes a toggle cell's new value into the row and notifies the consumer.
+     * Mutating the row in place matches how the `checkbox` column type behaves.
+     * @param col {TableColumn<T>} - The toggle column definition.
+     * @param row {T} - The data row being edited.
+     * @param value {boolean} - The new switch value.
+     */
+    onToggleChange(col: TableColumn<T>, row: T, value: boolean): void;
+    /**
+     * @method getImageCount
+     * @description
+     * Resolves how many images are available for an image-type cell via the
+     * column's `imageCount` callback. Returns 0 when not configured, so the
+     * template only overlays a `tk-badge` when there is more than one image.
+     * @param col {TableColumn<T>} - The image column definition.
+     * @param row {T} - The data row being rendered.
+     */
+    getImageCount(col: TableColumn<T>, row: T): number;
     /**
      * @method onImageError
      * @description
@@ -259,7 +338,7 @@ declare class TableComponent<T = unknown> {
      */
     onImageError(event: Event, fallback?: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "columnFilters": "columnFiltersChange"; "sortField": "sortFieldChange"; "sortOrder": "sortOrderChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "minTableWidth": { "alias": "minTableWidth"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "columnFilters": "columnFiltersChange"; "sortField": "sortFieldChange"; "sortOrder": "sortOrderChange"; }, never, never, true, never>;
 }
 
 export { TableComponent };