@area8975/ui 0.1.1-dev.19 → 0.1.1-dev.21

package/fesm2022/area8975-ui.mjs

@@ -7,6 +7,28 @@ import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { Subject, catchError, debounceTime, filter, of, skip, switchMap } from "rxjs";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { heroCheckCircleSolid, heroExclamationTriangleSolid, heroInformationCircleSolid, heroXCircleSolid } from "@ng-icons/heroicons/solid";
+const UiPrivacies = [
+	"visible",
+	"discreet",
+	"hidden"
+];
+const UI_PRIVACY = new InjectionToken("UI_PRIVACY", {
+	providedIn: "root",
+	factory: () => signal("visible").asReadonly()
+});
+function provideUiPrivacy(privacy) {
+	return {
+		provide: UI_PRIVACY,
+		useFactory: privacy
+	};
+}
+const PRIVACY_MASK = " - - -";
+function maskMoney(currency, locale) {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency
+	}).formatToParts(0).map((part) => part.type === "currency" || part.type === "literal" ? part.value : PRIVACY_MASK).filter((value, index, values) => value !== PRIVACY_MASK || values[index - 1] !== PRIVACY_MASK).join("");
+}
 const UI_FORMAT_DEFAULTS = {
 	currency: "GBP",
 	locale: "en-GB"
@@ -24,14 +46,25 @@ function provideUiFormat(format) {
 		}
 	};
 }
+const MONEY = Symbol("money");
+function moneyFormatterParts(formatter) {
+	return formatter[MONEY] ?? null;
+}
 function injectMoneyFormatter(options = {}) {
 	const { currency, locale } = inject(UI_FORMAT);
+	const privacy = inject(UI_PRIVACY);
 	const formatter = new Intl.NumberFormat(locale, {
 		style: "currency",
 		currency,
 		...options
 	});
-	return (value) => formatter.format(value);
+	const resolved = formatter.resolvedOptions();
+	const mask = maskMoney(resolved.currency ?? currency, resolved.locale);
+	const format = (value) => formatter.format(value);
+	return Object.assign((value) => privacy() === "visible" ? format(value) : mask, { [MONEY]: {
+		format,
+		mask
+	} });
 }
 var UiDarkClass = class UiDarkClass {
 	isDark = signal(false, ...ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []);
@@ -128,6 +161,7 @@ function chartSeriesStyle(index, dashes, dark = false) {
 }
 var UiAxisChartBase = class UiAxisChartBase {
 	uiFormat = inject(UI_FORMAT);
+	privacy = inject(UI_PRIVACY);
 	dark = inject(UiDarkClass).isDark;
 	ink = computed(() => chartInk(this.dark()), ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
 	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
@@ -135,6 +169,10 @@ var UiAxisChartBase = class UiAxisChartBase {
 	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	height = input(300, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
 	valueFormatter = input(numberFormatter(this.uiFormat.locale), ...ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []);
+	sensitive = input(void 0, {
+		...ngDevMode ? { debugName: "sensitive" } : /* istanbul ignore next */ {},
+		transform: (value) => value === void 0 ? void 0 : booleanAttribute(value)
+	});
 	categoryLabel = input("Category", ...ngDevMode ? [{ debugName: "categoryLabel" }] : /* istanbul ignore next */ []);
 	loading = input(false, {
 		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
@@ -155,6 +193,16 @@ var UiAxisChartBase = class UiAxisChartBase {
 	hiddenSeries = signal([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
 	emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
 	supportsDashes = false;
+	money = computed(() => moneyFormatterParts(this.valueFormatter()), ...ngDevMode ? [{ debugName: "money" }] : /* istanbul ignore next */ []);
+	privacyMode = computed(() => this.sensitive() ?? !!this.money() ? this.privacy() : "visible", ...ngDevMode ? [{ debugName: "privacyMode" }] : /* istanbul ignore next */ []);
+	masked = computed(() => this.privacyMode() !== "visible", ...ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []);
+	concealed = computed(() => this.privacyMode() === "hidden", ...ngDevMode ? [{ debugName: "concealed" }] : /* istanbul ignore next */ []);
+	displayFormatter = computed(() => {
+		const money = this.money();
+		if (!this.masked()) return money?.format ?? this.valueFormatter();
+		const mask = money?.mask ?? maskMoney(this.uiFormat.currency, this.uiFormat.locale);
+		return () => mask;
+	}, ...ngDevMode ? [{ debugName: "displayFormatter" }] : /* istanbul ignore next */ []);
 	apexHeight = computed(() => {
 		const height = this.height();
 		return height === "fill" ? "100%" : height;
@@ -196,7 +244,7 @@ var UiAxisChartBase = class UiAxisChartBase {
 		return count ? `${count} more in grey` : "";
 	}, ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
 	formatValue(value) {
-		return value === null || value === void 0 ? "-" : this.valueFormatter()(value);
+		return value === null || value === void 0 ? "-" : this.displayFormatter()(value);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -247,6 +295,13 @@ var UiAxisChartBase = class UiAxisChartBase {
 				isRequired: false,
 				transformFunction: null
 			},
+			sensitive: {
+				classPropertyName: "sensitive",
+				publicName: "sensitive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			categoryLabel: {
 				classPropertyName: "categoryLabel",
 				publicName: "categoryLabel",
@@ -354,6 +409,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		sensitive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sensitive",
+				required: false
+			}]
+		}],
 		categoryLabel: [{
 			type: i0.Input,
 			args: [{
@@ -491,7 +554,7 @@ function chartTooltipHtml(title, rows, footer = "", total) {
                 style="--ui-chart-tooltip-colour: ${escapeHtml(row.colour)}"
             ></span>
             <span class="ui-chart-tooltip-name">${escapeHtml(row.name)}</span>
-            <span class="ui-chart-tooltip-value">${escapeHtml(row.value)}</span>
+            ${row.value === void 0 ? "" : `<span class="ui-chart-tooltip-value">${escapeHtml(row.value)}</span>`}
         </div>
     `).join("");
 	return `
@@ -1027,8 +1090,15 @@ var UiChartTableComponent = class UiChartTableComponent {
 		...ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	masked = input(false, {
+		...ngDevMode ? { debugName: "masked" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	isValue(value) {
+		return value !== null && value !== void 0;
+	}
 	format(value) {
-		return value === null || value === void 0 ? "-" : this.valueFormatter()(value);
+		return this.isValue(value) ? this.valueFormatter()(value) : "-";
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -1086,6 +1156,13 @@ var UiChartTableComponent = class UiChartTableComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			masked: {
+				classPropertyName: "masked",
+				publicName: "masked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		ngImport: i0,
@@ -1107,7 +1184,12 @@ var UiChartTableComponent = class UiChartTableComponent {
                         <tr>
                             <th scope="row" class="ui-text-body-alt">{{ category }}</th>
                             @for (item of series(); track item.name) {
-                                <td class="ui-text-body-alt">{{ format(item.data[row]) }}</td>
+                                <td class="ui-text-body-alt">
+                                    @if (masked() && isValue(item.data[row])) {
+                                        <span aria-hidden="true">{{ format(item.data[row]) }}</span>
+                                        <span class="sr-only">amount hidden</span>
+                                    } @else {{{ format(item.data[row]) }}}
+                                </td>
                             }
                         </tr>
                     }
@@ -1146,7 +1228,12 @@ i0.ɵɵngDeclareClassMetadata({
                         <tr>
                             <th scope="row" class="ui-text-body-alt">{{ category }}</th>
                             @for (item of series(); track item.name) {
-                                <td class="ui-text-body-alt">{{ format(item.data[row]) }}</td>
+                                <td class="ui-text-body-alt">
+                                    @if (masked() && isValue(item.data[row])) {
+                                        <span aria-hidden="true">{{ format(item.data[row]) }}</span>
+                                        <span class="sr-only">amount hidden</span>
+                                    } @else {{{ format(item.data[row]) }}}
+                                </td>
                             }
                         </tr>
                     }
@@ -1205,6 +1292,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "visible",
 				required: false
 			}]
+		}],
+		masked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "masked",
+				required: false
+			}]
 		}]
 	}
 });
@@ -1232,6 +1327,10 @@ var UiChartFrameComponent = class UiChartFrameComponent {
 		...ngDevMode ? { debugName: "showTable" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	masked = input(false, {
+		...ngDevMode ? { debugName: "masked" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	showLegend = input(true, {
 		...ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -1355,6 +1454,13 @@ var UiChartFrameComponent = class UiChartFrameComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			masked: {
+				classPropertyName: "masked",
+				publicName: "masked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			showLegend: {
 				classPropertyName: "showLegend",
 				publicName: "showLegend",
@@ -1425,6 +1531,7 @@ var UiChartFrameComponent = class UiChartFrameComponent {
                 [categories]="categories()"
                 [series]="series()"
                 [valueFormatter]="valueFormatter()"
+                [masked]="masked()"
                 [categoryLabel]="categoryLabel()"
                 [visible]="showTable()"
             />
@@ -1453,7 +1560,8 @@ var UiChartFrameComponent = class UiChartFrameComponent {
 					"series",
 					"valueFormatter",
 					"categoryLabel",
-					"visible"
+					"visible",
+					"masked"
 				]
 			},
 			{
@@ -1533,6 +1641,7 @@ i0.ɵɵngDeclareClassMetadata({
                 [categories]="categories()"
                 [series]="series()"
                 [valueFormatter]="valueFormatter()"
+                [masked]="masked()"
                 [categoryLabel]="categoryLabel()"
                 [visible]="showTable()"
             />
@@ -1669,6 +1778,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		masked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "masked",
+				required: false
+			}]
+		}],
 		showLegend: [{
 			type: i0.Input,
 			args: [{
@@ -1716,15 +1833,16 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 		const base = baseChartOptions(ink);
 		const labels = chartAxisLabels(ink);
 		const horizontal = this.orientation() === "horizontal";
-		const format = this.valueFormatter();
+		const format = this.displayFormatter();
+		const masked = this.masked();
 		const series = this.series();
 		const categories = this.categories();
 		const colours = this.colours();
 		const picked = categories.indexOf(this.highlightCategory() ?? "");
 		const thickness = `${MAX_BAR_THICKNESS}px`;
-		const valueLabels = {
+		const valueLabels = masked ? { show: false } : {
 			...labels,
-			formatter: format
+			formatter: (value) => format(Number(value))
 		};
 		return mergeChartOptions({
 			...base,
@@ -1737,7 +1855,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 			colors: picked < 0 ? colours : colours.map((colour) => ({ dataPointIndex }) => dataPointIndex === picked ? colour : fade(colour, ink)),
 			series: series.map((item) => ({
 				name: item.name,
-				data: item.data
+				data: this.concealed() ? item.data.map(() => null) : item.data
 			})),
 			plotOptions: { bar: {
 				horizontal,
@@ -1754,10 +1872,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 			xaxis: {
 				...base.xaxis,
 				categories,
-				labels: horizontal ? {
-					...labels,
-					formatter: (value) => format(Number(value))
-				} : labels
+				labels: horizontal ? valueLabels : labels
 			},
 			yaxis: {
 				...base.yaxis,
@@ -1768,7 +1883,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 				xaxis: { lines: { show: horizontal } },
 				yaxis: { lines: { show: !horizontal } }
 			},
-			tooltip: this.stacked() ? {
+			tooltip: this.concealed() ? { enabled: false } : this.stacked() ? {
 				shared: true,
 				intersect: false,
 				custom: ({ dataPointIndex }) => {
@@ -1780,8 +1895,8 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 					const values = rows.map((row) => row.raw).filter((value) => value !== null);
 					return chartTooltipHtml(categories[dataPointIndex] ?? "", rows.map((row) => ({
 						...row,
-						value: this.formatValue(row.raw)
-					})), "", {
+						value: masked ? void 0 : this.formatValue(row.raw)
+					})), "", masked ? void 0 : {
 						name: "Total",
 						value: this.formatValue(values.length ? values.reduce((sum, value) => sum + value, 0) : null)
 					});
@@ -1792,7 +1907,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 				custom: ({ seriesIndex, dataPointIndex }) => chartTooltipHtml(categories[dataPointIndex] ?? "", [{
 					colour: colours[seriesIndex],
 					name: series[seriesIndex]?.name ?? "",
-					value: this.formatValue(series[seriesIndex]?.data[dataPointIndex])
+					value: masked ? void 0 : this.formatValue(series[seriesIndex]?.data[dataPointIndex])
 				}])
 			}
 		}, this.options());
@@ -1837,7 +1952,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 		host: { classAttribute: "block w-full min-w-0" },
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
+		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
 		dependencies: [{
 			kind: "component",
 			type: UiChartFrameComponent,
@@ -1857,6 +1972,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
 				"loading",
 				"empty",
 				"showTable",
+				"masked",
 				"showLegend",
 				"emphasis"
 			],
@@ -1875,7 +1991,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-bar-chart",
 			imports: [UiChartFrameComponent],
 			host: { class: "block w-full min-w-0" },
-			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
+			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
 		}]
 	}],
 	propDecorators: {
@@ -1954,6 +2070,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 		const colours = this.colours();
 		const dashed = this.dashed();
 		const muted = this.isMuted();
+		const masked = this.masked();
 		const order = series.map((_, index) => index).sort((a, b) => Number(muted[b]) - Number(muted[a]));
 		return mergeChartOptions({
 			...base,
@@ -1966,7 +2083,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 			colors: order.map((index) => colours[index]),
 			series: order.map((index) => ({
 				name: series[index].name,
-				data: series[index].data
+				data: this.concealed() ? series[index].data.map(() => null) : series[index].data
 			})),
 			stroke: {
 				curve: this.curve(),
@@ -2002,9 +2119,9 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 			},
 			yaxis: {
 				...base.yaxis,
-				labels: {
+				labels: masked ? { show: false } : {
 					...labels,
-					formatter: this.valueFormatter()
+					formatter: this.displayFormatter()
 				}
 			},
 			grid: {
@@ -2012,7 +2129,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 				xaxis: { lines: { show: false } },
 				yaxis: { lines: { show: true } }
 			},
-			tooltip: {
+			tooltip: this.concealed() ? { enabled: false } : {
 				shared: true,
 				intersect: false,
 				custom: ({ dataPointIndex }) => {
@@ -2024,7 +2141,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 						muted: muted[index]
 					})).filter((row) => !this.hiddenSeries().includes(row.name)).sort((a, b) => this.tooltipOrder(a, b)).map((row) => ({
 						...row,
-						value: this.formatValue(row.raw)
+						value: masked ? void 0 : this.formatValue(row.raw)
 					}));
 					const shown = rows.filter((row) => !row.muted).length + MAX_CONTEXT_ROWS;
 					const extra = rows.length - shown;
@@ -2087,7 +2204,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 		host: { classAttribute: "block w-full min-w-0" },
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
+		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
 		dependencies: [{
 			kind: "component",
 			type: UiChartFrameComponent,
@@ -2107,6 +2224,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
 				"loading",
 				"empty",
 				"showTable",
+				"masked",
 				"showLegend",
 				"emphasis"
 			],
@@ -2125,7 +2243,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-line-chart",
 			imports: [UiChartFrameComponent],
 			host: { class: "block w-full min-w-0" },
-			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
+			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
 		}]
 	}],
 	propDecorators: {
@@ -2213,6 +2331,12 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 		const slices = this.slices();
 		const donut = this.variant() === "donut";
 		const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+		const concealed = this.concealed();
+		const drawn = concealed ? [{
+			name: "",
+			value: 1,
+			colour: ink.grid
+		}] : slices;
 		const centreText = {
 			fontSize: "12px",
 			color: ink.muted,
@@ -2225,9 +2349,9 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 				type: donut ? "donut" : "pie",
 				height: this.apexHeight()
 			},
-			colors: slices.map((slice) => slice.colour),
-			labels: slices.map((slice) => slice.name),
-			series: slices.map((slice) => slice.value),
+			colors: drawn.map((slice) => slice.colour),
+			labels: drawn.map((slice) => slice.name),
+			series: drawn.map((slice) => slice.value),
 			stroke: {
 				show: true,
 				width: 2,
@@ -2235,7 +2359,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 			},
 			states: {
 				...base.states,
-				hover: { filter: { type: "darken" } }
+				hover: { filter: { type: concealed ? "none" : "darken" } }
 			},
 			plotOptions: { pie: {
 				expandOnClick: false,
@@ -2261,7 +2385,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 					}
 				}
 			} },
-			tooltip: {
+			tooltip: concealed ? { enabled: false } : {
 				theme: "light",
 				fillSeriesColor: false,
 				custom: ({ seriesIndex }) => {
@@ -2269,7 +2393,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 					return slice ? chartTooltipHtml("", [{
 						colour: slice.colour,
 						name: slice.name,
-						value: this.formatValue(slice.value)
+						value: this.masked() ? void 0 : this.formatValue(slice.value)
 					}], total ? `${this.percentFormatter.format(slice.value / total)} of total` : "") : "";
 				}
 			}
@@ -2308,7 +2432,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 		host: { classAttribute: "block w-full min-w-0" },
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
+		template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n",
 		dependencies: [{
 			kind: "component",
 			type: UiChartFrameComponent,
@@ -2328,6 +2452,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
 				"loading",
 				"empty",
 				"showTable",
+				"masked",
 				"showLegend",
 				"emphasis"
 			],
@@ -2346,7 +2471,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-pie-chart",
 			imports: [UiChartFrameComponent],
 			host: { class: "block w-full min-w-0" },
-			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"valueFormatter()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
+			template: "<ui-chart-frame\n    [options]=\"chartOptions()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [categories]=\"categories()\"\n    [series]=\"series()\"\n    [legendItems]=\"legendItems()\"\n    [legendNote]=\"legendNote()\"\n    [(hiddenSeries)]=\"hiddenSeries\"\n    [(emphasis)]=\"emphasis\"\n    [showLegend]=\"legend() === 'auto'\"\n    [valueFormatter]=\"displayFormatter()\"\n    [masked]=\"masked()\"\n    [categoryLabel]=\"categoryLabel()\"\n    [height]=\"height()\"\n    [emptyText]=\"emptyText()\"\n    [loading]=\"loading()\"\n    [empty]=\"isEmpty()\"\n    [showTable]=\"showTable()\"\n/>\n"
 		}]
 	}],
 	propDecorators: {
@@ -7892,6 +8017,7 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var UiMoneyComponent = class UiMoneyComponent {
 	defaults = inject(UI_FORMAT);
+	privacy = inject(UI_PRIVACY);
 	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 	currency = input(this.defaults.currency, ...ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []);
 	locale = input(this.defaults.locale, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
@@ -7913,18 +8039,20 @@ var UiMoneyComponent = class UiMoneyComponent {
 		const value = this.value();
 		return value === null || Number.isNaN(value) ? null : value || 0;
 	}, ...ngDevMode ? [{ debugName: "amount" }] : /* istanbul ignore next */ []);
+	masked = computed(() => this.privacy() !== "visible" && this.amount() !== null, ...ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []);
+	mask = computed(() => maskMoney(this.currency(), this.locale()), ...ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []);
 	formatted = computed(() => {
 		const amount = this.amount();
 		return amount === null ? this.placeholder() : this.format(amount, this.compact());
 	}, ...ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []);
 	title = computed(() => {
 		const amount = this.amount();
-		return this.compact() && amount !== null ? this.format(amount, false) : null;
+		return this.compact() && amount !== null && !this.masked() ? this.format(amount, false) : null;
 	}, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 	generatedClasses = computed(() => ["ui-money", this.signClass()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
 	signClass = computed(() => {
 		const amount = this.amount();
-		if (!this.colourBySign() || amount === null) return "";
+		if (!this.colourBySign() || amount === null || this.privacy() === "hidden") return "";
 		if (amount > 0) return "ui-money--positive";
 		return amount < 0 ? "ui-money--negative" : "";
 	}, ...ngDevMode ? [{ debugName: "signClass" }] : /* istanbul ignore next */ []);
@@ -7949,7 +8077,7 @@ var UiMoneyComponent = class UiMoneyComponent {
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
+		minVersion: "17.0.0",
 		version: "22.2.1",
 		type: UiMoneyComponent,
 		isStandalone: true,
@@ -8017,7 +8145,7 @@ var UiMoneyComponent = class UiMoneyComponent {
 			"attr.title": "title()"
 		} },
 		ngImport: i0,
-		template: "{{ formatted() }}\n",
+		template: "@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask() }}</span>\n    <span class=\"sr-only\">amount hidden</span>\n} @else {{{ formatted() }}}\n",
 		styles: ["@layer properties;:host(.ui-money){white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}:host(.ui-money--positive){color:var(--color-success-600, var(--color-teal-600))}:host(.ui-money--negative){color:var(--color-danger-600, var(--color-red-600))}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@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-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 	});
 };
@@ -8034,7 +8162,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class]": "generatedClasses()",
 				"[attr.title]": "title()"
 			},
-			template: "{{ formatted() }}\n",
+			template: "@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask() }}</span>\n    <span class=\"sr-only\">amount hidden</span>\n} @else {{{ formatted() }}}\n",
 			styles: ["@layer properties;:host(.ui-money){white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}:host(.ui-money--positive){color:var(--color-success-600, var(--color-teal-600))}:host(.ui-money--negative){color:var(--color-danger-600, var(--color-red-600))}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@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-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
@@ -9107,6 +9235,7 @@ var UiTableComponent = class UiTableComponent {
 	destroyRef = inject(DestroyRef);
 	cdr = inject(ChangeDetectorRef);
 	registry = inject(UiTableRegistry);
+	uiFormat = inject(UI_FORMAT);
 	loadedQuery = "";
 	loadedFilters = {};
 	resizeState = null;
@@ -9141,15 +9270,15 @@ var UiTableComponent = class UiTableComponent {
 	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 "currency": return new Intl.NumberFormat(void 0, {
-				style: "currency",
-				currency: column.currency ?? "USD"
-			}).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);
@@ -9563,7 +9692,7 @@ var UiTableComponent = class UiTableComponent {
 			heroChevronDown
 		})],
 		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]=\"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()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus: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                                    <ng-icon\n                                        [name]=\"sortIcon(column)\"\n                                        class=\"ms-auto size-4 shrink-0\"\n                                    />\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+		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]=\"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()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus: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                                    <ng-icon\n                                        [name]=\"sortIcon(column)\"\n                                        class=\"ms-auto size-4 shrink-0\"\n                                    />\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (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 {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
 		styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.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}: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)));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 [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-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [
 			{
@@ -9714,6 +9843,21 @@ var UiTableComponent = class UiTableComponent {
 				type: UiLoadingComponent,
 				selector: "ui-loading",
 				inputs: ["type"]
+			},
+			{
+				kind: "component",
+				type: UiMoneyComponent,
+				selector: "ui-money",
+				inputs: [
+					"value",
+					"currency",
+					"locale",
+					"signDisplay",
+					"colourBySign",
+					"wholeUnits",
+					"compact",
+					"placeholder"
+				]
 			}
 		]
 	});
@@ -9735,7 +9879,8 @@ i0.ɵɵngDeclareClassMetadata({
 				UiDropdownDirective,
 				UiInputComponent,
 				UiSelectComponent,
-				UiLoadingComponent
+				UiLoadingComponent,
+				UiMoneyComponent
 			],
 			host: { class: "block" },
 			providers: [provideIcons({
@@ -9747,7 +9892,7 @@ i0.ɵɵngDeclareClassMetadata({
 				heroChevronUp,
 				heroChevronDown
 			})],
-			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]=\"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()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus: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                                    <ng-icon\n                                        [name]=\"sortIcon(column)\"\n                                        class=\"ms-auto size-4 shrink-0\"\n                                    />\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+			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]=\"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()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus: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                                    <ng-icon\n                                        [name]=\"sortIcon(column)\"\n                                        class=\"ms-auto size-4 shrink-0\"\n                                    />\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (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 {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
 			styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.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}: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)));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 [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-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
@@ -13933,6 +14078,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, lastDaysPreset, monthPreset, provideUiFormat, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
+export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, lastDaysPreset, maskMoney, moneyFormatterParts, monthPreset, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
 
 //# sourceMappingURL=area8975-ui.mjs.map