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

package/fesm2022/area8975-ui.mjs

@@ -3591,8 +3591,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 +3652,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 +6441,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 +6558,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 +6572,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 +6614,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 +6663,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 +6692,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
 		size: [{
 			type: i0.Input,
 			args: [{
@@ -6523,6 +6707,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
+			}]
 		}]
 	}
 });