@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-sheet.mjs

@@ -0,0 +1,530 @@
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, booleanAttribute, computed, inject, input } from "@angular/core";
+import { buttonVariants } from "@loomui-ng/ui/button";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, UiModalContentBase, UiModalRoot, cn } from "@loomui-ng/ui/utils";
+import { LIB_ICONS, iconToSvg } from "@loomui-ng/ui/icon";
+const OVERLAY_CLASS = "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
+const CONTENT_CLASS = "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10";
+var UiSheet = class UiSheet extends UiModalRoot {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheet,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiSheet,
+		isStandalone: true,
+		selector: "[uiSheet], ui-sheet",
+		exportAs: ["uiSheet"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheet,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheet], ui-sheet",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiSheet"
+		}]
+	}]
+});
+var UiSheetTrigger = class UiSheetTrigger {
+	root = inject(UiSheet);
+	constructor() {
+		this.root.trigger.set(inject(ElementRef).nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheetTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiSheetTrigger,
+		isStandalone: true,
+		selector: "[uiSheetTrigger], ui-sheet-trigger",
+		host: {
+			attributes: {
+				"data-slot": "sheet-trigger",
+				"aria-haspopup": "dialog"
+			},
+			listeners: { "click": "root.toggle()" },
+			properties: {
+				"attr.aria-expanded": "root.open()",
+				"attr.aria-controls": "root.id",
+				"attr.data-state": "root.open() ? \"open\" : \"closed\""
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheetTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheetTrigger], ui-sheet-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sheet-trigger",
+				"aria-haspopup": "dialog",
+				"[attr.aria-expanded]": "root.open()",
+				"[attr.aria-controls]": "root.id",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"(click)": "root.toggle()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiSheetContent = class UiSheetContent extends UiModalContentBase {
+	root = inject(UiSheet);
+	config = {
+		slot: "sheet",
+		backdropClass: OVERLAY_CLASS
+	};
+	side = input("right", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	showCloseButton = input(true, {
+		...ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => cn(CONTENT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		this.init();
+		queueMicrotask(() => {
+			if (this.showCloseButton()) this.el.appendChild(this.createCloseButton());
+		});
+	}
+	createCloseButton() {
+		const btn = document.createElement("button");
+		btn.type = "button";
+		btn.setAttribute("data-slot", "sheet-close");
+		btn.setAttribute("data-variant", "ghost");
+		btn.setAttribute("data-size", "icon-sm");
+		btn.className = cn(buttonVariants({
+			variant: "ghost",
+			size: "icon-sm"
+		}), "absolute end-3 top-3");
+		btn.innerHTML = iconToSvg(LIB_ICONS["X"], { size: 16 }).replace("<svg ", "<svg class=\"size-4\" aria-hidden=\"true\" ") + "<span class=\"sr-only\">Close</span>";
+		btn.addEventListener("click", () => this.root.close());
+		return btn;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheetContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSheetContent,
+		isStandalone: true,
+		selector: "[uiSheetContent], ui-sheet-content",
+		inputs: {
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "dialog",
+				"data-slot": "sheet-content",
+				"tabindex": "-1"
+			},
+			properties: {
+				"id": "root.id",
+				"attr.aria-labelledby": "root.titleId",
+				"attr.aria-describedby": "root.descriptionId",
+				"attr.data-state": "root.state()",
+				"attr.data-side": "side()",
+				"attr.class": "classes()"
+			}
+		},
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheetContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheetContent], ui-sheet-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "dialog",
+				"data-slot": "sheet-content",
+				tabindex: "-1",
+				"[id]": "root.id",
+				"[attr.aria-labelledby]": "root.titleId",
+				"[attr.aria-describedby]": "root.descriptionId",
+				"[attr.data-state]": "root.state()",
+				"[attr.data-side]": "side()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}]
+	}
+});
+var UiSheetHeader = class UiSheetHeader {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex flex-col gap-0.5 p-4", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheetHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSheetHeader,
+		isStandalone: true,
+		selector: "[uiSheetHeader], ui-sheet-header",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "sheet-header" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheetHeader,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheetHeader], ui-sheet-header",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sheet-header",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSheetFooter = class UiSheetFooter {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("mt-auto flex flex-col gap-2 p-4", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheetFooter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSheetFooter,
+		isStandalone: true,
+		selector: "[uiSheetFooter], ui-sheet-footer",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "sheet-footer" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheetFooter,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheetFooter], ui-sheet-footer",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sheet-footer",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSheetTitle = class UiSheetTitle {
+	root = inject(UiSheet);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("text-base font-medium text-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheetTitle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSheetTitle,
+		isStandalone: true,
+		selector: "[uiSheetTitle], ui-sheet-title",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "sheet-title" },
+			properties: {
+				"id": "root.titleId",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheetTitle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheetTitle], ui-sheet-title",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sheet-title",
+				"[id]": "root.titleId",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSheetDescription = class UiSheetDescription {
+	root = inject(UiSheet);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("text-sm text-muted-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheetDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSheetDescription,
+		isStandalone: true,
+		selector: "[uiSheetDescription], ui-sheet-description",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "sheet-description" },
+			properties: {
+				"id": "root.descriptionId",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheetDescription,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheetDescription], ui-sheet-description",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sheet-description",
+				"[id]": "root.descriptionId",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSheetClose = class UiSheetClose {
+	root = inject(UiSheet);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSheetClose,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiSheetClose,
+		isStandalone: true,
+		selector: "[uiSheetClose], ui-sheet-close",
+		host: {
+			attributes: { "data-slot": "sheet-close" },
+			listeners: { "click": "root.close()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSheetClose,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSheetClose], ui-sheet-close",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sheet-close",
+				"(click)": "root.close()"
+			}
+		}]
+	}]
+});
+const UI_SHEET = [
+	UiSheet,
+	UiSheetTrigger,
+	UiSheetContent,
+	UiSheetHeader,
+	UiSheetFooter,
+	UiSheetTitle,
+	UiSheetDescription,
+	UiSheetClose
+];
+export { UI_SHEET, UiSheet, UiSheetClose, UiSheetContent, UiSheetDescription, UiSheetFooter, UiSheetHeader, UiSheetTitle, UiSheetTrigger };
+
+//# sourceMappingURL=loomui-ng-ui-sheet.mjs.map

package/fesm2022/loomui-ng-ui-sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-sheet.mjs","names":[],"sources":["../../../libs/ui/sheet/sheet.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, input, booleanAttribute } from '@angular/core';\nimport { buttonVariants } from '@loomui-ng/ui/button';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiModalContentBase, UiModalRoot, type ModalContentConfig } from '@loomui-ng/ui/utils';\nimport { iconToSvg, LIB_ICONS } from '@loomui-ng/ui/icon';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nconst OVERLAY_CLASS =\n  'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0';\n\n// Observed classes use physical left-0/right-0 with border-e/border-s (logical). In RTL a \"left\" sheet would\n// stay on the left; we keep the observed physical positioning (deviation note in docs/behavior-specs/sheet.md).\nconst CONTENT_CLASS =\n  'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10';\n\n/** <div uiSheet [(open)]=\"o\"> <button uiSheetTrigger/> <div uiSheetContent side=\"right\">…</div> </div> */\n@Directive({ selector: '[uiSheet], ui-sheet', hostDirectives: [UiElementHost], exportAs: 'uiSheet' })\nexport class UiSheet extends UiModalRoot {}\n\n@Directive({\n  selector: '[uiSheetTrigger], ui-sheet-trigger', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'sheet-trigger',\n    'aria-haspopup': 'dialog',\n    '[attr.aria-expanded]': 'root.open()',\n    '[attr.aria-controls]': 'root.id',\n    '[attr.data-state]': 'root.open() ? \"open\" : \"closed\"',\n    '(click)': 'root.toggle()',\n  },\n})\nexport class UiSheetTrigger {\n  protected readonly root = inject(UiSheet);\n  constructor() {\n    this.root.trigger.set(inject<ElementRef<HTMLElement>>(ElementRef).nativeElement);\n  }\n}\n\n@Directive({\n  selector: '[uiSheetContent], ui-sheet-content', hostDirectives: [UiElementHost],\n  host: {\n    role: 'dialog',\n    'data-slot': 'sheet-content',\n    tabindex: '-1',\n    '[id]': 'root.id',\n    '[attr.aria-labelledby]': 'root.titleId',\n    '[attr.aria-describedby]': 'root.descriptionId',\n    '[attr.data-state]': 'root.state()',\n    '[attr.data-side]': 'side()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiSheetContent extends UiModalContentBase {\n  protected readonly root = inject(UiSheet);\n  protected readonly config: ModalContentConfig = { slot: 'sheet', backdropClass: OVERLAY_CLASS };\n  readonly side = input<'top' | 'right' | 'bottom' | 'left'>('right');\n  readonly showCloseButton = input(true, { transform: booleanAttribute });\n  protected readonly classes = computed(() => cn(CONTENT_CLASS, this.userClass()));\n\n  constructor() {\n    super();\n    this.init();\n    queueMicrotask(() => {\n      if (this.showCloseButton()) this.el.appendChild(this.createCloseButton());\n    });\n  }\n\n  private createCloseButton(): HTMLButtonElement {\n    const btn = document.createElement('button');\n    btn.type = 'button';\n    btn.setAttribute('data-slot', 'sheet-close');\n    btn.setAttribute('data-variant', 'ghost');\n    btn.setAttribute('data-size', 'icon-sm');\n    btn.className = cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'absolute end-3 top-3');\n    btn.innerHTML = iconToSvg(LIB_ICONS['X'], { size: 16 }).replace('<svg ', '<svg class=\"size-4\" aria-hidden=\"true\" ') + '<span class=\"sr-only\">Close</span>';\n    btn.addEventListener('click', () => this.root.close());\n    return btn;\n  }\n}\n\n@Directive({\n  selector: '[uiSheetHeader], ui-sheet-header', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'sheet-header', '[attr.class]': 'classes()' },\n})\nexport class UiSheetHeader {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('flex flex-col gap-0.5 p-4', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiSheetFooter], ui-sheet-footer', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'sheet-footer', '[attr.class]': 'classes()' },\n})\nexport class UiSheetFooter {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('mt-auto flex flex-col gap-2 p-4', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiSheetTitle], ui-sheet-title', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'sheet-title', '[id]': 'root.titleId', '[attr.class]': 'classes()' },\n})\nexport class UiSheetTitle {\n  protected readonly root = inject(UiSheet);\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('text-base font-medium text-foreground', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiSheetDescription], ui-sheet-description', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'sheet-description', '[id]': 'root.descriptionId', '[attr.class]': 'classes()' },\n})\nexport class UiSheetDescription {\n  protected readonly root = inject(UiSheet);\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('text-sm text-muted-foreground', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiSheetClose], ui-sheet-close', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'sheet-close', '(click)': 'root.close()' },\n})\nexport class UiSheetClose {\n  protected readonly root = inject(UiSheet);\n}\n\nexport const UI_SHEET = [\n  UiSheet,\n  UiSheetTrigger,\n  UiSheetContent,\n  UiSheetHeader,\n  UiSheetFooter,\n  UiSheetTitle,\n  UiSheetDescription,\n  UiSheetClose,\n] as const;\n"],"mappings":"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"}