@loomui-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,1918 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, booleanAttribute, computed, inject, input, model, signal } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { cva } from "class-variance-authority";
+import { buttonVariants } from "@loomui-ng/ui/button";
+import * as i2 from "@loomui-ng/ui/sheet";
+import { UI_SHEET } from "@loomui-ng/ui/sheet";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+var UiSidebarProvider = class UiSidebarProvider {
+	open = model(true, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	openMobile = model(false, ...ngDevMode ? [{ debugName: "openMobile" }] : /* istanbul ignore next */ []);
+	width = input("16rem", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	shortcut = input("b", ...ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	isMobile = signal(false, ...ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.open() ? "expanded" : "collapsed", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (typeof matchMedia !== "undefined") {
+			const mq = matchMedia("(max-width: 767px)");
+			const update = () => this.isMobile.set(mq.matches);
+			update();
+			mq.addEventListener("change", update);
+			inject(DestroyRef).onDestroy(() => mq.removeEventListener("change", update));
+		}
+	}
+	toggle() {
+		if (this.isMobile()) this.openMobile.update((v) => !v);
+		else this.open.update((v) => !v);
+	}
+	onKey(e) {
+		if (e.key.toLowerCase() === this.shortcut() && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarProvider,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarProvider,
+		isStandalone: true,
+		selector: "[uiSidebarProvider], ui-sidebar-provider",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openMobile: {
+				classPropertyName: "openMobile",
+				publicName: "openMobile",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shortcut: {
+				classPropertyName: "shortcut",
+				publicName: "shortcut",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			open: "openChange",
+			openMobile: "openMobileChange"
+		},
+		host: {
+			attributes: { "data-slot": "sidebar-wrapper" },
+			listeners: { "document:keydown": "onKey($event)" },
+			properties: {
+				"style": "{\"--sidebar-width\": width(), \"--sidebar-width-icon\": \"3rem\"}",
+				"attr.class": "classes()"
+			}
+		},
+		exportAs: ["uiSidebarProvider"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarProvider,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarProvider], ui-sidebar-provider",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiSidebarProvider",
+			host: {
+				"data-slot": "sidebar-wrapper",
+				"[style]": "{\"--sidebar-width\": width(), \"--sidebar-width-icon\": \"3rem\"}",
+				"[attr.class]": "classes()",
+				"(document:keydown)": "onKey($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		openMobile: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openMobile",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openMobileChange"]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		shortcut: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shortcut",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiSidebar = class UiSidebar {
+	provider = inject(UiSidebarProvider);
+	side = input("left", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	variant = input("sidebar", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	collapsible = input("offcanvas", ...ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	hostState = computed(() => this.provider.state(), ...ngDevMode ? [{ debugName: "hostState" }] : /* istanbul ignore next */ []);
+	hostCollapsible = computed(() => this.provider.state() === "collapsed" ? this.collapsible() : "", ...ngDevMode ? [{ debugName: "hostCollapsible" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => this.collapsible() === "none" || this.provider.isMobile() ? cn("contents", this.userClass()) : cn("group peer hidden text-sidebar-foreground md:block", this.userClass()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	staticClasses = computed(() => cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "staticClasses" }] : /* istanbul ignore next */ []);
+	floating = computed(() => this.variant() === "floating" || this.variant() === "inset", ...ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []);
+	gapClasses = computed(() => cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180", this.floating() ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"), ...ngDevMode ? [{ debugName: "gapClasses" }] : /* istanbul ignore next */ []);
+	containerClasses = computed(() => cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", this.side() === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", this.floating() ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l"), ...ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiSidebar,
+		isStandalone: true,
+		selector: "[uiSidebar], ui-sidebar",
+		inputs: {
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "sidebar" },
+			properties: {
+				"attr.class": "hostClasses()",
+				"attr.data-state": "hostState()",
+				"attr.data-collapsible": "hostCollapsible()",
+				"attr.data-variant": "variant()",
+				"attr.data-side": "side()"
+			}
+		},
+		exportAs: ["uiSidebar"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <ng-template #body><ng-content /></ng-template>
+    @if (collapsible() === 'none') {
+      <div data-sidebar="sidebar" [class]="staticClasses()">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    } @else if (provider.isMobile()) {
+      <div uiSheet class="contents" [(open)]="provider.openMobile">
+        <div
+          uiSheetContent
+          data-sidebar="sidebar"
+          data-mobile="true"
+          [side]="side()"
+          [showCloseButton]="false"
+          class="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style="--sidebar-width: 18rem"
+        >
+          <h2 uiSheetTitle class="sr-only">Sidebar</h2>
+          <div class="flex h-full w-full flex-col"><ng-container [ngTemplateOutlet]="body" /></div>
+        </div>
+      </div>
+    } @else {
+      <div data-slot="sidebar-gap" [class]="gapClasses()"></div>
+      <div data-slot="sidebar-container" [class]="containerClasses()">
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+        >
+          <ng-container [ngTemplateOutlet]="body" />
+        </div>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: i2.UiSheet,
+				selector: "[uiSheet], ui-sheet",
+				exportAs: ["uiSheet"]
+			},
+			{
+				kind: "directive",
+				type: i2.UiSheetContent,
+				selector: "[uiSheetContent], ui-sheet-content",
+				inputs: ["side", "showCloseButton"]
+			},
+			{
+				kind: "directive",
+				type: i2.UiSheetTitle,
+				selector: "[uiSheetTitle], ui-sheet-title",
+				inputs: ["class"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiSidebar], ui-sidebar",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiSidebar",
+			imports: [NgTemplateOutlet, UI_SHEET],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "sidebar",
+				"[attr.class]": "hostClasses()",
+				"[attr.data-state]": "hostState()",
+				"[attr.data-collapsible]": "hostCollapsible()",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-side]": "side()"
+			},
+			template: `
+    <ng-template #body><ng-content /></ng-template>
+    @if (collapsible() === 'none') {
+      <div data-sidebar="sidebar" [class]="staticClasses()">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    } @else if (provider.isMobile()) {
+      <div uiSheet class="contents" [(open)]="provider.openMobile">
+        <div
+          uiSheetContent
+          data-sidebar="sidebar"
+          data-mobile="true"
+          [side]="side()"
+          [showCloseButton]="false"
+          class="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style="--sidebar-width: 18rem"
+        >
+          <h2 uiSheetTitle class="sr-only">Sidebar</h2>
+          <div class="flex h-full w-full flex-col"><ng-container [ngTemplateOutlet]="body" /></div>
+        </div>
+      </div>
+    } @else {
+      <div data-slot="sidebar-gap" [class]="gapClasses()"></div>
+      <div data-slot="sidebar-container" [class]="containerClasses()">
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+        >
+          <ng-container [ngTemplateOutlet]="body" />
+        </div>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiSidebarTrigger = class UiSidebarTrigger {
+	provider = inject(UiSidebarProvider);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(buttonVariants({
+		variant: "ghost",
+		size: "icon-sm"
+	}), "size-7", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarTrigger,
+		isStandalone: true,
+		selector: "button[uiSidebarTrigger], ui-sidebar-trigger",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"type": "button",
+				"data-sidebar": "trigger",
+				"data-slot": "sidebar-trigger"
+			},
+			listeners: { "click": "provider.toggle()" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<svg uiIcon="panel-left" class="rtl:rotate-180"></svg><span class="sr-only">Toggle Sidebar</span>`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarTrigger,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[uiSidebarTrigger], ui-sidebar-trigger",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				type: "button",
+				"data-sidebar": "trigger",
+				"data-slot": "sidebar-trigger",
+				"[attr.class]": "classes()",
+				"(click)": "provider.toggle()"
+			},
+			template: `<svg uiIcon="panel-left" class="rtl:rotate-180"></svg><span class="sr-only">Toggle Sidebar</span>`
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarRail = class UiSidebarRail {
+	provider = inject(UiSidebarProvider);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "in-data-[side=left]:in-data-[state=collapsed]:cursor-e-resize in-data-[side=right]:in-data-[state=collapsed]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarRail,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarRail,
+		isStandalone: true,
+		selector: "button[uiSidebarRail], ui-sidebar-rail",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"type": "button",
+				"aria-label": "Toggle Sidebar",
+				"tabindex": "-1",
+				"title": "Toggle Sidebar",
+				"data-sidebar": "rail",
+				"data-slot": "sidebar-rail"
+			},
+			listeners: { "click": "provider.toggle()" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarRail,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiSidebarRail], ui-sidebar-rail",
+			hostDirectives: [UiElementHost],
+			host: {
+				type: "button",
+				"aria-label": "Toggle Sidebar",
+				tabindex: "-1",
+				title: "Toggle Sidebar",
+				"data-sidebar": "rail",
+				"data-slot": "sidebar-rail",
+				"[attr.class]": "classes()",
+				"(click)": "provider.toggle()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarInset = class UiSidebarInset {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("relative flex w-full flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarInset,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarInset,
+		isStandalone: true,
+		selector: "[uiSidebarInset], ui-sidebar-inset",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "sidebar-inset" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarInset,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarInset], ui-sidebar-inset",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-inset",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarHeader = class UiSidebarHeader {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex flex-col gap-2 p-2", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarHeader,
+		isStandalone: true,
+		selector: "[uiSidebarHeader], ui-sidebar-header",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-header",
+				"data-sidebar": "header"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarHeader,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarHeader], ui-sidebar-header",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-header",
+				"data-sidebar": "header",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarFooter = class UiSidebarFooter {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex flex-col gap-2 p-2", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarFooter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarFooter,
+		isStandalone: true,
+		selector: "[uiSidebarFooter], ui-sidebar-footer",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-footer",
+				"data-sidebar": "footer"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarFooter,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarFooter], ui-sidebar-footer",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-footer",
+				"data-sidebar": "footer",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarContent = class UiSidebarContent {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarContent,
+		isStandalone: true,
+		selector: "[uiSidebarContent], ui-sidebar-content",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-content",
+				"data-sidebar": "content"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarContent], ui-sidebar-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-content",
+				"data-sidebar": "content",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarSeparator = class UiSidebarSeparator {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("mx-2 block h-px w-auto shrink-0 bg-sidebar-border", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarSeparator,
+		isStandalone: true,
+		selector: "[uiSidebarSeparator], ui-sidebar-separator",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-separator",
+				"data-sidebar": "separator",
+				"role": "separator"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarSeparator], ui-sidebar-separator",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-separator",
+				"data-sidebar": "separator",
+				role: "separator",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarGroup = class UiSidebarGroup {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("relative flex w-full min-w-0 flex-col p-2", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarGroup,
+		isStandalone: true,
+		selector: "[uiSidebarGroup], ui-sidebar-group",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-group",
+				"data-sidebar": "group"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarGroup], ui-sidebar-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-group",
+				"data-sidebar": "group",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarGroupLabel = class UiSidebarGroupLabel {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>ui-icon]:size-4 [&>svg]:shrink-0 [&>ui-icon]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarGroupLabel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarGroupLabel,
+		isStandalone: true,
+		selector: "[uiSidebarGroupLabel], ui-sidebar-group-label",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-group-label",
+				"data-sidebar": "group-label"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarGroupLabel,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarGroupLabel], ui-sidebar-group-label",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-group-label",
+				"data-sidebar": "group-label",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarGroupAction = class UiSidebarGroupAction {
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("absolute top-3.5 end-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>ui-icon]:size-4 [&>svg]:shrink-0 [&>ui-icon]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarGroupAction,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarGroupAction,
+		isStandalone: true,
+		selector: "button[uiSidebarGroupAction], ui-sidebar-group-action",
+		inputs: {
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "sidebar-group-action",
+				"data-sidebar": "group-action",
+				"type": "button"
+			},
+			properties: {
+				"attr.disabled": "disabled() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarGroupAction,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiSidebarGroupAction], ui-sidebar-group-action",
+			hostDirectives: [UiElementHost],
+			host: {
+				"[attr.disabled]": "disabled() ? \"\" : null",
+				"data-slot": "sidebar-group-action",
+				"data-sidebar": "group-action",
+				type: "button",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiSidebarGroupContent = class UiSidebarGroupContent {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("w-full text-sm", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarGroupContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarGroupContent,
+		isStandalone: true,
+		selector: "[uiSidebarGroupContent], ui-sidebar-group-content",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-group-content",
+				"data-sidebar": "group-content"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarGroupContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarGroupContent], ui-sidebar-group-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-group-content",
+				"data-sidebar": "group-content",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarMenu = class UiSidebarMenu {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex w-full min-w-0 flex-col gap-1 list-none m-0 p-0", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenu,
+		isStandalone: true,
+		selector: "ul[uiSidebarMenu], ui-sidebar-menu",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu",
+				"data-sidebar": "menu"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenu,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ul[uiSidebarMenu], ui-sidebar-menu",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-menu",
+				"data-sidebar": "menu",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarMenuItem = class UiSidebarMenuItem {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("group/menu-item relative", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenuItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenuItem,
+		isStandalone: true,
+		selector: "li[uiSidebarMenuItem], ui-sidebar-menu-item",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu-item",
+				"data-sidebar": "menu-item"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenuItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "li[uiSidebarMenuItem], ui-sidebar-menu-item",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-menu-item",
+				"data-sidebar": "menu-item",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarMenuAction = class UiSidebarMenuAction {
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("absolute top-1.5 end-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>ui-icon]:size-4 [&>svg]:shrink-0 [&>ui-icon]:shrink-0 after:absolute after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenuAction,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenuAction,
+		isStandalone: true,
+		selector: "button[uiSidebarMenuAction], ui-sidebar-menu-action",
+		inputs: {
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu-action",
+				"data-sidebar": "menu-action",
+				"type": "button"
+			},
+			properties: {
+				"attr.disabled": "disabled() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenuAction,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiSidebarMenuAction], ui-sidebar-menu-action",
+			hostDirectives: [UiElementHost],
+			host: {
+				"[attr.disabled]": "disabled() ? \"\" : null",
+				"data-slot": "sidebar-menu-action",
+				"data-sidebar": "menu-action",
+				type: "button",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiSidebarMenuBadge = class UiSidebarMenuBadge {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenuBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenuBadge,
+		isStandalone: true,
+		selector: "[uiSidebarMenuBadge], ui-sidebar-menu-badge",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu-badge",
+				"data-sidebar": "menu-badge"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenuBadge,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSidebarMenuBadge], ui-sidebar-menu-badge",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-menu-badge",
+				"data-sidebar": "menu-badge",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarMenuSub = class UiSidebarMenuSub {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 list-none group-data-[collapsible=icon]:hidden", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenuSub,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenuSub,
+		isStandalone: true,
+		selector: "ul[uiSidebarMenuSub], ui-sidebar-menu-sub",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu-sub",
+				"data-sidebar": "menu-sub"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenuSub,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ul[uiSidebarMenuSub], ui-sidebar-menu-sub",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-menu-sub",
+				"data-sidebar": "menu-sub",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSidebarMenuSubItem = class UiSidebarMenuSubItem {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("group/menu-sub-item relative", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenuSubItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenuSubItem,
+		isStandalone: true,
+		selector: "li[uiSidebarMenuSubItem], ui-sidebar-menu-sub-item",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu-sub-item",
+				"data-sidebar": "menu-sub-item"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenuSubItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "li[uiSidebarMenuSubItem], ui-sidebar-menu-sub-item",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-menu-sub-item",
+				"data-sidebar": "menu-sub-item",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>ui-icon]:size-4 [&>svg]:shrink-0 [&>ui-icon]:shrink-0", {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+		},
+		size: {
+			default: "h-8 text-sm",
+			sm: "h-7 text-xs",
+			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var UiSidebarMenuButton = class UiSidebarMenuButton {
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	provider = inject(UiSidebarProvider);
+	isActive = input(false, {
+		...ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	tooltipText = computed(() => this.tooltip() && this.provider.state() === "collapsed" && !this.provider.isMobile() ? this.tooltip() : null, ...ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(sidebarMenuButtonVariants({
+		variant: this.variant(),
+		size: this.size()
+	}), this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenuButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenuButton,
+		isStandalone: true,
+		selector: "button[uiSidebarMenuButton], a[uiSidebarMenuButton], ui-sidebar-menu-button",
+		inputs: {
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isActive: {
+				classPropertyName: "isActive",
+				publicName: "isActive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu-button",
+				"data-sidebar": "menu-button"
+			},
+			properties: {
+				"attr.disabled": "disabled() ? \"\" : null",
+				"attr.data-size": "size()",
+				"attr.data-active": "isActive()",
+				"attr.aria-current": "isActive() ? \"page\" : null",
+				"attr.title": "tooltipText()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenuButton,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiSidebarMenuButton], a[uiSidebarMenuButton], ui-sidebar-menu-button",
+			hostDirectives: [UiElementHost],
+			host: {
+				"[attr.disabled]": "disabled() ? \"\" : null",
+				"data-slot": "sidebar-menu-button",
+				"data-sidebar": "menu-button",
+				"[attr.data-size]": "size()",
+				"[attr.data-active]": "isActive()",
+				"[attr.aria-current]": "isActive() ? \"page\" : null",
+				"[attr.title]": "tooltipText()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		isActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isActive",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiSidebarMenuSubButton = class UiSidebarMenuSubButton {
+	isActive = input(false, {
+		...ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>ui-icon]:size-4 [&>svg]:shrink-0 [&>ui-icon]:shrink-0 [&>svg]:text-sidebar-accent-foreground [&>ui-icon]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden", this.size() === "sm" ? "text-xs" : "text-sm", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSidebarMenuSubButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSidebarMenuSubButton,
+		isStandalone: true,
+		selector: "a[uiSidebarMenuSubButton], button[uiSidebarMenuSubButton], ui-sidebar-menu-sub-button",
+		inputs: {
+			isActive: {
+				classPropertyName: "isActive",
+				publicName: "isActive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "sidebar-menu-sub-button",
+				"data-sidebar": "menu-sub-button"
+			},
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-active": "isActive()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSidebarMenuSubButton,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[uiSidebarMenuSubButton], button[uiSidebarMenuSubButton], ui-sidebar-menu-sub-button",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "sidebar-menu-sub-button",
+				"data-sidebar": "menu-sub-button",
+				"[attr.data-size]": "size()",
+				"[attr.data-active]": "isActive()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		isActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isActive",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_SIDEBAR = [
+	UiSidebarProvider,
+	UiSidebar,
+	UiSidebarTrigger,
+	UiSidebarRail,
+	UiSidebarInset,
+	UiSidebarHeader,
+	UiSidebarFooter,
+	UiSidebarContent,
+	UiSidebarSeparator,
+	UiSidebarGroup,
+	UiSidebarGroupLabel,
+	UiSidebarGroupAction,
+	UiSidebarGroupContent,
+	UiSidebarMenu,
+	UiSidebarMenuItem,
+	UiSidebarMenuButton,
+	UiSidebarMenuAction,
+	UiSidebarMenuBadge,
+	UiSidebarMenuSub,
+	UiSidebarMenuSubItem,
+	UiSidebarMenuSubButton
+];
+export { UI_SIDEBAR, UiSidebar, UiSidebarContent, UiSidebarFooter, UiSidebarGroup, UiSidebarGroupAction, UiSidebarGroupContent, UiSidebarGroupLabel, UiSidebarHeader, UiSidebarInset, UiSidebarMenu, UiSidebarMenuAction, UiSidebarMenuBadge, UiSidebarMenuButton, UiSidebarMenuItem, UiSidebarMenuSub, UiSidebarMenuSubButton, UiSidebarMenuSubItem, UiSidebarProvider, UiSidebarRail, UiSidebarSeparator, UiSidebarTrigger, sidebarMenuButtonVariants };
+
+//# sourceMappingURL=loomui-ng-ui-sidebar.mjs.map