@area8975/ui 0.2.2-dev.42 → 0.2.2-dev.46

package/CHANGELOG.md

@@ -14,11 +14,15 @@ All notable changes to this project will be documented in this file. See [commit
 * add `mixChartColours` and `chartLabelInk` to blend chart colours and pick label text that reads on a fill
 * ui-select takes a `#leading` template with `searchMode="inline"`, shown before the chosen item's text, e.g. a category's colour. It hides while a search is typed and keeps its space, so the text doesn't move. Single select only
 * ui-table cells can be drawn from a projected template, matched by column id: `<ng-template uiTableCell="description" let-row>`, given the row and the accessor's `value`, e.g. for a two-line cell or a category's colour. The accessor stays the cell's value, and a `sensitive` column's template is replaced by the mask in privacy mode
+* ui-table takes `headerless`, leaving out the header row for rows that read on their own, and `groupHeading`, which starts each run of rows with a heading row, e.g. each day. Content marked `uiTableBar` becomes a bar along the top, lined up with the columns, whose checkbox selects every row in a `selectable` table. `allSelected`, `someSelected` and `toggleSelectAll` are public too
 
 ### Bug Fixes
 
 * ui-table row actions and sortable headers now shade on hover and keyboard focus in consuming apps. They used a `hocus:` variant that only the library's own stylesheets define, so apps generated nothing for them. Row actions now use `bg-surface-hover`, so they still show on a shaded row
 * ui-table row actions show their label in a ui-tooltip instead of the browser's native title, including on disabled actions
+* ui-table's row actions cell now fills a taller row, so its buttons stay in the middle of a two-line row
+* ui-table reloads when `sort` is set from outside, e.g. by a control above a headerless table. Only its own header used to reload it
+* ui-table's selection and actions cells keep their narrower padding instead of taking the ordinary cells', which pushed the checkbox past its column and showed an ellipsis
 
 ## [0.2.1](https://gitea.cor.bz/corbz/ui-library/compare/v0.2.0...v0.2.1) (2026-10-17)
 

package/fesm2022/area8975-ui.mjs

@@ -2548,6 +2548,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 		maximumFractionDigits: 1
 	});
 	totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
+	sliceColours = input([], ...ngDevMode ? [{ debugName: "sliceColours" }] : /* istanbul ignore next */ []);
 	values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
 	isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
 	isMuted = computed(() => {
@@ -2557,10 +2558,18 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 	styles = computed(() => {
 		const highlight = this.highlight();
 		const muted = this.isMuted();
-		return this.categories().map((name, index) => muted[index] ? {
-			colour: this.ink().context,
-			dashed: false
-		} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false, this.dark()));
+		const given = this.sliceColours();
+		return this.categories().map((name, index) => {
+			if (muted[index]) return {
+				colour: this.ink().context,
+				dashed: false
+			};
+			const style = chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false, this.dark());
+			return {
+				...style,
+				colour: given[index] ?? style.colour
+			};
+		});
 	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
 	legendItems = computed(() => {
 		const highlight = this.highlight();
@@ -2682,6 +2691,13 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			sliceColours: {
+				classPropertyName: "sliceColours",
+				publicName: "sliceColours",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: { classAttribute: "block w-full min-w-0" },
@@ -2745,6 +2761,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "totalLabel",
 				required: false
 			}]
+		}],
+		sliceColours: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sliceColours",
+				required: false
+			}]
 		}]
 	}
 });
@@ -10224,6 +10248,34 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+var UiTableBarDirective = class UiTableBarDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTableBarDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiTableBarDirective,
+		isStandalone: true,
+		selector: "[uiTableBar]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTableBarDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[uiTableBar]" }]
+	}]
+});
 var UiTableRegistry = class UiTableRegistry {
 	tables = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "tables" }] : /* istanbul ignore next */ []);
 	get(id) {
@@ -10308,6 +10360,13 @@ var UiTableComponent = class UiTableComponent {
 		...ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	headerless = input(false, {
+		...ngDevMode ? { debugName: "headerless" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	bar = contentChild(UiTableBarDirective, ...ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []);
+	hasBar = computed(() => !!this.bar(), ...ngDevMode ? [{ debugName: "hasBar" }] : /* istanbul ignore next */ []);
+	groupHeading = input(null, ...ngDevMode ? [{ debugName: "groupHeading" }] : /* istanbul ignore next */ []);
 	actions = input([], ...ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []);
 	sort = model(null, ...ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []);
 	selectedRowIds = model(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "selectedRowIds" }] : /* istanbul ignore next */ []);
@@ -10360,6 +10419,13 @@ var UiTableComponent = class UiTableComponent {
 	hasFilterableColumns = computed(() => this.filterableColumns().length > 0, ...ngDevMode ? [{ debugName: "hasFilterableColumns" }] : /* istanbul ignore next */ []);
 	activeFilterCount = computed(() => Object.keys(this.filters()).length, ...ngDevMode ? [{ debugName: "activeFilterCount" }] : /* istanbul ignore next */ []);
 	hasActions = computed(() => this.actions().length > 0, ...ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []);
+	columnSpan = computed(() => this.renderColumns().length + (this.selectable() ? 1 : 0) + (this.hasActions() ? 1 : 0), ...ngDevMode ? [{ debugName: "columnSpan" }] : /* istanbul ignore next */ []);
+	groupHeadings = computed(() => {
+		const headingOf = this.groupHeading();
+		if (!headingOf) return this.rows().map(() => null);
+		const headings = this.rows().map(headingOf);
+		return headings.map((heading, index) => heading === headings[index - 1] ? null : heading);
+	}, ...ngDevMode ? [{ debugName: "groupHeadings" }] : /* istanbul ignore next */ []);
 	hasSensitiveColumns = computed(() => this.columns().some((column) => column.sensitive), ...ngDevMode ? [{ debugName: "hasSensitiveColumns" }] : /* istanbul ignore next */ []);
 	fixedWidth = computed(() => this.hasSensitiveColumns() ? (this.selectable() ? SELECTION_COLUMN_WIDTH : 0) + this.renderColumns().reduce((total, column) => total + this.columnWidth(column), 0) + (this.hasActions() ? this.actionsColumnWidth() : 0) : null, ...ngDevMode ? [{ debugName: "fixedWidth" }] : /* istanbul ignore next */ []);
 	actionsColumnWidth = computed(() => Math.max(60, this.actions().length * 40), ...ngDevMode ? [{ debugName: "actionsColumnWidth" }] : /* istanbul ignore next */ []);
@@ -10406,6 +10472,7 @@ var UiTableComponent = class UiTableComponent {
 	privacy = inject(UI_PRIVACY);
 	loadedQuery = "";
 	loadedFilters = {};
+	loadedSort = null;
 	resizeState = null;
 	columnDragState = null;
 	filterDataSources = /* @__PURE__ */ new Map();
@@ -10418,6 +10485,7 @@ var UiTableComponent = class UiTableComponent {
 		});
 		toObservable(this.query).pipe(debounceTime(300), filter((query) => query !== this.loadedQuery), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.resetAndReload());
 		toObservable(this.filters).pipe(debounceTime(300), filter((filters) => filters !== this.loadedFilters), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.resetAndReload());
+		toObservable(this.sort).pipe(filter((sort) => sort !== this.loadedSort), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.resetAndReload());
 		this.load$.pipe(switchMap(() => this.fetch()), takeUntilDestroyed(this.destroyRef)).subscribe((result) => this.applyResult(result));
 	}
 	ngOnInit() {
@@ -10684,6 +10752,7 @@ var UiTableComponent = class UiTableComponent {
 		};
 		this.loadedQuery = params.query;
 		this.loadedFilters = params.filters;
+		this.loadedSort = params.sort;
 		return this.dataSource().load(params).pipe(catchError(() => of(null)));
 	}
 	applyResult(result) {
@@ -10821,6 +10890,20 @@ var UiTableComponent = class UiTableComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			headerless: {
+				classPropertyName: "headerless",
+				publicName: "headerless",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groupHeading: {
+				classPropertyName: "groupHeading",
+				publicName: "groupHeading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			actions: {
 				classPropertyName: "actions",
 				publicName: "actions",
@@ -10857,13 +10940,19 @@ var UiTableComponent = class UiTableComponent {
 			heroBars2
 		})],
 		queries: [{
+			propertyName: "bar",
+			first: true,
+			predicate: UiTableBarDirective,
+			descendants: true,
+			isSignal: true
+		}, {
 			propertyName: "cellDirectives",
 			predicate: UiTableCellDirective,
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (cellTemplates().get(column.id); as template) {\n                                    @if (column.sensitive && privacy() !== 'visible') {\n                                        <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                    } @else {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: { $implicit: row, value: cellValue(column, row) }\"\n                                        />\n                                    }\n                                } @else if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
-		styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        @if (hasBar() || !headerless()) {\n            <thead [class.ui-table-sticky]=\"stickyHeader()\">\n                @if (hasBar()) {\n                    <!-- a row of the table, so its checkbox and content line up with the columns below -->\n                    <tr class=\"ui-table-bar-row\">\n                        @if (selectable()) {\n                            <th class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"allSelected()\"\n                                    [indeterminate]=\"someSelected()\"\n                                    (valueChange)=\"toggleSelectAll()\"\n                                />\n                            </th>\n                        }\n                        <th [attr.colspan]=\"columnSpan() - (selectable() ? 1 : 0)\">\n                            <ng-content select=\"[uiTableBar]\" />\n                        </th>\n                    </tr>\n                }\n                @if (!headerless()) {\n                    <tr>\n                        @if (selectable()) {\n                            <th class=\"text-center! ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"allSelected()\"\n                                    [indeterminate]=\"someSelected()\"\n                                    (valueChange)=\"toggleSelectAll()\"\n                                />\n                            </th>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <th\n                                scope=\"col\"\n                                [attr.data-column-id]=\"column.id\"\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                                [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                <div class=\"ui-table-th-content\">\n                                    @if (reorderableColumns() && column.reorderable !== false) {\n                                        <ng-icon\n                                            name=\"heroBars2\"\n                                            class=\"ui-table-drag-handle\"\n                                            (pointerdown)=\"onColumnDragStart($event, column)\"\n                                        />\n                                    }\n\n                                    @if (column.sortable) {\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                            (click)=\"toggleSort(column)\"\n                                        >\n                                            <span\n                                                class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                            >\n                                                {{ column.header }}\n                                            </span>\n                                            <svg\n                                                viewBox=\"0 0 8 13\"\n                                                aria-hidden=\"true\"\n                                                class=\"ui-table-sort\"\n                                                [attr.data-direction]=\"sortDirection(column)\"\n                                            >\n                                                <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                                <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                            </svg>\n                                        </ui-button>\n                                    } @else {\n                                        <span\n                                            class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                        >\n                                            {{ column.header }}\n                                        </span>\n                                    }\n                                </div>\n\n                                @if (column.resizable) {\n                                    <span\n                                        class=\"ui-table-resize-handle\"\n                                        (pointerdown)=\"startResize($event, column)\"\n                                    ></span>\n                                }\n                            </th>\n                        }\n\n                        @if (hasActions()) {\n                            <th class=\"ui-table-actions-cell\"></th>\n                        }\n                    </tr>\n                }\n            </thead>\n        }\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"columnSpan()\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"columnSpan()\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"columnSpan()\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    @if (groupHeadings()[i]; as heading) {\n                        <tr class=\"ui-table-group-row\">\n                            <th scope=\"rowgroup\" [attr.colspan]=\"columnSpan()\">{{ heading }}</th>\n                        </tr>\n                    }\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (cellTemplates().get(column.id); as template) {\n                                    @if (column.sensitive && privacy() !== 'visible') {\n                                        <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                    } @else {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: { $implicit: row, value: cellValue(column, row) }\"\n                                        />\n                                    }\n                                } @else if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                <div class=\"ui-table-actions\">\n                                    @for (action of actions(); track action.id) {\n                                        <ui-tooltip [text]=\"action.label\">\n                                            <ui-button\n                                                appearance=\"none\"\n                                                classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                                [disabled]=\"!!action.disabled?.(row)\"\n                                                [ariaLabel]=\"action.label\"\n                                                (click)=\"action.onClick(row)\"\n                                            >\n                                                <ng-icon\n                                                    [name]=\"action.icon\"\n                                                    class=\"size-4\"\n                                                />\n                                            </ui-button>\n                                        </ui-tooltip>\n                                    }\n                                </div>\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+		styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table .ui-table-select-cell,.ui-table .ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table .ui-table-bar-row th{background-color:var(--layer);padding-block:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}.ui-table .ui-table-group-row th{background-color:var(--muted);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-table .ui-table-group-row th:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -11091,8 +11180,8 @@ i0.ɵɵngDeclareClassMetadata({
 				heroViewColumns,
 				heroBars2
 			})],
-			template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (cellTemplates().get(column.id); as template) {\n                                    @if (column.sensitive && privacy() !== 'visible') {\n                                        <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                    } @else {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: { $implicit: row, value: cellValue(column, row) }\"\n                                        />\n                                    }\n                                } @else if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
-			styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        @if (hasBar() || !headerless()) {\n            <thead [class.ui-table-sticky]=\"stickyHeader()\">\n                @if (hasBar()) {\n                    <!-- a row of the table, so its checkbox and content line up with the columns below -->\n                    <tr class=\"ui-table-bar-row\">\n                        @if (selectable()) {\n                            <th class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"allSelected()\"\n                                    [indeterminate]=\"someSelected()\"\n                                    (valueChange)=\"toggleSelectAll()\"\n                                />\n                            </th>\n                        }\n                        <th [attr.colspan]=\"columnSpan() - (selectable() ? 1 : 0)\">\n                            <ng-content select=\"[uiTableBar]\" />\n                        </th>\n                    </tr>\n                }\n                @if (!headerless()) {\n                    <tr>\n                        @if (selectable()) {\n                            <th class=\"text-center! ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"allSelected()\"\n                                    [indeterminate]=\"someSelected()\"\n                                    (valueChange)=\"toggleSelectAll()\"\n                                />\n                            </th>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <th\n                                scope=\"col\"\n                                [attr.data-column-id]=\"column.id\"\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                                [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                <div class=\"ui-table-th-content\">\n                                    @if (reorderableColumns() && column.reorderable !== false) {\n                                        <ng-icon\n                                            name=\"heroBars2\"\n                                            class=\"ui-table-drag-handle\"\n                                            (pointerdown)=\"onColumnDragStart($event, column)\"\n                                        />\n                                    }\n\n                                    @if (column.sortable) {\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                            (click)=\"toggleSort(column)\"\n                                        >\n                                            <span\n                                                class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                            >\n                                                {{ column.header }}\n                                            </span>\n                                            <svg\n                                                viewBox=\"0 0 8 13\"\n                                                aria-hidden=\"true\"\n                                                class=\"ui-table-sort\"\n                                                [attr.data-direction]=\"sortDirection(column)\"\n                                            >\n                                                <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                                <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                            </svg>\n                                        </ui-button>\n                                    } @else {\n                                        <span\n                                            class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                        >\n                                            {{ column.header }}\n                                        </span>\n                                    }\n                                </div>\n\n                                @if (column.resizable) {\n                                    <span\n                                        class=\"ui-table-resize-handle\"\n                                        (pointerdown)=\"startResize($event, column)\"\n                                    ></span>\n                                }\n                            </th>\n                        }\n\n                        @if (hasActions()) {\n                            <th class=\"ui-table-actions-cell\"></th>\n                        }\n                    </tr>\n                }\n            </thead>\n        }\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"columnSpan()\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"columnSpan()\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"columnSpan()\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    @if (groupHeadings()[i]; as heading) {\n                        <tr class=\"ui-table-group-row\">\n                            <th scope=\"rowgroup\" [attr.colspan]=\"columnSpan()\">{{ heading }}</th>\n                        </tr>\n                    }\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (cellTemplates().get(column.id); as template) {\n                                    @if (column.sensitive && privacy() !== 'visible') {\n                                        <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                    } @else {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: { $implicit: row, value: cellValue(column, row) }\"\n                                        />\n                                    }\n                                } @else if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                <div class=\"ui-table-actions\">\n                                    @for (action of actions(); track action.id) {\n                                        <ui-tooltip [text]=\"action.label\">\n                                            <ui-button\n                                                appearance=\"none\"\n                                                classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                                [disabled]=\"!!action.disabled?.(row)\"\n                                                [ariaLabel]=\"action.label\"\n                                                (click)=\"action.onClick(row)\"\n                                            >\n                                                <ng-icon\n                                                    [name]=\"action.icon\"\n                                                    class=\"size-4\"\n                                                />\n                                            </ui-button>\n                                        </ui-tooltip>\n                                    }\n                                </div>\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+			styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table .ui-table-select-cell,.ui-table .ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table .ui-table-bar-row th{background-color:var(--layer);padding-block:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}.ui-table .ui-table-group-row th{background-color:var(--muted);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-table .ui-table-group-row th:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -11225,6 +11314,26 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		headerless: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headerless",
+				required: false
+			}]
+		}],
+		bar: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => UiTableBarDirective), { isSignal: true }]
+		}],
+		groupHeading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupHeading",
+				required: false
+			}]
+		}],
 		actions: [{
 			type: i0.Input,
 			args: [{
@@ -15416,6 +15525,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, DisclosureTriggerAppearances, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableCellDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiTreemapChartComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartLabelInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, mixChartColours, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
+export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, DisclosureTriggerAppearances, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableBarDirective, UiTableCellDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiTreemapChartComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartLabelInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, mixChartColours, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
 
 //# sourceMappingURL=area8975-ui.mjs.map