@area8975/ui 0.1.0 → 0.1.1-dev.5

package/fesm2022/area8975-ui.mjs

@@ -6395,103 +6395,17 @@ 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!\"\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!\"\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 */ []);
-	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
 	});
-	generatedClasses = computed(() => ["ui-modal", this.classes()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	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 */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -6507,11 +6421,11 @@ var UiModalComponent = class UiModalComponent {
 		isStandalone: true,
 		selector: "ui-modal",
 		inputs: {
-			isOpen: {
-				classPropertyName: "isOpen",
-				publicName: "isOpen",
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
 				isSignal: true,
-				isRequired: true,
+				isRequired: false,
 				transformFunction: null
 			},
 			closeBehaviour: {
@@ -6521,33 +6435,15 @@ var UiModalComponent = class UiModalComponent {
 				isRequired: false,
 				transformFunction: null
 			},
-			title: {
-				classPropertyName: "title",
-				publicName: "title",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			classes: {
-				classPropertyName: "classes",
-				publicName: "classes",
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		outputs: { isOpen: "isOpenChange" },
-		queries: [{
-			propertyName: "headerElement",
-			first: true,
-			predicate: ["header"],
-			isSignal: true
-		}, {
-			propertyName: "footerElement",
-			first: true,
-			predicate: ["footer"],
-			isSignal: true
-		}],
+		outputs: { open: "openChange" },
 		viewQueries: [{
 			propertyName: "panelElement",
 			first: true,
@@ -6556,44 +6452,26 @@ var UiModalComponent = class UiModalComponent {
 			read: ElementRef,
 			isSignal: true
 		}],
+		exportAs: ["uiModal"],
 		ngImport: i0,
-		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;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)}@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"
-				]
-			}
-		]
+		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"]
+		}]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -6605,26 +6483,30 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ui-modal",
-			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;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)}@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"]
+			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"]
 		}]
 	}],
 	propDecorators: {
-		isOpen: [{
+		panelElement: [{
+			type: i0.ViewChild,
+			args: ["panel", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		open: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "isOpen",
-				required: true
+				alias: "open",
+				required: false
 			}]
 		}, {
 			type: i0.Output,
-			args: ["isOpenChange"]
+			args: ["openChange"]
 		}],
 		closeBehaviour: [{
 			type: i0.Input,
@@ -6634,42 +6516,13 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		title: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "title",
-				required: false
-			}]
-		}],
-		classes: [{
+		size: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "classes",
+				alias: "size",
 				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
-			}]
 		}]
 	}
 });