@egose/shadcn-theme-ng 0.5.3 → 0.6.1

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

@@ -0,0 +1,713 @@
+import * as i0 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';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+import { HlmInput } from '@egose/shadcn-theme-ng/input';
+import { HlmSpinner } from '@egose/shadcn-theme-ng/spinner';
+import * as i2 from '@egose/shadcn-theme-ng/table';
+import { HlmTableImports } from '@egose/shadcn-theme-ng/table';
+import { HlmToggleGroup, HlmToggleGroupItem } from '@egose/shadcn-theme-ng/toggle-group';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronsRight, lucideChevronsLeft, lucideChevronRight, lucideChevronLeft, lucideSettings2, lucideLayoutList, lucideLayoutGrid, lucideChevronsUpDown, lucideArrowUp, lucideArrowDown, lucideEyeOff } from '@ng-icons/lucide';
+import * as i1$2 from '@tanstack/angular-table';
+import { createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, sortFn_alphanumeric, sortFn_text, tableFeatures, rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, injectTableContext, createColumnHelper, injectTable, TanStackTable, FlexRender } from '@tanstack/angular-table';
+import * as i1 from '@egose/shadcn-theme-ng/select';
+import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
+import * as i1$1 from '@egose/shadcn-theme-ng/dropdown-menu';
+import { HlmDropdownMenuImports } from '@egose/shadcn-theme-ng/dropdown-menu';
+import { HlmCheckbox } from '@egose/shadcn-theme-ng/checkbox';
+
+// Explicit instantiations keep the inferred feature-registry type free of `any`
+// (the factories default their generics to `any` when called bare, which would
+// leak into our emitted declarations and trip package validation).
+const filteredRowModel = createFilteredRowModel();
+const paginatedRowModel = createPaginatedRowModel();
+const sortedRowModel = createSortedRowModel();
+const includesString = filterFn_includesString;
+const alphanumeric = sortFn_alphanumeric;
+const text = sortFn_text;
+/**
+ * Default feature set for `EgDataTable`.
+ *
+ * Mirrors the Spartan data-table guide: filtering, visibility, pagination,
+ * selection and sorting are opted in, with the built-in `includesString`
+ * filter and `alphanumeric` / `text` sort functions registered. Anything a
+ * caller does not need can be dropped by passing a custom `features` input.
+ *
+ * Keep this reference stable (module scope) — `injectTable()` re-evaluates
+ * its initializer on every signal read, so recreating features per render
+ * would thrash the table instance.
+ */
+const defaultEgDataTableFeatures = tableFeatures({
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    rowPaginationFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
+    filteredRowModel,
+    paginatedRowModel,
+    sortedRowModel,
+    filterFns: { includesString },
+    sortFns: { alphanumeric, text },
+    columnMeta: {},
+});
+
+class EgDataTablePagination {
+    /** Show the `selected of total` status text. Set false when the host renders its own status. */
+    showStatus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showStatus" }] : /* istanbul ignore next */ []));
+    /** Show the rows-per-page selector. */
+    showPageSize = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPageSize" }] : /* istanbul ignore next */ []));
+    /** Page-size options. The table's current size is appended when absent. */
+    pageSizes = input([10, 20, 30, 40, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+    /** Navigation-button content: icons only, text labels only, or both. */
+    navMode = input('icons', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navMode" }] : /* istanbul ignore next */ []));
+    /** Density of buttons, trigger, and meta texts. Type scale of buttons is untouched. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _table = injectTableContext();
+    _pageCount = computed(() => this._table().getPageCount(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageCount" }] : /* istanbul ignore next */ []));
+    // `atoms` are signal-backed, so the pager stays in sync with the table.
+    _pageIndex = computed(() => this._table().atoms.pagination.get().pageIndex, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageIndex" }] : /* istanbul ignore next */ []));
+    _pageSize = computed(() => this._table().atoms.pagination.get().pageSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
+    _canPrevious = computed(() => this._table().getCanPreviousPage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canPrevious" }] : /* istanbul ignore next */ []));
+    _canNext = computed(() => this._table().getCanNextPage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canNext" }] : /* istanbul ignore next */ []));
+    _showPager = computed(() => this._pageCount() > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showPager" }] : /* istanbul ignore next */ []));
+    /** Icon-only buttons stay square; labeled buttons size to their text. Merged by `hlmButton` via the `class` binding. */
+    _navButtonClass = computed(() => hlm(this.size() === 'sm' ? "h-7 p-0" : this.size() === 'lg' ? "h-9 p-0" : "h-8 p-0", this.navMode() === 'icons'
+        ? this.size() === 'sm'
+            ? "w-7"
+            : this.size() === 'lg'
+                ? "w-9"
+                : "w-8"
+        : "gap-1 px-2"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_navButtonClass" }] : /* istanbul ignore next */ []));
+    /** First/last buttons stay desktop-only. */
+    _edgeNavButtonClass = computed(() => hlm("hidden lg:flex", this._navButtonClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_edgeNavButtonClass" }] : /* istanbul ignore next */ []));
+    /** Meta-text size per density (status, page indicator, rows-per-page label). */
+    _metaTextClass = computed(() => this.size() === 'sm' ? "text-xs" : this.size() === 'lg' ? "text-base" : "text-sm", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_metaTextClass" }] : /* istanbul ignore next */ []));
+    _pageSizeOptions = computed(() => {
+        const sizes = this.pageSizes();
+        const current = this._pageSize();
+        if (sizes.includes(current))
+            return sizes;
+        return [...sizes, current].sort((left, right) => left - right);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageSizeOptions" }] : /* istanbul ignore next */ []));
+    _statusText = computed(() => {
+        const table = this._table();
+        const selected = table.getFilteredSelectedRowModel().rows.length;
+        const total = table.getFilteredRowModel().rows.length;
+        if (selected > 0)
+            return `${selected} of ${total} row(s) selected.`;
+        return `${total} row(s).`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_statusText" }] : /* istanbul ignore next */ []));
+    _onPageSizeChange(value) {
+        this._table().setPageSize(Number(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTablePagination, isStandalone: true, selector: "eg-data-table-pagination", inputs: { showStatus: { classPropertyName: "showStatus", publicName: "showStatus", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight, lucideChevronsLeft, lucideChevronsRight })], ngImport: i0, template: "\n    <div class=\"flex flex-wrap items-center justify-between gap-2 px-2\">\n      @if (showStatus()) {\n        <div class=\"text-muted-foreground flex-1 {{ _metaTextClass() }}\">{{ _statusText() }}</div>\n      }\n      <div class=\"flex flex-wrap items-center gap-x-6 gap-y-2 lg:gap-x-8\">\n        @if (showPageSize()) {\n          <div class=\"flex items-center gap-2\">\n            <p class=\"font-medium {{ _metaTextClass() }}\">Rows per page</p>\n            <div hlmSelect class=\"inline-flex\" [value]=\"_pageSize()\" (valueChange)=\"_onPageSizeChange($event)\">\n              <hlm-select-trigger class=\"w-[70px]\" [size]=\"size() === 'sm' ? 'sm' : 'default'\">\n                <hlm-select-value />\n              </hlm-select-trigger>\n              <hlm-select-content *hlmSelectPortal>\n                @for (size of _pageSizeOptions(); track size) {\n                  <hlm-select-item [value]=\"size\">{{ size }}</hlm-select-item>\n                }\n              </hlm-select-content>\n            </div>\n          </div>\n        }\n        @if (_showPager()) {\n          <div class=\"flex w-[100px] items-center justify-center font-medium {{ _metaTextClass() }}\">\n            Page {{ _pageIndex() + 1 }} of {{ _pageCount() }}\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_edgeNavButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canPrevious()\"\n              (click)=\"_table().setPageIndex(0)\"\n              aria-label=\"Go to first page\"\n            >\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronsLeft\" />\n              }\n              @if (navMode() !== 'icons') {\n                <span>First</span>\n              }\n            </button>\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_navButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canPrevious()\"\n              (click)=\"_table().previousPage()\"\n              aria-label=\"Go to previous page\"\n            >\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronLeft\" />\n              }\n              @if (navMode() !== 'icons') {\n                <span>Previous</span>\n              }\n            </button>\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_navButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canNext()\"\n              (click)=\"_table().nextPage()\"\n              aria-label=\"Go to next page\"\n            >\n              @if (navMode() !== 'icons') {\n                <span>Next</span>\n              }\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronRight\" />\n              }\n            </button>\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_edgeNavButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canNext()\"\n              (click)=\"_table().setPageIndex(_pageCount() - 1)\"\n              aria-label=\"Go to last page\"\n            >\n              @if (navMode() !== 'icons') {\n                <span>Last</span>\n              }\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronsRight\" />\n              }\n            </button>\n          </div>\n        }\n      </div>\n    </div>\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: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "directive", type: i1.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i1.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "component", type: i1.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i1.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i1.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i1.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTablePagination, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-data-table-pagination',
+                    imports: [HlmButton, HlmIcon, HlmSelectImports, NgIcon],
+                    providers: [provideIcons({ lucideChevronLeft, lucideChevronRight, lucideChevronsLeft, lucideChevronsRight })],
+                    template: "\n    <div class=\"flex flex-wrap items-center justify-between gap-2 px-2\">\n      @if (showStatus()) {\n        <div class=\"text-muted-foreground flex-1 {{ _metaTextClass() }}\">{{ _statusText() }}</div>\n      }\n      <div class=\"flex flex-wrap items-center gap-x-6 gap-y-2 lg:gap-x-8\">\n        @if (showPageSize()) {\n          <div class=\"flex items-center gap-2\">\n            <p class=\"font-medium {{ _metaTextClass() }}\">Rows per page</p>\n            <div hlmSelect class=\"inline-flex\" [value]=\"_pageSize()\" (valueChange)=\"_onPageSizeChange($event)\">\n              <hlm-select-trigger class=\"w-[70px]\" [size]=\"size() === 'sm' ? 'sm' : 'default'\">\n                <hlm-select-value />\n              </hlm-select-trigger>\n              <hlm-select-content *hlmSelectPortal>\n                @for (size of _pageSizeOptions(); track size) {\n                  <hlm-select-item [value]=\"size\">{{ size }}</hlm-select-item>\n                }\n              </hlm-select-content>\n            </div>\n          </div>\n        }\n        @if (_showPager()) {\n          <div class=\"flex w-[100px] items-center justify-center font-medium {{ _metaTextClass() }}\">\n            Page {{ _pageIndex() + 1 }} of {{ _pageCount() }}\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_edgeNavButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canPrevious()\"\n              (click)=\"_table().setPageIndex(0)\"\n              aria-label=\"Go to first page\"\n            >\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronsLeft\" />\n              }\n              @if (navMode() !== 'icons') {\n                <span>First</span>\n              }\n            </button>\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_navButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canPrevious()\"\n              (click)=\"_table().previousPage()\"\n              aria-label=\"Go to previous page\"\n            >\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronLeft\" />\n              }\n              @if (navMode() !== 'icons') {\n                <span>Previous</span>\n              }\n            </button>\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_navButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canNext()\"\n              (click)=\"_table().nextPage()\"\n              aria-label=\"Go to next page\"\n            >\n              @if (navMode() !== 'icons') {\n                <span>Next</span>\n              }\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronRight\" />\n              }\n            </button>\n            <button\n              hlmButton\n              variant=\"secondary\"\n              appearance=\"outline\"\n              size=\"sm\"\n              [class]=\"_edgeNavButtonClass()\"\n              type=\"button\"\n              [disabled]=\"!_canNext()\"\n              (click)=\"_table().setPageIndex(_pageCount() - 1)\"\n              aria-label=\"Go to last page\"\n            >\n              @if (navMode() !== 'icons') {\n                <span>Last</span>\n              }\n              @if (navMode() !== 'text') {\n                <ng-icon hlm size=\"sm\" name=\"lucideChevronsRight\" />\n              }\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  ",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Column-visibility toggle.
+ *
+ * Reads the table from the nearest `[tanStackTable]` directive — no table
+ * input or generics needed. Only columns with an `accessorFn` that can hide
+ * are listed (display columns like `select` / `actions` stay fixed).
+ */
+class EgDataTableViewOptions {
+    /** Density of the toggle button. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _table = injectTableContext();
+    /** Height per density; hidden below `lg` like the pager edge buttons. Merged by `hlmButton`. */
+    _buttonClass = computed(() => hlm("ml-auto hidden lg:flex", this.size() === 'sm' ? "h-7" : this.size() === 'lg' ? "h-9" : "h-8"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
+    _hidableColumns = computed(() => this._table()
+        .getAllColumns()
+        .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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableViewOptions, decorators: [{
+            type: Component,
+            args: [{
+                    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  ",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Header selection checkbox: toggles all page rows.
+ *
+ * Generic over `TData` so the same component works with any table; the table
+ * instance is passed explicitly (no DI needed inside column definitions).
+ * `HlmCheckbox.checked` accepts `'indeterminate'`, so the tri-state is derived
+ * via `computed` instead of a separate input.
+ */
+class EgTableHeadSelection {
+    table = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Select all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    _checked = computed(() => {
+        const table = this.table();
+        if (table.getIsAllPageRowsSelected())
+            return true;
+        if (table.getIsSomePageRowsSelected())
+            return 'indeterminate';
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableHeadSelection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: EgTableHeadSelection, isStandalone: true, selector: "eg-table-head-selection", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "flex" }, ngImport: i0, template: ` <hlm-checkbox [checked]="_checked()" (changed)="table().toggleAllPageRowsSelected($event)" /> `, isInline: true, dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableHeadSelection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-table-head-selection',
+                    imports: [HlmCheckbox],
+                    host: { class: "flex", '[attr.aria-label]': 'ariaLabel()' },
+                    template: ` <hlm-checkbox [checked]="_checked()" (changed)="table().toggleAllPageRowsSelected($event)" /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+/**
+ * Row selection checkbox: toggles a single row.
+ */
+class EgTableRowSelection {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Select row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableRowSelection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: EgTableRowSelection, isStandalone: true, selector: "eg-table-row-selection", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "flex" }, ngImport: i0, template: ` <hlm-checkbox [checked]="row().getIsSelected()" (changed)="row().toggleSelected($event)" /> `, isInline: true, dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableRowSelection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-table-row-selection',
+                    imports: [HlmCheckbox],
+                    host: { class: "flex", '[attr.aria-label]': 'ariaLabel()' },
+                    template: ` <hlm-checkbox [checked]="row().getIsSelected()" (changed)="row().toggleSelected($event)" /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generic data table with TanStack-powered sorting, filtering, pagination,
+ * selection, column visibility, plus a React-parity grid layout.
+ *
+ * The caller passes `columns` (and optionally `gridColumns`) — everything else
+ * is owned internally with change notifications via outputs:
+ *
+ * - Client mode: pass `data` as an array. Pagination/sorting/filtering run in-browser.
+ *   `filterRows` can pre-filter the array before the built-in pipeline.
+ * - Server mode: pass `data` as a page slice (`{items,total,limit,offset,hasPrevious,hasNext}`)
+ *   with `manualPagination` set. The slice renders as-is — sorting/filtering
+ *   are not applied client-side. Page, sort and filter interactions emit
+ *   `pageChange` / `pageSizeChange` / `sortingChange` / `filterChange`
+ *   (`columnFiltersChange`) so the caller can fetch the next slice.
+ * - Selection: set `enableSelection` to auto-prepend a checkbox column;
+ *   selected rows are emitted via `selectionChange` (array of `TData`).
+ * - Grid mode: pass `gridColumns` to enable the layout toggle. Columns with
+ *   `meta: { hideInTable: true }` are table-hidden; `meta: { thumbnail: true }`
+ *   renders as the card banner.
+ */
+class EgDataTable {
+    /** Column definitions for table layout (required). */
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Column definitions for grid layout; falls back to `columns` when omitted. */
+    gridColumns = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "gridColumns" }] : /* istanbul ignore next */ []));
+    /** 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 */ []));
+    /** TanStack feature registry. Defaults to filtering + visibility + pagination + selection + sorting. */
+    features = input(defaultEgDataTableFeatures, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    isLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No results found.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** When true, a checkbox column is auto-prepended and `selectionChange` emits the selected rows. */
+    enableSelection = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
+    hideFooter = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideFooter" }] : /* istanbul ignore next */ []));
+    /** Density of toolbar, table, and pagination chrome. Type scale is untouched. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Presentation mode. Two-way bindable: `[(layout)]`. Grid requires `gridColumns`. */
+    layout = model('table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Show the table/grid toggle (only rendered when `gridColumns` is set). */
+    showLayoutToggle = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLayoutToggle" }] : /* istanbul ignore next */ []));
+    /** Show the toolbar (filter input, plus the column-visibility dropdown when `showColumnToggle` is set). */
+    showToolbar = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    /** 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). */
+    filterColumnId = input('', /* @ts-ignore */
+    ...(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. */
+    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. */
+    toolbarActions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarActions" }] : /* istanbul ignore next */ []));
+    /** Default client-side page size. Changing it later resets the pager to the new size. */
+    defaultPageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultPageSize" }] : /* istanbul ignore next */ []));
+    /** Caller-provided frontend filter: receives all client rows, returns the kept rows. Runs before built-in filtering/sorting/pagination; ignored in server mode. Must be pure. */
+    filterRows = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRows" }] : /* istanbul ignore next */ []));
+    /** Seeds the sorting state once at creation. Later changes are ignored — use `sortingChange` to stay in sync. */
+    initialSorting = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialSorting" }] : /* istanbul ignore next */ []));
+    /** Seeds the column-filter state once at creation. Later changes are ignored. */
+    initialColumnFilters = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialColumnFilters" }] : /* istanbul ignore next */ []));
+    /** Seeds the column-visibility state once at creation. Later changes are ignored. */
+    initialColumnVisibility = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialColumnVisibility" }] : /* istanbul ignore next */ []));
+    /** 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. */
+    showPageSize = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPageSize" }] : /* istanbul ignore next */ []));
+    /** Page-size options for the footer selector. The current size is appended when absent. */
+    pageSizes = input([10, 20, 30, 40, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+    /** Footer navigation-button content: icons only, text labels only, or both. */
+    navMode = input('icons', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navMode" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** 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();
+    pageSizeChange = output();
+    /** Emits the row's data when a row (table) or card (grid) is clicked. Clicks from nested interactive elements (buttons, links, inputs, checkboxes, selects) are ignored. */
+    rowClick = output();
+    sortingChange = output();
+    columnFiltersChange = output();
+    /** Emits the toolbar filter string whenever it changes. Empty when cleared or unset. */
+    filterChange = output();
+    columnVisibilityChange = output();
+    _containerClass = computed(() => hlm("space-y-2", this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
+    /** Inline TH sort-button footprint per density. Merged by `hlmButton` via the `class` binding. */
+    _sortButtonClass = computed(() => hlm("p-0", this.size() === 'sm' ? "h-5 w-5" : this.size() === 'lg' ? "h-7 w-7" : "h-6 w-6"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sortButtonClass" }] : /* istanbul ignore next */ []));
+    _sorting = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sorting" }] : /* istanbul ignore next */ []));
+    _columnFilters = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columnFilters" }] : /* istanbul ignore next */ []));
+    _columnVisibility = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columnVisibility" }] : /* 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
+    // pager-driven `set()` writes below are preserved until it changes again.
+    _clientPageSize = linkedSignal(() => this.defaultPageSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_clientPageSize" }] : /* istanbul ignore next */ []));
+    _isServer = computed(() => this.manualPagination(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isServer" }] : /* istanbul ignore next */ []));
+    /** The server page slice when in server mode; `null` for client data, misuse shapes, or `null` while loading. */
+    _page = computed(() => {
+        if (!this._isServer())
+            return null;
+        const data = this.data();
+        if (data !== null && typeof data === 'object' && 'items' in data) {
+            return data;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_page" }] : /* istanbul ignore next */ []));
+    _items = computed(() => {
+        const page = this._page();
+        if (page)
+            return page.items;
+        const data = this.data();
+        const rows = Array.isArray(data)
+            ? data
+            : (data?.items ?? []);
+        const filter = this.filterRows();
+        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)
+            return 1;
+        return Math.max(1, Math.ceil(paginated.total / paginated.limit));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_serverPageCount" }] : /* istanbul ignore next */ []));
+    _serverPageIndex = computed(() => {
+        const paginated = this._page();
+        if (!paginated || paginated.limit <= 0)
+            return 0;
+        return Math.floor(paginated.offset / paginated.limit);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_serverPageIndex" }] : /* istanbul ignore next */ []));
+    _paginationState = computed(() => {
+        const paginated = this._page();
+        if (paginated)
+            return { pageIndex: this._serverPageIndex(), pageSize: paginated.limit };
+        return { pageIndex: this._clientPageIndex(), pageSize: this._clientPageSize() };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_paginationState" }] : /* istanbul ignore next */ []));
+    _selectionHelper = computed(() => createColumnHelper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectionHelper" }] : /* istanbul ignore next */ []));
+    /** Caller columns + auto-injected selection column + layout filtering. */
+    _finalColumns = computed(() => {
+        const isGrid = this._effectiveLayout() === 'grid';
+        const base = isGrid ? (this.gridColumns() ?? this.columns()) : this.columns();
+        const visible = isGrid ? base : base.filter((column) => column.meta?.hideInTable !== true);
+        if (!this.enableSelection())
+            return [...visible];
+        const helper = this._selectionHelper();
+        const selectionColumn = helper.display({
+            id: 'select',
+            header: () => EgTableHeadSelection,
+            cell: () => EgTableRowSelection,
+            enableSorting: false,
+            enableHiding: false,
+        });
+        return [selectionColumn, ...visible];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_finalColumns" }] : /* istanbul ignore next */ []));
+    _table = injectTable(() => {
+        const server = this._isServer();
+        return {
+            features: this.features(),
+            columns: this._finalColumns(),
+            data: this._tableItems(),
+            getRowId: this.getRowId(),
+            manualPagination: server,
+            manualSorting: server,
+            manualFiltering: server,
+            ...(server ? { pageCount: this._serverPageCount() } : {}),
+            state: {
+                sorting: this._sorting(),
+                columnFilters: this._columnFilters(),
+                columnVisibility: this._columnVisibility(),
+                rowSelection: this._rowSelection(),
+                pagination: this._paginationState(),
+            },
+            onSortingChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._sorting()) : updater;
+                this._sorting.set(next);
+                this.sortingChange.emit(next);
+            },
+            onColumnFiltersChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._columnFilters()) : updater;
+                this._columnFilters.set(next);
+                this.columnFiltersChange.emit(next);
+                const filterId = this.filterColumnId();
+                if (filterId) {
+                    const value = next.find((filter) => filter.id === filterId)?.value;
+                    this.filterChange.emit(typeof value === 'string' ? value : '');
+                }
+            },
+            onColumnVisibilityChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._columnVisibility()) : updater;
+                this._columnVisibility.set(next);
+                this.columnVisibilityChange.emit(next);
+            },
+            onRowSelectionChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._rowSelection()) : updater;
+                this._rowSelection.set(next);
+            },
+            onPaginationChange: (updater) => {
+                const current = this._paginationState();
+                const next = typeof updater === 'function' ? updater(current) : updater;
+                if (next.pageIndex !== current.pageIndex)
+                    this.pageChange.emit(next.pageIndex);
+                if (next.pageSize !== current.pageSize)
+                    this.pageSizeChange.emit(next.pageSize);
+                if (!this._isServer()) {
+                    this._clientPageIndex.set(next.pageIndex);
+                    this._clientPageSize.set(next.pageSize);
+                }
+            },
+        };
+    });
+    _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(() => {
+        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 */ []));
+    /**
+     * Seeds internal state from the `initial*` inputs. Runs in `ngOnInit` (after
+     * first bindings, before first render) exactly once, so inline-literal
+     * bindings (new references every change detection) cannot clobber user
+     * interaction afterwards. Values are copied to avoid aliasing caller data.
+     */
+    ngOnInit() {
+        this._sorting.set([...this.initialSorting()]);
+        this._columnFilters.set([...this.initialColumnFilters()]);
+        this._columnVisibility.set({ ...this.initialColumnVisibility() });
+        this._rowSelection.set(this._keepCurrentSelection(this.initialRowSelection()));
+    }
+    _hasGrid = computed(() => this.gridColumns() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasGrid" }] : /* istanbul ignore next */ []));
+    _effectiveLayout = computed(() => this.layout() === 'grid' && this._hasGrid() ? 'grid' : 'table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveLayout" }] : /* istanbul ignore next */ []));
+    _showLayoutToggle = computed(() => this.showLayoutToggle() && this._hasGrid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showLayoutToggle" }] : /* istanbul ignore next */ []));
+    _visibleColumnCount = computed(() => {
+        const count = this._table.getVisibleLeafColumns().length;
+        return count > 0 ? count : 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visibleColumnCount" }] : /* istanbul ignore next */ []));
+    _statusText = computed(() => {
+        const paginated = this._page();
+        const table = this._table;
+        const selected = table.getFilteredSelectedRowModel().rows.length;
+        if (this.enableSelection() && selected > 0) {
+            const total = paginated ? paginated.total : table.getFilteredRowModel().rows.length;
+            return `${selected} of ${total} row(s) selected`;
+        }
+        if (paginated) {
+            const from = paginated.items.length === 0 ? 0 : paginated.offset + 1;
+            const to = paginated.offset + paginated.items.length;
+            return `Showing ${from} to ${to} of ${paginated.total} records`;
+        }
+        const total = table.getFilteredRowModel().rows.length;
+        return `${total} row(s).`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_statusText" }] : /* istanbul ignore next */ []));
+    _onLayoutToggle(value) {
+        if (value === 'table' || value === 'grid')
+            this.layout.set(value);
+    }
+    _onFilterInput(event) {
+        const value = event.target.value;
+        const id = this.filterColumnId();
+        if (!id) {
+            this.filterChange.emit(value);
+            return;
+        }
+        this._table.getColumn(id)?.setFilterValue(value);
+    }
+    /**
+     * Row/card click handler. Ignores clicks originating from nested interactive
+     * elements (selection checkboxes, action buttons, links, inputs) so those
+     * controls keep working without also firing `rowClick`.
+     */
+    _onRowClick(event, row) {
+        const target = event.target;
+        if (target instanceof Element && target.closest('button, a, input, select, textarea, [role="checkbox"]')) {
+            return;
+        }
+        this.rowClick.emit(row.original);
+    }
+    /** Show the inline TH sort button only for sortable plain-string headers (component headers own their UI). */
+    _showHeaderSortButton(header) {
+        return header.column.getCanSort() && typeof header.column.columnDef.header === 'string';
+    }
+    _toggleHeaderSorting(header) {
+        header.column.toggleSorting(header.column.getIsSorted() === 'asc');
+    }
+    _selectionCell(row) {
+        return row.getVisibleCells().find((cell) => cell.column.id === 'select');
+    }
+    _thumbnailCell(row) {
+        return row.getVisibleCells().find((cell) => cell.column.columnDef.meta?.thumbnail === true);
+    }
+    _contentCells(row) {
+        return row
+            .getVisibleCells()
+            .filter((cell) => cell.column.id !== 'select' && cell.column.columnDef.meta?.thumbnail !== true);
+    }
+    _cellLabel(cell) {
+        const header = cell.column.columnDef.header;
+        if (typeof header === 'string')
+            return header;
+        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 }, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-data-table',
+                    imports: [
+                        FlexRender,
+                        TanStackTable,
+                        NgTemplateOutlet,
+                        HlmTableImports,
+                        HlmButton,
+                        HlmCard,
+                        HlmCardContent,
+                        HlmIcon,
+                        HlmInput,
+                        HlmSpinner,
+                        HlmToggleGroup,
+                        HlmToggleGroupItem,
+                        NgIcon,
+                        EgDataTablePagination,
+                        EgDataTableViewOptions,
+                    ],
+                    providers: [
+                        provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideLayoutGrid, lucideLayoutList }),
+                    ],
+                    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 }] }], 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.
+ */
+class EgDataTableColumnHeader {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Density of the trigger button. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _sorted = computed(() => this.column().getIsSorted(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sorted" }] : /* 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableColumnHeader, decorators: [{
+            type: Component,
+            args: [{
+                    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  ",
+                    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 }] }] } });
+
+/*
+ * Public API Surface of data-table
+ */
+const EgDataTableImports = [
+    EgDataTable,
+    EgDataTableColumnHeader,
+    EgDataTablePagination,
+    EgDataTableViewOptions,
+    EgTableHeadSelection,
+    EgTableRowSelection,
+];
+class EgDataTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, imports: [EgDataTable,
+            EgDataTableColumnHeader,
+            EgDataTablePagination,
+            EgDataTableViewOptions,
+            EgTableHeadSelection,
+            EgTableRowSelection], exports: [EgDataTable,
+            EgDataTableColumnHeader,
+            EgDataTablePagination,
+            EgDataTableViewOptions,
+            EgTableHeadSelection,
+            EgTableRowSelection] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, imports: [EgDataTableImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...EgDataTableImports],
+                    exports: [...EgDataTableImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EgDataTable, EgDataTableColumnHeader, EgDataTableImports, EgDataTableModule, EgDataTablePagination, EgDataTableViewOptions, EgTableHeadSelection, EgTableRowSelection, defaultEgDataTableFeatures };
+