@egose/shadcn-theme-ng 0.6.0 → 0.6.2

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/button';
 import { HlmCard, HlmCardContent } from '@egose/shadcn-theme-ng/card';
@@ -154,7 +154,7 @@ class EgDataTableViewOptions {
         .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_hidableColumns" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableViewOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableViewOptions, isStandalone: true, selector: "eg-data-table-view-options", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideSettings2 })], ngImport: i0, template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuCheckbox, selector: "[hlmDropdownMenuCheckbox],[hlmDropdownMenuCheckboxItem]", inputs: ["inset"] }, { kind: "component", type: i1$1.HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }, { kind: "directive", type: i1$1.HlmDropdownMenuLabel, selector: "[hlmDropdownMenuLabel],hlm-dropdown-menu-label", inputs: ["inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableViewOptions, isStandalone: true, selector: "eg-data-table-view-options", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideSettings2 })], ngImport: i0, template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm size=\"sm\" name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuCheckbox, selector: "[hlmDropdownMenuCheckbox],[hlmDropdownMenuCheckboxItem]", inputs: ["inset"] }, { kind: "component", type: i1$1.HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }, { kind: "directive", type: i1$1.HlmDropdownMenuLabel, selector: "[hlmDropdownMenuLabel],hlm-dropdown-menu-label", inputs: ["inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableViewOptions, decorators: [{
             type: Component,
@@ -162,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'eg-data-table-view-options',
                     imports: [HlmButton, HlmDropdownMenuImports, NgIcon, HlmIcon],
                     providers: [provideIcons({ lucideSettings2 })],
-                    template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ",
+                    template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm size=\"sm\" name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -254,6 +254,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 */ []));
@@ -286,7 +296,7 @@ class EgDataTable {
     ...(ngDevMode ? [{ debugName: "filterColumnId" }] : /* istanbul ignore next */ []));
     filterPlaceholder = input('Filter...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
-    /** Show the column-visibility dropdown inside the toolbar. Off by default; opt in per table. */
+    /** Show the column-visibility dropdown inside the toolbar (requires `showToolbar`). Off by default; opt in per table. Also enables hiding — the `Hide` item in `EgDataTableColumnHeader` only renders when this is true, so hidden columns always have a way back. Per-column `enableHiding: false` further disables individual columns. */
     showColumnToggle = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showColumnToggle" }] : /* istanbul ignore next */ []));
     /** 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. */
@@ -307,7 +317,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. */
@@ -320,7 +330,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();
@@ -343,8 +353,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
@@ -376,6 +384,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)
@@ -422,7 +456,12 @@ class EgDataTable {
         return {
             features: this.features(),
             columns: this._finalColumns(),
-            data: [...this._items()],
+            data: this._tableItems(),
+            getRowId: this.getRowId(),
+            // Hiding is only allowed when the View menu can bring columns back.
+            // This drives `column.getCanHide()` for both `EgDataTableColumnHeader`
+            // (Hide item) and `EgDataTableViewOptions` (toggle list).
+            enableHiding: this.showColumnToggle(),
             manualPagination: server,
             manualSorting: server,
             manualFiltering: server,
@@ -472,10 +511,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 */ []));
     /**
@@ -488,7 +528,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 */ []));
@@ -568,7 +608,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: "\n    <div [class]=\"_containerClass()\">\n      @if (_showLayoutToggle()) {\n        <div class=\"flex items-center justify-between\">\n          <div hlmToggleGroup type=\"single\" [value]=\"_effectiveLayout()\" (valueChange)=\"_onLayoutToggle($event)\">\n            <button hlmToggleGroupItem value=\"table\" aria-label=\"Table view\">\n              <ng-icon hlm name=\"lucideLayoutList\" />\n            </button>\n            <button hlmToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n              <ng-icon hlm name=\"lucideLayoutGrid\" />\n            </button>\n          </div>\n          <div></div>\n        </div>\n      }\n\n      @if (showToolbar() || toolbarActions()) {\n        <div class=\"flex flex-wrap items-center justify-between gap-2 py-1\" [tanStackTable]=\"_table\">\n          @if (showToolbar()) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <input\n                hlmInput\n                class=\"w-full min-w-0 md:w-80\"\n                [size]=\"size()\"\n                [placeholder]=\"filterPlaceholder()\"\n                (input)=\"_onFilterInput($event)\"\n              />\n              @if (showColumnToggle()) {\n                <eg-data-table-view-options [size]=\"size()\" />\n              }\n            </div>\n          }\n          @if (toolbarActions()) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <ng-container *ngTemplateOutlet=\"toolbarActions()\" />\n            </div>\n          }\n        </div>\n      }\n\n      @if (_effectiveLayout() === 'grid') {\n        <ng-container *ngTemplateOutlet=\"_gridView\" />\n      } @else {\n        <ng-container *ngTemplateOutlet=\"_tableView\" />\n      }\n\n      <ng-template #_tableView>\n        <div class=\"overflow-hidden rounded-md border\">\n          <div hlmTableContainer>\n            <table hlmTable>\n              <thead hlmTHead>\n                @for (headerGroup of _table.getHeaderGroups(); track headerGroup.id) {\n                  <tr hlmTr>\n                    @for (header of headerGroup.headers; track header.id) {\n                      <th hlmTh [size]=\"size()\" [attr.colSpan]=\"header.colSpan\">\n                        @if (!header.isPlaceholder) {\n                          <div class=\"flex items-center gap-1\">\n                            <ng-container\n                              *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerText\"\n                            >\n                              <div [innerHTML]=\"headerText\"></div>\n                            </ng-container>\n                            @if (_showHeaderSortButton(header)) {\n                              <button\n                                hlmButton\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                [class]=\"_sortButtonClass()\"\n                                type=\"button\"\n                                [attr.aria-label]=\"'Sort by ' + header.column.id\"\n                                (click)=\"_toggleHeaderSorting(header)\"\n                              >\n                                @switch (header.column.getIsSorted()) {\n                                  @case ('asc') {\n                                    <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n                                  }\n                                  @case ('desc') {\n                                    <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n                                  }\n                                  @default {\n                                    <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n                                  }\n                                }\n                              </button>\n                            }\n                          </div>\n                        }\n                      </th>\n                    }\n                  </tr>\n                }\n              </thead>\n              <tbody hlmTBody>\n                @if (isLoading()) {\n                  <tr hlmTr>\n                    <td hlmTd [attr.colspan]=\"_visibleColumnCount()\" class=\"h-24 text-center\">\n                      <hlm-spinner class=\"inline-flex\" />\n                    </td>\n                  </tr>\n                } @else if (_table.getRowModel().rows.length === 0) {\n                  <tr hlmTr>\n                    <td hlmTd [attr.colspan]=\"_visibleColumnCount()\" class=\"h-24 text-center\">\n                      {{ emptyMessage() }}\n                    </td>\n                  </tr>\n                } @else {\n                  @for (row of _table.getRowModel().rows; track row.id) {\n                    <tr\n                      hlmTr\n                      [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n                      (click)=\"_onRowClick($event, row)\"\n                    >\n                      @for (cell of row.getVisibleCells(); track cell.id) {\n                        <td hlmTd [size]=\"size()\">\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellText\"\n                          >\n                            <div [innerHTML]=\"cellText\"></div>\n                          </ng-container>\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #_gridView>\n        @if (isLoading()) {\n          <div\n            class=\"flex h-64 items-center justify-center rounded-lg border border-dashed\"\n            role=\"status\"\n          >\n            <hlm-spinner />\n          </div>\n        } @else if (_table.getRowModel().rows.length === 0) {\n          <div\n            class=\"text-muted-foreground flex h-64 items-center justify-center rounded-lg border border-dashed\"\n          >\n            {{ emptyMessage() }}\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4\">\n            @for (row of _table.getRowModel().rows; track row.id) {\n              <div\n                hlmCard\n                class=\"group relative transition-all hover:shadow-md data-[state=selected]:border-primary data-[state=selected]:ring-1 data-[state=selected]:ring-primary/20\"\n                [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n                (click)=\"_onRowClick($event, row)\"\n              >\n                @if (_thumbnailCell(row); as thumbnail) {\n                  <div class=\"border-b bg-muted/30\">\n                    <ng-container\n                      *flexRender=\"thumbnail.column.columnDef.cell; props: thumbnail.getContext(); let thumbHtml\"\n                    >\n                      <div [innerHTML]=\"thumbHtml\"></div>\n                    </ng-container>\n                  </div>\n                }\n                @if (_selectionCell(row); as selection) {\n                  <div class=\"absolute top-4 right-4\">\n                    <ng-container\n                      *flexRender=\"selection.column.columnDef.cell; props: selection.getContext(); let selectHtml\"\n                    >\n                      <div [innerHTML]=\"selectHtml\"></div>\n                    </ng-container>\n                  </div>\n                }\n                <div hlmCardContent class=\"space-y-3\">\n                  @for (cell of _contentCells(row); track cell.id) {\n                    <div class=\"flex flex-col\">\n                      <dt\n                        class=\"text-[10px] font-bold tracking-wider uppercase text-muted-foreground/80\"\n                      >\n                        {{ _cellLabel(cell) }}\n                      </dt>\n                      <dd class=\"mt-0.5 text-sm leading-none font-medium\">\n                        <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let valueHtml\">\n                          <div [innerHTML]=\"valueHtml\"></div>\n                        </ng-container>\n                      </dd>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </ng-template>\n\n      @if (!hideFooter()) {\n        <div\n          class=\"flex flex-col gap-2 px-2 py-4 sm:flex-row sm:items-center sm:justify-between\"\n          [tanStackTable]=\"_table\"\n        >\n          <div class=\"text-muted-foreground flex-1 text-sm\">{{ _statusText() }}</div>\n          <eg-data-table-pagination\n            [showStatus]=\"false\"\n            [showPageSize]=\"showPageSize()\"\n            [pageSizes]=\"pageSizes()\"\n            [navMode]=\"navMode()\"\n            [size]=\"size()\"\n          />\n        </div>\n      }\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1$2.FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: TanStackTable, selector: "[tanStackTable]", inputs: ["tanStackTable"], exportAs: ["table"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.HlmTableContainer, selector: "div[hlmTableContainer]" }, { kind: "directive", type: i2.HlmTable, selector: "table[hlmTable]" }, { kind: "directive", type: i2.HlmTBody, selector: "tbody[hlmTBody],tbody[hlmTableBody]" }, { kind: "directive", type: i2.HlmTd, selector: "td[hlmTd],td[hlmTableCell]", inputs: ["size"] }, { kind: "directive", type: i2.HlmTh, selector: "th[hlmTh],th[hlmTableHead]", inputs: ["size"] }, { kind: "directive", type: i2.HlmTHead, selector: "thead[hlmTHead],thead[hlmTableHeader]" }, { kind: "directive", type: i2.HlmTr, selector: "tr[hlmTr],tr[hlmTableRow]" }, { kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: HlmCard, selector: "[hlmCard],hlm-card", inputs: ["size"] }, { kind: "directive", type: HlmCardContent, selector: "[hlmCardContent]" }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }, { kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["size", "show", "class", "spinnerClass"] }, { kind: "directive", type: HlmToggleGroup, selector: "[hlmToggleGroup],hlm-toggle-group", inputs: ["variant", "size", "spacing", "orientation"] }, { kind: "directive", type: HlmToggleGroupItem, selector: "button[hlmToggleGroupItem]", inputs: ["variant", "size"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: EgDataTablePagination, selector: "eg-data-table-pagination", inputs: ["showStatus", "showPageSize", "pageSizes", "navMode", "size"] }, { kind: "component", type: EgDataTableViewOptions, selector: "eg-data-table-view-options", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -599,14 +639,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     template: "\n    <div [class]=\"_containerClass()\">\n      @if (_showLayoutToggle()) {\n        <div class=\"flex items-center justify-between\">\n          <div hlmToggleGroup type=\"single\" [value]=\"_effectiveLayout()\" (valueChange)=\"_onLayoutToggle($event)\">\n            <button hlmToggleGroupItem value=\"table\" aria-label=\"Table view\">\n              <ng-icon hlm name=\"lucideLayoutList\" />\n            </button>\n            <button hlmToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n              <ng-icon hlm name=\"lucideLayoutGrid\" />\n            </button>\n          </div>\n          <div></div>\n        </div>\n      }\n\n      @if (showToolbar() || toolbarActions()) {\n        <div class=\"flex flex-wrap items-center justify-between gap-2 py-1\" [tanStackTable]=\"_table\">\n          @if (showToolbar()) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <input\n                hlmInput\n                class=\"w-full min-w-0 md:w-80\"\n                [size]=\"size()\"\n                [placeholder]=\"filterPlaceholder()\"\n                (input)=\"_onFilterInput($event)\"\n              />\n              @if (showColumnToggle()) {\n                <eg-data-table-view-options [size]=\"size()\" />\n              }\n            </div>\n          }\n          @if (toolbarActions()) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <ng-container *ngTemplateOutlet=\"toolbarActions()\" />\n            </div>\n          }\n        </div>\n      }\n\n      @if (_effectiveLayout() === 'grid') {\n        <ng-container *ngTemplateOutlet=\"_gridView\" />\n      } @else {\n        <ng-container *ngTemplateOutlet=\"_tableView\" />\n      }\n\n      <ng-template #_tableView>\n        <div class=\"overflow-hidden rounded-md border\">\n          <div hlmTableContainer>\n            <table hlmTable>\n              <thead hlmTHead>\n                @for (headerGroup of _table.getHeaderGroups(); track headerGroup.id) {\n                  <tr hlmTr>\n                    @for (header of headerGroup.headers; track header.id) {\n                      <th hlmTh [size]=\"size()\" [attr.colSpan]=\"header.colSpan\">\n                        @if (!header.isPlaceholder) {\n                          <div class=\"flex items-center gap-1\">\n                            <ng-container\n                              *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerText\"\n                            >\n                              <div [innerHTML]=\"headerText\"></div>\n                            </ng-container>\n                            @if (_showHeaderSortButton(header)) {\n                              <button\n                                hlmButton\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                [class]=\"_sortButtonClass()\"\n                                type=\"button\"\n                                [attr.aria-label]=\"'Sort by ' + header.column.id\"\n                                (click)=\"_toggleHeaderSorting(header)\"\n                              >\n                                @switch (header.column.getIsSorted()) {\n                                  @case ('asc') {\n                                    <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n                                  }\n                                  @case ('desc') {\n                                    <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n                                  }\n                                  @default {\n                                    <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n                                  }\n                                }\n                              </button>\n                            }\n                          </div>\n                        }\n                      </th>\n                    }\n                  </tr>\n                }\n              </thead>\n              <tbody hlmTBody>\n                @if (isLoading()) {\n                  <tr hlmTr>\n                    <td hlmTd [attr.colspan]=\"_visibleColumnCount()\" class=\"h-24 text-center\">\n                      <hlm-spinner class=\"inline-flex\" />\n                    </td>\n                  </tr>\n                } @else if (_table.getRowModel().rows.length === 0) {\n                  <tr hlmTr>\n                    <td hlmTd [attr.colspan]=\"_visibleColumnCount()\" class=\"h-24 text-center\">\n                      {{ emptyMessage() }}\n                    </td>\n                  </tr>\n                } @else {\n                  @for (row of _table.getRowModel().rows; track row.id) {\n                    <tr\n                      hlmTr\n                      [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n                      (click)=\"_onRowClick($event, row)\"\n                    >\n                      @for (cell of row.getVisibleCells(); track cell.id) {\n                        <td hlmTd [size]=\"size()\">\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellText\"\n                          >\n                            <div [innerHTML]=\"cellText\"></div>\n                          </ng-container>\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #_gridView>\n        @if (isLoading()) {\n          <div\n            class=\"flex h-64 items-center justify-center rounded-lg border border-dashed\"\n            role=\"status\"\n          >\n            <hlm-spinner />\n          </div>\n        } @else if (_table.getRowModel().rows.length === 0) {\n          <div\n            class=\"text-muted-foreground flex h-64 items-center justify-center rounded-lg border border-dashed\"\n          >\n            {{ emptyMessage() }}\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4\">\n            @for (row of _table.getRowModel().rows; track row.id) {\n              <div\n                hlmCard\n                class=\"group relative transition-all hover:shadow-md data-[state=selected]:border-primary data-[state=selected]:ring-1 data-[state=selected]:ring-primary/20\"\n                [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n                (click)=\"_onRowClick($event, row)\"\n              >\n                @if (_thumbnailCell(row); as thumbnail) {\n                  <div class=\"border-b bg-muted/30\">\n                    <ng-container\n                      *flexRender=\"thumbnail.column.columnDef.cell; props: thumbnail.getContext(); let thumbHtml\"\n                    >\n                      <div [innerHTML]=\"thumbHtml\"></div>\n                    </ng-container>\n                  </div>\n                }\n                @if (_selectionCell(row); as selection) {\n                  <div class=\"absolute top-4 right-4\">\n                    <ng-container\n                      *flexRender=\"selection.column.columnDef.cell; props: selection.getContext(); let selectHtml\"\n                    >\n                      <div [innerHTML]=\"selectHtml\"></div>\n                    </ng-container>\n                  </div>\n                }\n                <div hlmCardContent class=\"space-y-3\">\n                  @for (cell of _contentCells(row); track cell.id) {\n                    <div class=\"flex flex-col\">\n                      <dt\n                        class=\"text-[10px] font-bold tracking-wider uppercase text-muted-foreground/80\"\n                      >\n                        {{ _cellLabel(cell) }}\n                      </dt>\n                      <dd class=\"mt-0.5 text-sm leading-none font-medium\">\n                        <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let valueHtml\">\n                          <div [innerHTML]=\"valueHtml\"></div>\n                        </ng-container>\n                      </dd>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </ng-template>\n\n      @if (!hideFooter()) {\n        <div\n          class=\"flex flex-col gap-2 px-2 py-4 sm:flex-row sm:items-center sm:justify-between\"\n          [tanStackTable]=\"_table\"\n        >\n          <div class=\"text-muted-foreground flex-1 text-sm\">{{ _statusText() }}</div>\n          <eg-data-table-pagination\n            [showStatus]=\"false\"\n            [showPageSize]=\"showPageSize()\"\n            [pageSizes]=\"pageSizes()\"\n            [navMode]=\"navMode()\"\n            [size]=\"size()\"\n          />\n        </div>\n      }\n    </div>\n  ",
                     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.
  *
  * 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.
+ * Non-sortable columns render a plain label. The `Hide` menu item only renders
+ * when `column.getCanHide()` is true — `EgDataTable` ties table-level
+ * `enableHiding` to its `showColumnToggle` input so there is always a way back
+ * via the View menu, and per-column `enableHiding: false` further disables it.
  */
 class EgDataTableColumnHeader {
     column = input.required(/* @ts-ignore */
@@ -618,11 +661,14 @@ class EgDataTableColumnHeader {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _sorted = computed(() => this.column().getIsSorted(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_sorted" }] : /* istanbul ignore next */ []));
+    /** Hideable only when TanStack allows it (table + column `enableHiding`). Absent `getCanHide` (legacy mocks) means hideable. */
+    _canHide = computed(() => this.column().getCanHide?.() ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canHide" }] : /* istanbul ignore next */ []));
     /** Height per density. Merged by `hlmButton`. */
     _buttonClass = computed(() => hlm("-ml-3", this.size() === 'sm' ? "h-7" : this.size() === 'lg' ? "h-9" : "h-8"), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableColumnHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableColumnHeader, isStandalone: true, selector: "eg-data-table-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideEyeOff })], ngImport: i0, template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            <div hlmDropdownMenuSeparator></div>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n              Hide\n            </button>\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuItem, selector: "[hlmDropdownMenuItem],hlm-dropdown-menu-item", inputs: ["disabled", "variant", "inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableColumnHeader, isStandalone: true, selector: "eg-data-table-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideEyeOff })], ngImport: i0, template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            @if (_canHide()) {\n              <div hlmDropdownMenuSeparator></div>\n              <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n                <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n                Hide\n              </button>\n            }\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuItem, selector: "[hlmDropdownMenuItem],hlm-dropdown-menu-item", inputs: ["disabled", "variant", "inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableColumnHeader, decorators: [{
             type: Component,
@@ -630,7 +676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'eg-data-table-column-header',
                     imports: [HlmButton, HlmDropdownMenuImports, NgIcon, HlmIcon],
                     providers: [provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideEyeOff })],
-                    template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            <div hlmDropdownMenuSeparator></div>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n              Hide\n            </button>\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ",
+                    template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            @if (_canHide()) {\n              <div hlmDropdownMenuSeparator></div>\n              <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n                <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n                Hide\n              </button>\n            }\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });

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. */
@@ -228,7 +237,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     /** 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. */
+    /** Show the column-visibility dropdown inside the toolbar (requires `showToolbar`). Off by default; opt in per table. Also enables hiding — the `Hide` item in `EgDataTableColumnHeader` only renders when this is true, so hidden columns always have a way back. Per-column `enableHiding: false` further disables individual columns. */
     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>;
@@ -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>;
 }
 
 /**
@@ -369,13 +381,18 @@ interface EgSortableColumn {
     getIsSorted(): false | SortDirection;
     toggleSorting(desc?: boolean): void;
     toggleVisibility(value?: boolean): void;
+    /** Whether the column can be hidden (`columnDef.enableHiding` and table `enableHiding`). Optional for back-compat mocks — absent means hideable. */
+    getCanHide?(): boolean;
 }
 /**
  * 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.
+ * Non-sortable columns render a plain label. The `Hide` menu item only renders
+ * when `column.getCanHide()` is true — `EgDataTable` ties table-level
+ * `enableHiding` to its `showColumnToggle` input so there is always a way back
+ * via the View menu, and per-column `enableHiding: false` further disables it.
  */
 declare class EgDataTableColumnHeader {
     readonly column: _angular_core.InputSignal<EgSortableColumn>;
@@ -383,6 +400,8 @@ declare class EgDataTableColumnHeader {
     /** Density of the trigger button. */
     readonly size: _angular_core.InputSignal<HlmTableSize>;
     protected readonly _sorted: _angular_core.Signal<false | SortDirection>;
+    /** Hideable only when TanStack allows it (table + column `enableHiding`). Absent `getCanHide` (legacy mocks) means hideable. */
+    protected readonly _canHide: _angular_core.Signal<boolean>;
     /** Height per density. Merged by `hlmButton`. */
     protected readonly _buttonClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTableColumnHeader, 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`