@egose/shadcn-theme-ng-tw 0.6.0 → 0.6.1

package/data-table/fesm2022/data-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, model, output, signal, linkedSignal, effect, NgModule } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, model, output, signal, linkedSignal, effect, untracked, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton } from '@egose/shadcn-theme-ng-tw/button';
 import { HlmCard, HlmCardContent } from '@egose/shadcn-theme-ng-tw/card';
@@ -518,6 +518,16 @@ class EgDataTable {
     /** Client rows, or a server page slice when `manualPagination` is set (`null` while loading). */
     data = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Pure stable identity callback, e.g. `(record) => record.id`. Return a unique
+     * string per entity, independent of position, and keep the callback reference stable.
+     * Selection survives refreshes only for IDs still in the supplied rows (after
+     * `filterRows`); server selection is limited to the loaded slice. Without this
+     * callback, IDs are positional and replacing the rows clears selection.
+     * Changing the callback clears selection. Update data immutably.
+     */
+    getRowId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "getRowId" }] : /* istanbul ignore next */ []));
     /** 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. */
     manualPagination = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "manualPagination" }] : /* istanbul ignore next */ []));
@@ -571,7 +581,7 @@ class EgDataTable {
     /** Seeds the column-visibility state once at creation. Later changes are ignored. */
     initialColumnVisibility = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "initialColumnVisibility" }] : /* istanbul ignore next */ []));
-    /** Seeds the row-selection state once at creation (keys are row ids). Later changes are ignored. */
+    /** Seeds selection once for current rows: keys come from `getRowId`, or positional indices without it. Missing IDs are discarded. Later changes are ignored. */
     initialRowSelection = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "initialRowSelection" }] : /* istanbul ignore next */ []));
     /** Show the rows-per-page selector in the footer pager. */
@@ -584,7 +594,7 @@ class EgDataTable {
     navMode = input('icons', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navMode" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    /** Emits the selected rows whenever selection changes (requires `enableSelection`). */
+    /** Emits on init and when selected row identities/order or object references change. Includes rows hidden by built-in filters/client pagination, but never rows absent from `data`/`filterRows`. */
     selectionChange = output();
     /** Emits the target page index on pager navigation (primary hook for server fetching). */
     pageChange = output();
@@ -607,8 +617,6 @@ class EgDataTable {
     ...(ngDevMode ? [{ debugName: "_columnFilters" }] : /* istanbul ignore next */ []));
     _columnVisibility = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_columnVisibility" }] : /* istanbul ignore next */ []));
-    _rowSelection = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_rowSelection" }] : /* istanbul ignore next */ []));
     _clientPageIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_clientPageIndex" }] : /* istanbul ignore next */ []));
     // Linked so the bound `defaultPageSize` applies once inputs are set, while
@@ -640,6 +648,32 @@ class EgDataTable {
         return filter ? filter(rows) : rows;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    // TanStack uses data-reference changes to reset pagination. State/layout
+    // updates must not look like a new data set (including selecting page rows).
+    _tableItems = computed(() => {
+        // A different identity function must also rebuild TanStack's cached rows.
+        this.getRowId();
+        return [...this._items()];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tableItems" }] : /* istanbul ignore next */ []));
+    // Reconcile synchronously with the data source, before either TanStack or the
+    // output can observe old positional keys against new records. An effect-based
+    // reset would permit a transient wrong-entity selection.
+    _rowSelection = linkedSignal({ ...(ngDevMode ? { debugName: "_rowSelection" } : /* istanbul ignore next */ {}), source: () => ({ items: this._items(), getRowId: this.getRowId() }),
+        computation: (source, previous) => {
+            if (!previous || source.getRowId !== previous.source.getRowId)
+                return {};
+            if (!source.getRowId && source.items !== previous.source.items)
+                return {};
+            return this._keepCurrentSelection(previous.value);
+        } });
+    _keepCurrentSelection(selection) {
+        const getRowId = this.getRowId();
+        return Object.fromEntries(this._items()
+            .map((row, index) => (getRowId ? getRowId(row) : String(index)))
+            .filter((id) => Object.hasOwn(selection, id) && selection[id])
+            .map((id) => [id, true]));
+    }
     _serverPageCount = computed(() => {
         const paginated = this._page();
         if (!paginated || paginated.limit <= 0)
@@ -686,7 +720,8 @@ class EgDataTable {
         return {
             features: this.features(),
             columns: this._finalColumns(),
-            data: [...this._items()],
+            data: this._tableItems(),
+            getRowId: this.getRowId(),
             manualPagination: server,
             manualSorting: server,
             manualFiltering: server,
@@ -736,10 +771,11 @@ class EgDataTable {
             },
         };
     });
+    _selectedRows = computed(() => this._table.getSelectedRowModel().rows.map((row) => row.original), { ...(ngDevMode ? { debugName: "_selectedRows" } : /* istanbul ignore next */ {}), equal: (a, b) => a.length === b.length && a.every((row, index) => row === b[index]) });
     _emitSelection = effect(() => {
-        this._rowSelection();
-        const selected = this._table.getSelectedRowModel().rows.map((row) => row.original);
-        this.selectionChange.emit(selected);
+        const selected = this._selectedRows();
+        // Consumer handlers may read signals; those reads must not retrigger us.
+        untracked(() => this.selectionChange.emit(selected));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_emitSelection" }] : /* istanbul ignore next */ []));
     /**
@@ -752,7 +788,7 @@ class EgDataTable {
         this._sorting.set([...this.initialSorting()]);
         this._columnFilters.set([...this.initialColumnFilters()]);
         this._columnVisibility.set({ ...this.initialColumnVisibility() });
-        this._rowSelection.set({ ...this.initialRowSelection() });
+        this._rowSelection.set(this._keepCurrentSelection(this.initialRowSelection()));
     }
     _hasGrid = computed(() => this.gridColumns() !== undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_hasGrid" }] : /* istanbul ignore next */ []));
@@ -832,7 +868,7 @@ class EgDataTable {
         return cell.column.id.replace(/_/g, ' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTable, isStandalone: true, selector: "eg-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gridColumns: { classPropertyName: "gridColumns", publicName: "gridColumns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showLayoutToggle: { classPropertyName: "showLayoutToggle", publicName: "showLayoutToggle", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, filterColumnId: { classPropertyName: "filterColumnId", publicName: "filterColumnId", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showColumnToggle: { classPropertyName: "showColumnToggle", publicName: "showColumnToggle", isSignal: true, isRequired: false, transformFunction: null }, toolbarActions: { classPropertyName: "toolbarActions", publicName: "toolbarActions", isSignal: true, isRequired: false, transformFunction: null }, defaultPageSize: { classPropertyName: "defaultPageSize", publicName: "defaultPageSize", isSignal: true, isRequired: false, transformFunction: null }, filterRows: { classPropertyName: "filterRows", publicName: "filterRows", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null }, initialColumnFilters: { classPropertyName: "initialColumnFilters", publicName: "initialColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, initialColumnVisibility: { classPropertyName: "initialColumnVisibility", publicName: "initialColumnVisibility", isSignal: true, isRequired: false, transformFunction: null }, initialRowSelection: { classPropertyName: "initialRowSelection", publicName: "initialRowSelection", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", selectionChange: "selectionChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", rowClick: "rowClick", sortingChange: "sortingChange", columnFiltersChange: "columnFiltersChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTable, isStandalone: true, selector: "eg-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gridColumns: { classPropertyName: "gridColumns", publicName: "gridColumns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showLayoutToggle: { classPropertyName: "showLayoutToggle", publicName: "showLayoutToggle", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, filterColumnId: { classPropertyName: "filterColumnId", publicName: "filterColumnId", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showColumnToggle: { classPropertyName: "showColumnToggle", publicName: "showColumnToggle", isSignal: true, isRequired: false, transformFunction: null }, toolbarActions: { classPropertyName: "toolbarActions", publicName: "toolbarActions", isSignal: true, isRequired: false, transformFunction: null }, defaultPageSize: { classPropertyName: "defaultPageSize", publicName: "defaultPageSize", isSignal: true, isRequired: false, transformFunction: null }, filterRows: { classPropertyName: "filterRows", publicName: "filterRows", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null }, initialColumnFilters: { classPropertyName: "initialColumnFilters", publicName: "initialColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, initialColumnVisibility: { classPropertyName: "initialColumnVisibility", publicName: "initialColumnVisibility", isSignal: true, isRequired: false, transformFunction: null }, initialRowSelection: { classPropertyName: "initialRowSelection", publicName: "initialRowSelection", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", selectionChange: "selectionChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", rowClick: "rowClick", sortingChange: "sortingChange", columnFiltersChange: "columnFiltersChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange" }, providers: [
             provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideLayoutGrid, lucideLayoutList }),
         ], ngImport: i0, template: `
     <div [class]="_containerClass()">
@@ -1281,7 +1317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gridColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], showLayoutToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLayoutToggle", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], filterColumnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterColumnId", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showColumnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnToggle", required: false }] }], toolbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarActions", required: false }] }], defaultPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPageSize", required: false }] }], filterRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRows", required: false }] }], initialSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSorting", required: false }] }], initialColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnFilters", required: false }] }], initialColumnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnVisibility", required: false }] }], initialRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialRowSelection", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], navMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "navMode", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortingChange: [{ type: i0.Output, args: ["sortingChange"] }], columnFiltersChange: [{ type: i0.Output, args: ["columnFiltersChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnVisibilityChange: [{ type: i0.Output, args: ["columnVisibilityChange"] }] } });
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gridColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], showLayoutToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLayoutToggle", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], filterColumnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterColumnId", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showColumnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnToggle", required: false }] }], toolbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarActions", required: false }] }], defaultPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPageSize", required: false }] }], filterRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRows", required: false }] }], initialSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSorting", required: false }] }], initialColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnFilters", required: false }] }], initialColumnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnVisibility", required: false }] }], initialRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialRowSelection", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], navMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "navMode", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortingChange: [{ type: i0.Output, args: ["sortingChange"] }], columnFiltersChange: [{ type: i0.Output, args: ["columnFiltersChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnVisibilityChange: [{ type: i0.Output, args: ["columnVisibilityChange"] }] } });
 
 /**
  * Sortable + hideable column header.

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

@@ -188,6 +188,15 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     }, 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>;
+    /**
+     * Pure stable identity callback, e.g. `(record) => record.id`. Return a unique
+     * string per entity, independent of position, and keep the callback reference stable.
+     * Selection survives refreshes only for IDs still in the supplied rows (after
+     * `filterRows`); server selection is limited to the loaded slice. Without this
+     * callback, IDs are positional and replacing the rows clears selection.
+     * Changing the callback clears selection. Update data immutably.
+     */
+    readonly getRowId: _angular_core.InputSignal<((row: TData) => string) | undefined>;
     /** 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. */
@@ -242,7 +251,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     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. */
+    /** Seeds selection once for current rows: keys come from `getRowId`, or positional indices without it. Missing IDs are discarded. 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>;
@@ -251,7 +260,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     /** 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`). */
+    /** Emits on init and when selected row identities/order or object references change. Includes rows hidden by built-in filters/client pagination, but never rows absent from `data`/`filterRows`. */
     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>;
@@ -269,13 +278,15 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     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 _tableItems;
+    private readonly _rowSelection;
+    private _keepCurrentSelection;
     private readonly _serverPageCount;
     private readonly _serverPageIndex;
     private readonly _paginationState;
@@ -323,6 +334,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
             readonly thumbnail?: boolean;
         };
     }, TData>;
+    private readonly _selectedRows;
     private readonly _emitSelection;
     /**
      * Seeds internal state from the `initial*` inputs. Runs in `ngOnInit` (after
@@ -352,7 +364,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     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>;
+    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; }; "getRowId": { "alias": "getRowId"; "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>;
 }
 
 /**

package/date-picker/README.md

@@ -135,6 +135,38 @@ Real selectors (from source):
 
 ## API reference
 
+### User commits, invalid drafts, and programmatic writes
+
+The single, range and multi text inputs commit on **blur or Enter**. Both parsed and transformed values
+must have a finite `getTime` through the configured Spartan date adapter and satisfy inclusive whole-day
+`min`/`max` bounds (`startOfDay(min)` through `endOfDay(max)`). Provide matching parsing, formatting and
+pure transformation callbacks when using a custom adapter/date type. A transformed range must be ordered;
+custom transforms may sort endpoints. The default range parser still treats one date as a same-day range,
+but an explicitly unparseable second endpoint is rejected.
+
+For multi selection, `maxSelection` caps the raw and transformed array counts. `minSelection` is the
+calendar's **deselection floor**: reductions below it are rejected, while growth from empty is allowed.
+Supply unique dates. When the calendar proposes resetting a full selection to one new date, that reset
+must also satisfy the floor. Rejected calendar commits restore the previous selection without user emissions.
+
+On rejection the committed value stays unchanged, no `dateChange`/CVA `onChange` fires, and the input
+preserves editable text across blur, Enter and refocus. `inputInvalid()` exposes local rejection state;
+the native input receives `aria-invalid="true"` and invalid styling, combined with `forceInvalid`.
+The interaction touches the form control but does not install an Angular validator or overwrite its
+errors: form validators continue to see the last committed value. If unresolved drafts should block
+submission, include `inputInvalid()` in that decision. Use `ariaDescribedby` to associate explanatory text.
+
+A successful text/calendar commit, explicit clear, or external value write clears the local rejection.
+Empty text and the clear button bypass transforms and the selection floor, emitting `null` (single/range)
+or `[]` (multi); whitespace is passed to the parser. Enter keeps edit formatting for a subsequent blur;
+blur restores display formatting. Disabled/readonly text inputs do not commit or clear.
+
+`updateDate(value)` returns a boolean indicating whether a user commit was accepted. Programmatic CVA
+`writeValue` applies configured transforms without enforcing user constraints or emitting; it replaces
+rejected drafts, including repeated same-value/null writes. `[date]` remains a direct, untransformed
+standalone input. `reset()` is an explicit programmatic clear and emits. Month/year retains its existing
+brain-input lifecycle; this constraint/draft contract applies to single, range and multi pickers.
+
 ### `HlmDatePicker` — `hlm-date-picker`
 
 Single-date picker. Generic `<T>` (usually `Date`). Implements `BrnDatePickerBase<T>` + `ControlValueAccessor`, hosts `BrnFieldControl`.
@@ -230,15 +262,15 @@ Outputs/methods mirror `HlmDatePicker` (`dateChange: T | null`, `updateDate`, `o
 
 `HlmDatePickerInput<T>`, `HlmDateMultiInput<T>`, `HlmDateRangeInput<T>`, `HlmMonthYearInput<T>` extend `BrnDateInput` (inheriting `placeholder`, `inputId`, disabled/invalid wiring, clear-button and calendar-button behavior) and add:
 
-| Input                                  | Type                                                                            | Default                           | Notes                                                                  |
-| -------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------- |
-| `parseDate`                            | `(value: string) => T \| null` (or `T[] \| null` / `[T,T] \| null` per variant) | from matching `provideHlm*Config` | Return `null` for invalid text; picker clears while text is preserved. |
-| `formatInputDate` / `formatInputDates` | `(date) => string`                                                              | from config                       | Edit format shown while focused.                                       |
-| `ariaLabel` / `ariaDescribedby`        | `string`                                                                        | —                                 | Accessible labelling for the inner `<input>`.                          |
-| `name`                                 | `string \| undefined`                                                           | —                                 | Native `name` forwarded to the inner `<input>`.                        |
-| `readonly`                             | `boolean`                                                                       | `false`                           | Native `readonly` forwarded to the inner `<input>`.                    |
-| `class`                                | `ClassValue`                                                                    | `''`                              | Extra classes on the host group container.                             |
-| `inputClass`                           | `ClassValue`                                                                    | `''`                              | Extra classes on the inner `<input>` (e.g. text size).                 |
+| Input                                  | Type                                                                            | Default                           | Notes                                                                                              |
+| -------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `parseDate`                            | `(value: string) => T \| null` (or `T[] \| null` / `[T,T] \| null` per variant) | from matching `provideHlm*Config` | Return `null` for invalid text; single/range/multi preserve the committed value and rejected text. |
+| `formatInputDate` / `formatInputDates` | `(date) => string`                                                              | from config                       | Edit format shown while focused.                                                                   |
+| `ariaLabel` / `ariaDescribedby`        | `string`                                                                        | —                                 | Accessible labelling for the inner `<input>`.                                                      |
+| `name`                                 | `string \| undefined`                                                           | —                                 | Native `name` forwarded to the inner `<input>`.                                                    |
+| `readonly`                             | `boolean`                                                                       | `false`                           | Native `readonly` forwarded to the inner `<input>`.                                                |
+| `class`                                | `ClassValue`                                                                    | `''`                              | Extra classes on the host group container.                                                         |
+| `inputClass`                           | `ClassValue`                                                                    | `''`                              | Extra classes on the inner `<input>` (e.g. text size).                                             |
 
 ### `HlmDatePickerTrigger` — `hlm-date-picker-trigger`