@area8975/ui 0.2.2-dev.48 → 0.2.2-dev.50

package/fesm2022/area8975-ui-table.mjs

@@ -0,0 +1,1237 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectorRef, Component, DestroyRef, Directive, Injectable, TemplateRef, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, model, output, signal, untracked } from "@angular/core";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { UiCheckboxComponent } from "@area8975/ui/checkbox";
+import { UiDropdownComponent, UiDropdownDirective } from "@area8975/ui/dropdown";
+import { UI_FORMAT, UI_PRIVACY, injectPrivateText } from "@area8975/ui/format";
+import { UiInputComponent } from "@area8975/ui/input";
+import { UiLoadingComponent } from "@area8975/ui/loading";
+import { UiMoneyComponent } from "@area8975/ui/money";
+import { UiPrivateComponent } from "@area8975/ui/private";
+import { SelectLocalDataSource, UiSelectComponent } from "@area8975/ui/select";
+import { UiTooltipComponent } from "@area8975/ui/tooltip";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroBars2, heroFunnel, heroMagnifyingGlass, heroViewColumns } from "@ng-icons/heroicons/outline";
+import { Subject, catchError, debounceTime, filter, of, switchMap } from "rxjs";
+var UiTableCellDirective = class UiTableCellDirective {
+	columnId = input.required({
+		...ngDevMode ? { debugName: "columnId" } : /* istanbul ignore next */ {},
+		alias: "uiTableCell"
+	});
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTableCellDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiTableCellDirective,
+		isStandalone: true,
+		selector: "ng-template[uiTableCell]",
+		inputs: { columnId: {
+			classPropertyName: "columnId",
+			publicName: "uiTableCell",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTableCellDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[uiTableCell]" }]
+	}],
+	propDecorators: { columnId: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiTableCell",
+			required: true
+		}]
+	}] }
+});
+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) {
+		return this.tables().get(id) ?? null;
+	}
+	register(id, table) {
+		const existing = this.tables().get(id);
+		if (isDevMode() && existing && existing !== table) console.warn(`[ui-table] two tables share the id "${id}", controls will link to the newest one`);
+		this.tables.update((tables) => new Map(tables).set(id, table));
+	}
+	unregister(id, table) {
+		if (this.tables().get(id) !== table) return;
+		this.tables.update((tables) => {
+			const next = new Map(tables);
+			next.delete(id);
+			return next;
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTableRegistry,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTableRegistry,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTableRegistry,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+const DEFAULT_COLUMN_WIDTH = 160;
+const SELECTION_COLUMN_WIDTH = 44;
+var UiTableComponent = class UiTableComponent {
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	tableId = input(null, ...ngDevMode ? [{ debugName: "tableId" }] : /* istanbul ignore next */ []);
+	columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	dataSource = input.required(...ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []);
+	emptyMessage = input("No data to display.", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	errorMessage = input("Something went wrong loading this data.", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	rowId = input((_row, index) => index, ...ngDevMode ? [{ debugName: "rowId" }] : /* istanbul ignore next */ []);
+	selectable = input(false, {
+		...ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	searchable = input(false, {
+		...ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	searchPlaceholder = input("Search...", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
+	paginated = input(false, {
+		...ngDevMode ? { debugName: "paginated" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	pageSize = input(10, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
+	toggleableColumns = input(false, {
+		...ngDevMode ? { debugName: "toggleableColumns" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	reorderableColumns = input(false, {
+		...ngDevMode ? { debugName: "reorderableColumns" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	reorderableRows = input(false, {
+		...ngDevMode ? { debugName: "reorderableRows" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stickyHeader = input(false, {
+		...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 */ []);
+	selectionChange = output();
+	rowsReordered = output();
+	rows = signal([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	total = signal(0, ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	error = signal(false, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	filters = signal({}, ...ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []);
+	currentPage = signal(0, ...ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []);
+	hiddenColumnIds = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "hiddenColumnIds" }] : /* istanbul ignore next */ []);
+	columnOrderIds = signal(null, ...ngDevMode ? [{ debugName: "columnOrderIds" }] : /* istanbul ignore next */ []);
+	columnWidths = signal({}, ...ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []);
+	columnMenuOpen = signal(false, ...ngDevMode ? [{ debugName: "columnMenuOpen" }] : /* istanbul ignore next */ []);
+	filterMenuOpen = signal(false, ...ngDevMode ? [{ debugName: "filterMenuOpen" }] : /* istanbul ignore next */ []);
+	draggedColumnId = signal(null, ...ngDevMode ? [{ debugName: "draggedColumnId" }] : /* istanbul ignore next */ []);
+	dragOverColumnId = signal(null, ...ngDevMode ? [{ debugName: "dragOverColumnId" }] : /* istanbul ignore next */ []);
+	dragPreview = signal(null, ...ngDevMode ? [{ debugName: "dragPreview" }] : /* istanbul ignore next */ []);
+	draggedRowIndex = signal(null, ...ngDevMode ? [{ debugName: "draggedRowIndex" }] : /* istanbul ignore next */ []);
+	cellDirectives = contentChildren(UiTableCellDirective, ...ngDevMode ? [{ debugName: "cellDirectives" }] : /* istanbul ignore next */ []);
+	cellTemplates = computed(() => new Map(this.cellDirectives().map((cell) => [cell.columnId(), cell.template])), ...ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => !this.loading() && !this.error() && this.rows().length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-table",
+		"ui-text-body",
+		this.hasSensitiveColumns() && "ui-table--fixed",
+		this.classes()
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	orderedColumns = computed(() => {
+		const order = this.columnOrderIds();
+		if (!order) return this.columns();
+		const byId = new Map(this.columns().map((column) => [column.id, column]));
+		const ordered = order.map((id) => byId.get(id)).filter((column) => !!column);
+		const missing = this.columns().filter((column) => !order.includes(column.id));
+		return [...ordered, ...missing];
+	}, ...ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []);
+	hideableColumns = computed(() => this.orderedColumns().filter((column) => column.hideable !== false), ...ngDevMode ? [{ debugName: "hideableColumns" }] : /* istanbul ignore next */ []);
+	visibleColumns = computed(() => this.orderedColumns().filter((column) => !this.hiddenColumnIds().has(column.id)), ...ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []);
+	renderColumns = computed(() => {
+		const columns = this.visibleColumns();
+		return [
+			...columns.filter((column) => column.pin === "left"),
+			...columns.filter((column) => !column.pin),
+			...columns.filter((column) => column.pin === "right")
+		];
+	}, ...ngDevMode ? [{ debugName: "renderColumns" }] : /* istanbul ignore next */ []);
+	filterableColumns = computed(() => this.orderedColumns().filter((column) => column.filterable), ...ngDevMode ? [{ debugName: "filterableColumns" }] : /* istanbul ignore next */ []);
+	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 */ []);
+	totalPages = computed(() => this.paginated() ? Math.max(1, Math.ceil(this.total() / this.pageSize())) : 1, ...ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []);
+	resultsLabel = computed(() => {
+		const total = this.total();
+		return total === 1 ? "1 result" : `${total} results`;
+	}, ...ngDevMode ? [{ debugName: "resultsLabel" }] : /* istanbul ignore next */ []);
+	allSelected = computed(() => {
+		const rows = this.rows();
+		return rows.length > 0 && rows.every((row, index) => this.selectedRowIds().has(this.rowId()(row, index)));
+	}, ...ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []);
+	someSelected = computed(() => {
+		const rows = this.rows();
+		const selected = this.selectedRowIds();
+		const count = rows.filter((row, index) => selected.has(this.rowId()(row, index))).length;
+		return count > 0 && count < rows.length;
+	}, ...ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []);
+	leftOffsets = computed(() => {
+		const offsets = {};
+		let offset = this.selectable() ? SELECTION_COLUMN_WIDTH : 0;
+		for (const column of this.renderColumns().filter((c) => c.pin === "left")) {
+			offsets[column.id] = offset;
+			offset += this.columnWidth(column);
+		}
+		return offsets;
+	}, ...ngDevMode ? [{ debugName: "leftOffsets" }] : /* istanbul ignore next */ []);
+	rightOffsets = computed(() => {
+		const offsets = {};
+		let offset = 0;
+		const columns = this.renderColumns().filter((c) => c.pin === "right").slice().reverse();
+		for (const column of columns) {
+			offsets[column.id] = offset;
+			offset += this.columnWidth(column);
+		}
+		return offsets;
+	}, ...ngDevMode ? [{ debugName: "rightOffsets" }] : /* istanbul ignore next */ []);
+	load$ = new Subject();
+	destroyRef = inject(DestroyRef);
+	cdr = inject(ChangeDetectorRef);
+	registry = inject(UiTableRegistry);
+	uiFormat = inject(UI_FORMAT);
+	privateText = injectPrivateText();
+	privacy = inject(UI_PRIVACY);
+	loadedQuery = "";
+	loadedFilters = {};
+	loadedSort = null;
+	resizeState = null;
+	columnDragState = null;
+	filterDataSources = /* @__PURE__ */ new Map();
+	constructor() {
+		effect((onCleanup) => {
+			const id = this.tableId();
+			if (!id) return;
+			untracked(() => this.registry.register(id, this));
+			onCleanup(() => this.registry.unregister(id, this));
+		});
+		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() {
+		this.reload();
+	}
+	ngOnDestroy() {
+		document.removeEventListener("pointermove", this.onResizeMove);
+		document.removeEventListener("pointerup", this.onResizeEnd);
+		document.removeEventListener("pointermove", this.onColumnDragMove);
+		document.removeEventListener("pointerup", this.onColumnDragEnd);
+	}
+	reload() {
+		this.load$.next();
+	}
+	cellValue(column, row) {
+		return column.accessor(row);
+	}
+	cellIconValue(column, row) {
+		return column.accessor(row);
+	}
+	moneyCellValue(column, row) {
+		const value = column.accessor(row);
+		return value === null || value === void 0 ? null : Number(value);
+	}
+	formattedCellValue(column, row) {
+		const value = column.accessor(row);
+		if (value === null || value === void 0) return "";
+		switch (column.displayType) {
+			case "number": return new Intl.NumberFormat().format(Number(value));
+			case "date": return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(new Date(value));
+			case "time": return new Intl.DateTimeFormat(void 0, { timeStyle: "short" }).format(new Date(value));
+			default: return String(value);
+		}
+	}
+	onQueryChange(value) {
+		this.query.set(value);
+	}
+	filterValue(columnId) {
+		return this.filters()[columnId] ?? "";
+	}
+	onFilterInput(columnId, value) {
+		this.setFilter(columnId, value);
+	}
+	filterDataSource(column) {
+		let dataSource = this.filterDataSources.get(column.id);
+		if (!dataSource) {
+			dataSource = new SelectLocalDataSource(column.filterOptions ?? [], (option, query) => option.label.toLowerCase().includes(query.toLowerCase()));
+			this.filterDataSources.set(column.id, dataSource);
+		}
+		return dataSource;
+	}
+	selectedFilterOption(column) {
+		const value = this.filters()[column.id];
+		return column.filterOptions?.find((option) => option.value === value) ?? null;
+	}
+	filterOptionLabel(option) {
+		return option.label;
+	}
+	sensitiveFilterOptionLabel = (option) => this.privateText(option.label);
+	onFilterSelect(columnId, option) {
+		this.setFilter(columnId, option?.value);
+	}
+	clearFilters() {
+		this.filters.set({});
+	}
+	toggleSort(column) {
+		if (!column.sortable) return;
+		const current = this.sort();
+		if (!current || current.columnId !== column.id) this.sort.set({
+			columnId: column.id,
+			direction: "asc"
+		});
+		else if (current.direction === "asc") this.sort.set({
+			columnId: column.id,
+			direction: "desc"
+		});
+		else this.sort.set(null);
+		this.resetAndReload();
+	}
+	sortDirection(column) {
+		const current = this.sort();
+		return current?.columnId === column.id ? current.direction : null;
+	}
+	goToPage(page) {
+		if (page < 0 || page >= this.totalPages()) return;
+		this.currentPage.set(page);
+		this.reload();
+	}
+	isColumnVisible(column) {
+		return !this.hiddenColumnIds().has(column.id);
+	}
+	toggleColumnVisibility(column) {
+		this.hiddenColumnIds.update((hidden) => {
+			const next = new Set(hidden);
+			if (next.has(column.id)) next.delete(column.id);
+			else next.add(column.id);
+			return next;
+		});
+	}
+	isRowSelected(row, index) {
+		return this.selectedRowIds().has(this.rowId()(row, index));
+	}
+	toggleRow(row, index) {
+		const id = this.rowId()(row, index);
+		this.selectedRowIds.update((selected) => {
+			const next = new Set(selected);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+		this.emitSelectionChange();
+	}
+	toggleSelectAll() {
+		const wasAllSelected = this.allSelected();
+		this.selectedRowIds.update((selected) => {
+			const next = new Set(selected);
+			this.rows().forEach((row, index) => {
+				const id = this.rowId()(row, index);
+				if (wasAllSelected) next.delete(id);
+				else next.add(id);
+			});
+			return next;
+		});
+		this.emitSelectionChange();
+	}
+	columnWidth(column) {
+		return this.columnWidths()[column.id] ?? column.width ?? DEFAULT_COLUMN_WIDTH;
+	}
+	isPinned(column) {
+		return column.pin === "left" || column.pin === "right";
+	}
+	leftOffset(column) {
+		return column.pin === "left" ? this.leftOffsets()[column.id] : null;
+	}
+	rightOffset(column) {
+		return column.pin === "right" ? this.rightOffsets()[column.id] : null;
+	}
+	startResize(event, column) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.resizeState = {
+			columnId: column.id,
+			startX: event.clientX,
+			startWidth: this.columnWidth(column)
+		};
+		document.addEventListener("pointermove", this.onResizeMove);
+		document.addEventListener("pointerup", this.onResizeEnd);
+	}
+	canReorderRows() {
+		return this.reorderableRows() && !this.sort();
+	}
+	onColumnDragStart(event, column) {
+		event.preventDefault();
+		const headerCell = event.currentTarget.closest("th");
+		const headerRow = headerCell?.closest("tr");
+		if (!headerCell || !headerRow) return;
+		const cellRect = headerCell.getBoundingClientRect();
+		const rowRect = headerRow.getBoundingClientRect();
+		this.columnDragState = {
+			columnId: column.id,
+			pointerOffsetX: event.clientX - cellRect.left,
+			previewY: rowRect.top + (rowRect.height - cellRect.height) / 2,
+			previewHeight: cellRect.height
+		};
+		this.draggedColumnId.set(column.id);
+		this.dragPreview.set({
+			label: column.header,
+			x: cellRect.left,
+			y: this.columnDragState.previewY,
+			width: cellRect.width,
+			height: this.columnDragState.previewHeight
+		});
+		document.addEventListener("pointermove", this.onColumnDragMove);
+		document.addEventListener("pointerup", this.onColumnDragEnd);
+	}
+	onRowDragStart(event, index) {
+		this.draggedRowIndex.set(index);
+		event.dataTransfer?.setData("text/plain", String(index));
+	}
+	onRowDragOver(event) {
+		if (this.draggedRowIndex() !== null) event.preventDefault();
+	}
+	onRowDrop(event, index) {
+		event.preventDefault();
+		const from = this.draggedRowIndex();
+		this.draggedRowIndex.set(null);
+		if (from === null || from === index) return;
+		const next = [...this.rows()];
+		const [moved] = next.splice(from, 1);
+		next.splice(index, 0, moved);
+		this.rows.set(next);
+		this.rowsReordered.emit(next);
+	}
+	onResizeMove = (event) => {
+		if (!this.resizeState) return;
+		const minWidth = this.columns().find((c) => c.id === this.resizeState.columnId)?.minWidth ?? 60;
+		const delta = event.clientX - this.resizeState.startX;
+		const width = Math.max(minWidth, this.resizeState.startWidth + delta);
+		this.columnWidths.update((widths) => ({
+			...widths,
+			[this.resizeState.columnId]: width
+		}));
+	};
+	onResizeEnd = () => {
+		this.resizeState = null;
+		document.removeEventListener("pointermove", this.onResizeMove);
+		document.removeEventListener("pointerup", this.onResizeEnd);
+	};
+	onColumnDragMove = (event) => {
+		const state = this.columnDragState;
+		if (!state) return;
+		this.dragPreview.update((preview) => preview && {
+			...preview,
+			x: event.clientX - state.pointerOffsetX
+		});
+		const columnId = (document.elementFromPoint(event.clientX, event.clientY)?.closest("th[data-column-id]"))?.dataset["columnId"];
+		this.dragOverColumnId.set(columnId && columnId !== state.columnId ? columnId : null);
+	};
+	onColumnDragEnd = () => {
+		const state = this.columnDragState;
+		const overId = this.dragOverColumnId();
+		this.columnDragState = null;
+		this.draggedColumnId.set(null);
+		this.dragOverColumnId.set(null);
+		this.dragPreview.set(null);
+		document.removeEventListener("pointermove", this.onColumnDragMove);
+		document.removeEventListener("pointerup", this.onColumnDragEnd);
+		if (!state || !overId || state.columnId === overId) return;
+		const order = this.columnOrderIds() ?? this.columns().map((c) => c.id);
+		const from = order.indexOf(state.columnId);
+		const to = order.indexOf(overId);
+		if (from === -1 || to === -1) return;
+		const next = [...order];
+		next.splice(from, 1);
+		next.splice(to, 0, state.columnId);
+		this.columnOrderIds.set(next);
+	};
+	setFilter(columnId, value) {
+		this.filters.update((filters) => {
+			const next = { ...filters };
+			if (value) next[columnId] = value;
+			else delete next[columnId];
+			return next;
+		});
+	}
+	resetAndReload() {
+		this.currentPage.set(0);
+		this.reload();
+	}
+	emitSelectionChange() {
+		const ids = this.selectedRowIds();
+		const selectedRows = this.rows().filter((row, index) => ids.has(this.rowId()(row, index)));
+		this.selectionChange.emit(selectedRows);
+	}
+	fetch() {
+		this.loading.set(true);
+		this.error.set(false);
+		const params = {
+			page: this.currentPage(),
+			size: this.paginated() ? this.pageSize() : 0,
+			query: this.query(),
+			sort: this.sort(),
+			filters: this.filters()
+		};
+		this.loadedQuery = params.query;
+		this.loadedFilters = params.filters;
+		this.loadedSort = params.sort;
+		return this.dataSource().load(params).pipe(catchError(() => of(null)));
+	}
+	applyResult(result) {
+		this.loading.set(false);
+		if (result) {
+			this.rows.set(result.items);
+			this.total.set(result.total);
+		} else this.error.set(true);
+		this.cdr.markForCheck();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTableComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiTableComponent,
+		isStandalone: true,
+		selector: "ui-table",
+		inputs: {
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tableId: {
+				classPropertyName: "tableId",
+				publicName: "tableId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			dataSource: {
+				classPropertyName: "dataSource",
+				publicName: "dataSource",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rowId: {
+				classPropertyName: "rowId",
+				publicName: "rowId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectable: {
+				classPropertyName: "selectable",
+				publicName: "selectable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchable: {
+				classPropertyName: "searchable",
+				publicName: "searchable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchPlaceholder: {
+				classPropertyName: "searchPlaceholder",
+				publicName: "searchPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			paginated: {
+				classPropertyName: "paginated",
+				publicName: "paginated",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pageSize: {
+				classPropertyName: "pageSize",
+				publicName: "pageSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleableColumns: {
+				classPropertyName: "toggleableColumns",
+				publicName: "toggleableColumns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			reorderableColumns: {
+				classPropertyName: "reorderableColumns",
+				publicName: "reorderableColumns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			reorderableRows: {
+				classPropertyName: "reorderableRows",
+				publicName: "reorderableRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stickyHeader: {
+				classPropertyName: "stickyHeader",
+				publicName: "stickyHeader",
+				isSignal: true,
+				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",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sort: {
+				classPropertyName: "sort",
+				publicName: "sort",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedRowIds: {
+				classPropertyName: "selectedRowIds",
+				publicName: "selectedRowIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			sort: "sortChange",
+			selectedRowIds: "selectedRowIdsChange",
+			selectionChange: "selectionChange",
+			rowsReordered: "rowsReordered"
+		},
+		host: { classAttribute: "block" },
+		providers: [provideIcons({
+			heroMagnifyingGlass,
+			heroFunnel,
+			heroViewColumns,
+			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        @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",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: UiButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"appearance",
+					"intent",
+					"size",
+					"classes",
+					"type",
+					"ariaLabel",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: UiCheckboxComponent,
+				selector: "ui-checkbox",
+				inputs: [
+					"value",
+					"id",
+					"name",
+					"required",
+					"disabled",
+					"indeterminate",
+					"validationState",
+					"classes"
+				],
+				outputs: ["valueChange", "validationStateChange"]
+			},
+			{
+				kind: "component",
+				type: UiDropdownComponent,
+				selector: "ui-dropdown",
+				inputs: [
+					"isOpen",
+					"placement",
+					"closeBehaviour",
+					"offset",
+					"viewportPadding",
+					"matchWidth"
+				],
+				exportAs: ["uiDropdown"]
+			},
+			{
+				kind: "directive",
+				type: UiDropdownDirective,
+				selector: "[uiDropdownContent]"
+			},
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: UiSelectComponent,
+				selector: "ui-select",
+				inputs: [
+					"placement",
+					"closeBehaviour",
+					"dataSource",
+					"placeholder",
+					"id",
+					"describedBy",
+					"pageSize",
+					"searchMode",
+					"disabled",
+					"validationState",
+					"clearable",
+					"clearLabel",
+					"creatable",
+					"createLabel",
+					"groupBy",
+					"scrollToSelected",
+					"multiple",
+					"multipleDisplay",
+					"counterAfter",
+					"counterLabel",
+					"compareWith",
+					"displayWith",
+					"selectedItem",
+					"selectedItems"
+				],
+				outputs: [
+					"validationStateChange",
+					"selectionChange",
+					"create",
+					"selectedItemChange",
+					"selectedItemsChange"
+				]
+			},
+			{
+				kind: "component",
+				type: UiLoadingComponent,
+				selector: "ui-loading",
+				inputs: ["type"]
+			},
+			{
+				kind: "component",
+				type: UiMoneyComponent,
+				selector: "ui-money",
+				inputs: [
+					"value",
+					"currency",
+					"locale",
+					"signDisplay",
+					"colourBySign",
+					"wholeUnits",
+					"compact",
+					"placeholder"
+				]
+			},
+			{
+				kind: "component",
+				type: UiPrivateComponent,
+				selector: "ui-private",
+				inputs: ["text"]
+			},
+			{
+				kind: "component",
+				type: UiTooltipComponent,
+				selector: "ui-tooltip",
+				inputs: [
+					"text",
+					"placement",
+					"trigger",
+					"classes",
+					"isOpen"
+				],
+				exportAs: ["uiTooltip"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTableComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-table",
+			imports: [
+				NgIcon,
+				NgTemplateOutlet,
+				UiButtonComponent,
+				UiCheckboxComponent,
+				UiDropdownComponent,
+				UiDropdownDirective,
+				UiInputComponent,
+				UiSelectComponent,
+				UiLoadingComponent,
+				UiMoneyComponent,
+				UiPrivateComponent,
+				UiTooltipComponent
+			],
+			host: { class: "block" },
+			providers: [provideIcons({
+				heroMagnifyingGlass,
+				heroFunnel,
+				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        @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: () => [],
+	propDecorators: {
+		classes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "classes",
+				required: false
+			}]
+		}],
+		tableId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tableId",
+				required: false
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		dataSource: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataSource",
+				required: true
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		rowId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowId",
+				required: false
+			}]
+		}],
+		selectable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectable",
+				required: false
+			}]
+		}],
+		searchable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchable",
+				required: false
+			}]
+		}],
+		searchPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchPlaceholder",
+				required: false
+			}]
+		}],
+		paginated: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paginated",
+				required: false
+			}]
+		}],
+		pageSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageSize",
+				required: false
+			}]
+		}],
+		toggleableColumns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleableColumns",
+				required: false
+			}]
+		}],
+		reorderableColumns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reorderableColumns",
+				required: false
+			}]
+		}],
+		reorderableRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reorderableRows",
+				required: false
+			}]
+		}],
+		stickyHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyHeader",
+				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: [{
+				isSignal: true,
+				alias: "actions",
+				required: false
+			}]
+		}],
+		sort: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sort",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sortChange"]
+		}],
+		selectedRowIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedRowIds",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedRowIdsChange"]
+		}],
+		selectionChange: [{
+			type: i0.Output,
+			args: ["selectionChange"]
+		}],
+		rowsReordered: [{
+			type: i0.Output,
+			args: ["rowsReordered"]
+		}],
+		cellDirectives: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UiTableCellDirective), { isSignal: true }]
+		}]
+	}
+});
+var TableLocalDataSource = class {
+	items;
+	options;
+	constructor(items, options = {}) {
+		this.items = items;
+		this.options = options;
+	}
+	load(params) {
+		let result = this.items;
+		const query = params.query.trim();
+		if (query && this.options.search) result = result.filter((item) => this.options.search(item, query));
+		if (Object.keys(params.filters).length && this.options.filter) result = result.filter((item) => this.options.filter(item, params.filters));
+		if (params.sort && this.options.sortValue) {
+			const { columnId, direction } = params.sort;
+			const factor = direction === "asc" ? 1 : -1;
+			result = [...result].sort((a, b) => {
+				const valueA = this.options.sortValue(a, columnId);
+				const valueB = this.options.sortValue(b, columnId);
+				if (valueA === valueB) return 0;
+				return valueA > valueB ? factor : -factor;
+			});
+		}
+		const total = result.length;
+		const items = params.size > 0 ? result.slice(params.page * params.size, params.page * params.size + params.size) : result;
+		return of({
+			items,
+			total
+		});
+	}
+};
+var TableRemoteDataSource = class {
+	fetch;
+	constructor(fetch) {
+		this.fetch = fetch;
+	}
+	load(params) {
+		return this.fetch(params);
+	}
+};
+export { TableLocalDataSource, TableRemoteDataSource, UiTableBarDirective, UiTableCellDirective, UiTableComponent, UiTableRegistry };
+
+//# sourceMappingURL=area8975-ui-table.mjs.map