@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs

@@ -0,0 +1,691 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, computed, effect, inject, input, model, output, signal, untracked } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { NgStyle, NgTemplateOutlet } from "@angular/common";
+import { NavigationEnd, Router, RouterLink } from "@angular/router";
+import { filter } from "rxjs";
+import * as i1 from "@angular/cdk/a11y";
+import { A11yModule } from "@angular/cdk/a11y";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { BadgeComponent } from "@lifecorner/angular-ui-kit/badge";
+import { LogoComponent } from "@lifecorner/angular-ui-kit/logo";
+var SidenavComponent = class SidenavComponent {
+	router = inject(Router);
+	routerUrl = signal(this.router.url, ...ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []);
+	collapsed = model(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	showLogo = input(false, ...ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []);
+	logoSrc = input("", ...ngDevMode ? [{ debugName: "logoSrc" }] : /* istanbul ignore next */ []);
+	logoEmblemSrc = input("", ...ngDevMode ? [{ debugName: "logoEmblemSrc" }] : /* istanbul ignore next */ []);
+	logoDarkSrc = input("", ...ngDevMode ? [{ debugName: "logoDarkSrc" }] : /* istanbul ignore next */ []);
+	logoDarkEmblemSrc = input("", ...ngDevMode ? [{ debugName: "logoDarkEmblemSrc" }] : /* istanbul ignore next */ []);
+	logoAlt = input("", ...ngDevMode ? [{ debugName: "logoAlt" }] : /* istanbul ignore next */ []);
+	logoSize = input("md", ...ngDevMode ? [{ debugName: "logoSize" }] : /* istanbul ignore next */ []);
+	isOpen = input(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	mode = input("drawer", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	mobileBreakpoint = input(768, ...ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []);
+	isMobile = signal(false, ...ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []);
+	effectiveMode = computed(() => {
+		if (this.isMobile() && this.mode() === "docked") return "drawer";
+		return this.mode();
+	}, ...ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []);
+	mediaQuery = null;
+	mediaHandler = (e) => this.isMobile.set(e.matches);
+	position = input("left", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	width = input("320px", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Side navigation", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	hasOverlay = input(true, ...ngDevMode ? [{ debugName: "hasOverlay" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	activeRoute = input("", ...ngDevMode ? [{ debugName: "activeRoute" }] : /* istanbul ignore next */ []);
+	theme = input("auto", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	toggleAriaLabel = input("Toggle sidebar", ...ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []);
+	collapseAriaLabel = input("", ...ngDevMode ? [{ debugName: "collapseAriaLabel" }] : /* istanbul ignore next */ []);
+	collapseTitle = input("Collapse sidebar", ...ngDevMode ? [{ debugName: "collapseTitle" }] : /* istanbul ignore next */ []);
+	closeAriaLabel = input("Close navigation", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
+	expandedItems = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []);
+	activeChildParents = computed(() => {
+		const current = this.currentItem();
+		const ids = [];
+		if (!current) return ids;
+		for (const item of this.items()) {
+			const collapsibles = item.isSection ? item.children ?? [] : [item];
+			for (const parent of collapsibles) if (parent.children?.includes(current)) ids.push(parent.id);
+		}
+		return ids;
+	}, ...ngDevMode ? [{ debugName: "activeChildParents" }] : /* istanbul ignore next */ []);
+	sortedItems = computed(() => {
+		return [...this.items()].sort((a, b) => a.displayOrder - b.displayOrder);
+	}, ...ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []);
+	linkItems = computed(() => {
+		const links = [];
+		for (const item of this.sortedItems()) if (item.isSection) for (const child of item.children ?? []) if (child.children?.length) links.push(...child.children);
+		else links.push(child);
+		else if (item.children?.length) links.push(...item.children);
+		else links.push(item);
+		return links;
+	}, ...ngDevMode ? [{ debugName: "linkItems" }] : /* istanbul ignore next */ []);
+	routerPath = computed(() => {
+		return `/${(this.router.parseUrl(this.routerUrl()).root.children["primary"]?.segments ?? []).map((segment) => segment.path).join("/")}`;
+	}, ...ngDevMode ? [{ debugName: "routerPath" }] : /* istanbul ignore next */ []);
+	currentItem = computed(() => {
+		const links = this.linkItems();
+		const active = this.activeRoute();
+		if (active !== "") return links.find((link) => link.route === active) ?? null;
+		const path = this.routerPath();
+		const exact = links.find((link) => link.route === path);
+		if (exact) return exact;
+		let best = null;
+		for (const link of links) {
+			const route = link.route;
+			if (!route || route === "/" || !path.startsWith(`${route}/`)) continue;
+			if (!best || route.length > best.route.length) best = link;
+		}
+		return best;
+	}, ...ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []);
+	closed = output();
+	itemClicked = output();
+	itemAction = output();
+	constructor() {
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => this.routerUrl.set(this.router.url));
+		effect(() => {
+			this.mobileBreakpoint();
+			this.setupMediaQuery();
+		});
+		effect(() => {
+			const parents = this.activeChildParents();
+			if (parents.length === 0) return;
+			const expanded = untracked(this.expandedItems);
+			if (parents.every((id) => expanded.has(id))) return;
+			this.expandedItems.set(/* @__PURE__ */ new Set([...expanded, ...parents]));
+		});
+	}
+	ngOnDestroy() {
+		this.teardownMediaQuery();
+	}
+	setupMediaQuery() {
+		if (typeof window === "undefined") return;
+		this.teardownMediaQuery();
+		this.mediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint()}px)`);
+		this.isMobile.set(this.mediaQuery.matches);
+		this.mediaQuery.addEventListener("change", this.mediaHandler);
+	}
+	teardownMediaQuery() {
+		this.mediaQuery?.removeEventListener("change", this.mediaHandler);
+		this.mediaQuery = null;
+	}
+	sidenavClasses = computed(() => {
+		const classes = ["lc-sidenav"];
+		classes.push(`lc-sidenav--${this.position()}`);
+		classes.push(`lc-sidenav--${this.effectiveMode()}`);
+		if (this.isOpen()) classes.push("lc-sidenav--open");
+		if (this.collapsed() && !this.isMobile()) classes.push("lc-sidenav--collapsed");
+		if (this.theme() !== "auto") classes.push(`lc-sidenav--${this.theme()}`);
+		if (this.variant() === "transparent") classes.push("lc-sidenav--transparent");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "sidenavClasses" }] : /* istanbul ignore next */ []);
+	sidenavStyles = computed(() => ({ width: this.isMobile() ? this.width() : this.collapsed() ? "56px" : this.width() }), ...ngDevMode ? [{ debugName: "sidenavStyles" }] : /* istanbul ignore next */ []);
+	toggleCollapsed() {
+		this.collapsed.set(!this.collapsed());
+	}
+	handleClose() {
+		this.closed.emit();
+	}
+	handleItemClick(item) {
+		this.itemClicked.emit(item);
+		if (this.isMobile()) this.handleClose();
+	}
+	handleItemAction(event, item) {
+		event.stopPropagation();
+		this.itemAction.emit(item);
+	}
+	isItemActive(item) {
+		return this.currentItem() === item;
+	}
+	hasActiveChild(item) {
+		const current = this.currentItem();
+		return !!current && !!item.children?.includes(current);
+	}
+	toggleExpanded(item) {
+		if (this.collapsed()) {
+			this.collapsed.set(false);
+			const expanded = new Set(this.expandedItems());
+			expanded.add(item.id);
+			this.expandedItems.set(expanded);
+			return;
+		}
+		const expanded = new Set(this.expandedItems());
+		if (expanded.has(item.id)) expanded.delete(item.id);
+		else expanded.add(item.id);
+		this.expandedItems.set(expanded);
+	}
+	isExpanded(item) {
+		return this.expandedItems().has(item.id);
+	}
+	handleKeydown(event) {
+		if (event.key === "Escape" && this.isOpen() && this.effectiveMode() === "drawer") this.handleClose();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SidenavComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SidenavComponent,
+		isStandalone: true,
+		selector: "lc-sidenav",
+		inputs: {
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLogo: {
+				classPropertyName: "showLogo",
+				publicName: "showLogo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoSrc: {
+				classPropertyName: "logoSrc",
+				publicName: "logoSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoEmblemSrc: {
+				classPropertyName: "logoEmblemSrc",
+				publicName: "logoEmblemSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoDarkSrc: {
+				classPropertyName: "logoDarkSrc",
+				publicName: "logoDarkSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoDarkEmblemSrc: {
+				classPropertyName: "logoDarkEmblemSrc",
+				publicName: "logoDarkEmblemSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoAlt: {
+				classPropertyName: "logoAlt",
+				publicName: "logoAlt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoSize: {
+				classPropertyName: "logoSize",
+				publicName: "logoSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mobileBreakpoint: {
+				classPropertyName: "mobileBreakpoint",
+				publicName: "mobileBreakpoint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hasOverlay: {
+				classPropertyName: "hasOverlay",
+				publicName: "hasOverlay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeRoute: {
+				classPropertyName: "activeRoute",
+				publicName: "activeRoute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			theme: {
+				classPropertyName: "theme",
+				publicName: "theme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleAriaLabel: {
+				classPropertyName: "toggleAriaLabel",
+				publicName: "toggleAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseAriaLabel: {
+				classPropertyName: "collapseAriaLabel",
+				publicName: "collapseAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseTitle: {
+				classPropertyName: "collapseTitle",
+				publicName: "collapseTitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeAriaLabel: {
+				classPropertyName: "closeAriaLabel",
+				publicName: "closeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			collapsed: "collapsedChange",
+			closed: "closed",
+			itemClicked: "itemClicked",
+			itemAction: "itemAction"
+		},
+		host: {
+			listeners: { "document:keydown": "handleKeydown($event)" },
+			properties: {
+				"class.lc-sidenav-container": "true",
+				"class.lc-sidenav-container--docked": "effectiveMode() === 'docked'",
+				"class.lc-sidenav-container--open": "isOpen()"
+			}
+		},
+		ngImport: i0,
+		template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n",
+		styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}:host{--lc-sidenav-bg: var(--color-sidebar, var(--color-surface));--lc-sidenav-fg: var(--color-text-secondary);--lc-sidenav-fg-active: var(--color-text-primary);--lc-sidenav-border: var(--color-border);--lc-sidenav-hover-bg: var(--color-surface-hover);--lc-sidenav-section-fg: var(--color-text-tertiary);--lc-sidenav-active-bg: var(--color-surface-selected);--lc-sidenav-active-fg: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-active-icon: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-badge-ring: var(--lc-sidenav-bg);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring);box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring);pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--border-radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg);font-weight:600;box-shadow:inset 2px 0 0 var(--color-primary-500)}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--light{--lc-sidenav-bg: #ffffff;--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: #e5e7eb;--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;--lc-sidenav-active-bg: #f0f8fa;--lc-sidenav-active-fg: #144f5b;--lc-sidenav-active-icon: #1a6a79}.lc-sidenav--dark{--lc-sidenav-bg: #070e15;--lc-sidenav-fg: #c4d2d9;--lc-sidenav-fg-active: #f1f6f8;--lc-sidenav-border: rgba(255, 255, 255, .08);--lc-sidenav-hover-bg: rgba(132, 199, 212, .06);--lc-sidenav-section-fg: #93a4ad;--lc-sidenav-active-bg: rgba(32, 132, 151, .12);--lc-sidenav-active-fg: #84c7d4;--lc-sidenav-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: A11yModule
+			},
+			{
+				kind: "directive",
+				type: i1.CdkTrapFocus,
+				selector: "[cdkTrapFocus]",
+				inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"],
+				exportAs: ["cdkTrapFocus"]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			},
+			{
+				kind: "component",
+				type: BadgeComponent,
+				selector: "lc-badge",
+				inputs: [
+					"variant",
+					"size",
+					"rounded",
+					"dot"
+				]
+			},
+			{
+				kind: "component",
+				type: LogoComponent,
+				selector: "lc-logo",
+				inputs: [
+					"variant",
+					"size",
+					"alt",
+					"clickable",
+					"colorMode",
+					"src",
+					"emblemSrc",
+					"darkSrc",
+					"darkEmblemSrc"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SidenavComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-sidenav",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				NgStyle,
+				RouterLink,
+				A11yModule,
+				IconComponent,
+				BadgeComponent,
+				LogoComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class.lc-sidenav-container]": "true",
+				"[class.lc-sidenav-container--docked]": "effectiveMode() === 'docked'",
+				"[class.lc-sidenav-container--open]": "isOpen()"
+			},
+			template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n",
+			styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}:host{--lc-sidenav-bg: var(--color-sidebar, var(--color-surface));--lc-sidenav-fg: var(--color-text-secondary);--lc-sidenav-fg-active: var(--color-text-primary);--lc-sidenav-border: var(--color-border);--lc-sidenav-hover-bg: var(--color-surface-hover);--lc-sidenav-section-fg: var(--color-text-tertiary);--lc-sidenav-active-bg: var(--color-surface-selected);--lc-sidenav-active-fg: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-active-icon: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-badge-ring: var(--lc-sidenav-bg);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring);box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring);pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--border-radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg);font-weight:600;box-shadow:inset 2px 0 0 var(--color-primary-500)}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--light{--lc-sidenav-bg: #ffffff;--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: #e5e7eb;--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;--lc-sidenav-active-bg: #f0f8fa;--lc-sidenav-active-fg: #144f5b;--lc-sidenav-active-icon: #1a6a79}.lc-sidenav--dark{--lc-sidenav-bg: #070e15;--lc-sidenav-fg: #c4d2d9;--lc-sidenav-fg-active: #f1f6f8;--lc-sidenav-border: rgba(255, 255, 255, .08);--lc-sidenav-hover-bg: rgba(132, 199, 212, .06);--lc-sidenav-section-fg: #93a4ad;--lc-sidenav-active-bg: rgba(32, 132, 151, .12);--lc-sidenav-active-fg: #84c7d4;--lc-sidenav-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}],
+		showLogo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLogo",
+				required: false
+			}]
+		}],
+		logoSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoSrc",
+				required: false
+			}]
+		}],
+		logoEmblemSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoEmblemSrc",
+				required: false
+			}]
+		}],
+		logoDarkSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoDarkSrc",
+				required: false
+			}]
+		}],
+		logoDarkEmblemSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoDarkEmblemSrc",
+				required: false
+			}]
+		}],
+		logoAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoAlt",
+				required: false
+			}]
+		}],
+		logoSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoSize",
+				required: false
+			}]
+		}],
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		mobileBreakpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mobileBreakpoint",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		hasOverlay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasOverlay",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		activeRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeRoute",
+				required: false
+			}]
+		}],
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		toggleAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleAriaLabel",
+				required: false
+			}]
+		}],
+		collapseAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseAriaLabel",
+				required: false
+			}]
+		}],
+		collapseTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseTitle",
+				required: false
+			}]
+		}],
+		closeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeAriaLabel",
+				required: false
+			}]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		itemClicked: [{
+			type: i0.Output,
+			args: ["itemClicked"]
+		}],
+		itemAction: [{
+			type: i0.Output,
+			args: ["itemAction"]
+		}],
+		handleKeydown: [{
+			type: HostListener,
+			args: ["document:keydown", ["$event"]]
+		}]
+	}
+});
+export { SidenavComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-sidenav.mjs.map