@egose/shadcn-theme-ng 0.5.2 → 0.6.0

package/data-table/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "data-table",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^22.0.0",
+    "@tanstack/angular-table": ">=9.1.2 <10.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/data-table.mjs",
+  "typings": "types/data-table.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/data-table.d.ts",
+      "default": "./fesm2022/data-table.mjs"
+    }
+  },
+  "type": "module"
+}

package/data-table/types/data-table.d.ts

@@ -0,0 +1,483 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, TemplateRef } from '@angular/core';
+import * as _tanstack_angular_table from '@tanstack/angular-table';
+import { TableFeatures, RowData, CreatedFilterFn, CreatedSortFn, ColumnDef, SortingState, ColumnFiltersState, ColumnVisibilityState, RowSelectionState, Row, Header, Cell, CellData, SortDirection, Table } from '@tanstack/angular-table';
+import { HlmTableSize } from '@egose/shadcn-theme-ng/table';
+
+/**
+ * Per-column presentation hints, ported from the React `ColumnMeta` augmentation
+ * (`hideInTable` / `thumbnail`).
+ *
+ * - `hideInTable`: hide the column in table layout (still visible in grid layout).
+ * - `thumbnail`: render this cell as the grid-card banner instead of a label/value row.
+ *
+ * Derived from the `columnMeta` type-only slot (single source of truth) so
+ * `columnDef.meta` and this type can never drift apart. NOTE: the slot uses an
+ * inline literal rather than referencing this alias — a named back-reference
+ * makes ng-packagr emit a `data-table` self-import in the bundled
+ * declarations, which trips dependency-contract validation.
+ */
+type EgColumnMeta = EgDataTableFeatures extends {
+    columnMeta: infer M extends object;
+} ? M : never;
+/**
+ * Default feature set for `EgDataTable`.
+ *
+ * Mirrors the Spartan data-table guide: filtering, visibility, pagination,
+ * selection and sorting are opted in, with the built-in `includesString`
+ * filter and `alphanumeric` / `text` sort functions registered. Anything a
+ * caller does not need can be dropped by passing a custom `features` input.
+ *
+ * Keep this reference stable (module scope) — `injectTable()` re-evaluates
+ * its initializer on every signal read, so recreating features per render
+ * would thrash the table instance.
+ */
+declare const defaultEgDataTableFeatures: {
+    columnFilteringFeature: _tanstack_angular_table.TableFeature;
+    columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+    rowPaginationFeature: _tanstack_angular_table.TableFeature;
+    rowSelectionFeature: _tanstack_angular_table.TableFeature;
+    rowSortingFeature: _tanstack_angular_table.TableFeature;
+    filteredRowModel: (table: _tanstack_angular_table.Table<TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<TableFeatures, RowData>;
+    paginatedRowModel: (table: _tanstack_angular_table.Table<TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<TableFeatures, RowData>;
+    sortedRowModel: (table: _tanstack_angular_table.Table<TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<TableFeatures, RowData>;
+    filterFns: {
+        includesString: CreatedFilterFn<TableFeatures, RowData>;
+    };
+    sortFns: {
+        alphanumeric: CreatedSortFn<TableFeatures, RowData>;
+        text: CreatedSortFn<TableFeatures, RowData>;
+    };
+    columnMeta: {
+        readonly hideInTable?: boolean;
+        readonly thumbnail?: boolean;
+    };
+};
+/** Feature registry type — pass as first generic arg to `ColumnDef` / `Table` / `Row`. */
+type EgDataTableFeatures = typeof defaultEgDataTableFeatures;
+
+/**
+ * Standalone pagination controls with an optional rows-per-page selector.
+ *
+ * Reads the table from the nearest `[tanStackTable]` directive, so no table
+ * input or generics are needed and the same component works with any table.
+ * Wrap the usage site: `<div [tanStackTable]="table"><eg-data-table-pagination /></div>`.
+ *
+ * Page-size changes flow through `table.setPageSize()`: client-side tables
+ * re-paginate immediately, while server-driven (`manualPagination`) tables
+ * surface the change via their `onPaginationChange` handler (e.g. the
+ * `pageSizeChange` output of `EgDataTable`) so the caller can refetch.
+ */
+/** Pager navigation-button content: icons only, text labels only, or both. */
+type EgPaginationNavMode = 'icons' | 'text' | 'both';
+declare class EgDataTablePagination {
+    /** Show the `selected of total` status text. Set false when the host renders its own status. */
+    readonly showStatus: _angular_core.InputSignal<boolean>;
+    /** Show the rows-per-page selector. */
+    readonly showPageSize: _angular_core.InputSignal<boolean>;
+    /** Page-size options. The table's current size is appended when absent. */
+    readonly pageSizes: _angular_core.InputSignal<readonly number[]>;
+    /** Navigation-button content: icons only, text labels only, or both. */
+    readonly navMode: _angular_core.InputSignal<EgPaginationNavMode>;
+    /** Density of buttons, trigger, and meta texts. Type scale of buttons is untouched. */
+    readonly size: _angular_core.InputSignal<HlmTableSize>;
+    protected readonly _table: _angular_core.Signal<_tanstack_angular_table.AngularTable<_tanstack_angular_table.TableFeatures, _tanstack_angular_table.RowData>>;
+    protected readonly _pageCount: _angular_core.Signal<number>;
+    protected readonly _pageIndex: _angular_core.Signal<number>;
+    protected readonly _pageSize: _angular_core.Signal<number>;
+    protected readonly _canPrevious: _angular_core.Signal<boolean>;
+    protected readonly _canNext: _angular_core.Signal<boolean>;
+    protected readonly _showPager: _angular_core.Signal<boolean>;
+    /** Icon-only buttons stay square; labeled buttons size to their text. Merged by `hlmButton` via the `class` binding. */
+    protected readonly _navButtonClass: _angular_core.Signal<string>;
+    /** First/last buttons stay desktop-only. */
+    protected readonly _edgeNavButtonClass: _angular_core.Signal<string>;
+    /** Meta-text size per density (status, page indicator, rows-per-page label). */
+    protected readonly _metaTextClass: _angular_core.Signal<"tw:text-xs" | "tw:text-base" | "tw:text-sm">;
+    protected readonly _pageSizeOptions: _angular_core.Signal<readonly number[]>;
+    protected readonly _statusText: _angular_core.Signal<string>;
+    protected _onPageSizeChange(value: unknown): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTablePagination, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgDataTablePagination, "eg-data-table-pagination", never, { "showStatus": { "alias": "showStatus"; "required": false; "isSignal": true; }; "showPageSize": { "alias": "showPageSize"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; "navMode": { "alias": "navMode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Server-driven page slice, mirroring the React `PaginatedResponse` contract.
+ *
+ * - `items` is the current page slice (server already sliced it).
+ * - `total` is the total record count across all pages.
+ * - `limit` is the server page size, `offset` the zero-based record offset.
+ * - `hasPrevious` / `hasNext` drive the pager disabled state together with
+ *   the table's own `getCanPreviousPage()` / `getCanNextPage()`.
+ */
+interface EgPaginatedResponse<TData> {
+    readonly items: readonly TData[];
+    readonly total: number;
+    readonly limit: number;
+    readonly offset: number;
+    readonly hasPrevious: boolean;
+    readonly hasNext: boolean;
+}
+
+/** Presentation mode of `EgDataTable`. Two-way bindable via `layout`. */
+type EgDataTableLayout = 'table' | 'grid';
+/**
+ * Generic data table with TanStack-powered sorting, filtering, pagination,
+ * selection, column visibility, plus a React-parity grid layout.
+ *
+ * The caller passes `columns` (and optionally `gridColumns`) — everything else
+ * is owned internally with change notifications via outputs:
+ *
+ * - Client mode: pass `data` as an array. Pagination/sorting/filtering run in-browser.
+ *   `filterRows` can pre-filter the array before the built-in pipeline.
+ * - Server mode: pass `data` as a page slice (`{items,total,limit,offset,hasPrevious,hasNext}`)
+ *   with `manualPagination` set. The slice renders as-is — sorting/filtering
+ *   are not applied client-side. Page, sort and filter interactions emit
+ *   `pageChange` / `pageSizeChange` / `sortingChange` / `filterChange`
+ *   (`columnFiltersChange`) so the caller can fetch the next slice.
+ * - Selection: set `enableSelection` to auto-prepend a checkbox column;
+ *   selected rows are emitted via `selectionChange` (array of `TData`).
+ * - Grid mode: pass `gridColumns` to enable the layout toggle. Columns with
+ *   `meta: { hideInTable: true }` are table-hidden; `meta: { thumbnail: true }`
+ *   renders as the card banner.
+ */
+declare class EgDataTable<TData extends RowData> implements OnInit {
+    /** Column definitions for table layout (required). */
+    readonly columns: _angular_core.InputSignal<ColumnDef<{
+        columnFilteringFeature: _tanstack_angular_table.TableFeature;
+        columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+        rowPaginationFeature: _tanstack_angular_table.TableFeature;
+        rowSelectionFeature: _tanstack_angular_table.TableFeature;
+        rowSortingFeature: _tanstack_angular_table.TableFeature;
+        filteredRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        paginatedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        sortedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        filterFns: {
+            includesString: _tanstack_angular_table.CreatedFilterFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        sortFns: {
+            alphanumeric: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+            text: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        columnMeta: {
+            readonly hideInTable?: boolean;
+            readonly thumbnail?: boolean;
+        };
+    }, TData>[]>;
+    /** Column definitions for grid layout; falls back to `columns` when omitted. */
+    readonly gridColumns: _angular_core.InputSignal<ColumnDef<{
+        columnFilteringFeature: _tanstack_angular_table.TableFeature;
+        columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+        rowPaginationFeature: _tanstack_angular_table.TableFeature;
+        rowSelectionFeature: _tanstack_angular_table.TableFeature;
+        rowSortingFeature: _tanstack_angular_table.TableFeature;
+        filteredRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        paginatedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        sortedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        filterFns: {
+            includesString: _tanstack_angular_table.CreatedFilterFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        sortFns: {
+            alphanumeric: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+            text: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        columnMeta: {
+            readonly hideInTable?: boolean;
+            readonly thumbnail?: boolean;
+        };
+    }, TData>[] | undefined>;
+    /** Client rows, or a server page slice when `manualPagination` is set (`null` while loading). */
+    readonly data: _angular_core.InputSignal<EgPaginatedResponse<TData> | readonly TData[] | null>;
+    /** When true, `data` is a server page slice and the table uses TanStack `manualPagination`. Sorting and filtering are then display-only: the slice is shown as-is while `sortingChange` / `filterChange` (`columnFiltersChange`) notify the caller to refetch. */
+    readonly manualPagination: _angular_core.InputSignal<boolean>;
+    /** TanStack feature registry. Defaults to filtering + visibility + pagination + selection + sorting. */
+    readonly features: _angular_core.InputSignal<{
+        columnFilteringFeature: _tanstack_angular_table.TableFeature;
+        columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+        rowPaginationFeature: _tanstack_angular_table.TableFeature;
+        rowSelectionFeature: _tanstack_angular_table.TableFeature;
+        rowSortingFeature: _tanstack_angular_table.TableFeature;
+        filteredRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        paginatedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        sortedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        filterFns: {
+            includesString: _tanstack_angular_table.CreatedFilterFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        sortFns: {
+            alphanumeric: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+            text: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        columnMeta: {
+            readonly hideInTable?: boolean;
+            readonly thumbnail?: boolean;
+        };
+    }>;
+    readonly isLoading: _angular_core.InputSignal<boolean>;
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** When true, a checkbox column is auto-prepended and `selectionChange` emits the selected rows. */
+    readonly enableSelection: _angular_core.InputSignal<boolean>;
+    readonly hideFooter: _angular_core.InputSignal<boolean>;
+    /** Density of toolbar, table, and pagination chrome. Type scale is untouched. */
+    readonly size: _angular_core.InputSignal<HlmTableSize>;
+    /** Presentation mode. Two-way bindable: `[(layout)]`. Grid requires `gridColumns`. */
+    readonly layout: _angular_core.ModelSignal<EgDataTableLayout>;
+    /** Show the table/grid toggle (only rendered when `gridColumns` is set). */
+    readonly showLayoutToggle: _angular_core.InputSignal<boolean>;
+    /** Show the toolbar (filter input, plus the column-visibility dropdown when `showColumnToggle` is set). */
+    readonly showToolbar: _angular_core.InputSignal<boolean>;
+    /** Column id the toolbar filter input writes to (e.g. `'email'`). Empty means client-side filtering is skipped and keystrokes only emit `filterChange` (server-side pattern). */
+    readonly filterColumnId: _angular_core.InputSignal<string>;
+    readonly filterPlaceholder: _angular_core.InputSignal<string>;
+    /** Show the column-visibility dropdown inside the toolbar. Off by default; opt in per table. */
+    readonly showColumnToggle: _angular_core.InputSignal<boolean>;
+    /** Custom right-side toolbar content (e.g. action buttons) as a template. Renders the toolbar row even when `showToolbar` is false; built-ins stay on the left. */
+    readonly toolbarActions: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    /** Default client-side page size. Changing it later resets the pager to the new size. */
+    readonly defaultPageSize: _angular_core.InputSignal<number>;
+    /** Caller-provided frontend filter: receives all client rows, returns the kept rows. Runs before built-in filtering/sorting/pagination; ignored in server mode. Must be pure. */
+    readonly filterRows: _angular_core.InputSignal<((rows: readonly TData[]) => readonly TData[]) | null>;
+    /** Seeds the sorting state once at creation. Later changes are ignored — use `sortingChange` to stay in sync. */
+    readonly initialSorting: _angular_core.InputSignal<SortingState>;
+    /** Seeds the column-filter state once at creation. Later changes are ignored. */
+    readonly initialColumnFilters: _angular_core.InputSignal<ColumnFiltersState>;
+    /** Seeds the column-visibility state once at creation. Later changes are ignored. */
+    readonly initialColumnVisibility: _angular_core.InputSignal<ColumnVisibilityState>;
+    /** Seeds the row-selection state once at creation (keys are row ids). Later changes are ignored. */
+    readonly initialRowSelection: _angular_core.InputSignal<RowSelectionState>;
+    /** Show the rows-per-page selector in the footer pager. */
+    readonly showPageSize: _angular_core.InputSignal<boolean>;
+    /** Page-size options for the footer selector. The current size is appended when absent. */
+    readonly pageSizes: _angular_core.InputSignal<readonly number[]>;
+    /** Footer navigation-button content: icons only, text labels only, or both. */
+    readonly navMode: _angular_core.InputSignal<EgPaginationNavMode>;
+    readonly userClass: _angular_core.InputSignal<string>;
+    /** Emits the selected rows whenever selection changes (requires `enableSelection`). */
+    readonly selectionChange: _angular_core.OutputEmitterRef<readonly TData[]>;
+    /** Emits the target page index on pager navigation (primary hook for server fetching). */
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /** Emits the row's data when a row (table) or card (grid) is clicked. Clicks from nested interactive elements (buttons, links, inputs, checkboxes, selects) are ignored. */
+    readonly rowClick: _angular_core.OutputEmitterRef<TData>;
+    readonly sortingChange: _angular_core.OutputEmitterRef<SortingState>;
+    readonly columnFiltersChange: _angular_core.OutputEmitterRef<ColumnFiltersState>;
+    /** Emits the toolbar filter string whenever it changes. Empty when cleared or unset. */
+    readonly filterChange: _angular_core.OutputEmitterRef<string>;
+    readonly columnVisibilityChange: _angular_core.OutputEmitterRef<ColumnVisibilityState>;
+    protected readonly _containerClass: _angular_core.Signal<string>;
+    /** Inline TH sort-button footprint per density. Merged by `hlmButton` via the `class` binding. */
+    protected readonly _sortButtonClass: _angular_core.Signal<string>;
+    private readonly _sorting;
+    private readonly _columnFilters;
+    private readonly _columnVisibility;
+    private readonly _rowSelection;
+    private readonly _clientPageIndex;
+    private readonly _clientPageSize;
+    private readonly _isServer;
+    /** The server page slice when in server mode; `null` for client data, misuse shapes, or `null` while loading. */
+    private readonly _page;
+    private readonly _items;
+    private readonly _serverPageCount;
+    private readonly _serverPageIndex;
+    private readonly _paginationState;
+    private readonly _selectionHelper;
+    /** Caller columns + auto-injected selection column + layout filtering. */
+    protected readonly _finalColumns: _angular_core.Signal<ColumnDef<{
+        columnFilteringFeature: _tanstack_angular_table.TableFeature;
+        columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+        rowPaginationFeature: _tanstack_angular_table.TableFeature;
+        rowSelectionFeature: _tanstack_angular_table.TableFeature;
+        rowSortingFeature: _tanstack_angular_table.TableFeature;
+        filteredRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        paginatedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        sortedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        filterFns: {
+            includesString: _tanstack_angular_table.CreatedFilterFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        sortFns: {
+            alphanumeric: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+            text: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        columnMeta: {
+            readonly hideInTable?: boolean;
+            readonly thumbnail?: boolean;
+        };
+    }, TData>[]>;
+    protected readonly _table: _tanstack_angular_table.AngularTable<{
+        columnFilteringFeature: _tanstack_angular_table.TableFeature;
+        columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+        rowPaginationFeature: _tanstack_angular_table.TableFeature;
+        rowSelectionFeature: _tanstack_angular_table.TableFeature;
+        rowSortingFeature: _tanstack_angular_table.TableFeature;
+        filteredRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        paginatedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        sortedRowModel: (table: _tanstack_angular_table.Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        filterFns: {
+            includesString: _tanstack_angular_table.CreatedFilterFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        sortFns: {
+            alphanumeric: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+            text: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        columnMeta: {
+            readonly hideInTable?: boolean;
+            readonly thumbnail?: boolean;
+        };
+    }, TData>;
+    private readonly _emitSelection;
+    /**
+     * Seeds internal state from the `initial*` inputs. Runs in `ngOnInit` (after
+     * first bindings, before first render) exactly once, so inline-literal
+     * bindings (new references every change detection) cannot clobber user
+     * interaction afterwards. Values are copied to avoid aliasing caller data.
+     */
+    ngOnInit(): void;
+    protected readonly _hasGrid: _angular_core.Signal<boolean>;
+    protected readonly _effectiveLayout: _angular_core.Signal<EgDataTableLayout>;
+    protected readonly _showLayoutToggle: _angular_core.Signal<boolean>;
+    protected readonly _visibleColumnCount: _angular_core.Signal<number>;
+    protected readonly _statusText: _angular_core.Signal<string>;
+    protected _onLayoutToggle(value: unknown): void;
+    protected _onFilterInput(event: Event): void;
+    /**
+     * Row/card click handler. Ignores clicks originating from nested interactive
+     * elements (selection checkboxes, action buttons, links, inputs) so those
+     * controls keep working without also firing `rowClick`.
+     */
+    protected _onRowClick(event: MouseEvent, row: Row<EgDataTableFeatures, TData>): void;
+    /** Show the inline TH sort button only for sortable plain-string headers (component headers own their UI). */
+    protected _showHeaderSortButton(header: Header<EgDataTableFeatures, TData, unknown>): boolean;
+    protected _toggleHeaderSorting(header: Header<EgDataTableFeatures, TData, unknown>): void;
+    protected _selectionCell(row: Row<EgDataTableFeatures, TData>): Cell<EgDataTableFeatures, TData, CellData> | undefined;
+    protected _thumbnailCell(row: Row<EgDataTableFeatures, TData>): Cell<EgDataTableFeatures, TData, CellData> | undefined;
+    protected _contentCells(row: Row<EgDataTableFeatures, TData>): Cell<EgDataTableFeatures, TData, CellData>[];
+    protected _cellLabel(cell: Cell<EgDataTableFeatures, TData, CellData>): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTable<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgDataTable<any>, "eg-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "gridColumns": { "alias": "gridColumns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "manualPagination": { "alias": "manualPagination"; "required": false; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "hideFooter": { "alias": "hideFooter"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "showLayoutToggle": { "alias": "showLayoutToggle"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "filterColumnId": { "alias": "filterColumnId"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "showColumnToggle": { "alias": "showColumnToggle"; "required": false; "isSignal": true; }; "toolbarActions": { "alias": "toolbarActions"; "required": false; "isSignal": true; }; "defaultPageSize": { "alias": "defaultPageSize"; "required": false; "isSignal": true; }; "filterRows": { "alias": "filterRows"; "required": false; "isSignal": true; }; "initialSorting": { "alias": "initialSorting"; "required": false; "isSignal": true; }; "initialColumnFilters": { "alias": "initialColumnFilters"; "required": false; "isSignal": true; }; "initialColumnVisibility": { "alias": "initialColumnVisibility"; "required": false; "isSignal": true; }; "initialRowSelection": { "alias": "initialRowSelection"; "required": false; "isSignal": true; }; "showPageSize": { "alias": "showPageSize"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; "navMode": { "alias": "navMode"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "selectionChange": "selectionChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "rowClick": "rowClick"; "sortingChange": "sortingChange"; "columnFiltersChange": "columnFiltersChange"; "filterChange": "filterChange"; "columnVisibilityChange": "columnVisibilityChange"; }, never, never, true, never>;
+}
+
+/**
+ * Minimal column surface `EgDataTableColumnHeader` needs.
+ *
+ * A real TanStack `Column` always satisfies this (its methods only use
+ * primitive params/returns), while the structural type keeps this component
+ * generic over any `TData`/`TValue` without variance friction when wiring
+ * `flexRenderComponent(..., { inputs: { column, title } })`.
+ */
+interface EgSortableColumn {
+    readonly id: string;
+    getCanSort(): boolean;
+    getIsSorted(): false | SortDirection;
+    toggleSorting(desc?: boolean): void;
+    toggleVisibility(value?: boolean): void;
+}
+/**
+ * Sortable + hideable column header.
+ *
+ * Render via `flexRenderComponent(EgDataTableColumnHeader, { inputs: { column, title } })`
+ * so the extra `title` input flows alongside the flex-render `column` context.
+ * Non-sortable columns render a plain label.
+ */
+declare class EgDataTableColumnHeader {
+    readonly column: _angular_core.InputSignal<EgSortableColumn>;
+    readonly title: _angular_core.InputSignal<string>;
+    /** Density of the trigger button. */
+    readonly size: _angular_core.InputSignal<HlmTableSize>;
+    protected readonly _sorted: _angular_core.Signal<false | SortDirection>;
+    /** Height per density. Merged by `hlmButton`. */
+    protected readonly _buttonClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTableColumnHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgDataTableColumnHeader, "eg-data-table-column-header", never, { "column": { "alias": "column"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Column-visibility toggle.
+ *
+ * Reads the table from the nearest `[tanStackTable]` directive — no table
+ * input or generics needed. Only columns with an `accessorFn` that can hide
+ * are listed (display columns like `select` / `actions` stay fixed).
+ */
+declare class EgDataTableViewOptions {
+    /** Density of the toggle button. */
+    readonly size: _angular_core.InputSignal<HlmTableSize>;
+    protected readonly _table: _angular_core.Signal<_tanstack_angular_table.AngularTable<_tanstack_angular_table.TableFeatures, _tanstack_angular_table.RowData>>;
+    /** Height per density; hidden below `lg` like the pager edge buttons. Merged by `hlmButton`. */
+    protected readonly _buttonClass: _angular_core.Signal<string>;
+    protected readonly _hidableColumns: _angular_core.Signal<_tanstack_angular_table.Column<_tanstack_angular_table.TableFeatures, _tanstack_angular_table.RowData, unknown>[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTableViewOptions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgDataTableViewOptions, "eg-data-table-view-options", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Header selection checkbox: toggles all page rows.
+ *
+ * Generic over `TData` so the same component works with any table; the table
+ * instance is passed explicitly (no DI needed inside column definitions).
+ * `HlmCheckbox.checked` accepts `'indeterminate'`, so the tri-state is derived
+ * via `computed` instead of a separate input.
+ */
+declare class EgTableHeadSelection<TData extends RowData> {
+    readonly table: _angular_core.InputSignal<Table<{
+        columnFilteringFeature: _tanstack_angular_table.TableFeature;
+        columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+        rowPaginationFeature: _tanstack_angular_table.TableFeature;
+        rowSelectionFeature: _tanstack_angular_table.TableFeature;
+        rowSortingFeature: _tanstack_angular_table.TableFeature;
+        filteredRowModel: (table: Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        paginatedRowModel: (table: Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        sortedRowModel: (table: Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        filterFns: {
+            includesString: _tanstack_angular_table.CreatedFilterFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        sortFns: {
+            alphanumeric: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+            text: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        columnMeta: {
+            readonly hideInTable?: boolean;
+            readonly thumbnail?: boolean;
+        };
+    }, TData>>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly _checked: _angular_core.Signal<boolean | "indeterminate">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgTableHeadSelection<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgTableHeadSelection<any>, "eg-table-head-selection", never, { "table": { "alias": "table"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Row selection checkbox: toggles a single row.
+ */
+declare class EgTableRowSelection<TData extends RowData> {
+    readonly row: _angular_core.InputSignal<Row<{
+        columnFilteringFeature: _tanstack_angular_table.TableFeature;
+        columnVisibilityFeature: _tanstack_angular_table.TableFeature;
+        rowPaginationFeature: _tanstack_angular_table.TableFeature;
+        rowSelectionFeature: _tanstack_angular_table.TableFeature;
+        rowSortingFeature: _tanstack_angular_table.TableFeature;
+        filteredRowModel: (table: Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        paginatedRowModel: (table: Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        sortedRowModel: (table: Table<_tanstack_angular_table.TableFeatures, RowData>) => () => _tanstack_angular_table.RowModel<_tanstack_angular_table.TableFeatures, RowData>;
+        filterFns: {
+            includesString: _tanstack_angular_table.CreatedFilterFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        sortFns: {
+            alphanumeric: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+            text: _tanstack_angular_table.CreatedSortFn<_tanstack_angular_table.TableFeatures, RowData>;
+        };
+        columnMeta: {
+            readonly hideInTable?: boolean;
+            readonly thumbnail?: boolean;
+        };
+    }, TData>>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgTableRowSelection<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgTableRowSelection<any>, "eg-table-row-selection", never, { "row": { "alias": "row"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const EgDataTableImports: readonly [typeof EgDataTable, typeof EgDataTableColumnHeader, typeof EgDataTablePagination, typeof EgDataTableViewOptions, typeof EgTableHeadSelection, typeof EgTableRowSelection];
+declare class EgDataTableModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTableModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<EgDataTableModule, never, [typeof EgDataTable, typeof EgDataTableColumnHeader, typeof EgDataTablePagination, typeof EgDataTableViewOptions, typeof EgTableHeadSelection, typeof EgTableRowSelection], [typeof EgDataTable, typeof EgDataTableColumnHeader, typeof EgDataTablePagination, typeof EgDataTableViewOptions, typeof EgTableHeadSelection, typeof EgTableRowSelection]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<EgDataTableModule>;
+}
+
+export { EgDataTable, EgDataTableColumnHeader, EgDataTableImports, EgDataTableModule, EgDataTablePagination, EgDataTableViewOptions, EgTableHeadSelection, EgTableRowSelection, defaultEgDataTableFeatures };
+export type { EgColumnMeta, EgDataTableFeatures, EgDataTableLayout, EgPaginatedResponse, EgPaginationNavMode, EgSortableColumn };

package/dropdown-menu/README.md

@@ -136,6 +136,8 @@ Host exposes `data-state`, `data-side`, and animation classes derived from the t
 
 CDK bindings (via `hostDirectives`): `cdkMenuTriggerFor: hlmDropdownMenuTrigger` (the `ng-template`), `cdkMenuTriggerData: hlmDropdownMenuTriggerData`; outputs `cdkMenuOpened: hlmDropdownMenuOpened`, `cdkMenuClosed: hlmDropdownMenuClosed`.
 
+> Do not nest the trigger inside another `hlmDropdownMenu` element. The outer element acts as a parent `CdkMenu`, turning the trigger into a submenu trigger that ignores menu-stack close events — the panel will no longer dismiss on outside clicks. Keep root triggers as siblings of their `ng-template` (see Anatomy above).
+
 ### `HlmDropdownMenuItem` — `[hlmDropdownMenuItem], hlm-dropdown-menu-item`
 
 | Input      | Type                         | Default     | Description                                                  |

package/form-checkbox/README.md

@@ -83,29 +83,29 @@ Selector (from source): `eg-form-checkbox` (standalone component).
 
 ### `EgFormCheckbox` — `eg-form-checkbox`
 
-| Input           | Type                  | Default | Description                                                                                                                                                                                      |
-| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `controlName`   | `string`              | `''`    | `formControlName` key inside the parent `FormGroup`. **Required.**                                                                                                                               |
-| `label`         | `string`              | `''`    | Label text next to the checkbox.                                                                                                                                                                 |
-| `error`         | `string \| undefined` | —       | Error text shown when the control is invalid + touched/dirty/submitted (via `EgFormField` switching).                                                                                           |
-| `autoError`     | `boolean`             | `true`  | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
-| `hint`          | `string \| undefined` | —       | Hint text shown when there is no error to display.                                                                                                                                               |
-| `controlId`     | `string \| undefined` | —       | Explicit control id (first priority for `effectiveId`).                                                                                                                                          |
-| `id`            | `string \| undefined` | —       | Fallback id (second priority).                                                                                                                                                                   |
-| `name`          | `string \| undefined` | —       | Checkbox `name` attribute (defaults to `controlName`).                                                                                                                                           |
-| `checked`       | `boolean`             | `false` | Initial checked state passed to `hlm-checkbox`.                                                                                                                                                  |
+| Input           | Type                  | Default | Description                                                                                                                                                                                                                                             |
+| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `controlName`   | `string`              | `''`    | `formControlName` key inside the parent `FormGroup`. **Required.**                                                                                                                                                                                      |
+| `label`         | `string`              | `''`    | Label text next to the checkbox.                                                                                                                                                                                                                        |
+| `error`         | `string \| undefined` | —       | Error text shown when the control is invalid + touched/dirty/submitted (via `EgFormField` switching).                                                                                                                                                   |
+| `autoError`     | `boolean`             | `true`  | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`.                                                        |
+| `hint`          | `string \| undefined` | —       | Hint text shown when there is no error to display.                                                                                                                                                                                                      |
+| `controlId`     | `string \| undefined` | —       | Explicit control id (first priority for `effectiveId`).                                                                                                                                                                                                 |
+| `id`            | `string \| undefined` | —       | Fallback id (second priority).                                                                                                                                                                                                                          |
+| `name`          | `string \| undefined` | —       | Checkbox `name` attribute (defaults to `controlName`).                                                                                                                                                                                                  |
+| `checked`       | `boolean`             | `false` | Initial checked state passed to `hlm-checkbox`.                                                                                                                                                                                                         |
 | `required`      | `boolean`             | `false` | Shows a red `*` and sets checkbox `required` (boolean-coerced, so bare `required` works). Presentation only — it does not validate by itself; add `Validators.requiredTrue` to the `FormControl` or the control is never invalid and no error is shown. |
-| `disabled`      | `boolean`             | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control).                                                                                                           |
-| `class`         | `ClassValue`          | `''`    | Extra host classes.                                                                                                                                                                              |
-| `checkboxClass` | `string`              | `''`    | Extra classes for `hlm-checkbox`.                                                                                                                                                                |
-| `labelClass`    | `string`              | `''`    | Extra classes for the label.                                                                                                                                                                     |
-| `errorClass`    | `string`              | `''`    | Extra classes for `hlm-error`.                                                                                                                                                                   |
-| `hintClass`     | `string`              | `''`    | Extra classes for `hlm-hint`.                                                                                                                                                                    |
-
-| Member               | Description                                                                                                                          |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `effectiveId`        | `controlId() \|\| id() \|\| generated` — wired to checkbox `id` and label `for`.                                                     |
-| `errorId` / `hintId` | `effectiveId + '-error' / '-hint'` for `aria-describedby`.                                                                           |
+| `disabled`      | `boolean`             | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control).                                                                                                                                                                  |
+| `class`         | `ClassValue`          | `''`    | Extra host classes.                                                                                                                                                                                                                                     |
+| `checkboxClass` | `string`              | `''`    | Extra classes for `hlm-checkbox`.                                                                                                                                                                                                                       |
+| `labelClass`    | `string`              | `''`    | Extra classes for the label.                                                                                                                                                                                                                            |
+| `errorClass`    | `string`              | `''`    | Extra classes for `hlm-error`.                                                                                                                                                                                                                          |
+| `hintClass`     | `string`              | `''`    | Extra classes for `hlm-hint`.                                                                                                                                                                                                                           |
+
+| Member               | Description                                                                                                                                    |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `effectiveId`        | `controlId() \|\| id() \|\| generated` — wired to checkbox `id` and label `for`.                                                               |
+| `errorId` / `hintId` | `effectiveId + '-error' / '-hint'` for `aria-describedby`.                                                                                     |
 | `describedBy()`      | Returns `errorId` when `error()` is set and the control is invalid + dirty/touched/submitted, else `hintId` when `hint()` is set, else `null`. |
 
 Requires a `[formGroup]` ancestor: the component injects `FormGroupDirective` and provides