@area8975/ui 0.1.1-dev.5 → 0.1.1-dev.8

package/fesm2022/area8975-ui.mjs

@@ -657,7 +657,10 @@ var UiChartComponent = class UiChartComponent {
 		});
 		effect(() => {
 			const chart = this.chart();
-			if (chart) this.applyHidden(chart);
+			if (chart) {
+				this.applyHidden(chart);
+				this.applyEmphasis();
+			}
 		});
 		inject(DestroyRef).onDestroy(() => {
 			this.destroyed = true;
@@ -673,16 +676,18 @@ var UiChartComponent = class UiChartComponent {
 		}
 	}
 	applyEmphasis() {
-		const emphasis = untracked(this.emphasis);
 		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", !!emphasis && name !== emphasis);
+			group.classList.toggle("ui-chart-series--faded", !!active && name !== active);
 		}
 	}
 	seriesNames() {
-		return (untracked(this.options).series ?? []).map((item) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : null);
+		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",
@@ -1788,6 +1793,204 @@ const LineChartCurves = [
 	"smooth",
 	"stepline"
 ];
+const percentFormatter = new Intl.NumberFormat("en-GB", {
+	style: "percent",
+	maximumFractionDigits: 1
+});
+var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
+	variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* 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();
+		return this.categories().map((name, index) => muted[index] ? {
+			colour: CHART_INK.context,
+			dashed: false
+		} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false));
+	}, ...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 base = baseChartOptions();
+		const slices = this.slices();
+		const donut = this.variant() === "donut";
+		const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+		const centreText = {
+			fontSize: "12px",
+			color: CHART_INK.muted,
+			offsetY: -4
+		};
+		return mergeChartOptions({
+			...base,
+			chart: {
+				...base.chart,
+				type: donut ? "donut" : "pie",
+				height: this.height()
+			},
+			colors: slices.map((slice) => slice.colour),
+			labels: slices.map((slice) => slice.name),
+			series: slices.map((slice) => slice.value),
+			stroke: {
+				show: true,
+				width: 2,
+				colors: [CHART_INK.surface]
+			},
+			states: {
+				...base.states,
+				hover: { filter: { type: "darken" } }
+			},
+			plotOptions: { pie: {
+				expandOnClick: false,
+				donut: {
+					size: "65%",
+					labels: {
+						show: donut,
+						name: centreText,
+						value: {
+							fontSize: "20px",
+							fontWeight: 600,
+							color: CHART_INK.text,
+							offsetY: 4,
+							formatter: (value) => this.formatValue(Number(value))
+						},
+						total: {
+							show: true,
+							showAlways: true,
+							label: this.totalLabel(),
+							...centreText,
+							formatter: () => this.formatValue(total)
+						}
+					}
+				}
+			} },
+			tooltip: {
+				theme: "light",
+				fillSeriesColor: false,
+				custom: ({ seriesIndex }) => {
+					const slice = slices[seriesIndex];
+					return slice ? chartTooltipHtml("", [{
+						colour: slice.colour,
+						name: slice.name,
+						value: this.formatValue(slice.value)
+					}], total ? `${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
+			}
+		},
+		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    [valueFormatter]=\"valueFormatter()\"\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"
+			],
+			outputs: ["hiddenSeriesChange"]
+		}]
+	});
+};
+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    [valueFormatter]=\"valueFormatter()\"\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
+			}]
+		}]
+	}
+});
+const PieChartVariants = ["pie", "donut"];
 var UiCheckboxComponent = class UiCheckboxComponent {
 	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
@@ -3591,8 +3794,57 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
+var UiOverlayStack = class UiOverlayStack {
+	entries = [];
+	constructor() {
+		document.addEventListener("click", this.onDocumentClick);
+		document.addEventListener("keydown", this.onKeyDown);
+		inject(DestroyRef).onDestroy(() => {
+			document.removeEventListener("click", this.onDocumentClick);
+			document.removeEventListener("keydown", this.onKeyDown);
+		});
+	}
+	push = (entry) => {
+		this.remove(entry);
+		this.entries.push(entry);
+	};
+	remove = (entry) => {
+		const index = this.entries.indexOf(entry);
+		if (index !== -1) this.entries.splice(index, 1);
+	};
+	top = () => this.entries.at(-1);
+	onDocumentClick = (event) => this.top()?.onDocumentClick(event);
+	onKeyDown = (event) => this.top()?.onKeyDown(event);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayStack,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayStack,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiOverlayStack,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
 var UiOverlayComponent = class UiOverlayComponent {
 	positioner = inject(UiOverlayPositioner);
+	stack = inject(UiOverlayStack);
 	content = input(...ngDevMode ? [void 0, { debugName: "content" }] : /* istanbul ignore next */ []);
 	anchor = input(...ngDevMode ? [void 0, { debugName: "anchor" }] : /* istanbul ignore next */ []);
 	closeBehaviour = input("whenClickAnywhere", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
@@ -3603,12 +3855,9 @@ var UiOverlayComponent = class UiOverlayComponent {
 	matchWidth = input(null, ...ngDevMode ? [{ debugName: "matchWidth" }] : /* istanbul ignore next */ []);
 	constructor() {
 		effect((onCleanup) => {
-			document.addEventListener("click", this.onDocumentClick);
-			document.addEventListener("keydown", this.onKeyDown);
-			onCleanup(() => {
-				document.removeEventListener("click", this.onDocumentClick);
-				document.removeEventListener("keydown", this.onKeyDown);
-			});
+			if (!this.isOpen()()) return;
+			this.stack.push(this);
+			onCleanup(() => this.stack.remove(this));
 		});
 		effect((onCleanup) => {
 			const anchor = this.anchor();
@@ -6395,17 +6644,108 @@ const UI_LOADING_TYPES = [
 	"bouncing-dots",
 	"fading-dots"
 ];
+var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
+	isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiModalCloseButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiModalCloseButtonComponent,
+		isStandalone: true,
+		selector: "ui-modal-close-btn",
+		inputs: { isOpen: {
+			classPropertyName: "isOpen",
+			publicName: "isOpen",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		outputs: { isOpen: "isOpenChange" },
+		ngImport: i0,
+		template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent! shadow-none!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
+		dependencies: [{
+			kind: "component",
+			type: UiButtonComponent,
+			selector: "ui-button",
+			inputs: [
+				"appearance",
+				"intent",
+				"size",
+				"classes",
+				"type",
+				"ariaLabel",
+				"disabled",
+				"loading"
+			]
+		}, {
+			kind: "component",
+			type: NgIcon,
+			selector: "ng-icon",
+			inputs: [
+				"name",
+				"svg",
+				"size",
+				"strokeWidth",
+				"color"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiModalCloseButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-modal-close-btn",
+			imports: [UiButtonComponent, NgIcon],
+			template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent! shadow-none!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
+		}]
+	}],
+	propDecorators: { isOpen: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "isOpen",
+			required: true
+		}]
+	}, {
+		type: i0.Output,
+		args: ["isOpenChange"]
+	}] }
+});
 var UiModalComponent = class UiModalComponent {
+	isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	closeBehaviour = input("whenClickOutside", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	headerElement = contentChild("header", {
+		...ngDevMode ? { debugName: "headerElement" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	footerElement = contentChild("footer", {
+		...ngDevMode ? { debugName: "footerElement" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
 	panelElement = viewChild("panel", {
 		...ngDevMode ? { debugName: "panelElement" } : /* istanbul ignore next */ {},
 		read: ElementRef
 	});
-	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
-	closeBehaviour = input("whenClickOutside", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
-	toggle = () => this.open.update((value) => !value);
-	close = () => this.open.set(false);
-	size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
-	generatedSizeClasses = computed(() => `ui-modal--${this.size()}`, ...ngDevMode ? [{ debugName: "generatedSizeClasses" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-modal",
+		`ui-modal--${this.size()}`,
+		this.classes()
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -6421,11 +6761,11 @@ var UiModalComponent = class UiModalComponent {
 		isStandalone: true,
 		selector: "ui-modal",
 		inputs: {
-			open: {
-				classPropertyName: "open",
-				publicName: "open",
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
 				isSignal: true,
-				isRequired: false,
+				isRequired: true,
 				transformFunction: null
 			},
 			closeBehaviour: {
@@ -6435,15 +6775,40 @@ var UiModalComponent = class UiModalComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			size: {
 				classPropertyName: "size",
 				publicName: "size",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
-		outputs: { open: "openChange" },
+		outputs: { isOpen: "isOpenChange" },
+		queries: [{
+			propertyName: "headerElement",
+			first: true,
+			predicate: ["header"],
+			isSignal: true
+		}, {
+			propertyName: "footerElement",
+			first: true,
+			predicate: ["footer"],
+			isSignal: true
+		}],
 		viewQueries: [{
 			propertyName: "panelElement",
 			first: true,
@@ -6452,26 +6817,44 @@ var UiModalComponent = class UiModalComponent {
 			read: ElementRef,
 			isSignal: true
 		}],
-		exportAs: ["uiModal"],
 		ngImport: i0,
-		template: "@if (open()) {\n    <div class=\"ui-modal--backdrop\">\n        <ui-overlay\n            [isOpen]=\"open\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabindex=\"-1\"\n            role=\"dialog\"\n        >\n            <div #panel [class]=\"generatedSizeClasses()\">\n                <div class=\"ui-modal--content\">\n                    <ng-content />\n                </div>\n            </div>\n        </ui-overlay>\n    </div>\n}\n",
-		styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal--content{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
-		dependencies: [{
-			kind: "component",
-			type: UiOverlayComponent,
-			selector: "ui-overlay",
-			inputs: [
-				"content",
-				"anchor",
-				"closeBehaviour",
-				"isOpen",
-				"placement",
-				"offset",
-				"viewportPadding",
-				"matchWidth"
-			],
-			exportAs: ["uiOverlay"]
-		}]
+		template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <div #panel [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </div>\n        </ui-overlay>\n    </div>\n}\n",
+		styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: UiOverlayComponent,
+				selector: "ui-overlay",
+				inputs: [
+					"content",
+					"anchor",
+					"closeBehaviour",
+					"isOpen",
+					"placement",
+					"offset",
+					"viewportPadding",
+					"matchWidth"
+				],
+				exportAs: ["uiOverlay"]
+			},
+			{
+				kind: "component",
+				type: UiModalCloseButtonComponent,
+				selector: "ui-modal-close-btn",
+				inputs: ["isOpen"],
+				outputs: ["isOpenChange"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -6483,30 +6866,26 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ui-modal",
-			exportAs: "uiModal",
-			imports: [UiOverlayComponent],
-			template: "@if (open()) {\n    <div class=\"ui-modal--backdrop\">\n        <ui-overlay\n            [isOpen]=\"open\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabindex=\"-1\"\n            role=\"dialog\"\n        >\n            <div #panel [class]=\"generatedSizeClasses()\">\n                <div class=\"ui-modal--content\">\n                    <ng-content />\n                </div>\n            </div>\n        </ui-overlay>\n    </div>\n}\n",
-			styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal--content{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			imports: [
+				UiOverlayComponent,
+				UiModalCloseButtonComponent,
+				NgTemplateOutlet
+			],
+			template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <div #panel [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </div>\n        </ui-overlay>\n    </div>\n}\n",
+			styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	propDecorators: {
-		panelElement: [{
-			type: i0.ViewChild,
-			args: ["panel", {
-				read: ElementRef,
-				isSignal: true
-			}]
-		}],
-		open: [{
+		isOpen: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "open",
-				required: false
+				alias: "isOpen",
+				required: true
 			}]
 		}, {
 			type: i0.Output,
-			args: ["openChange"]
+			args: ["isOpenChange"]
 		}],
 		closeBehaviour: [{
 			type: i0.Input,
@@ -6516,6 +6895,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
 		size: [{
 			type: i0.Input,
 			args: [{
@@ -6523,6 +6910,35 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "size",
 				required: false
 			}]
+		}],
+		classes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "classes",
+				required: false
+			}]
+		}],
+		headerElement: [{
+			type: i0.ContentChild,
+			args: ["header", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		footerElement: [{
+			type: i0.ContentChild,
+			args: ["footer", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		panelElement: [{
+			type: i0.ViewChild,
+			args: ["panel", {
+				read: ElementRef,
+				isSignal: true
+			}]
 		}]
 	}
 });
@@ -11359,6 +11775,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
+export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
 
 //# sourceMappingURL=area8975-ui.mjs.map