@tekus/design-system 5.41.0 → 5.42.0

package/types/tekus-design-system-components-column-picker.d.ts

@@ -0,0 +1,116 @@
+import * as _angular_core from '@angular/core';
+import { Popover } from 'primeng/popover';
+
+/**
+ * A column listed in `tk-column-picker`.
+ * `key` must match the `field` of the `tk-table` column it controls.
+ */
+interface TkColumnPickerColumn {
+    key: string;
+    label: string;
+    /** Always visible: rendered checked and disabled, and never hidden even if preloaded as hidden. */
+    locked?: boolean;
+}
+
+/**
+ * @component ColumnPickerComponent
+ * @description
+ * Icon button that opens a list of checkboxes to show or hide table columns:
+ * a popover on desktop and a bottom drawer on mobile. Changes stay temporary
+ * until "Aplicar". The consumer owns the selection: `[(hiddenColumns)]`
+ * preloads a stored preference and `(appliedColumns)` emits it to be saved.
+ *
+ * @usage
+ * ```html
+ * <tk-column-picker [columns]="columnOptions" [(hiddenColumns)]="hidden" />
+ * <tk-table [columns]="columns" [hiddenColumns]="hidden()" />
+ * ```
+ */
+declare class ColumnPickerComponent {
+    private readonly breakpointObserver;
+    /** Responsive flag: drawer instead of popover below 768px */
+    readonly isMobile: _angular_core.Signal<boolean>;
+    /**
+     * Columns listed in the picker. `key` must match the `tk-table` column `field`.
+     * @default []
+     */
+    readonly columns: _angular_core.InputSignal<TkColumnPickerColumn[]>;
+    /**
+     * Two-way bindable list of hidden column keys. Its initial value preloads a
+     * saved selection; unknown keys are ignored. Locked keys are removed right
+     * after the first change detection, so a bound tk-table could hide a locked
+     * column for that first frame: do not preload locked keys.
+     * @default []
+     */
+    readonly hiddenColumns: _angular_core.ModelSignal<string[]>;
+    /**
+     * Picker title, button tooltip and accessible name.
+     * @default 'Columnas'
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Label for the button that shows every column again.
+     * @default 'Restablecer'
+     */
+    readonly resetLabel: _angular_core.InputSignal<string>;
+    /**
+     * Label for the button that applies the selection.
+     * @default 'Aplicar'
+     */
+    readonly applyLabel: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name of the popover close button.
+     * @default 'Cerrar'
+     */
+    readonly closeLabel: _angular_core.InputSignal<string>;
+    /**
+     * Emits the hidden column keys when the user applies the selection,
+     * so the consumer can store it and preload it next time.
+     */
+    readonly appliedColumns: _angular_core.OutputEmitterRef<string[]>;
+    /**
+     * Temporary hidden column keys held before the user clicks "Aplicar".
+     * Follows `hiddenColumns` (so `apply()` never starts from an empty list)
+     * and stays writable while the user checks/unchecks options.
+     */
+    readonly tempHiddenColumns: _angular_core.WritableSignal<string[]>;
+    /** Lookup of the temporary hidden keys, used once per option on each render */
+    private readonly tempHiddenSet;
+    /** Controls visibility of the mobile drawer */
+    readonly showDrawer: _angular_core.WritableSignal<boolean>;
+    readonly popover: _angular_core.Signal<Popover | undefined>;
+    /** Options shown before the list scrolls (limits the view, not the columns) */
+    private readonly maxVisibleOptions;
+    private readonly list;
+    /**
+     * Max height of the scrollable body, measured from the rendered options so
+     * exactly 8 fit whatever the theme, font or 2-line names. Null when all fit.
+     */
+    readonly bodyMaxHeight: _angular_core.WritableSignal<number | null>;
+    /** Keys of the columns the user can hide (not locked) */
+    private readonly hideableColumnKeys;
+    /** Locked column keys present in `hiddenColumns` (e.g. from a preload); they get removed */
+    private readonly lockedHiddenColumnKeys;
+    /** Whether any existing, hideable column is currently hidden */
+    readonly hasHiddenColumns: _angular_core.Signal<boolean>;
+    /** "Aplicar" requires at least one visible column in the temporary selection */
+    readonly canApply: _angular_core.Signal<boolean>;
+    constructor();
+    /** Bottom of the last visible option relative to the first one, or null when all fit */
+    private calculateBodyMaxHeight;
+    /** Toggles the picker and copies the applied selection into temporary state */
+    open(event: Event): void;
+    /** Whether a column is checked (visible) in the temporary selection */
+    isTempColumnVisible(column: TkColumnPickerColumn): boolean;
+    /** Checks/unchecks a column in the temporary selection */
+    onTempColumnChange(column: TkColumnPickerColumn, visible: boolean): void;
+    /** Shows every column in the temporary selection */
+    reset(): void;
+    /** Saves the temporary selection and emits it for the consumer to store */
+    apply(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColumnPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColumnPickerComponent, "tk-column-picker", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "hiddenColumns": { "alias": "hiddenColumns"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "resetLabel": { "alias": "resetLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "hiddenColumns": "hiddenColumnsChange"; "appliedColumns": "appliedColumns"; }, never, never, true, never>;
+}
+
+export { ColumnPickerComponent };
+export type { TkColumnPickerColumn };

package/types/tekus-design-system-components-link-group.d.ts

@@ -0,0 +1,119 @@
+import * as _angular_core from '@angular/core';
+import { IconColors } from '@tekus/design-system/components/icon';
+
+/** Maximum number of links `tk-link-group` renders. Extra items are ignored. */
+declare const TK_LINK_GROUP_MAX_LINKS = 2;
+/**
+ * Optional icon rendered before the label. `prefixIconSeverity` and
+ * `iconTooltip` are only allowed together with `prefixIcon`.
+ */
+type TkLinkIcon = {
+    /** Icon name from the design system's IconCatalog (same as `tk-icon`). */
+    prefixIcon: string;
+    /** Color of the icon. Falls back to the link color. */
+    prefixIconSeverity?: IconColors;
+    /** Tooltip shown on hover of the icon. Also its accessible name. */
+    iconTooltip?: string;
+} | {
+    prefixIcon?: never;
+    prefixIconSeverity?: never;
+    iconTooltip?: never;
+};
+/**
+ * What the item does: navigate (`url` or `routerLink`), run a callback
+ * (`action`), or navigate and run the callback. `url` and `routerLink` are
+ * mutually exclusive. With none of them the item is plain text.
+ */
+type TkLinkTarget = {
+    /** Destination outside the Angular router (full page load). Renders an `<a href>`. */
+    url: string;
+    routerLink?: never;
+    /** Where to open the link. `_blank` adds `rel="noopener noreferrer"`. */
+    target?: '_self' | '_blank';
+    /** Also called on click, e.g. for tracking. Navigation still happens. */
+    action?: () => void;
+} | {
+    url?: never;
+    /** In-app route, navigated with Angular's `RouterLink` (no page reload). Requires the router. */
+    routerLink: string | readonly unknown[];
+    /** Where to open the link. `_blank` adds `rel="noopener noreferrer"`. */
+    target?: '_self' | '_blank';
+    /** Also called on click, e.g. for tracking. Navigation still happens. */
+    action?: () => void;
+} | {
+    url?: never;
+    routerLink?: never;
+    target?: never;
+    /** Called on click. The link renders as a `<button type="button">`. */
+    action: () => void;
+} | {
+    /** Plain text item (e.g. "Sin lista"): not a link, not focusable. */
+    url?: never;
+    routerLink?: never;
+    target?: never;
+    action?: never;
+};
+/**
+ * An item rendered by `tk-link-group`: a label plus a `url` or `routerLink`,
+ * an `action`, or both (or none, for plain text), and an optional prefix icon
+ * with its own color and tooltip.
+ */
+type TkLinkItem = {
+    /** Visible text. Truncated with an ellipsis (and a tooltip) when it does not fit. */
+    label: string;
+    /**
+     * Shows the link but does not navigate nor run `action`, and takes it out of
+     * the tab order. The icon and its tooltip stay available (e.g. to explain why).
+     */
+    disabled?: boolean;
+} & TkLinkIcon & TkLinkTarget;
+
+/**
+ * @component LinkGroupComponent
+ * @description
+ * Renders one or two links separated by "/". Each link has a label plus a
+ * `url` (`<a href>`) or a `routerLink` (in-app route, no reload), an `action`
+ * (rendered as a button) or both; with none of them it is plain text,
+ * and an optional prefix icon with its own color and tooltip.
+ *
+ * Responsive in at most 2 lines: both links share a line when they fit;
+ * otherwise the second one moves to the next line, keeping the "/" at the end
+ * of the first. A label that does not fit its own line ends with an ellipsis
+ * and shows its full text in a tooltip.
+ *
+ * @usage
+ * ```html
+ * <tk-link-group [links]="[
+ *   { label: 'Promociones septiembre', routerLink: ['/playlists', 12], prefixIcon: 'video' },
+ *   { label: 'Música ambiente', routerLink: ['/audiolists', 7], prefixIcon: 'list-music' }
+ * ]" />
+ * ```
+ */
+declare class LinkGroupComponent {
+    /**
+     * @property {TkLinkItem[]} links
+     * @description
+     * Links to render. Only the first two are shown.
+     *
+     * @required
+     */
+    readonly links: _angular_core.InputSignal<TkLinkItem[]>;
+    /**
+     * @computed visibleLinks
+     * @description The first {@link TK_LINK_GROUP_MAX_LINKS} links.
+     */
+    readonly visibleLinks: _angular_core.Signal<TkLinkItem[]>;
+    /**
+     * @method onLinkClick
+     * @description
+     * Runs the link's `action`, if any. A link with `url` still navigates.
+     * Does nothing for a disabled link.
+     * @param link {TkLinkItem} - The clicked link.
+     */
+    onLinkClick(link: TkLinkItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LinkGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkGroupComponent, "tk-link-group", never, { "links": { "alias": "links"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { LinkGroupComponent, TK_LINK_GROUP_MAX_LINKS };
+export type { TkLinkItem };

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

@@ -0,0 +1,68 @@
+import * as _angular_core from '@angular/core';
+
+type SkeletonShape = 'rectangle' | 'circle';
+type SkeletonAnimation = 'wave' | 'none';
+/**
+ * @component SkeletonComponent
+ * @description
+ * Placeholder shown while content loads, wrapping PrimeNG's `p-skeleton`
+ * with its wave animation (disabled when the user prefers reduced motion).
+ *
+ * Decorative by default. Set `ariaLabel` when the skeleton is the only sign
+ * that something is loading: it is rendered as visually hidden text, read by
+ * screen readers when they reach the skeleton. It is not a live region, so
+ * many skeletons at once do not flood the screen reader.
+ *
+ * @usage
+ * ```html
+ * <tk-skeleton width="40px" height="40px" ariaLabel="Cargando imagen" />
+ * ```
+ */
+declare class SkeletonComponent {
+    /**
+     * @property {string} width
+     * @description Width of the placeholder (any CSS length).
+     * @default '100%'
+     */
+    readonly width: _angular_core.InputSignal<string>;
+    /**
+     * @property {string} height
+     * @description Height of the placeholder (any CSS length).
+     * @default '1rem'
+     */
+    readonly height: _angular_core.InputSignal<string>;
+    /**
+     * @property {SkeletonShape} shape
+     * @description `circle` uses `size` for both dimensions when it is set.
+     * @default 'rectangle'
+     */
+    readonly shape: _angular_core.InputSignal<SkeletonShape>;
+    /**
+     * @property {string | undefined} size
+     * @description Width and height at once (e.g. for circles). Overrides both.
+     */
+    readonly size: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {string | undefined} borderRadius
+     * @description Corner radius. Defaults to the theme's skeleton radius.
+     */
+    readonly borderRadius: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {SkeletonAnimation} animation
+     * @description `none` renders a static placeholder.
+     * @default 'wave'
+     */
+    readonly animation: _angular_core.InputSignal<SkeletonAnimation>;
+    /**
+     * @property {string | undefined} ariaLabel
+     * @description
+     * Loading message for screen readers, rendered as visually hidden text.
+     * Without it the skeleton is decorative.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "tk-skeleton", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SkeletonComponent };
+export type { SkeletonAnimation, SkeletonShape };

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

@@ -3,10 +3,18 @@ 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 { TkLinkItem } from '@tekus/design-system/components/link-group';
 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' | 'toggle';
+type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox' | 'action-group' | 'connection-status' | 'image' | 'counter' | 'toggle' | 'links';
+/**
+ * State of an `'image'` cell:
+ * - `default`: the image (with a skeleton while it downloads).
+ * - `loading`: an animated skeleton, e.g. while a screenshot task runs.
+ * - `error`: the error placeholder, with `imageErrorTooltip` as its tooltip.
+ */
+type TableImageState = 'default' | 'loading' | 'error';
 interface TableColumn<T = unknown> {
     field?: string;
     header: string;
@@ -50,7 +58,10 @@ interface TableColumn<T = unknown> {
     /**
      * 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.
+     * a `tk-badge` on the top-right corner of the thumbnail showing the count,
+     * in any state: in `error` it means only the preview failed and the other
+     * images are still available (the placeholder then runs `imageAction`).
+     * Return 0 or 1 when there is nothing else to show, e.g. the request failed.
      */
     imageCount?: (row: T) => number;
     /**
@@ -58,6 +69,28 @@ interface TableColumn<T = unknown> {
      * @default 'primary'
      */
     imageCountSeverity?: (row: T) => BadgeSeverity;
+    /**
+     * State of the cell, controlled by the consumer. An image that fails to
+     * load (and its `imageFallback`, if any) switches to `error` by itself;
+     * returning `loading` (or `error`), or passing a new row object, clears that
+     * failure so the image is retried. Failures are tracked per row.
+     * @default 'default'
+     */
+    imageState?: (row: T) => TableImageState;
+    /**
+     * Tooltip of the error placeholder (e.g. the failure reason), in the app's
+     * language. Also what screen readers read; without it they read `imageAlt`.
+     */
+    imageErrorTooltip?: (row: T) => string;
+    /**
+     * Links of a `'links'` cell, rendered by `tk-link-group`: one or two per row,
+     * separated by "/", each with a `url`, an `action` or both, and an optional
+     * prefix icon with its own color and tooltip. Only the first two are shown.
+     * They link the entities related to the row (e.g. the playlist and the audio
+     * list of a screen); row actions belong in the `actions` column. Return a
+     * single link when the row has no second entity: no separator is rendered.
+     */
+    links?: (row: T) => TkLinkItem[];
     counterMin?: number;
     counterMax?: number;
     counterStep?: number;
@@ -85,13 +118,19 @@ interface TableColumn<T = unknown> {
      */
     toggleTooltip?: (row: T, value: boolean) => string;
 }
+interface TableRowReorderEvent<T = unknown> {
+    dragIndex: number;
+    dropIndex: number;
+    data: T[];
+}
 
 declare class TableComponent<T = unknown> {
     /**
-     * @property {InputSignal<T[]>} data
+     * @property {ModelSignal<T[]>} data
      * @description
      * Array of data objects to display in the table rows.
      * Each object corresponds to one row; properties are mapped to columns via the `columns` input.
+     * Supports two-way binding `[(data)]` to synchronize row reordering.
      *
      * @default []
      *
@@ -101,7 +140,7 @@ declare class TableComponent<T = unknown> {
      *   { id: 2, name: 'Jane', status: 'inactive' }
      * ]"
      */
-    data: _angular_core.InputSignal<T[]>;
+    readonly data: _angular_core.ModelSignal<T[]>;
     /**
      * @property {viewChild} tableRef
      * @description
@@ -125,6 +164,46 @@ declare class TableComponent<T = unknown> {
      * ]"
      */
     columns: _angular_core.InputSignal<TableColumn<T>[]>;
+    /**
+     * @property {InputSignal<boolean>} reorderableRows
+     * @description
+     * Whether row reordering is enabled.
+     * When true, an extra leading column with a `grip-vertical` handle is rendered for each row.
+     * Rows are moved by dragging the handle, or with ArrowUp / ArrowDown while it is focused.
+     * Reordering is paused (handle disabled) while a sort or a column filter is active,
+     * because the visible order would not match the underlying `data` order.
+     * Set it before the rows render: PrimeNG binds the drag listeners when each row is created.
+     * @default false
+     */
+    readonly reorderableRows: _angular_core.InputSignal<boolean>;
+    /**
+     * @property {InputSignal<string>} reorderHandleLabel
+     * @description
+     * Accessible name of the row reorder handle and of its column header.
+     * @default 'Reordenar fila'
+     */
+    readonly reorderHandleLabel: _angular_core.InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} reorderMovedLabel
+     * @description
+     * Screen reader announcement after a row is moved.
+     * `{0}` is replaced by the new position and `{1}` by the total of rows.
+     * @default 'Fila movida a la posición {0} de {1}'
+     */
+    readonly reorderMovedLabel: _angular_core.InputSignal<string>;
+    /**
+     * @property {InputSignal<string | undefined>} imageLoadingLabel
+     * @description
+     * Optional screen reader text of an image cell in `loading` state, in the
+     * app's language. Without it the loading skeleton is decorative.
+     */
+    readonly imageLoadingLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {OutputEmitterRef<TableRowReorderEvent<T>>} rowReorder
+     * @description
+     * Emitted when a row is moved, by drag-and-drop or keyboard.
+     */
+    readonly rowReorder: _angular_core.OutputEmitterRef<TableRowReorderEvent<T>>;
     /**
      * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode
      * @description
@@ -143,6 +222,23 @@ declare class TableComponent<T = unknown> {
      * Property name to uniquely identify a row.
      */
     dataKey: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {InputSignal<string[]>} hiddenColumns
+     * @description
+     * Optional. `field` of the columns to hide. The consumer owns this list
+     * (e.g. bound to `tk-toolbar`'s `[(hiddenColumns)]` and preloaded from a saved
+     * preference). Fields that do not match a column are ignored, and columns
+     * without `field` (selection, actions) are always shown.
+     * Hiding a column does not clear its active filter.
+     * @default []
+     */
+    readonly hiddenColumns: _angular_core.InputSignal<string[]>;
+    /**
+     * @computed visibleColumns
+     * @description
+     * Columns actually rendered: `columns` minus `hiddenColumns`.
+     */
+    readonly visibleColumns: _angular_core.Signal<TableColumn<T>[]>;
     /**
      * @property {InputSignal<string | null>} minTableWidth
      * @description
@@ -152,10 +248,26 @@ declare class TableComponent<T = unknown> {
      * horizontal overflow.
      * @default '60rem'
      */
-    minTableWidth: _angular_core.InputSignal<string | null>;
+    readonly minTableWidth: _angular_core.InputSignal<string | null>;
     readonly initialData: _angular_core.WritableSignal<T[]>;
+    /**
+     * @property imageStatuses
+     * @description
+     * Load outcome of each image cell, per row object and column field. Keyed by
+     * the row (not the src) so rows sharing an image URL keep their own state,
+     * and a new row object always gets a fresh attempt.
+     */
+    private readonly imageStatuses;
+    /** Bumped on every image load/error so the template re-reads the statuses */
+    private readonly imageStatusVersion;
     readonly internalData: _angular_core.WritableSignal<T[]>;
     readonly isSorted: _angular_core.WritableSignal<boolean | null>;
+    /** Text of the polite live region announced after a row is moved */
+    readonly reorderAnnouncement: _angular_core.WritableSignal<string>;
+    /** Row offset applied by each reorder handle key */
+    private readonly reorderKeyDelta;
+    private readonly host;
+    private readonly injector;
     /** Tracks which column's filter overlay is currently open */
     readonly activeFilterColumn: _angular_core.WritableSignal<string | null>;
     /** Stores the selected filter value per column field (null = no filter) */
@@ -181,6 +293,14 @@ declare class TableComponent<T = unknown> {
      * Returns true if some but not all rows are selected.
      */
     isPartiallySelected: _angular_core.Signal<boolean>;
+    /**
+     * @computed canReorderRows
+     * @description
+     * Rows can only be moved while the visible order matches `data`: reordering
+     * a sorted or filtered view would drop the hidden rows from the model or be
+     * undone by the next sort pass.
+     */
+    readonly canReorderRows: _angular_core.Signal<boolean>;
     constructor();
     /**
      * @method toggleAll
@@ -196,6 +316,28 @@ declare class TableComponent<T = unknown> {
      * @param value {any[]}
      */
     updateSelection(value: T[]): void;
+    /**
+     * @method onRowReorder
+     * @description
+     * Handles row reorder event from PrimeNG Table and synchronizes data.
+     * @param event {{ dragIndex?: number; dropIndex?: number }}
+     */
+    onRowReorder(event: {
+        dragIndex?: number;
+        dropIndex?: number;
+    }): void;
+    /**
+     * @method onReorderHandleKeydown
+     * @description
+     * Moves the row one position with ArrowUp / ArrowDown and keeps focus on its handle.
+     * Stops propagation so PrimeNG's selectable row does not treat the keys as row navigation or selection.
+     */
+    onReorderHandleKeydown(event: KeyboardEvent, rowIndex: number): void;
+    /**
+     * Moves a row inside `data` (not the PrimeNG-mutated `internalData`), syncs the
+     * model and emits `rowReorder`. Returns false when the move is not allowed.
+     */
+    private moveRow;
     private readonly actionGroupCache;
     getActionGroup(actions: NonNullable<TableColumn<T>['actionGroup']>, row: T): TkAction[];
     customSort(event: SortEvent): void;
@@ -331,15 +473,49 @@ declare class TableComponent<T = unknown> {
     /**
      * @method onImageError
      * @description
-     * Handles image load errors by replacing the broken src with a fallback URL.
+     * Handles image load errors: switches to the column's `imageFallback` once;
+     * if there is none, or it fails too, the cell shows the error placeholder.
      * Called from the template's (error) binding on image-type columns.
      * @param event {Event} - The native error event from the <img> element.
-     * @param fallback {string | undefined} - Optional URL to use as replacement src.
+     * @param col {TableColumn<T>} - The image column definition.
+     * @param row {T} - The data row being rendered.
+     */
+    onImageError(event: Event, col: TableColumn<T>, row: T): void;
+    /**
+     * @method onImageLoad
+     * @description
+     * Marks an image cell as loaded so its skeleton is removed.
+     * @param col {TableColumn<T>} - The image column definition.
+     * @param row {T} - The data row being rendered.
+     */
+    onImageLoad(col: TableColumn<T>, row: T): void;
+    /**
+     * @method getImageState
+     * @description
+     * State of an image cell: the column's `imageState` when it is `loading` or
+     * `error`; otherwise `error` if the image failed to load, else `default`.
+     * A `loading` or `error` state from the column clears the load outcome, so
+     * the image is retried (with a skeleton) when the cell goes back to `default`.
+     * @param col {TableColumn<T>} - The image column definition.
+     * @param row {T} - The data row being rendered.
+     */
+    getImageState(col: TableColumn<T>, row: T): TableImageState;
+    /**
+     * @method isImageLoaded
+     * @description
+     * Whether the image of a cell finished loading. A cell without src counts
+     * as loaded, so it never shows an endless skeleton.
+     * @param col {TableColumn<T>} - The image column definition.
+     * @param row {T} - The data row being rendered.
      */
-    onImageError(event: Event, fallback?: string): void;
+    isImageLoaded(col: TableColumn<T>, row: T): boolean;
+    private getImageSrc;
+    private getImageStatus;
+    private setImageStatus;
+    private clearImageStatus;
     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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "reorderableRows": { "alias": "reorderableRows"; "required": false; "isSignal": true; }; "reorderHandleLabel": { "alias": "reorderHandleLabel"; "required": false; "isSignal": true; }; "reorderMovedLabel": { "alias": "reorderMovedLabel"; "required": false; "isSignal": true; }; "imageLoadingLabel": { "alias": "imageLoadingLabel"; "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; }; "hiddenColumns": { "alias": "hiddenColumns"; "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; }; }, { "data": "dataChange"; "rowReorder": "rowReorder"; "selection": "selectionChange"; "columnFilters": "columnFiltersChange"; "sortField": "sortFieldChange"; "sortOrder": "sortOrderChange"; }, never, never, true, never>;
 }
 
 export { TableComponent };
-export type { TableColumn, TableColumnType };
+export type { TableColumn, TableColumnType, TableImageState, TableRowReorderEvent };