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

package/fesm2022/area8975-ui-charts.mjs

@@ -0,0 +1,2813 @@
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { chartColour, chartInk, chartLabelInk, chartSeriesStyle, mixChartColours } from "@area8975/ui/chart-palette";
+import { UI_FORMAT, UI_PRIVACY, maskMoney, moneyFormatterParts } from "@area8975/ui/format";
+import { UiDarkClass } from "@area8975/ui/theme";
+import { UiSkeletonComponent } from "@area8975/ui/skeleton";
+import { NgTemplateOutlet } from "@angular/common";
+var UiChartBase = class UiChartBase {
+	uiFormat = inject(UI_FORMAT);
+	privacy = inject(UI_PRIVACY);
+	dark = inject(UiDarkClass).isDark;
+	ink = computed(() => chartInk(this.dark()), ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
+	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 */ {},
+		transform: booleanAttribute
+	});
+	emptyText = input("No data to show", ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	showTable = input(false, {
+		...ngDevMode ? { debugName: "showTable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	options = input(null, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	legend = input("auto", ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
+	hiddenSeries = signal([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
+	emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
+	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;
+	}, ...ngDevMode ? [{ debugName: "apexHeight" }] : /* istanbul ignore next */ []);
+	formatValue(value) {
+		return value === null || value === void 0 ? "-" : this.displayFormatter()(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiChartBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiChartBase,
+		isStandalone: true,
+		inputs: {
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueFormatter: {
+				classPropertyName: "valueFormatter",
+				publicName: "valueFormatter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sensitive: {
+				classPropertyName: "sensitive",
+				publicName: "sensitive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			categoryLabel: {
+				classPropertyName: "categoryLabel",
+				publicName: "categoryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTable: {
+				classPropertyName: "showTable",
+				publicName: "showTable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiChartBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: true
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		valueFormatter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormatter",
+				required: false
+			}]
+		}],
+		sensitive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sensitive",
+				required: false
+			}]
+		}],
+		categoryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categoryLabel",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		showTable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTable",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}]
+	}
+});
+function numberFormatter(locale) {
+	const formatter = new Intl.NumberFormat(locale);
+	return (value) => formatter.format(value);
+}
+var UiAxisChartBase = class UiAxisChartBase extends UiChartBase {
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
+	highlightKeepsColours = input(false, {
+		...ngDevMode ? { debugName: "highlightKeepsColours" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	supportsDashes = false;
+	isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	isMuted = computed(() => {
+		const highlight = this.highlight();
+		return this.series().map((item) => !!highlight && !highlight.includes(item.name));
+	}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
+	colourOrder = computed(() => this.highlightKeepsColours() ? null : this.highlight(), ...ngDevMode ? [{ debugName: "colourOrder" }] : /* istanbul ignore next */ []);
+	styles = computed(() => {
+		const order = this.colourOrder();
+		const muted = this.isMuted();
+		return this.series().map((item, index) => {
+			const dashed = this.supportsDashes && !!item.dashed;
+			if (muted[index]) return {
+				colour: this.ink().context,
+				dashed
+			};
+			const style = chartSeriesStyle(order ? order.indexOf(item.name) : index, this.supportsDashes, this.dark());
+			return {
+				colour: item.colour ?? style.colour,
+				dashed: style.dashed || dashed
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	colours = computed(() => this.styles().map((style) => style.colour), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	dashed = computed(() => this.styles().map((style) => style.dashed), ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		const order = this.colourOrder();
+		const items = this.series().map((item, index) => ({
+			name: item.name,
+			...this.styles()[index]
+		})).filter((_, index) => !this.isMuted()[index]);
+		return order ? items.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) : items;
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	legendNote = computed(() => {
+		const count = this.isMuted().filter(Boolean).length;
+		return count ? `${count} more in grey` : "";
+	}, ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiAxisChartBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiAxisChartBase,
+		isStandalone: true,
+		inputs: {
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			highlight: {
+				classPropertyName: "highlight",
+				publicName: "highlight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			highlightKeepsColours: {
+				classPropertyName: "highlightKeepsColours",
+				publicName: "highlightKeepsColours",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiAxisChartBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: true
+			}]
+		}],
+		highlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlight",
+				required: false
+			}]
+		}],
+		highlightKeepsColours: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlightKeepsColours",
+				required: false
+			}]
+		}]
+	}
+});
+function chartAxisLabels(ink) {
+	return { style: {
+		colors: ink.muted,
+		fontSize: "12px"
+	} };
+}
+const LABEL_GAP = 16;
+const AXIS_FONT_SIZE = 12;
+function categoryLabelStep(count, width, labelWidth) {
+	if (count <= 1 || width <= 0) return 1;
+	return Math.max(1, Math.ceil((labelWidth + LABEL_GAP) / (width / count)));
+}
+function thinnedCategoryLabels(categories) {
+	const widest = Math.max(0, ...categories.map(measureLabel));
+	return (value, _, context) => {
+		const position = typeof value === "number" ? Math.floor(value) - 1 : null;
+		const index = position ?? context?.i;
+		const label = position === null ? String(value) : categories[position] ?? "";
+		const width = context?.w?.globals?.gridWidth ?? 0;
+		if (index === void 0) return label;
+		const step = categoryLabelStep(categories.length, width, widest);
+		return (categories.length - 1 - index) % step === 0 ? label : "";
+	};
+}
+let measuringContext;
+function measureLabel(label) {
+	if (measuringContext === void 0) measuringContext = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	if (!measuringContext) return label.length * AXIS_FONT_SIZE * .6;
+	measuringContext.font = `${AXIS_FONT_SIZE}px ${getComputedStyle(document.body).fontFamily}`;
+	return measuringContext.measureText(label).width;
+}
+function baseChartOptions(ink) {
+	const labels = chartAxisLabels(ink);
+	return {
+		chart: {
+			fontFamily: "inherit",
+			foreColor: ink.muted,
+			parentHeightOffset: 0,
+			toolbar: { show: false },
+			zoom: { enabled: false },
+			animations: {
+				enabled: true,
+				speed: 300
+			}
+		},
+		dataLabels: { enabled: false },
+		fill: {
+			type: "solid",
+			opacity: 1
+		},
+		grid: {
+			borderColor: ink.grid,
+			strokeDashArray: 0,
+			padding: {
+				top: 0,
+				right: 8,
+				bottom: 0,
+				left: 8
+			}
+		},
+		legend: { show: false },
+		xaxis: {
+			axisBorder: {
+				show: true,
+				color: ink.grid
+			},
+			axisTicks: { show: false },
+			labels
+		},
+		yaxis: {
+			axisBorder: { show: false },
+			axisTicks: { show: false },
+			labels
+		},
+		states: {
+			hover: { filter: { type: "lighten" } },
+			active: { filter: { type: "none" } }
+		}
+	};
+}
+function mergeChartOptions(base, overrides) {
+	return overrides ? deepMerge(base, overrides) : base;
+}
+function chartTooltipHtml(title, rows, footer = "", total) {
+	const items = rows.map((row) => `
+        <div class="ui-chart-tooltip-row ui-text-body-alt">
+            <span
+                class="ui-chart-tooltip-dot${row.dashed ? " ui-chart-tooltip-dot--dashed" : ""}"
+                style="--ui-chart-tooltip-colour: ${escapeHtml(row.colour)}"
+            ></span>
+            <span class="ui-chart-tooltip-name">${escapeHtml(row.name)}</span>
+            ${row.value === void 0 ? "" : `<span class="ui-chart-tooltip-value">${escapeHtml(row.value)}</span>`}
+        </div>
+    `).join("");
+	return `
+        <div class="ui-chart-tooltip">
+            ${title ? `<div class="ui-chart-tooltip-title ui-text-caption">${escapeHtml(title)}</div>` : ""}
+            ${items}
+            ${total ? `
+                <div class="ui-chart-tooltip-row ui-chart-tooltip-total ui-text-body-alt">
+                    <span class="ui-chart-tooltip-name">${escapeHtml(total.name)}</span>
+                    <span class="ui-chart-tooltip-value">${escapeHtml(total.value)}</span>
+                </div>
+            ` : ""}
+            ${footer ? `<div class="ui-chart-tooltip-footer ui-text-caption">${escapeHtml(footer)}</div>` : ""}
+        </div>
+    `;
+}
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function deepMerge(base, overrides) {
+	if (!isPlainObject(base) || !isPlainObject(overrides)) return overrides === void 0 ? base : overrides;
+	const merged = { ...base };
+	for (const [key, value] of Object.entries(overrides)) merged[key] = deepMerge(base[key], value);
+	return merged;
+}
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+var UiChartLegendComponent = class UiChartLegendComponent {
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	note = input("", ...ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []);
+	for = input(null, ...ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []);
+	itemsWith = input(null, ...ngDevMode ? [{ debugName: "itemsWith" }] : /* istanbul ignore next */ []);
+	hidden = model([], ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
+	toggleable = input(false, {
+		...ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	focusChange = output();
+	hovered = signal(null, ...ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []);
+	focused = signal(null, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	pointedAt = computed(() => this.hovered() ?? this.focused(), ...ngDevMode ? [{ debugName: "pointedAt" }] : /* istanbul ignore next */ []);
+	shownItems = computed(() => {
+		const source = this.for();
+		if (!source) return this.items();
+		const adjust = this.itemsWith();
+		return adjust ? adjust(source.legendItems()) : source.legendItems();
+	}, ...ngDevMode ? [{ debugName: "shownItems" }] : /* istanbul ignore next */ []);
+	shownNote = computed(() => this.for()?.legendNote() ?? this.note(), ...ngDevMode ? [{ debugName: "shownNote" }] : /* istanbul ignore next */ []);
+	hiddenNames = computed(() => this.for()?.hiddenSeries() ?? this.hidden(), ...ngDevMode ? [{ debugName: "hiddenNames" }] : /* istanbul ignore next */ []);
+	visibleCount = computed(() => this.shownItems().filter((item) => !this.hiddenNames().includes(item.name)).length, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const name = this.pointedAt();
+			untracked(() => {
+				this.for()?.emphasis.set(name);
+				this.focusChange.emit(name);
+			});
+		});
+	}
+	hover(name) {
+		this.hovered.set(name);
+	}
+	focus(name, event) {
+		if (name && !event?.target?.matches(":focus-visible")) return;
+		this.focused.set(name);
+	}
+	isHidden(item) {
+		return this.hiddenNames().includes(item.name);
+	}
+	isLocked(item) {
+		return !this.isHidden(item) && this.visibleCount() === 1;
+	}
+	toggle(item) {
+		if (this.isLocked(item)) return;
+		const hidden = this.hiddenNames();
+		const next = hidden.includes(item.name) ? hidden.filter((name) => name !== item.name) : [...hidden, item.name];
+		const source = this.for();
+		if (source) source.hiddenSeries.set(next);
+		else this.hidden.set(next);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiChartLegendComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiChartLegendComponent,
+		isStandalone: true,
+		selector: "ui-chart-legend",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			note: {
+				classPropertyName: "note",
+				publicName: "note",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			for: {
+				classPropertyName: "for",
+				publicName: "for",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			itemsWith: {
+				classPropertyName: "itemsWith",
+				publicName: "itemsWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hidden: {
+				classPropertyName: "hidden",
+				publicName: "hidden",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleable: {
+				classPropertyName: "toggleable",
+				publicName: "toggleable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			hidden: "hiddenChange",
+			focusChange: "focusChange"
+		},
+		ngImport: i0,
+		template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name, $event)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
+		styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{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;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-duration: 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;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiChartLegendComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-chart-legend",
+			template: "<ul class=\"ui-chart-legend\" role=\"list\">\n    @for (item of shownItems(); track item.name) {\n        <li\n            (mouseenter)=\"hover(item.name)\"\n            (mouseleave)=\"hover(null)\"\n            (focusin)=\"focus(item.name, $event)\"\n            (focusout)=\"focus(null)\"\n        >\n            @if (toggleable()) {\n                <button\n                    type=\"button\"\n                    class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n                    [attr.aria-pressed]=\"!isHidden(item)\"\n                    [attr.aria-disabled]=\"isLocked(item) || null\"\n                    [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n                    (click)=\"toggle(item)\"\n                >\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </button>\n            } @else {\n                <span class=\"ui-chart-legend-item ui-text-body-alt\">\n                    <span\n                        class=\"ui-chart-legend-key\"\n                        [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n                        [style.--ui-chart-legend-colour]=\"item.colour\"\n                    ></span>\n                    {{ item.label ?? item.name }}\n                </span>\n            }\n        </li>\n    }\n</ul>\n\n@if (shownNote()) {\n    <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
+			styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{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;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-duration: 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;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		note: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "note",
+				required: false
+			}]
+		}],
+		for: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "for",
+				required: false
+			}]
+		}],
+		itemsWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemsWith",
+				required: false
+			}]
+		}],
+		hidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hidden",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["hiddenChange"]
+		}],
+		toggleable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleable",
+				required: false
+			}]
+		}],
+		focusChange: [{
+			type: i0.Output,
+			args: ["focusChange"]
+		}]
+	}
+});
+var UiChartComponent = class UiChartComponent {
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	hiddenSeries = input([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
+	emphasis = input(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
+	canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+	chart = signal(null, ...ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []);
+	destroyed = false;
+	drawnNames = [];
+	host = inject(ElementRef);
+	resizeObserver = null;
+	constructor() {
+		afterNextRender(async () => {
+			const { default: Apex } = await import("apexcharts");
+			if (this.destroyed) return;
+			const chart = new Apex(this.canvas().nativeElement, this.withOwnParentResizing(untracked(this.options)));
+			chart.addEventListener("updated", () => {
+				this.applyHidden(chart);
+				this.applyEmphasis();
+			});
+			this.drawnNames = this.seriesNames();
+			await chart.render();
+			this.chart.set(chart);
+			this.redrawWhenResized(chart);
+			this.applyHidden(chart);
+			this.applyEmphasis();
+		});
+		effect(() => {
+			const options = this.options();
+			const chart = this.chart();
+			if (!chart) return;
+			const names = this.seriesNames();
+			const reordered = names.length === this.drawnNames.length && names.some((name, index) => name !== this.drawnNames[index]) && names.every((name) => this.drawnNames.includes(name));
+			this.drawnNames = names;
+			chart.updateOptions(this.withOwnParentResizing(options), false, !reordered);
+		});
+		effect(() => {
+			this.emphasis();
+			if (this.chart()) this.applyEmphasis();
+		});
+		effect(() => {
+			const chart = this.chart();
+			if (chart) {
+				this.applyHidden(chart);
+				this.applyEmphasis();
+			}
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.destroyed = true;
+			this.resizeObserver?.disconnect();
+			this.chart()?.destroy();
+		});
+	}
+	withOwnParentResizing(options) {
+		return {
+			...options,
+			chart: {
+				...options.chart,
+				redrawOnParentResize: false
+			}
+		};
+	}
+	redrawWhenResized(chart) {
+		this.resizeObserver = new ResizeObserver(() => {
+			if (!this.isDrawnAtHostSize()) chart.updateSeries(untracked(this.options).series ?? [], false);
+		});
+		this.resizeObserver.observe(this.host.nativeElement);
+	}
+	isDrawnAtHostSize() {
+		const host = this.host.nativeElement;
+		const drawn = this.canvas().nativeElement.querySelector(".apexcharts-canvas");
+		return !!drawn && drawn.offsetWidth === host.offsetWidth && drawn.offsetHeight === host.offsetHeight;
+	}
+	applyHidden(chart) {
+		const hidden = this.hiddenSeries();
+		if (!this.canvas().nativeElement.querySelector(".apexcharts-inner .apexcharts-series")) return;
+		for (const name of this.seriesNames()) {
+			if (!name) continue;
+			if (hidden.includes(name)) chart.hideSeries(name);
+			else chart.showSeries(name);
+		}
+	}
+	applyEmphasis() {
+		const names = this.seriesNames();
+		const emphasis = untracked(this.emphasis);
+		const active = emphasis && names.includes(emphasis) && !untracked(this.hiddenSeries).includes(emphasis) ? emphasis : null;
+		const groups = this.canvas().nativeElement.querySelectorAll(".apexcharts-series[data\\:realIndex]");
+		for (const group of groups) {
+			const name = names[Number(group.getAttribute("data:realIndex"))];
+			group.classList.toggle("ui-chart-series--faded", !!active && name !== active);
+		}
+	}
+	seriesNames() {
+		const { series = [], labels = [] } = untracked(this.options);
+		return series.map((item, index) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : labels[index] ?? null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: UiChartComponent,
+		isStandalone: true,
+		selector: "ui-chart",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			hiddenSeries: {
+				classPropertyName: "hiddenSeries",
+				publicName: "hiddenSeries",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emphasis: {
+				classPropertyName: "emphasis",
+				publicName: "emphasis",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "ui-chart" },
+		viewQueries: [{
+			propertyName: "canvas",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+        <div
+            #canvas
+            class="ui-chart-canvas"
+            role="img"
+            [attr.aria-label]="ariaLabel()"
+        ></div>
+    `,
+		isInline: true,
+		styles: [".ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--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,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-border-style: solid;--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;--tw-font-weight: initial;--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"],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-chart",
+			template: `
+        <div
+            #canvas
+            class="ui-chart-canvas"
+            role="img"
+            [attr.aria-label]="ariaLabel()"
+        ></div>
+    `,
+			encapsulation: ViewEncapsulation.None,
+			host: { class: "ui-chart" },
+			styles: [".ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--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,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-border-style: solid;--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;--tw-font-weight: initial;--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"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: true
+			}]
+		}],
+		hiddenSeries: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hiddenSeries",
+				required: false
+			}]
+		}],
+		emphasis: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emphasis",
+				required: false
+			}]
+		}],
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+var UiChartTableComponent = class UiChartTableComponent {
+	caption = input.required(...ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []);
+	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	valueFormatter = input.required(...ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []);
+	categoryLabel = input("Category", ...ngDevMode ? [{ debugName: "categoryLabel" }] : /* istanbul ignore next */ []);
+	visible = input(false, {
+		...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 this.isValue(value) ? this.valueFormatter()(value) : "-";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiChartTableComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiChartTableComponent,
+		isStandalone: true,
+		selector: "ui-chart-table",
+		inputs: {
+			caption: {
+				classPropertyName: "caption",
+				publicName: "caption",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			valueFormatter: {
+				classPropertyName: "valueFormatter",
+				publicName: "valueFormatter",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categoryLabel: {
+				classPropertyName: "categoryLabel",
+				publicName: "categoryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visible: {
+				classPropertyName: "visible",
+				publicName: "visible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			masked: {
+				classPropertyName: "masked",
+				publicName: "masked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+        <!-- sr-only on a wrapper, the table's own width would otherwise override it -->
+        <div [class.sr-only]="!visible()">
+            <table class="ui-chart-table">
+                <caption class="sr-only">{{ caption() }}</caption>
+                <thead>
+                    <tr>
+                        <th scope="col" class="ui-text-caption">{{ categoryLabel() }}</th>
+                        @for (item of series(); track item.name) {
+                            <th scope="col" class="ui-text-caption">{{ item.name }}</th>
+                        }
+                    </tr>
+                </thead>
+                <tbody>
+                    @for (category of categories(); track $index; let row = $index) {
+                        <tr>
+                            <th scope="row" class="ui-text-body-alt">{{ category }}</th>
+                            @for (item of series(); track item.name) {
+                                <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>
+                    }
+                </tbody>
+            </table>
+        </div>
+    `,
+		isInline: true,
+		styles: ["@layer properties;.ui-chart-table{margin-top:calc(var(--spacing, .25rem) * 4);width:100%}.ui-chart-table th,.ui-chart-table td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-chart-table thead th{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-chart-table tbody th{--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:var(--foreground)}.ui-chart-table td{text-align:right;color:var(--foreground);--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,)}.ui-chart-table thead th:not(:first-child){text-align:right}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-border-style: solid;--tw-font-weight: initial;--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"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiChartTableComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-chart-table",
+			template: `
+        <!-- sr-only on a wrapper, the table's own width would otherwise override it -->
+        <div [class.sr-only]="!visible()">
+            <table class="ui-chart-table">
+                <caption class="sr-only">{{ caption() }}</caption>
+                <thead>
+                    <tr>
+                        <th scope="col" class="ui-text-caption">{{ categoryLabel() }}</th>
+                        @for (item of series(); track item.name) {
+                            <th scope="col" class="ui-text-caption">{{ item.name }}</th>
+                        }
+                    </tr>
+                </thead>
+                <tbody>
+                    @for (category of categories(); track $index; let row = $index) {
+                        <tr>
+                            <th scope="row" class="ui-text-body-alt">{{ category }}</th>
+                            @for (item of series(); track item.name) {
+                                <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>
+                    }
+                </tbody>
+            </table>
+        </div>
+    `,
+			styles: ["@layer properties;.ui-chart-table{margin-top:calc(var(--spacing, .25rem) * 4);width:100%}.ui-chart-table th,.ui-chart-table td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-chart-table thead th{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-chart-table tbody th{--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:var(--foreground)}.ui-chart-table td{text-align:right;color:var(--foreground);--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,)}.ui-chart-table thead th:not(:first-child){text-align:right}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-border-style: solid;--tw-font-weight: initial;--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"]
+		}]
+	}],
+	propDecorators: {
+		caption: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "caption",
+				required: true
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: true
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
+		}],
+		valueFormatter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormatter",
+				required: true
+			}]
+		}],
+		categoryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categoryLabel",
+				required: false
+			}]
+		}],
+		visible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visible",
+				required: false
+			}]
+		}],
+		masked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "masked",
+				required: false
+			}]
+		}]
+	}
+});
+var UiChartFrameComponent = class UiChartFrameComponent {
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	legendItems = input.required(...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	legendNote = input("", ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
+	hiddenSeries = model([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
+	valueFormatter = input.required(...ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []);
+	categoryLabel = input.required(...ngDevMode ? [{ debugName: "categoryLabel" }] : /* istanbul ignore next */ []);
+	height = input.required(...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	emptyText = input.required(...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	empty = input(false, {
+		...ngDevMode ? { debugName: "empty" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showTable = input(false, {
+		...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
+	});
+	emphasis = model(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
+	fill = computed(() => this.height() === "fill", ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
+	fixedHeight = computed(() => {
+		const height = this.height();
+		return height === "fill" ? null : height;
+	}, ...ngDevMode ? [{ debugName: "fixedHeight" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiChartFrameComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiChartFrameComponent,
+		isStandalone: true,
+		selector: "ui-chart-frame",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			legendItems: {
+				classPropertyName: "legendItems",
+				publicName: "legendItems",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			legendNote: {
+				classPropertyName: "legendNote",
+				publicName: "legendNote",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hiddenSeries: {
+				classPropertyName: "hiddenSeries",
+				publicName: "hiddenSeries",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueFormatter: {
+				classPropertyName: "valueFormatter",
+				publicName: "valueFormatter",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categoryLabel: {
+				classPropertyName: "categoryLabel",
+				publicName: "categoryLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			empty: {
+				classPropertyName: "empty",
+				publicName: "empty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTable: {
+				classPropertyName: "showTable",
+				publicName: "showTable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			masked: {
+				classPropertyName: "masked",
+				publicName: "masked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emphasis: {
+				classPropertyName: "emphasis",
+				publicName: "emphasis",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			hiddenSeries: "hiddenSeriesChange",
+			emphasis: "emphasisChange"
+		},
+		host: {
+			properties: {
+				"class.block": "!fill()",
+				"class.flex": "fill()",
+				"class.flex-col": "fill()",
+				"class.h-full": "fill()"
+			},
+			classAttribute: "relative w-full min-w-0"
+		},
+		ngImport: i0,
+		template: `
+        @if (loading()) {
+            <div [style.height.px]="fixedHeight()" [class.grow]="fill()" aria-busy="true">
+                <span class="sr-only">Loading chart</span>
+                <ui-skeleton shape="rect" class="size-full" />
+            </div>
+        } @else if (empty()) {
+            <div
+                class="flex justify-center items-center border border-line-2 border-dashed rounded-lg text-muted-foreground-1 ui-text-body-alt"
+                [class.grow]="fill()"
+                [style.height.px]="fixedHeight()"
+            >
+                {{ emptyText() }}
+            </div>
+        } @else {
+            <!-- one series needs no legend, the chart's title already names it -->
+            @if (showLegend() && (legendItems().length > 1 || legendNote())) {
+                <ui-chart-legend
+                    class="mb-3 shrink-0"
+                    [items]="legendItems()"
+                    [note]="legendNote()"
+                    [(hidden)]="hiddenSeries"
+                    (focusChange)="emphasis.set($event)"
+                    toggleable
+                />
+            }
+
+            @if (options(); as options) {
+                <ui-chart
+                    [class.grow]="fill()"
+                    [class.min-h-0]="fill()"
+                    [options]="options"
+                    [ariaLabel]="ariaLabel()"
+                    [hiddenSeries]="hiddenSeries()"
+                    [emphasis]="emphasis()"
+                />
+            } @else {
+                <ng-content />
+            }
+
+            <ui-chart-table
+                [caption]="ariaLabel()"
+                [categories]="categories()"
+                [series]="series()"
+                [valueFormatter]="valueFormatter()"
+                [masked]="masked()"
+                [categoryLabel]="categoryLabel()"
+                [visible]="showTable()"
+            />
+        }
+    `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: UiChartComponent,
+				selector: "ui-chart",
+				inputs: [
+					"options",
+					"ariaLabel",
+					"hiddenSeries",
+					"emphasis"
+				]
+			},
+			{
+				kind: "component",
+				type: UiChartTableComponent,
+				selector: "ui-chart-table",
+				inputs: [
+					"caption",
+					"categories",
+					"series",
+					"valueFormatter",
+					"categoryLabel",
+					"visible",
+					"masked"
+				]
+			},
+			{
+				kind: "component",
+				type: UiChartLegendComponent,
+				selector: "ui-chart-legend",
+				inputs: [
+					"items",
+					"note",
+					"for",
+					"itemsWith",
+					"hidden",
+					"toggleable"
+				],
+				outputs: ["hiddenChange", "focusChange"]
+			},
+			{
+				kind: "component",
+				type: UiSkeletonComponent,
+				selector: "ui-skeleton",
+				inputs: [
+					"shape",
+					"animated",
+					"lines"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiChartFrameComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-chart-frame",
+			template: `
+        @if (loading()) {
+            <div [style.height.px]="fixedHeight()" [class.grow]="fill()" aria-busy="true">
+                <span class="sr-only">Loading chart</span>
+                <ui-skeleton shape="rect" class="size-full" />
+            </div>
+        } @else if (empty()) {
+            <div
+                class="flex justify-center items-center border border-line-2 border-dashed rounded-lg text-muted-foreground-1 ui-text-body-alt"
+                [class.grow]="fill()"
+                [style.height.px]="fixedHeight()"
+            >
+                {{ emptyText() }}
+            </div>
+        } @else {
+            <!-- one series needs no legend, the chart's title already names it -->
+            @if (showLegend() && (legendItems().length > 1 || legendNote())) {
+                <ui-chart-legend
+                    class="mb-3 shrink-0"
+                    [items]="legendItems()"
+                    [note]="legendNote()"
+                    [(hidden)]="hiddenSeries"
+                    (focusChange)="emphasis.set($event)"
+                    toggleable
+                />
+            }
+
+            @if (options(); as options) {
+                <ui-chart
+                    [class.grow]="fill()"
+                    [class.min-h-0]="fill()"
+                    [options]="options"
+                    [ariaLabel]="ariaLabel()"
+                    [hiddenSeries]="hiddenSeries()"
+                    [emphasis]="emphasis()"
+                />
+            } @else {
+                <ng-content />
+            }
+
+            <ui-chart-table
+                [caption]="ariaLabel()"
+                [categories]="categories()"
+                [series]="series()"
+                [valueFormatter]="valueFormatter()"
+                [masked]="masked()"
+                [categoryLabel]="categoryLabel()"
+                [visible]="showTable()"
+            />
+        }
+    `,
+			imports: [
+				UiChartComponent,
+				UiChartTableComponent,
+				UiChartLegendComponent,
+				UiSkeletonComponent
+			],
+			host: {
+				class: "relative w-full min-w-0",
+				"[class.block]": "!fill()",
+				"[class.flex]": "fill()",
+				"[class.flex-col]": "fill()",
+				"[class.h-full]": "fill()"
+			}
+		}]
+	}],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: true
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: true
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
+		}],
+		legendItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legendItems",
+				required: true
+			}]
+		}],
+		legendNote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legendNote",
+				required: false
+			}]
+		}],
+		hiddenSeries: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hiddenSeries",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["hiddenSeriesChange"]
+		}],
+		valueFormatter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormatter",
+				required: true
+			}]
+		}],
+		categoryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categoryLabel",
+				required: true
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: true
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: true
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		empty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "empty",
+				required: false
+			}]
+		}],
+		showTable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTable",
+				required: false
+			}]
+		}],
+		masked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "masked",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		emphasis: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emphasis",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["emphasisChange"]
+		}]
+	}
+});
+const MAX_BAR_THICKNESS = 24;
+const FADED_STRENGTH = .3;
+function fade(colour, ink) {
+	return mixChartColours(colour, ink.surface, FADED_STRENGTH) ?? ink.context;
+}
+var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	stacked = input(false, {
+		...ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	highlightCategory = input(null, ...ngDevMode ? [{ debugName: "highlightCategory" }] : /* istanbul ignore next */ []);
+	chartOptions = computed(() => {
+		const ink = this.ink();
+		const base = baseChartOptions(ink);
+		const labels = chartAxisLabels(ink);
+		const horizontal = this.orientation() === "horizontal";
+		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 = masked ? { show: false } : {
+			...labels,
+			formatter: (value) => format(Number(value))
+		};
+		return mergeChartOptions({
+			...base,
+			chart: {
+				...base.chart,
+				type: "bar",
+				height: this.apexHeight(),
+				stacked: this.stacked()
+			},
+			colors: picked < 0 ? colours : colours.map((colour) => ({ dataPointIndex }) => dataPointIndex === picked ? colour : fade(colour, ink)),
+			series: series.map((item) => ({
+				name: item.name,
+				data: this.concealed() ? item.data.map(() => null) : item.data
+			})),
+			plotOptions: { bar: {
+				horizontal,
+				borderRadius: this.stacked() ? 0 : 4,
+				borderRadiusApplication: "end",
+				columnWidth: thickness,
+				barHeight: thickness
+			} },
+			stroke: {
+				show: true,
+				width: 2,
+				colors: [ink.surface]
+			},
+			xaxis: {
+				...base.xaxis,
+				categories,
+				labels: horizontal ? valueLabels : {
+					...labels,
+					formatter: thinnedCategoryLabels(categories),
+					rotate: 0
+				}
+			},
+			yaxis: {
+				...base.yaxis,
+				labels: horizontal ? labels : valueLabels
+			},
+			grid: {
+				...base.grid,
+				xaxis: { lines: { show: horizontal } },
+				yaxis: { lines: { show: !horizontal } }
+			},
+			tooltip: this.concealed() ? { enabled: false } : this.stacked() ? {
+				shared: true,
+				intersect: false,
+				custom: ({ dataPointIndex }) => {
+					const rows = series.map((item, index) => ({
+						colour: colours[index],
+						name: item.name,
+						raw: item.data[dataPointIndex] ?? null
+					})).filter((row) => !this.hiddenSeries().includes(row.name));
+					const values = rows.map((row) => row.raw).filter((value) => value !== null);
+					return chartTooltipHtml(categories[dataPointIndex] ?? "", rows.map((row) => ({
+						...row,
+						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)
+					});
+				}
+			} : {
+				shared: false,
+				intersect: true,
+				custom: ({ seriesIndex, dataPointIndex }) => chartTooltipHtml(categories[dataPointIndex] ?? "", [{
+					colour: colours[seriesIndex],
+					name: series[seriesIndex]?.name ?? "",
+					value: masked ? void 0 : this.formatValue(series[seriesIndex]?.data[dataPointIndex])
+				}])
+			}
+		}, this.options());
+	}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiBarChartComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiBarChartComponent,
+		isStandalone: true,
+		selector: "ui-bar-chart",
+		inputs: {
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stacked: {
+				classPropertyName: "stacked",
+				publicName: "stacked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			highlightCategory: {
+				classPropertyName: "highlightCategory",
+				publicName: "highlightCategory",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		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]=\"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,
+			selector: "ui-chart-frame",
+			inputs: [
+				"options",
+				"ariaLabel",
+				"categories",
+				"series",
+				"legendItems",
+				"legendNote",
+				"hiddenSeries",
+				"valueFormatter",
+				"categoryLabel",
+				"height",
+				"emptyText",
+				"loading",
+				"empty",
+				"showTable",
+				"masked",
+				"showLegend",
+				"emphasis"
+			],
+			outputs: ["hiddenSeriesChange", "emphasisChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiBarChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			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]=\"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: {
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				required: false
+			}]
+		}],
+		highlightCategory: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlightCategory",
+				required: false
+			}]
+		}]
+	}
+});
+const BarChartOrientations = ["vertical", "horizontal"];
+const MAX_CONTEXT_ROWS = 5;
+const SORT_ROWS_AFTER = 8;
+var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
+	supportsDashes = true;
+	curve = input("straight", ...ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []);
+	showPoints = input(false, {
+		...ngDevMode ? { debugName: "showPoints" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	projectedFrom = input(null, ...ngDevMode ? [{ debugName: "projectedFrom" }] : /* istanbul ignore next */ []);
+	projectedLabel = input("Projected", ...ngDevMode ? [{ debugName: "projectedLabel" }] : /* istanbul ignore next */ []);
+	projectedAnnotations = computed(() => {
+		const from = this.projectedFrom();
+		const categories = this.categories();
+		const ink = this.ink();
+		if (!from || !categories.includes(from)) return { xaxis: [] };
+		return { xaxis: [{
+			x: from,
+			x2: categories[categories.length - 1],
+			fillColor: ink.muted,
+			opacity: .08,
+			borderColor: "transparent",
+			label: {
+				text: this.projectedLabel(),
+				position: "top",
+				orientation: "horizontal",
+				textAnchor: "start",
+				borderWidth: 0,
+				offsetX: 8,
+				offsetY: 16,
+				style: {
+					background: "transparent",
+					color: ink.muted,
+					fontSize: "12px"
+				}
+			}
+		}] };
+	}, ...ngDevMode ? [{ debugName: "projectedAnnotations" }] : /* istanbul ignore next */ []);
+	chartOptions = computed(() => {
+		const ink = this.ink();
+		const base = baseChartOptions(ink);
+		const labels = chartAxisLabels(ink);
+		const series = this.series();
+		const categories = this.categories();
+		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,
+			chart: {
+				...base.chart,
+				type: "line",
+				height: this.apexHeight()
+			},
+			annotations: this.projectedAnnotations(),
+			colors: order.map((index) => colours[index]),
+			series: order.map((index) => ({
+				name: series[index].name,
+				data: this.concealed() ? series[index].data.map(() => null) : series[index].data
+			})),
+			stroke: {
+				curve: this.curve(),
+				width: order.map((index) => muted[index] ? 1.5 : 2),
+				dashArray: order.map((index) => dashed[index] ? 6 : 0),
+				lineCap: "round"
+			},
+			markers: {
+				size: this.showPoints() ? 4 : 0,
+				strokeColors: ink.surface,
+				strokeWidth: 2,
+				hover: { size: 5 }
+			},
+			xaxis: {
+				...base.xaxis,
+				labels: {
+					...labels,
+					formatter: thinnedCategoryLabels(categories),
+					rotate: 0
+				},
+				crosshairs: {
+					show: true,
+					width: 1,
+					stroke: {
+						color: ink.grid,
+						width: 1,
+						dashArray: 0
+					}
+				},
+				tooltip: { enabled: false }
+			},
+			yaxis: {
+				...base.yaxis,
+				labels: masked ? { show: false } : {
+					...labels,
+					formatter: this.displayFormatter()
+				}
+			},
+			grid: {
+				...base.grid,
+				xaxis: { lines: { show: false } },
+				yaxis: { lines: { show: true } }
+			},
+			tooltip: this.concealed() ? { enabled: false } : {
+				shared: true,
+				intersect: false,
+				custom: ({ dataPointIndex }) => {
+					const rows = series.map((item, index) => ({
+						colour: colours[index],
+						dashed: dashed[index],
+						name: item.name,
+						raw: item.data[dataPointIndex] ?? null,
+						muted: muted[index]
+					})).filter((row) => !this.hiddenSeries().includes(row.name)).sort((a, b) => this.tooltipOrder(a, b)).map((row) => ({
+						...row,
+						value: masked ? void 0 : this.formatValue(row.raw)
+					}));
+					const shown = rows.filter((row) => !row.muted).length + MAX_CONTEXT_ROWS;
+					const extra = rows.length - shown;
+					return chartTooltipHtml(categories[dataPointIndex] ?? "", rows.slice(0, shown), extra > 0 ? `${extra} more` : "");
+				}
+			}
+		}, this.options());
+	}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
+	tooltipOrder(a, b) {
+		if (a.muted !== b.muted) return Number(a.muted) - Number(b.muted);
+		const highlight = this.highlight();
+		if (!a.muted && highlight) return highlight.indexOf(a.name) - highlight.indexOf(b.name);
+		if (!a.muted && this.series().length <= SORT_ROWS_AFTER) return 0;
+		return (b.raw ?? -Infinity) - (a.raw ?? -Infinity);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiLineChartComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiLineChartComponent,
+		isStandalone: true,
+		selector: "ui-line-chart",
+		inputs: {
+			curve: {
+				classPropertyName: "curve",
+				publicName: "curve",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showPoints: {
+				classPropertyName: "showPoints",
+				publicName: "showPoints",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			projectedFrom: {
+				classPropertyName: "projectedFrom",
+				publicName: "projectedFrom",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			projectedLabel: {
+				classPropertyName: "projectedLabel",
+				publicName: "projectedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		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]=\"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,
+			selector: "ui-chart-frame",
+			inputs: [
+				"options",
+				"ariaLabel",
+				"categories",
+				"series",
+				"legendItems",
+				"legendNote",
+				"hiddenSeries",
+				"valueFormatter",
+				"categoryLabel",
+				"height",
+				"emptyText",
+				"loading",
+				"empty",
+				"showTable",
+				"masked",
+				"showLegend",
+				"emphasis"
+			],
+			outputs: ["hiddenSeriesChange", "emphasisChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiLineChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			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]=\"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: {
+		curve: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "curve",
+				required: false
+			}]
+		}],
+		showPoints: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showPoints",
+				required: false
+			}]
+		}],
+		projectedFrom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "projectedFrom",
+				required: false
+			}]
+		}],
+		projectedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "projectedLabel",
+				required: false
+			}]
+		}]
+	}
+});
+const LineChartCurves = [
+	"straight",
+	"smooth",
+	"stepline"
+];
+var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
+	variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	percentFormatter = new Intl.NumberFormat(this.uiFormat.locale, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
+	sliceColours = input([], ...ngDevMode ? [{ debugName: "sliceColours" }] : /* istanbul ignore next */ []);
+	values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	isMuted = computed(() => {
+		const highlight = this.highlight();
+		return this.categories().map((name) => !!highlight && !highlight.includes(name));
+	}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
+	styles = computed(() => {
+		const highlight = this.highlight();
+		const muted = this.isMuted();
+		const given = this.sliceColours();
+		return this.categories().map((name, index) => {
+			if (muted[index]) return {
+				colour: this.ink().context,
+				dashed: false
+			};
+			const style = chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false, this.dark());
+			return {
+				...style,
+				colour: given[index] ?? style.colour
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		const highlight = this.highlight();
+		const items = this.categories().map((name, index) => ({
+			name,
+			...this.styles()[index]
+		})).filter((_, index) => !this.isMuted()[index]);
+		return highlight ? items.sort((a, b) => highlight.indexOf(a.name) - highlight.indexOf(b.name)) : items;
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	slices = computed(() => {
+		const hidden = this.hiddenSeries();
+		const values = this.values();
+		const colours = this.colours();
+		return this.categories().map((name, index) => ({
+			name,
+			value: values[index] ?? 0,
+			colour: colours[index]
+		})).filter((slice) => !hidden.includes(slice.name));
+	}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
+	chartOptions = computed(() => {
+		const ink = this.ink();
+		const base = baseChartOptions(ink);
+		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,
+			offsetY: -4
+		};
+		return mergeChartOptions({
+			...base,
+			chart: {
+				...base.chart,
+				type: donut ? "donut" : "pie",
+				height: this.apexHeight()
+			},
+			colors: drawn.map((slice) => slice.colour),
+			labels: drawn.map((slice) => slice.name),
+			series: drawn.map((slice) => slice.value),
+			stroke: {
+				show: true,
+				width: 2,
+				colors: [ink.surface]
+			},
+			states: {
+				...base.states,
+				hover: { filter: { type: concealed ? "none" : "darken" } }
+			},
+			plotOptions: { pie: {
+				expandOnClick: false,
+				donut: {
+					size: "65%",
+					labels: {
+						show: donut,
+						name: centreText,
+						value: {
+							fontSize: "20px",
+							fontWeight: 600,
+							color: ink.text,
+							offsetY: 4,
+							formatter: (value) => this.formatValue(Number(value))
+						},
+						total: {
+							show: true,
+							showAlways: true,
+							label: this.totalLabel(),
+							...centreText,
+							formatter: () => this.formatValue(total)
+						}
+					}
+				}
+			} },
+			tooltip: concealed ? { enabled: false } : {
+				theme: "light",
+				fillSeriesColor: false,
+				custom: ({ seriesIndex }) => {
+					const slice = slices[seriesIndex];
+					return slice ? chartTooltipHtml("", [{
+						colour: slice.colour,
+						name: slice.name,
+						value: this.masked() ? void 0 : this.formatValue(slice.value)
+					}], total ? `${this.percentFormatter.format(slice.value / total)} of total` : "") : "";
+				}
+			}
+		}, this.options());
+	}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiPieChartComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiPieChartComponent,
+		isStandalone: true,
+		selector: "ui-pie-chart",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			totalLabel: {
+				classPropertyName: "totalLabel",
+				publicName: "totalLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sliceColours: {
+				classPropertyName: "sliceColours",
+				publicName: "sliceColours",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block w-full min-w-0" },
+		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]=\"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,
+			selector: "ui-chart-frame",
+			inputs: [
+				"options",
+				"ariaLabel",
+				"categories",
+				"series",
+				"legendItems",
+				"legendNote",
+				"hiddenSeries",
+				"valueFormatter",
+				"categoryLabel",
+				"height",
+				"emptyText",
+				"loading",
+				"empty",
+				"showTable",
+				"masked",
+				"showLegend",
+				"emphasis"
+			],
+			outputs: ["hiddenSeriesChange", "emphasisChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiPieChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			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]=\"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: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		totalLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalLabel",
+				required: false
+			}]
+		}],
+		sliceColours: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sliceColours",
+				required: false
+			}]
+		}]
+	}
+});
+const PieChartVariants = ["pie", "donut"];
+const SHADE_STEP = .16;
+const PALEST_SHADE = .4;
+const HEADER_MIN_WIDTH = 56;
+const HEADER_MIN_HEIGHT = 56;
+const NAME_MIN_WIDTH = 48;
+const NAME_MIN_HEIGHT = 24;
+const VALUE_MIN_HEIGHT = 42;
+function treemapGroupColours(groups, dark) {
+	return groups.map((group, index) => group.colour ?? chartColour(index, dark));
+}
+function drawnTreemapGroups(groups, colours, hidden, shades, ink) {
+	return groups.map((group, index) => drawnGroup(group, colours[index], shades, ink)).filter((group) => group.blocks.length > 0 && !hidden.includes(group.name));
+}
+function drawnGroup(group, colour, shades, ink) {
+	const items = group.items.filter((item) => item.value > 0);
+	const ranks = rankByValue(items.map((item) => item.value));
+	const blocks = items.map((item, index) => {
+		const fill = shades ? shadeOf(colour, ranks[index], ink) : colour;
+		return {
+			group: group.name,
+			item: item.name,
+			value: item.value,
+			fill,
+			labelInk: chartLabelInk(fill)
+		};
+	});
+	return {
+		name: group.name,
+		colour,
+		total: blocks.reduce((sum, block) => sum + block.value, 0),
+		blocks
+	};
+}
+function rankByValue(values) {
+	const biggestFirst = values.map((value, index) => ({
+		value,
+		index
+	})).sort((a, b) => b.value - a.value);
+	const ranks = [];
+	biggestFirst.forEach((entry, rank) => {
+		ranks[entry.index] = rank;
+	});
+	return ranks;
+}
+function shadeOf(colour, rank, ink) {
+	const strength = Math.max(1 - rank * SHADE_STEP, PALEST_SHADE);
+	return mixChartColours(colour, ink.surface, strength) ?? colour;
+}
+function treemapTableRows(groups) {
+	const items = groups.flatMap((group) => group.items.filter((item) => item.value > 0).map((item) => ({
+		name: `${group.name} – ${item.name}`,
+		value: item.value
+	})));
+	return {
+		categories: items.map((item) => item.name),
+		values: items.map((item) => item.value)
+	};
+}
+function placeTreemapGroups(groups, bounds) {
+	const groupRects = squarify(groups.map((group) => group.total), bounds, 8);
+	return groups.map((group, index) => placeGroup(group, groupRects[index]));
+}
+function placeGroup(group, rect) {
+	const hasHeader = rect.width >= HEADER_MIN_WIDTH && rect.height >= HEADER_MIN_HEIGHT;
+	const headerHeight = hasHeader ? 24 : 0;
+	const blockArea = {
+		x: 0,
+		y: headerHeight,
+		width: rect.width,
+		height: rect.height - headerHeight
+	};
+	const blockRects = squarify(group.blocks.map((block) => block.value), blockArea, 3);
+	return {
+		...group,
+		rect,
+		hasHeader,
+		placedBlocks: group.blocks.map((block, index) => ({
+			...block,
+			rect: blockRects[index],
+			label: labelFor(blockRects[index])
+		}))
+	};
+}
+function labelFor(rect) {
+	if (rect.width < NAME_MIN_WIDTH || rect.height < NAME_MIN_HEIGHT) return "none";
+	return rect.height < VALUE_MIN_HEIGHT ? "name" : "full";
+}
+function squarify(values, bounds, gap = 0) {
+	const total = values.reduce((sum, value) => sum + value, 0);
+	const rects = values.map(() => ({
+		x: bounds.x,
+		y: bounds.y,
+		width: 0,
+		height: 0
+	}));
+	if (total <= 0 || bounds.width <= 0 || bounds.height <= 0) return rects;
+	const outer = grow(bounds, gap / 2);
+	const scale = outer.width * outer.height / total;
+	const biggestFirst = values.map((value, index) => ({
+		index,
+		area: value * scale
+	})).sort((a, b) => b.area - a.area);
+	let remaining = outer;
+	let row = [];
+	for (const entry of biggestFirst) {
+		const side = Math.min(remaining.width, remaining.height);
+		const longer = [...row, entry];
+		if (row.length === 0 || worstAspect(longer, side) <= worstAspect(row, side)) row = longer;
+		else {
+			remaining = placeRow(row, remaining, rects);
+			row = [entry];
+		}
+	}
+	placeRow(row, remaining, rects);
+	return rects.map((rect) => rect.width > 0 ? grow(rect, -gap / 2) : rect);
+}
+function worstAspect(row, side) {
+	const sum = row.reduce((total, entry) => total + entry.area, 0);
+	const largest = Math.max(...row.map((entry) => entry.area));
+	const smallest = Math.min(...row.map((entry) => entry.area));
+	return Math.max(side * side * largest / (sum * sum), sum * sum / (side * side * smallest));
+}
+function placeRow(row, area, rects) {
+	const sum = row.reduce((total, entry) => total + entry.area, 0);
+	if (area.width >= area.height) {
+		const width = sum / area.height;
+		let y = area.y;
+		for (const entry of row) {
+			const height = entry.area / width;
+			rects[entry.index] = {
+				x: area.x,
+				y,
+				width,
+				height
+			};
+			y += height;
+		}
+		return {
+			x: area.x + width,
+			y: area.y,
+			width: area.width - width,
+			height: area.height
+		};
+	}
+	const height = sum / area.width;
+	let x = area.x;
+	for (const entry of row) {
+		const width = entry.area / height;
+		rects[entry.index] = {
+			x,
+			y: area.y,
+			width,
+			height
+		};
+		x += width;
+	}
+	return {
+		x: area.x,
+		y: area.y + height,
+		width: area.width,
+		height: area.height - height
+	};
+}
+function grow(rect, by) {
+	return {
+		x: rect.x - by,
+		y: rect.y - by,
+		width: Math.max(rect.width + by * 2, 0),
+		height: Math.max(rect.height + by * 2, 0)
+	};
+}
+const TOOLTIP_OFFSET = 12;
+var UiTreemapChartComponent = class UiTreemapChartComponent extends UiChartBase {
+	groups = input.required(...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
+	height = input(360, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	shades = input(true, {
+		...ngDevMode ? { debugName: "shades" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectable = input(false, {
+		...ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	valueLabel = input("Value", ...ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []);
+	itemSelect = output();
+	canvas = viewChild("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+	size = signal({
+		width: 0,
+		height: 0
+	}, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	pointed = signal(null, ...ngDevMode ? [{ debugName: "pointed" }] : /* istanbul ignore next */ []);
+	settled = signal(false, ...ngDevMode ? [{ debugName: "settled" }] : /* istanbul ignore next */ []);
+	percentFormatter = new Intl.NumberFormat(this.uiFormat.locale, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	fill = computed(() => this.height() === "fill", ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
+	fixedHeight = computed(() => {
+		const height = this.height();
+		return height === "fill" ? null : height;
+	}, ...ngDevMode ? [{ debugName: "fixedHeight" }] : /* istanbul ignore next */ []);
+	colours = computed(() => treemapGroupColours(this.groups(), this.dark()), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	drawnGroups = computed(() => drawnTreemapGroups(this.groups(), this.colours(), this.hiddenSeries(), this.shades(), this.ink()), ...ngDevMode ? [{ debugName: "drawnGroups" }] : /* istanbul ignore next */ []);
+	placedGroups = computed(() => {
+		const { width, height } = this.size();
+		return placeTreemapGroups(this.drawnGroups(), {
+			x: 0,
+			y: 0,
+			width,
+			height
+		});
+	}, ...ngDevMode ? [{ debugName: "placedGroups" }] : /* istanbul ignore next */ []);
+	total = computed(() => this.drawnGroups().reduce((sum, group) => sum + group.total, 0), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	tableRows = computed(() => treemapTableRows(this.groups()), ...ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []);
+	categories = computed(() => this.tableRows().categories, ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	series = computed(() => [{
+		name: this.valueLabel(),
+		data: this.tableRows().values
+	}], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => this.categories().length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => this.groups().map((group, index) => ({
+		group,
+		colour: this.colours()[index]
+	})).filter(({ group }) => group.items.some((item) => item.value > 0)).map(({ group, colour }) => ({
+		name: group.name,
+		colour
+	})), ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	legendNote = computed(() => "", ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
+	emphasised = computed(() => {
+		const emphasis = this.emphasis();
+		return this.drawnGroups().some((group) => group.name === emphasis) ? emphasis : null;
+	}, ...ngDevMode ? [{ debugName: "emphasised" }] : /* istanbul ignore next */ []);
+	tooltipFooter = computed(() => {
+		const pointed = this.pointed();
+		if (!pointed) return "";
+		const { group, block } = pointed;
+		const shareOfTotal = `${this.percent(block.value / this.total())} of total`;
+		return group.blocks.length > 1 ? `${this.percent(block.value / group.total)} of ${group.name} · ${shareOfTotal}` : shareOfTotal;
+	}, ...ngDevMode ? [{ debugName: "tooltipFooter" }] : /* istanbul ignore next */ []);
+	tooltipPosition = computed(() => {
+		const pointed = this.pointed();
+		const { width } = this.size();
+		if (!pointed) return null;
+		const flipped = pointed.x > width / 2;
+		return {
+			left: flipped ? null : pointed.x + TOOLTIP_OFFSET,
+			right: flipped ? width - pointed.x + TOOLTIP_OFFSET : null,
+			top: pointed.y + TOOLTIP_OFFSET
+		};
+	}, ...ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		effect((onCleanup) => {
+			const canvas = this.canvas()?.nativeElement;
+			if (!canvas) return;
+			const observer = new ResizeObserver(([entry]) => {
+				const { width, height } = entry.contentRect;
+				this.size.set({
+					width,
+					height
+				});
+				if (!this.settled()) requestAnimationFrame(() => this.settled.set(true));
+			});
+			observer.observe(canvas);
+			onCleanup(() => observer.disconnect());
+		});
+	}
+	isFaded(group) {
+		const emphasised = this.emphasised();
+		return !!emphasised && group.name !== emphasised;
+	}
+	point(event, group, block) {
+		const canvas = this.canvas()?.nativeElement;
+		if (!canvas || event.pointerType === "touch") return;
+		const bounds = canvas.getBoundingClientRect();
+		this.pointed.set({
+			group,
+			block,
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top
+		});
+	}
+	focus(group, block) {
+		this.pointed.set({
+			group,
+			block,
+			x: group.rect.x + block.rect.x + block.rect.width / 2,
+			y: group.rect.y + block.rect.y + block.rect.height / 2
+		});
+	}
+	select(block) {
+		this.itemSelect.emit({
+			group: block.group,
+			item: block.item
+		});
+	}
+	accessibleName(block) {
+		const name = `${block.item}, ${block.group}`;
+		return this.masked() ? name : `${name}, ${this.formatValue(block.value)}`;
+	}
+	percent(share) {
+		return this.percentFormatter.format(share);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTreemapChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiTreemapChartComponent,
+		isStandalone: true,
+		selector: "ui-treemap-chart",
+		inputs: {
+			groups: {
+				classPropertyName: "groups",
+				publicName: "groups",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shades: {
+				classPropertyName: "shades",
+				publicName: "shades",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectable: {
+				classPropertyName: "selectable",
+				publicName: "selectable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueLabel: {
+				classPropertyName: "valueLabel",
+				publicName: "valueLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemSelect: "itemSelect" },
+		host: { classAttribute: "block w-full min-w-0" },
+		viewQueries: [{
+			propertyName: "canvas",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ui-chart-frame\n    [options]=\"null\"\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    <div\n        #canvas\n        class=\"ui-treemap\"\n        [class.ui-treemap--settled]=\"settled()\"\n        [class.grow]=\"fill()\"\n        [class.min-h-0]=\"fill()\"\n        [style.height.px]=\"fixedHeight()\"\n        [attr.role]=\"selectable() ? 'group' : 'img'\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (pointerleave)=\"pointed.set(null)\"\n    >\n        @if (concealed()) {\n            <!-- the proportions alone would give the amounts away, so one grey block stands in for them all -->\n            <div class=\"ui-treemap-concealed\" [style.background-color]=\"ink().grid\"></div>\n        } @else {\n            @for (group of placedGroups(); track group.name) {\n                <div\n                    class=\"ui-treemap-group\"\n                    [class.ui-treemap-group--faded]=\"isFaded(group)\"\n                    [style.left.px]=\"group.rect.x\"\n                    [style.top.px]=\"group.rect.y\"\n                    [style.width.px]=\"group.rect.width\"\n                    [style.height.px]=\"group.rect.height\"\n                >\n                    @if (group.hasHeader) {\n                        <div class=\"ui-treemap-header ui-text-caption\" aria-hidden=\"true\">\n                            <span class=\"ui-treemap-header-name\">{{ group.name }}</span>\n                            <span class=\"ui-treemap-header-total\">{{ formatValue(group.total) }}</span>\n                        </div>\n                    }\n\n                    @for (block of group.placedBlocks; track block.item) {\n                        @if (selectable()) {\n                            <button\n                                type=\"button\"\n                                class=\"ui-treemap-block ui-treemap-block--selectable ui-text-caption\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                [attr.aria-label]=\"accessibleName(block)\"\n                                (pointermove)=\"point($event, group, block)\"\n                                (focus)=\"focus(group, block)\"\n                                (blur)=\"pointed.set(null)\"\n                                (click)=\"select(block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </button>\n                        } @else {\n                            <div\n                                class=\"ui-treemap-block ui-text-caption\"\n                                aria-hidden=\"true\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                (pointermove)=\"point($event, group, block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </div>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pointed(); as pointed) {\n                <div\n                    class=\"ui-chart-tooltip-panel ui-treemap-tooltip\"\n                    aria-hidden=\"true\"\n                    [style.left.px]=\"tooltipPosition()?.left\"\n                    [style.right.px]=\"tooltipPosition()?.right\"\n                    [style.top.px]=\"tooltipPosition()?.top\"\n                >\n                    <div class=\"ui-chart-tooltip\">\n                        <div class=\"ui-chart-tooltip-title ui-text-caption\">{{ pointed.group.name }}</div>\n                        <div class=\"ui-chart-tooltip-row ui-text-body-alt\">\n                            <span\n                                class=\"ui-chart-tooltip-dot\"\n                                [style.--ui-chart-tooltip-colour]=\"pointed.block.fill\"\n                            ></span>\n                            <span class=\"ui-chart-tooltip-name\">{{ pointed.block.item }}</span>\n                            @if (!masked()) {\n                                <span class=\"ui-chart-tooltip-value\">{{ formatValue(pointed.block.value) }}</span>\n                            }\n                        </div>\n                        <div class=\"ui-chart-tooltip-footer ui-text-caption\">{{ tooltipFooter() }}</div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n</ui-chart-frame>\n\n<ng-template #label let-block>\n    @if (block.label !== 'none') {\n        <span class=\"ui-treemap-block-name\">{{ block.item }}</span>\n    }\n    @if (block.label === 'full') {\n        <span class=\"ui-treemap-block-value\">{{ formatValue(block.value) }}</span>\n    }\n</ng-template>\n",
+		styles: ["@layer properties;.ui-treemap{position:relative;display:block;width:100%}.ui-treemap-concealed{position:absolute;inset:0;border-radius:var(--radius-md, .375rem)}.ui-treemap-group,.ui-treemap-block{position:absolute}@media(prefers-reduced-motion:no-preference){.ui-treemap--settled .ui-treemap-group,.ui-treemap--settled .ui-treemap-block{transition-property:left,top,width,height,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1))}}.ui-treemap-group--faded{opacity:.15}.ui-treemap-header{display:flex;height:calc(var(--spacing, .25rem) * 6);align-items:baseline;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * .5)}.ui-treemap-header-name{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-treemap-header-total{margin-inline-start:auto;flex-shrink:0;color:var(--muted-foreground-1);--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,)}.ui-treemap-header-name,.ui-treemap-header-total{--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.ui-treemap-block{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:start}.ui-treemap-block--selectable{cursor:pointer}.ui-treemap-block--selectable:focus{--tw-outline-style: none;outline-style:none}.ui-treemap-block--selectable:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-treemap-block--selectable:focus-visible{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui-treemap-block:hover{filter:brightness(1.06)}.ui-treemap-block-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ui-treemap-block-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;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,);opacity:85%}.ui-treemap-tooltip{pointer-events:none;position:absolute;z-index:10}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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;}@property --tw-leading{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-duration: initial;--tw-ease: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-leading: 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", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--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,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-border-style: solid;--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;--tw-font-weight: initial;--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"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: UiChartFrameComponent,
+			selector: "ui-chart-frame",
+			inputs: [
+				"options",
+				"ariaLabel",
+				"categories",
+				"series",
+				"legendItems",
+				"legendNote",
+				"hiddenSeries",
+				"valueFormatter",
+				"categoryLabel",
+				"height",
+				"emptyText",
+				"loading",
+				"empty",
+				"showTable",
+				"masked",
+				"showLegend",
+				"emphasis"
+			],
+			outputs: ["hiddenSeriesChange", "emphasisChange"]
+		}],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTreemapChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-treemap-chart",
+			encapsulation: ViewEncapsulation.None,
+			imports: [NgTemplateOutlet, UiChartFrameComponent],
+			host: { class: "block w-full min-w-0" },
+			template: "<ui-chart-frame\n    [options]=\"null\"\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    <div\n        #canvas\n        class=\"ui-treemap\"\n        [class.ui-treemap--settled]=\"settled()\"\n        [class.grow]=\"fill()\"\n        [class.min-h-0]=\"fill()\"\n        [style.height.px]=\"fixedHeight()\"\n        [attr.role]=\"selectable() ? 'group' : 'img'\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (pointerleave)=\"pointed.set(null)\"\n    >\n        @if (concealed()) {\n            <!-- the proportions alone would give the amounts away, so one grey block stands in for them all -->\n            <div class=\"ui-treemap-concealed\" [style.background-color]=\"ink().grid\"></div>\n        } @else {\n            @for (group of placedGroups(); track group.name) {\n                <div\n                    class=\"ui-treemap-group\"\n                    [class.ui-treemap-group--faded]=\"isFaded(group)\"\n                    [style.left.px]=\"group.rect.x\"\n                    [style.top.px]=\"group.rect.y\"\n                    [style.width.px]=\"group.rect.width\"\n                    [style.height.px]=\"group.rect.height\"\n                >\n                    @if (group.hasHeader) {\n                        <div class=\"ui-treemap-header ui-text-caption\" aria-hidden=\"true\">\n                            <span class=\"ui-treemap-header-name\">{{ group.name }}</span>\n                            <span class=\"ui-treemap-header-total\">{{ formatValue(group.total) }}</span>\n                        </div>\n                    }\n\n                    @for (block of group.placedBlocks; track block.item) {\n                        @if (selectable()) {\n                            <button\n                                type=\"button\"\n                                class=\"ui-treemap-block ui-treemap-block--selectable ui-text-caption\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                [attr.aria-label]=\"accessibleName(block)\"\n                                (pointermove)=\"point($event, group, block)\"\n                                (focus)=\"focus(group, block)\"\n                                (blur)=\"pointed.set(null)\"\n                                (click)=\"select(block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </button>\n                        } @else {\n                            <div\n                                class=\"ui-treemap-block ui-text-caption\"\n                                aria-hidden=\"true\"\n                                [style.left.px]=\"block.rect.x\"\n                                [style.top.px]=\"block.rect.y\"\n                                [style.width.px]=\"block.rect.width\"\n                                [style.height.px]=\"block.rect.height\"\n                                [style.background-color]=\"block.fill\"\n                                [style.color]=\"block.labelInk\"\n                                (pointermove)=\"point($event, group, block)\"\n                            >\n                                <ng-container\n                                    [ngTemplateOutlet]=\"label\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: block }\"\n                                />\n                            </div>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pointed(); as pointed) {\n                <div\n                    class=\"ui-chart-tooltip-panel ui-treemap-tooltip\"\n                    aria-hidden=\"true\"\n                    [style.left.px]=\"tooltipPosition()?.left\"\n                    [style.right.px]=\"tooltipPosition()?.right\"\n                    [style.top.px]=\"tooltipPosition()?.top\"\n                >\n                    <div class=\"ui-chart-tooltip\">\n                        <div class=\"ui-chart-tooltip-title ui-text-caption\">{{ pointed.group.name }}</div>\n                        <div class=\"ui-chart-tooltip-row ui-text-body-alt\">\n                            <span\n                                class=\"ui-chart-tooltip-dot\"\n                                [style.--ui-chart-tooltip-colour]=\"pointed.block.fill\"\n                            ></span>\n                            <span class=\"ui-chart-tooltip-name\">{{ pointed.block.item }}</span>\n                            @if (!masked()) {\n                                <span class=\"ui-chart-tooltip-value\">{{ formatValue(pointed.block.value) }}</span>\n                            }\n                        </div>\n                        <div class=\"ui-chart-tooltip-footer ui-text-caption\">{{ tooltipFooter() }}</div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n</ui-chart-frame>\n\n<ng-template #label let-block>\n    @if (block.label !== 'none') {\n        <span class=\"ui-treemap-block-name\">{{ block.item }}</span>\n    }\n    @if (block.label === 'full') {\n        <span class=\"ui-treemap-block-value\">{{ formatValue(block.value) }}</span>\n    }\n</ng-template>\n",
+			styles: ["@layer properties;.ui-treemap{position:relative;display:block;width:100%}.ui-treemap-concealed{position:absolute;inset:0;border-radius:var(--radius-md, .375rem)}.ui-treemap-group,.ui-treemap-block{position:absolute}@media(prefers-reduced-motion:no-preference){.ui-treemap--settled .ui-treemap-group,.ui-treemap--settled .ui-treemap-block{transition-property:left,top,width,height,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1))}}.ui-treemap-group--faded{opacity:.15}.ui-treemap-header{display:flex;height:calc(var(--spacing, .25rem) * 6);align-items:baseline;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * .5)}.ui-treemap-header-name{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-treemap-header-total{margin-inline-start:auto;flex-shrink:0;color:var(--muted-foreground-1);--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,)}.ui-treemap-header-name,.ui-treemap-header-total{--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.ui-treemap-block{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:start}.ui-treemap-block--selectable{cursor:pointer}.ui-treemap-block--selectable:focus{--tw-outline-style: none;outline-style:none}.ui-treemap-block--selectable:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-treemap-block--selectable:focus-visible{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui-treemap-block:hover{filter:brightness(1.06)}.ui-treemap-block-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ui-treemap-block-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;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,);opacity:85%}.ui-treemap-tooltip{pointer-events:none;position:absolute;z-index:10}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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;}@property --tw-leading{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-duration: initial;--tw-ease: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-leading: 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", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--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,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-border-style: solid;--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;--tw-font-weight: initial;--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"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		groups: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groups",
+				required: true
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		shades: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shades",
+				required: false
+			}]
+		}],
+		selectable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectable",
+				required: false
+			}]
+		}],
+		valueLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueLabel",
+				required: false
+			}]
+		}],
+		itemSelect: [{
+			type: i0.Output,
+			args: ["itemSelect"]
+		}],
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+export { BarChartOrientations, LineChartCurves, PieChartVariants, UiBarChartComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiLineChartComponent, UiPieChartComponent, UiTreemapChartComponent };
+
+//# sourceMappingURL=area8975-ui-charts.mjs.map