@ojiepermana/angular 22.1.14 → 22.2.0

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -1,4 +1,3052 @@
-export { c as NavigationAsideFooterDirective, d as NavigationCollapseExpandedDirective, e as NavigationCollapseRootDirective, f as NavigationContainerComponent, g as NavigationContentComponent, h as NavigationDockbarComponent, i as NavigationFlyoutComponent, j as NavigationFooterActionComponent, k as NavigationFooterComponent, l as NavigationFooterInitialComponent, m as NavigationFooterTitleComponent, o as NavigationHeaderComponent, p as NavigationHeaderInitialComponent, q as NavigationHeaderTitleComponent, r as NavigationNavbarComponent, s as NavigationSidebarComponent, t as deriveNavigationInitials } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs';
-export * from '@ojiepermana/angular/navigation/core';
-export { NAVIGATION_DOCKBAR_FALLBACK_ICON, formatNavigationBadgeCount, normalizeUiNavItems } from '@ojiepermana/angular/navigation/types';
-export { NavigationIconDirective } from '@ojiepermana/angular/navigation/icon';
+import { t as NavigationListComponent } from "./ojiepermana-angular-navigation-navigation-list.component-YUzHI9Pj.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, TemplateRef, ViewContainerRef, afterNextRender, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, isDevMode, model, output, signal } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { NavigationIconDirective, NavigationIconDirective as NavigationIconDirective$1 } from "@ojiepermana/angular/navigation/icon";
+import { NAVIGATION_ADAPTER, NAVIGATION_ROUTE_CONTEXT_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { NAVIGATION_DOCKBAR_FALLBACK_ICON, NAVIGATION_DOCKBAR_FALLBACK_ICON as NAVIGATION_DOCKBAR_FALLBACK_ICON$1, formatNavigationBadgeCount, normalizeUiNavItems, normalizeUiNavItems as normalizeUiNavItems$1 } from "@ojiepermana/angular/navigation/types";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "@ojiepermana/angular/component/icon";
+import { TooltipDirective } from "@ojiepermana/angular/component/tooltip";
+export * from "@ojiepermana/angular/navigation/core";
+function injectNavigationController(inputs) {
+	const nav = inject(NAVIGATION_ADAPTER);
+	const owner = {};
+	const registeredState = signal(null, ...ngDevMode ? [{ debugName: "registeredState" }] : /* istanbul ignore next */ []);
+	const normalizedNavId = computed(() => normalizeId(inputs.navId()), ...ngDevMode ? [{ debugName: "normalizedNavId" }] : /* istanbul ignore next */ []);
+	const collapsedPreference = computed(() => inputs.collapsed() ?? (inputs.compact() ? true : null), ...ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []);
+	const normalizedItems = computed(() => normalizeUiNavItems$1(inputs.data()), ...ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []);
+	const fallbackState = computed(() => ({
+		id: normalizedNavId(),
+		orientation: inputs.orientation(),
+		type: fallbackType(inputs.orientation(), inputs.type()),
+		position: inputs.position() ?? (inputs.orientation() === "horizontal" ? "top" : "left"),
+		collapsed: collapsedPreference() ?? false,
+		dockbarMode: inputs.dockbarMode() ?? "sticky"
+	}), ...ngDevMode ? [{ debugName: "fallbackState" }] : /* istanbul ignore next */ []);
+	const resolvedState = computed(() => nav.currentState(normalizedNavId()) ?? registeredState() ?? fallbackState(), ...ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []);
+	const activeIdSet = computed(() => {
+		const ids = inputs.activeIds();
+		if (!ids) return /* @__PURE__ */ new Set();
+		return ids instanceof Set ? new Set(ids) : new Set(ids);
+	}, ...ngDevMode ? [{ debugName: "activeIdSet" }] : /* istanbul ignore next */ []);
+	effect((onCleanup) => {
+		if (!inputs.enabled()) return;
+		const nextState = nav.register({
+			id: normalizedNavId(),
+			orientation: inputs.orientation(),
+			type: inputs.type(),
+			position: inputs.position(),
+			collapsed: collapsedPreference(),
+			dockbarMode: inputs.dockbarMode()
+		}, owner);
+		registeredState.set(nextState);
+		onCleanup(() => nav.unregister(nextState.id, owner));
+	});
+	return {
+		normalizedNavId,
+		normalizedItems,
+		resolvedState,
+		activeIdSet,
+		toggleCollapsed: () => nav.toggleCollapsed(normalizedNavId())
+	};
+}
+function normalizeId(value) {
+	return value.trim() || "default";
+}
+function fallbackType(orientation, type) {
+	if (orientation === "vertical" && (type === "sidebar" || type === "dockbar")) return type;
+	if (orientation === "horizontal" && (type === "navbar" || type === "flyout")) return type;
+	return orientation === "horizontal" ? "navbar" : "sidebar";
+}
+const NAVIGATION_SHELL = new InjectionToken("NAVIGATION_SHELL");
+const EMPTY_NAVIGATION_BADGE_CONTEXT$1 = Object.freeze({});
+const EMPTY_NAVIGATION_ACTIVE_IDS = /* @__PURE__ */ new Set();
+var NavigationContainerComponent = class NavigationContainerComponent {
+	navId = input("default", {
+		...ngDevMode ? { debugName: "navId" } : /* istanbul ignore next */ {},
+		alias: "id"
+	});
+	dataId = input(null, {
+		...ngDevMode ? { debugName: "dataId" } : /* istanbul ignore next */ {},
+		alias: "data-id"
+	});
+	data = input([], ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Primary navigation", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	collapseTree = input("stairs", {
+		...ngDevMode ? { debugName: "collapseTree" } : /* istanbul ignore next */ {},
+		alias: "collapse-tree"
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
+	groupClass = input("", {
+		...ngDevMode ? { debugName: "groupClass" } : /* istanbul ignore next */ {},
+		alias: "nav-group-class"
+	});
+	activeIds = input(null, ...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
+	activeUrl = input(null, ...ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []);
+	openedIds = model([], ...ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []);
+	itemSelected = output();
+	nav = inject(NAVIGATION_ADAPTER);
+	routeContextAdapter = inject(NAVIGATION_ROUTE_CONTEXT_ADAPTER);
+	activatedRoute = inject(ActivatedRoute, { optional: true });
+	dataOwner = {};
+	hoverPreviewExpanded = signal(false, ...ngDevMode ? [{ debugName: "hoverPreviewExpanded" }] : /* istanbul ignore next */ []);
+	focusPreviewExpanded = signal(false, ...ngDevMode ? [{ debugName: "focusPreviewExpanded" }] : /* istanbul ignore next */ []);
+	typeConfig = signal(null, ...ngDevMode ? [{ debugName: "typeConfig" }] : /* istanbul ignore next */ []);
+	orientationPreference = computed(() => this.typeConfig()?.orientation ?? "vertical", ...ngDevMode ? [{ debugName: "orientationPreference" }] : /* istanbul ignore next */ []);
+	typePreference = computed(() => this.typeConfig()?.type ?? null, ...ngDevMode ? [{ debugName: "typePreference" }] : /* istanbul ignore next */ []);
+	positionPreference = computed(() => this.typeConfig()?.position?.() ?? null, ...ngDevMode ? [{ debugName: "positionPreference" }] : /* istanbul ignore next */ []);
+	collapsedPreference = computed(() => this.typeConfig()?.collapsed?.() ?? null, ...ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []);
+	dockbarModePreference = computed(() => this.typeConfig()?.dockbarMode?.() ?? null, ...ngDevMode ? [{ debugName: "dockbarModePreference" }] : /* istanbul ignore next */ []);
+	dockbarRouteContextPreference = computed(() => this.typeConfig()?.dockbarRouteContext?.() ?? null, ...ngDevMode ? [{ debugName: "dockbarRouteContextPreference" }] : /* istanbul ignore next */ []);
+	dockbarBadgeContext = computed(() => this.typeConfig()?.dockbarBadgeContext?.() ?? EMPTY_NAVIGATION_BADGE_CONTEXT$1, ...ngDevMode ? [{ debugName: "dockbarBadgeContext" }] : /* istanbul ignore next */ []);
+	dockbarRouteHeaderVisible = computed(() => this.typeConfig()?.dockbarRouteHeaderVisible?.() ?? false, ...ngDevMode ? [{ debugName: "dockbarRouteHeaderVisible" }] : /* istanbul ignore next */ []);
+	dockbarAsideFooter = computed(() => this.typeConfig()?.dockbarAsideFooter?.() ?? null, ...ngDevMode ? [{ debugName: "dockbarAsideFooter" }] : /* istanbul ignore next */ []);
+	sidebarCollapse = computed(() => this.typeConfig()?.sidebarCollapse?.() ?? false, ...ngDevMode ? [{ debugName: "sidebarCollapse" }] : /* istanbul ignore next */ []);
+	previewExpanded = computed(() => this.typeConfig()?.previewExpanded?.() ?? false, ...ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []);
+	typeStyle = computed(() => this.typeConfig()?.typeStyle?.() ?? "flat", ...ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []);
+	flyoutLabel = computed(() => this.typeConfig()?.flyoutLabel?.() ?? "Menu", ...ngDevMode ? [{ debugName: "flyoutLabel" }] : /* istanbul ignore next */ []);
+	flyoutIcon = computed(() => this.typeConfig()?.flyoutIcon?.() ?? null, ...ngDevMode ? [{ debugName: "flyoutIcon" }] : /* istanbul ignore next */ []);
+	flyoutIconOnly = computed(() => this.typeConfig()?.flyoutIconOnly?.() ?? false, ...ngDevMode ? [{ debugName: "flyoutIconOnly" }] : /* istanbul ignore next */ []);
+	flyoutIconPosition = computed(() => this.typeConfig()?.flyoutIconPosition?.() ?? "start", ...ngDevMode ? [{ debugName: "flyoutIconPosition" }] : /* istanbul ignore next */ []);
+	flyoutTriggerVariant = computed(() => this.typeConfig()?.flyoutTriggerVariant?.() ?? "button", ...ngDevMode ? [{ debugName: "flyoutTriggerVariant" }] : /* istanbul ignore next */ []);
+	flyoutTriggerFloating = computed(() => this.typeConfig()?.flyoutTriggerFloating?.() ?? false, ...ngDevMode ? [{ debugName: "flyoutTriggerFloating" }] : /* istanbul ignore next */ []);
+	flyoutPanelViewport = computed(() => this.typeConfig()?.flyoutPanelViewport?.() ?? false, ...ngDevMode ? [{ debugName: "flyoutPanelViewport" }] : /* istanbul ignore next */ []);
+	flyoutTriggerClass = computed(() => this.typeConfig()?.flyoutTriggerClass?.() ?? "", ...ngDevMode ? [{ debugName: "flyoutTriggerClass" }] : /* istanbul ignore next */ []);
+	flyoutTriggerButtonClass = computed(() => this.typeConfig()?.flyoutTriggerButtonClass?.() ?? "", ...ngDevMode ? [{ debugName: "flyoutTriggerButtonClass" }] : /* istanbul ignore next */ []);
+	controller = injectNavigationController({
+		navId: this.navId,
+		data: this.data,
+		orientation: this.orientationPreference,
+		type: this.typePreference,
+		position: this.positionPreference,
+		collapsed: this.collapsedPreference,
+		dockbarMode: this.dockbarModePreference,
+		compact: this.compact,
+		activeIds: this.activeIds,
+		enabled: computed(() => this.typeConfig() !== null)
+	});
+	iconTemplate = contentChild(NavigationIconDirective$1, ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
+	normalizedItems = this.controller.normalizedItems;
+	resolvedState = this.controller.resolvedState;
+	activeIdSet = this.controller.activeIdSet;
+	dockbarRouteEnabled = computed(() => {
+		const context = this.dockbarRouteContextPreference();
+		return context !== null && context !== false;
+	}, ...ngDevMode ? [{ debugName: "dockbarRouteEnabled" }] : /* istanbul ignore next */ []);
+	dockbarResolvedRouteContext = computed(() => {
+		const automatic = this.routeContextAdapter.routeContext();
+		const config = this.dockbarRouteConfig();
+		return {
+			url: this.cleanString(config.url) ?? this.activeUrl() ?? automatic.url,
+			icon: config.icon === void 0 ? automatic.icon : this.cleanString(config.icon),
+			badge: config.badge === void 0 ? automatic.badge : this.cleanString(config.badge),
+			label: config.label === void 0 ? automatic.label : this.cleanString(config.label)
+		};
+	}, ...ngDevMode ? [{ debugName: "dockbarResolvedRouteContext" }] : /* istanbul ignore next */ []);
+	dockbarActiveRouteEntry = computed(() => {
+		if (!this.dockbarRouteEnabled()) return null;
+		const activeUrl = this.dockbarResolvedRouteContext().url;
+		return this.normalizedItems().find((entry) => this.routeContextAdapter.isItemRouteActive(entry, activeUrl, this.activatedRoute)) ?? null;
+	}, ...ngDevMode ? [{ debugName: "dockbarActiveRouteEntry" }] : /* istanbul ignore next */ []);
+	dockbarResolvedActiveIds = computed(() => this.dockbarRouteEnabled() ? EMPTY_NAVIGATION_ACTIVE_IDS : this.activeIdSet(), ...ngDevMode ? [{ debugName: "dockbarResolvedActiveIds" }] : /* istanbul ignore next */ []);
+	dockbarActiveRoutePanelGroup = computed(() => {
+		const entry = this.dockbarActiveRouteEntry();
+		return entry && entry.children.length > 0 ? entry : null;
+	}, ...ngDevMode ? [{ debugName: "dockbarActiveRoutePanelGroup" }] : /* istanbul ignore next */ []);
+	dockbarRouteHeader = computed(() => {
+		if (!this.dockbarRouteEnabled()) return null;
+		const activeEntry = this.dockbarActiveRouteEntry();
+		const route = this.dockbarResolvedRouteContext();
+		const fallbackIcon = this.cleanString(this.dockbarRouteConfig().fallbackIcon) ?? NAVIGATION_DOCKBAR_FALLBACK_ICON$1;
+		const icon = activeEntry ? this.cleanString(activeEntry.icon) ?? fallbackIcon : route.icon ?? fallbackIcon;
+		const label = this.cleanString(activeEntry?.title) ?? route.label ?? "Current navigation route";
+		const badgeKey = activeEntry?.badge?.source ?? route.badge;
+		const badge = badgeKey ? this.dockbarBadgeContext()[badgeKey] ?? null : null;
+		const item = activeEntry?.source ?? {
+			title: label,
+			icon
+		};
+		return {
+			activeEntry,
+			panelGroup: this.dockbarActiveRoutePanelGroup(),
+			icon,
+			label,
+			badge,
+			badgeClass: cn("absolute -right-1 -top-1", activeEntry?.badge?.classes),
+			iconContext: {
+				$implicit: icon,
+				icon,
+				item,
+				active: true,
+				orientation: "vertical",
+				level: 0
+			}
+		};
+	}, ...ngDevMode ? [{ debugName: "dockbarRouteHeader" }] : /* istanbul ignore next */ []);
+	dockbarRailItems = computed(() => {
+		const activeEntry = this.dockbarRouteHeaderVisible() ? this.dockbarActiveRouteEntry() : null;
+		if (activeEntry === null) return this.normalizedItems();
+		return this.normalizedItems().filter((entry) => entry.key !== activeEntry.key);
+	}, ...ngDevMode ? [{ debugName: "dockbarRailItems" }] : /* istanbul ignore next */ []);
+	dockbarAsideId = computed(() => `nav-dockbar-${this.safeId(this.resolvedState().id)}`, ...ngDevMode ? [{ debugName: "dockbarAsideId" }] : /* istanbul ignore next */ []);
+	dockbarOpenGroup = computed(() => {
+		const state = this.resolvedState();
+		if (state.type !== "dockbar") return null;
+		if (!this.dockbarRouteEnabled()) return this.nav.resolveDockbarGroup(state.id, this.normalizedItems(), state.dockbarMode, this.activeIdSet(), this.activeUrl());
+		const groups = this.nav.dockbarGroups(this.normalizedItems());
+		const explicitKey = this.nav.currentPanelKey(state.id);
+		const explicitGroup = explicitKey === null ? null : groups.find((group) => group.key === explicitKey) ?? null;
+		if (explicitGroup !== null) return explicitGroup;
+		return state.dockbarMode === "sticky" ? this.dockbarActiveRoutePanelGroup() : null;
+	}, ...ngDevMode ? [{ debugName: "dockbarOpenGroup" }] : /* istanbul ignore next */ []);
+	dockbarActiveRoutePanelExpanded = computed(() => {
+		const panelGroup = this.dockbarActiveRoutePanelGroup();
+		const state = this.resolvedState();
+		if (panelGroup === null || state.type !== "dockbar") return false;
+		return this.dockbarOpenGroup()?.key === panelGroup.key;
+	}, ...ngDevMode ? [{ debugName: "dockbarActiveRoutePanelExpanded" }] : /* istanbul ignore next */ []);
+	previewRailExpanded = computed(() => {
+		const state = this.resolvedState();
+		if (state.orientation !== "vertical" || state.type !== "sidebar" || !state.collapsed) return false;
+		return this.previewExpanded() || this.sidebarCollapse() && (this.hoverPreviewExpanded() || this.focusPreviewExpanded());
+	}, ...ngDevMode ? [{ debugName: "previewRailExpanded" }] : /* istanbul ignore next */ []);
+	previewRailOffset = computed(() => this.previewRailExpanded() ? "calc(var(--layout-sidebar-width) - var(--layout-sidebar-collapsed-width))" : "0px", ...ngDevMode ? [{ debugName: "previewRailOffset" }] : /* istanbul ignore next */ []);
+	displayState = computed(() => {
+		const state = this.resolvedState();
+		if (state.type === "dockbar") return {
+			...state,
+			collapsed: true
+		};
+		return this.previewRailExpanded() ? {
+			...state,
+			collapsed: false
+		} : state;
+	}, ...ngDevMode ? [{ debugName: "displayState" }] : /* istanbul ignore next */ []);
+	dockbarAsideOpen = computed(() => {
+		const state = this.resolvedState();
+		if (state.type !== "dockbar" || state.dockbarMode !== "sticky") return false;
+		return this.dockbarOpenGroup() !== null;
+	}, ...ngDevMode ? [{ debugName: "dockbarAsideOpen" }] : /* istanbul ignore next */ []);
+	collapseEnabled = computed(() => {
+		const state = this.resolvedState();
+		return this.sidebarCollapse() && state.orientation === "vertical" && state.type === "sidebar";
+	}, ...ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []);
+	shellClasses = computed(() => cn("flex h-full min-h-0 transition-[width,box-shadow,transform] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none", this.resolvedState().orientation === "horizontal" ? "flex-row items-stretch overflow-visible" : this.resolvedState().type === "dockbar" ? "flex-col overflow-visible" : "flex-col overflow-hidden", this.resolvedState().type === "dockbar" && ["w-(--layout-sidebar-collapsed-width) shrink-0", this.resolvedState().position === "right" && "ml-auto"], this.resolvedState().position === "right" ? "origin-right" : "origin-left", this.previewRailExpanded() && ["absolute inset-y-0 z-20 w-(--layout-sidebar-width) overflow-hidden bg-background shadow-xl", this.resolvedState().position === "right" ? "right-0 border-l border-border" : "left-0 border-r border-border"]), ...ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []);
+	state = this.resolvedState;
+	resolvedDataId = computed(() => this.dataId()?.trim() || this.navId().trim() || "default", ...ngDevMode ? [{ debugName: "resolvedDataId" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn("relative block min-h-0 text-foreground transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none", this.resolvedState().orientation === "horizontal" ? "h-full w-full" : this.resolvedState().type === "dockbar" ? this.dockbarAsideOpen() ? "w-[calc(var(--layout-sidebar-collapsed-width)+var(--layout-aside-width))]" : "w-(--layout-sidebar-collapsed-width)" : this.resolvedState().collapsed ? "w-(--layout-sidebar-collapsed-width)" : "w-(--layout-sidebar-width)", this.resolvedState().orientation === "horizontal" || this.resolvedState().type === "dockbar" || this.previewRailExpanded() ? "overflow-visible" : "overflow-hidden", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const dataId = this.resolvedDataId();
+			this.nav.publishData(dataId, this.data(), this.dataOwner);
+			onCleanup(() => this.nav.clearData(dataId, this.dataOwner));
+		});
+	}
+	registerType(config) {
+		if (this.typeConfig() !== null && isDevMode()) throw new Error("[Navigation] Hanya satu type (<NavigationSidebar>/<NavigationDockbar>/<NavigationNavbar>/<NavigationFlyout>) yang boleh hidup dalam satu <Navigation>.");
+		this.typeConfig.set(config);
+	}
+	unregisterType(config) {
+		if (this.typeConfig() === config) this.typeConfig.set(null);
+	}
+	toggleCollapsed() {
+		this.controller.toggleCollapsed();
+	}
+	toggleDockbarActiveRoutePanel() {
+		const state = this.resolvedState();
+		const panelGroup = this.dockbarActiveRoutePanelGroup();
+		if (state.type === "dockbar" && state.dockbarMode === "drawer" && panelGroup !== null) this.nav.togglePanel(state.id, panelGroup);
+	}
+	closeDockbarPanel() {
+		const state = this.resolvedState();
+		if (state.type === "dockbar" && this.nav.currentPanelKey(state.id) !== null) {
+			this.nav.closePanel(state.id);
+			return true;
+		}
+		return false;
+	}
+	restoreDockbarRoutePanel() {
+		const state = this.resolvedState();
+		if (!this.dockbarRouteEnabled() || state.type !== "dockbar" || state.dockbarMode !== "sticky" || this.nav.currentPanelKey(state.id) === null) return;
+		this.nav.closePanel(state.id);
+	}
+	setHoverPreview(value) {
+		this.hoverPreviewExpanded.set(this.sidebarCollapse() ? value : false);
+	}
+	setFocusPreview(value, event) {
+		if (!this.sidebarCollapse()) {
+			this.focusPreviewExpanded.set(false);
+			return;
+		}
+		if (!value && event) {
+			const next = event.relatedTarget;
+			const host = event.currentTarget;
+			if (next instanceof Node && host instanceof Node && host.contains(next)) return;
+		}
+		this.focusPreviewExpanded.set(value);
+	}
+	dockbarRouteConfig() {
+		const context = this.dockbarRouteContextPreference();
+		return context !== null && typeof context === "object" ? context : {};
+	}
+	cleanString(value) {
+		return typeof value === "string" && value.trim() ? value.trim() : null;
+	}
+	safeId(value) {
+		return value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-") || "default";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationContainerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: NavigationContainerComponent,
+		isStandalone: true,
+		selector: "Navigation",
+		inputs: {
+			navId: {
+				classPropertyName: "navId",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataId: {
+				classPropertyName: "dataId",
+				publicName: "data-id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseTree: {
+				classPropertyName: "collapseTree",
+				publicName: "collapse-tree",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			itemClass: {
+				classPropertyName: "itemClass",
+				publicName: "itemClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groupClass: {
+				classPropertyName: "groupClass",
+				publicName: "nav-group-class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeIds: {
+				classPropertyName: "activeIds",
+				publicName: "activeIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeUrl: {
+				classPropertyName: "activeUrl",
+				publicName: "activeUrl",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openedIds: {
+				classPropertyName: "openedIds",
+				publicName: "openedIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			openedIds: "openedIdsChange",
+			itemSelected: "itemSelected"
+		},
+		host: {
+			attributes: { "role": "navigation" },
+			listeners: {
+				"mouseenter": "setHoverPreview(true)",
+				"mouseleave": "setHoverPreview(false)",
+				"focusin": "setFocusPreview(true)",
+				"focusout": "setFocusPreview(false, $event)"
+			},
+			properties: {
+				"class": "hostClasses()",
+				"attr.aria-label": "ariaLabel() || null",
+				"attr.data-navigation-id": "resolvedState().id",
+				"attr.data-id": "resolvedDataId()",
+				"attr.data-orientation": "resolvedState().orientation",
+				"attr.data-type": "resolvedState().type",
+				"attr.data-type-style": "typeStyle()",
+				"attr.data-position": "resolvedState().position",
+				"attr.data-collapse-tree": "collapseTree()",
+				"attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null"
+			}
+		},
+		providers: [{
+			provide: NAVIGATION_SHELL,
+			useExisting: forwardRef(() => NavigationContainerComponent)
+		}],
+		queries: [{
+			propertyName: "iconTemplate",
+			first: true,
+			predicate: NavigationIconDirective$1,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: ` <ng-content /> `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationContainerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Navigation",
+			providers: [{
+				provide: NAVIGATION_SHELL,
+				useExisting: forwardRef(() => NavigationContainerComponent)
+			}],
+			host: {
+				"[class]": "hostClasses()",
+				role: "navigation",
+				"[attr.aria-label]": "ariaLabel() || null",
+				"[attr.data-navigation-id]": "resolvedState().id",
+				"[attr.data-id]": "resolvedDataId()",
+				"[attr.data-orientation]": "resolvedState().orientation",
+				"[attr.data-type]": "resolvedState().type",
+				"[attr.data-type-style]": "typeStyle()",
+				"[attr.data-position]": "resolvedState().position",
+				"[attr.data-collapse-tree]": "collapseTree()",
+				"[attr.data-preview-expanded]": "previewRailExpanded() ? \"true\" : null",
+				"(mouseenter)": "setHoverPreview(true)",
+				"(mouseleave)": "setHoverPreview(false)",
+				"(focusin)": "setFocusPreview(true)",
+				"(focusout)": "setFocusPreview(false, $event)"
+			},
+			template: ` <ng-content /> `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		navId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		dataId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-id",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		collapseTree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapse-tree",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		itemClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemClass",
+				required: false
+			}]
+		}],
+		groupClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nav-group-class",
+				required: false
+			}]
+		}],
+		activeIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIds",
+				required: false
+			}]
+		}],
+		activeUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeUrl",
+				required: false
+			}]
+		}],
+		openedIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openedIds",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openedIdsChange"]
+		}],
+		itemSelected: [{
+			type: i0.Output,
+			args: ["itemSelected"]
+		}],
+		iconTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => NavigationIconDirective$1), { isSignal: true }]
+		}]
+	}
+});
+var NavigationContentComponent = class NavigationContentComponent {
+	container = inject(NavigationContainerComponent);
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	hostClasses = computed(() => cn("min-h-0 flex-1", this.container.displayState().orientation === "horizontal" ? "flex h-full min-w-0 items-stretch justify-center overflow-visible" : "block overflow-y-auto overflow-x-hidden py-2", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationContentComponent,
+		isStandalone: true,
+		selector: "NavigationContent",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "hostClasses()" } },
+		ngImport: i0,
+		template: `
+    @let navState = container.displayState();
+
+    @if (navState.orientation === 'horizontal' && navState.type === 'flyout') {
+      <!-- Less-common renderers are code-split: a sidebar-only app never bundles them. -->
+      @defer (on immediate) {
+        <NavigationFlyoutMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [label]="container.flyoutLabel()"
+          [icon]="container.flyoutIcon()"
+          [iconOnly]="container.flyoutIconOnly()"
+          [iconPosition]="container.flyoutIconPosition()"
+          [variant]="container.flyoutTriggerVariant()"
+          [floating]="container.flyoutTriggerFloating()"
+          [viewport]="container.flyoutPanelViewport()"
+          [triggerClass]="container.flyoutTriggerClass()"
+          [triggerButtonClass]="container.flyoutTriggerButtonClass()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        >
+          <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+          <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+        </NavigationFlyoutMenu>
+      }
+    } @else if (navState.orientation === 'horizontal') {
+      @defer (on immediate) {
+        <NavigationHorizontal
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else if (navState.type === 'dockbar') {
+      @defer (on immediate) {
+        <NavigationDockbarMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [railItems]="container.dockbarRailItems()"
+          [badgeContext]="container.dockbarBadgeContext()"
+          [mode]="navState.dockbarMode"
+          [position]="navState.position"
+          [asideFooterTemplate]="container.dockbarAsideFooter()"
+          [itemClass]="container.itemClass()"
+          [activeIds]="container.dockbarResolvedActiveIds()"
+          [resolvedGroup]="container.dockbarOpenGroup()"
+          [activeUrl]="
+            container.dockbarRouteEnabled()
+              ? container.dockbarResolvedRouteContext().url
+              : container.activeUrl()
+          "
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else {
+      <!-- The vertical list (sidebar) is the common default — kept eager, no first-paint pop-in. -->
+      <NavigationList
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: NavigationListComponent,
+			selector: "NavigationList",
+			inputs: [
+				"navId",
+				"items",
+				"collapsed",
+				"compact",
+				"position",
+				"itemClass",
+				"activeIds",
+				"activeUrl",
+				"iconTemplate",
+				"collapseTree",
+				"openedIds"
+			],
+			outputs: ["openedIdsChange", "itemSelected"]
+		}],
+		deferBlockDependencies: [
+			() => [import("./ojiepermana-angular-navigation-navigation-flyout-menu.component-BPgH7FJk.mjs").then((m) => m.NavigationFlyoutMenuComponent)],
+			() => [import("./ojiepermana-angular-navigation-navigation-horizontal.component-DMpYcD9t.mjs").then((m) => m.NavigationHorizontalComponent)],
+			() => [import("./ojiepermana-angular-navigation-navigation-dockbar-menu.component-DFEJK2jD.mjs").then((m) => m.NavigationDockbarMenuComponent)]
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadataAsync({
+	minVersion: "18.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationContentComponent,
+	resolveDeferredDeps: () => [
+		import("./ojiepermana-angular-navigation-navigation-flyout-menu.component-BPgH7FJk.mjs").then((m) => m.NavigationFlyoutMenuComponent),
+		import("./ojiepermana-angular-navigation-navigation-horizontal.component-DMpYcD9t.mjs").then((m) => m.NavigationHorizontalComponent),
+		import("./ojiepermana-angular-navigation-navigation-dockbar-menu.component-DFEJK2jD.mjs").then((m) => m.NavigationDockbarMenuComponent)
+	],
+	resolveMetadata: (NavigationFlyoutMenuComponent, NavigationHorizontalComponent, NavigationDockbarMenuComponent) => ({
+		decorators: [{
+			type: Component,
+			args: [{
+				selector: "NavigationContent",
+				imports: [
+					NavigationDockbarMenuComponent,
+					NavigationFlyoutMenuComponent,
+					NavigationHorizontalComponent,
+					NavigationListComponent
+				],
+				host: { "[class]": "hostClasses()" },
+				template: `
+    @let navState = container.displayState();
+
+    @if (navState.orientation === 'horizontal' && navState.type === 'flyout') {
+      <!-- Less-common renderers are code-split: a sidebar-only app never bundles them. -->
+      @defer (on immediate) {
+        <NavigationFlyoutMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [label]="container.flyoutLabel()"
+          [icon]="container.flyoutIcon()"
+          [iconOnly]="container.flyoutIconOnly()"
+          [iconPosition]="container.flyoutIconPosition()"
+          [variant]="container.flyoutTriggerVariant()"
+          [floating]="container.flyoutTriggerFloating()"
+          [viewport]="container.flyoutPanelViewport()"
+          [triggerClass]="container.flyoutTriggerClass()"
+          [triggerButtonClass]="container.flyoutTriggerButtonClass()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        >
+          <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+          <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+        </NavigationFlyoutMenu>
+      }
+    } @else if (navState.orientation === 'horizontal') {
+      @defer (on immediate) {
+        <NavigationHorizontal
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else if (navState.type === 'dockbar') {
+      @defer (on immediate) {
+        <NavigationDockbarMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [railItems]="container.dockbarRailItems()"
+          [badgeContext]="container.dockbarBadgeContext()"
+          [mode]="navState.dockbarMode"
+          [position]="navState.position"
+          [asideFooterTemplate]="container.dockbarAsideFooter()"
+          [itemClass]="container.itemClass()"
+          [activeIds]="container.dockbarResolvedActiveIds()"
+          [resolvedGroup]="container.dockbarOpenGroup()"
+          [activeUrl]="
+            container.dockbarRouteEnabled()
+              ? container.dockbarResolvedRouteContext().url
+              : container.activeUrl()
+          "
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else {
+      <!-- The vertical list (sidebar) is the common default — kept eager, no first-paint pop-in. -->
+      <NavigationList
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
+    }
+  `
+			}]
+		}],
+		ctorParameters: null,
+		propDecorators: { class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}] }
+	})
+});
+var NavigationFooterComponent = class NavigationFooterComponent {
+	shell = inject(NAVIGATION_SHELL, { optional: true });
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	isHorizontal = computed(() => this.shell?.displayState().orientation === "horizontal", ...ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []);
+	displayCollapsed = computed(() => this.shell?.displayState().collapsed ?? false, ...ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []);
+	rowClasses = computed(() => cn("flex h-full min-w-0 w-full items-center", !this.isHorizontal() && this.displayCollapsed() ? "justify-center" : "gap-3"), ...ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.isHorizontal() ? "relative z-10 block h-full w-auto shrink-0" : "sticky bottom-0 z-10 block h-(--layout-topbar-height) shrink-0 border-t border-[hsl(var(--border)/var(--section-border-opacity))]", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationFooterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: NavigationFooterComponent,
+		isStandalone: true,
+		selector: "NavigationFooter",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.data-collapsed": "displayCollapsed()"
+		} },
+		ngImport: i0,
+		template: `
+    <div [class]="rowClasses()">
+      <ng-content />
+    </div>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationFooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationFooter",
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.data-collapsed]": "displayCollapsed()"
+			},
+			template: `
+    <div [class]="rowClasses()">
+      <ng-content />
+    </div>
+  `
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var NavigationHeaderComponent = class NavigationHeaderComponent {
+	shell = inject(NAVIGATION_SHELL);
+	toggle = input(false, ...ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []);
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	collapsed = computed(() => this.shell.state().collapsed, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	displayCollapsed = computed(() => this.shell.displayState().collapsed, ...ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []);
+	isHorizontal = computed(() => this.shell.displayState().orientation === "horizontal", ...ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []);
+	showToggle = computed(() => {
+		if (this.isHorizontal()) return false;
+		return this.toggle() || this.shell.collapseEnabled();
+	}, ...ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []);
+	toggleAriaLabel = computed(() => this.collapsed() ? "Expand navigation" : "Collapse navigation", ...ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []);
+	toggleIconName = computed(() => this.collapsed() ? "left_panel_open" : "left_panel_close", ...ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []);
+	rowClasses = computed(() => cn("flex h-full items-center", !this.isHorizontal() && this.displayCollapsed() ? "justify-center" : "gap-3 px-3"), ...ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []);
+	contentClasses = computed(() => {
+		if (this.isHorizontal()) return "flex min-w-0 items-center gap-3";
+		return this.displayCollapsed() ? "flex min-w-0 items-center justify-center" : "flex min-w-0 flex-1 items-center gap-3";
+	}, ...ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.isHorizontal() ? "relative z-10 block h-full w-auto shrink-0" : "sticky top-0 z-10 block h-(--layout-topbar-height) shrink-0 border-b border-[hsl(var(--border)/var(--section-border-opacity))]", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	toggleCollapsed() {
+		this.shell.toggleCollapsed();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationHeaderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationHeaderComponent,
+		isStandalone: true,
+		selector: "NavigationHeader",
+		inputs: {
+			toggle: {
+				classPropertyName: "toggle",
+				publicName: "toggle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.data-collapsed": "displayCollapsed()"
+		} },
+		ngImport: i0,
+		template: `
+    <div [class]="rowClasses()">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex size-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          [attr.aria-label]="toggleAriaLabel()"
+          [attr.title]="toggleAriaLabel()"
+          data-navigation-header-toggle="true"
+          (click)="toggleCollapsed()"
+        >
+          <Icon
+            data-navigation-header-toggle-icon="true"
+            [name]="toggleIconName()"
+            size="inherit"
+            class="text-(length:--nav-icon-size)"
+          />
+        </button>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "Icon",
+			inputs: [
+				"name",
+				"class",
+				"size",
+				"fill",
+				"weight",
+				"grade",
+				"opticalSize"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationHeader",
+			imports: [IconComponent],
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.data-collapsed]": "displayCollapsed()"
+			},
+			template: `
+    <div [class]="rowClasses()">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex size-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          [attr.aria-label]="toggleAriaLabel()"
+          [attr.title]="toggleAriaLabel()"
+          data-navigation-header-toggle="true"
+          (click)="toggleCollapsed()"
+        >
+          <Icon
+            data-navigation-header-toggle-icon="true"
+            [name]="toggleIconName()"
+            size="inherit"
+            class="text-(length:--nav-icon-size)"
+          />
+        </button>
+      }
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		toggle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggle",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var NavigationSidebarComponent = class NavigationSidebarComponent {
+	container = inject(NavigationContainerComponent);
+	destroyRef = inject(DestroyRef);
+	position = input(null, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	collapsed = input(null, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	collapse = input(false, {
+		...ngDevMode ? { debugName: "collapse" } : /* istanbul ignore next */ {},
+		alias: "nav-sidebar-collapse",
+		transform: booleanAttribute
+	});
+	previewExpanded = input(false, ...ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []);
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	headerSlot = contentChild(NavigationHeaderComponent, ...ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []);
+	contentSlot = contentChild(NavigationContentComponent, ...ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []);
+	footerSlot = contentChild(NavigationFooterComponent, ...ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const config = {
+			orientation: "vertical",
+			type: "sidebar",
+			position: this.position,
+			collapsed: this.collapsed,
+			sidebarCollapse: this.collapse,
+			previewExpanded: this.previewExpanded
+		};
+		this.container.registerType(config);
+		this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationSidebarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationSidebarComponent,
+		isStandalone: true,
+		selector: "NavigationSidebar",
+		inputs: {
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapse: {
+				classPropertyName: "collapse",
+				publicName: "nav-sidebar-collapse",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewExpanded: {
+				classPropertyName: "previewExpanded",
+				publicName: "previewExpanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "hostClasses()" } },
+		queries: [
+			{
+				propertyName: "headerSlot",
+				first: true,
+				predicate: NavigationHeaderComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "contentSlot",
+				first: true,
+				predicate: NavigationContentComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "footerSlot",
+				first: true,
+				predicate: NavigationFooterComponent,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: NavigationContentComponent,
+			selector: "NavigationContent",
+			inputs: ["class"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationSidebarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationSidebar",
+			imports: [NavigationContentComponent],
+			host: { "[class]": "hostClasses()" },
+			template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}],
+		collapse: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nav-sidebar-collapse",
+				required: false
+			}]
+		}],
+		previewExpanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewExpanded",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		headerSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }]
+		}],
+		contentSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }]
+		}],
+		footerSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }]
+		}]
+	}
+});
+var NavigationAsideFooterDirective = class NavigationAsideFooterDirective {
+	templateRef = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationAsideFooterDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: NavigationAsideFooterDirective,
+		isStandalone: true,
+		selector: "ng-template[NavigationAsideFooter]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationAsideFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[NavigationAsideFooter]" }]
+	}]
+});
+const EMPTY_NAVIGATION_BADGE_CONTEXT = Object.freeze({});
+var NavigationDockbarComponent = class NavigationDockbarComponent {
+	container = inject(NavigationContainerComponent);
+	destroyRef = inject(DestroyRef);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	mode = input(null, ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	position = input(null, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	routeContext = input(null, {
+		...ngDevMode ? { debugName: "routeContext" } : /* istanbul ignore next */ {},
+		alias: "dockbar-route-context"
+	});
+	badgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT, {
+		...ngDevMode ? { debugName: "badgeContext" } : /* istanbul ignore next */ {},
+		alias: "dockbar-badge"
+	});
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	headerSlot = contentChild(NavigationHeaderComponent, ...ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []);
+	contentSlot = contentChild(NavigationContentComponent, ...ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []);
+	footerSlot = contentChild(NavigationFooterComponent, ...ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []);
+	asideFooterSlot = contentChild(NavigationAsideFooterDirective, ...ngDevMode ? [{ debugName: "asideFooterSlot" }] : /* istanbul ignore next */ []);
+	routeContextEnabled = computed(() => {
+		const context = this.routeContext();
+		return context !== null && context !== false;
+	}, ...ngDevMode ? [{ debugName: "routeContextEnabled" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const config = {
+			orientation: "vertical",
+			type: "dockbar",
+			position: this.position,
+			dockbarMode: this.mode,
+			dockbarRouteContext: this.routeContext,
+			dockbarBadgeContext: this.badgeContext,
+			dockbarRouteHeaderVisible: computed(() => this.routeContextEnabled() && this.headerSlot() === void 0),
+			dockbarAsideFooter: computed(() => this.asideFooterSlot()?.templateRef ?? null)
+		};
+		this.container.registerType(config);
+		this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+	}
+	onPointerOut(event) {
+		const relatedTarget = event.relatedTarget;
+		const nodeType = this.host.nativeElement.ownerDocument.defaultView?.Node;
+		if (relatedTarget !== null && nodeType !== void 0 && relatedTarget instanceof nodeType && this.host.nativeElement.contains(relatedTarget)) return;
+		this.container.restoreDockbarRoutePanel();
+	}
+	onEscape(event) {
+		const state = this.container.resolvedState();
+		if (event.defaultPrevented || state.type !== "dockbar" || state.dockbarMode !== "drawer") return;
+		if (!this.container.closeDockbarPanel()) return;
+		event.preventDefault();
+		this.host.nativeElement.querySelector("[data-navigation-dockbar-route-trigger=\"true\"]")?.focus();
+	}
+	toggleActiveRoutePanel() {
+		const wasExpanded = this.container.dockbarActiveRoutePanelExpanded();
+		this.container.toggleDockbarActiveRoutePanel();
+		if (!wasExpanded) afterNextRender({ read: () => {
+			this.host.nativeElement.querySelector(`#${this.container.dockbarAsideId()}`)?.querySelector("a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")?.focus();
+		} }, { injector: this.injector });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationDockbarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationDockbarComponent,
+		isStandalone: true,
+		selector: "NavigationDockbar",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			routeContext: {
+				classPropertyName: "routeContext",
+				publicName: "dockbar-route-context",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			badgeContext: {
+				classPropertyName: "badgeContext",
+				publicName: "dockbar-badge",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"keydown.escape": "onEscape($event)",
+				"pointerout": "onPointerOut($event)"
+			},
+			properties: { "class": "hostClasses()" }
+		},
+		queries: [
+			{
+				propertyName: "headerSlot",
+				first: true,
+				predicate: NavigationHeaderComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "contentSlot",
+				first: true,
+				predicate: NavigationContentComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "footerSlot",
+				first: true,
+				predicate: NavigationFooterComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "asideFooterSlot",
+				first: true,
+				predicate: NavigationAsideFooterDirective,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    } @else if (container.dockbarRouteHeader(); as routeHeader) {
+      <NavigationHeader>
+        <ng-template #routeIndicator>
+          <span
+            aria-hidden="true"
+            class="inline-flex items-center justify-center text-(length:--nav-icon-size-rail) text-current"
+          >
+            @if (container.iconTemplate(); as customIcon) {
+              <ng-container
+                [ngTemplateOutlet]="customIcon.template"
+                [ngTemplateOutletContext]="routeHeader.iconContext"
+              />
+            } @else {
+              <Icon [name]="routeHeader.icon" size="inherit" [fill]="1" />
+            }
+          </span>
+
+          @if (routeHeader.badge; as badge) {
+            @defer (on immediate) {
+              <NavigationBadgeCount [badge]="badge" [class]="routeHeader.badgeClass" />
+            }
+          }
+        </ng-template>
+
+        @if (routeHeader.panelGroup && container.resolvedState().dockbarMode === 'drawer') {
+          <button
+            type="button"
+            data-navigation-dockbar-route-header="true"
+            data-navigation-dockbar-route-trigger="true"
+            [attr.data-navigation-item-key]="routeHeader.activeEntry?.key"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center rounded-md bg-accent text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
+            [attr.aria-controls]="container.dockbarAsideId()"
+            [attr.aria-expanded]="container.dockbarActiveRoutePanelExpanded()"
+            (click)="toggleActiveRoutePanel()"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </button>
+        } @else {
+          <span
+            data-navigation-dockbar-route-header="true"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center text-foreground"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </span>
+        }
+      </NavigationHeader>
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "Icon",
+				inputs: [
+					"name",
+					"class",
+					"size",
+					"fill",
+					"weight",
+					"grade",
+					"opticalSize"
+				]
+			},
+			{
+				kind: "component",
+				type: NavigationContentComponent,
+				selector: "NavigationContent",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: NavigationHeaderComponent,
+				selector: "NavigationHeader",
+				inputs: ["toggle", "class"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[Tooltip]",
+				inputs: [
+					"Tooltip",
+					"TooltipPosition",
+					"TooltipDisabled",
+					"TooltipShowDelay",
+					"TooltipHideDelay"
+				],
+				exportAs: ["Tooltip"]
+			}
+		],
+		deferBlockDependencies: [() => [import("./ojiepermana-angular-navigation-navigation-badge-count.component-BKCeWzml.mjs").then((m) => m.NavigationBadgeCountComponent)]]
+	});
+};
+i0.ɵɵngDeclareClassMetadataAsync({
+	minVersion: "18.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationDockbarComponent,
+	resolveDeferredDeps: () => [import("./ojiepermana-angular-navigation-navigation-badge-count.component-BKCeWzml.mjs").then((m) => m.NavigationBadgeCountComponent)],
+	resolveMetadata: (NavigationBadgeCountComponent) => ({
+		decorators: [{
+			type: Component,
+			args: [{
+				selector: "NavigationDockbar",
+				imports: [
+					IconComponent,
+					NavigationBadgeCountComponent,
+					NavigationContentComponent,
+					NavigationHeaderComponent,
+					NgTemplateOutlet,
+					TooltipDirective
+				],
+				host: {
+					"[class]": "hostClasses()",
+					"(keydown.escape)": "onEscape($event)",
+					"(pointerout)": "onPointerOut($event)"
+				},
+				template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    } @else if (container.dockbarRouteHeader(); as routeHeader) {
+      <NavigationHeader>
+        <ng-template #routeIndicator>
+          <span
+            aria-hidden="true"
+            class="inline-flex items-center justify-center text-(length:--nav-icon-size-rail) text-current"
+          >
+            @if (container.iconTemplate(); as customIcon) {
+              <ng-container
+                [ngTemplateOutlet]="customIcon.template"
+                [ngTemplateOutletContext]="routeHeader.iconContext"
+              />
+            } @else {
+              <Icon [name]="routeHeader.icon" size="inherit" [fill]="1" />
+            }
+          </span>
+
+          @if (routeHeader.badge; as badge) {
+            @defer (on immediate) {
+              <NavigationBadgeCount [badge]="badge" [class]="routeHeader.badgeClass" />
+            }
+          }
+        </ng-template>
+
+        @if (routeHeader.panelGroup && container.resolvedState().dockbarMode === 'drawer') {
+          <button
+            type="button"
+            data-navigation-dockbar-route-header="true"
+            data-navigation-dockbar-route-trigger="true"
+            [attr.data-navigation-item-key]="routeHeader.activeEntry?.key"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center rounded-md bg-accent text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
+            [attr.aria-controls]="container.dockbarAsideId()"
+            [attr.aria-expanded]="container.dockbarActiveRoutePanelExpanded()"
+            (click)="toggleActiveRoutePanel()"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </button>
+        } @else {
+          <span
+            data-navigation-dockbar-route-header="true"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center text-foreground"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </span>
+        }
+      </NavigationHeader>
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `
+			}]
+		}],
+		ctorParameters: () => [],
+		propDecorators: {
+			mode: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "mode",
+					required: false
+				}]
+			}],
+			position: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "position",
+					required: false
+				}]
+			}],
+			routeContext: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "dockbar-route-context",
+					required: false
+				}]
+			}],
+			badgeContext: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "dockbar-badge",
+					required: false
+				}]
+			}],
+			class: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "class",
+					required: false
+				}]
+			}],
+			headerSlot: [{
+				type: i0.ContentChild,
+				args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }]
+			}],
+			contentSlot: [{
+				type: i0.ContentChild,
+				args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }]
+			}],
+			footerSlot: [{
+				type: i0.ContentChild,
+				args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }]
+			}],
+			asideFooterSlot: [{
+				type: i0.ContentChild,
+				args: [i0.forwardRef(() => NavigationAsideFooterDirective), { isSignal: true }]
+			}]
+		}
+	})
+});
+var NavigationNavbarComponent = class NavigationNavbarComponent {
+	container = inject(NavigationContainerComponent);
+	destroyRef = inject(DestroyRef);
+	position = input(null, {
+		...ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {},
+		alias: "nav-position"
+	});
+	typeStyle = input("flat", {
+		...ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {},
+		alias: "nav-type-style"
+	});
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	headerSlot = contentChild(NavigationHeaderComponent, ...ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []);
+	contentSlot = contentChild(NavigationContentComponent, ...ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []);
+	footerSlot = contentChild(NavigationFooterComponent, ...ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const config = {
+			orientation: "horizontal",
+			type: "navbar",
+			position: this.position,
+			typeStyle: this.typeStyle
+		};
+		this.container.registerType(config);
+		this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationNavbarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationNavbarComponent,
+		isStandalone: true,
+		selector: "NavigationNavbar",
+		inputs: {
+			position: {
+				classPropertyName: "position",
+				publicName: "nav-position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			typeStyle: {
+				classPropertyName: "typeStyle",
+				publicName: "nav-type-style",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "hostClasses()" } },
+		queries: [
+			{
+				propertyName: "headerSlot",
+				first: true,
+				predicate: NavigationHeaderComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "contentSlot",
+				first: true,
+				predicate: NavigationContentComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "footerSlot",
+				first: true,
+				predicate: NavigationFooterComponent,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: NavigationContentComponent,
+			selector: "NavigationContent",
+			inputs: ["class"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationNavbarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationNavbar",
+			imports: [NavigationContentComponent],
+			host: { "[class]": "hostClasses()" },
+			template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nav-position",
+				required: false
+			}]
+		}],
+		typeStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nav-type-style",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		headerSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }]
+		}],
+		contentSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }]
+		}],
+		footerSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }]
+		}]
+	}
+});
+var NavigationFlyoutComponent = class NavigationFlyoutComponent {
+	container = inject(NavigationContainerComponent);
+	destroyRef = inject(DestroyRef);
+	label = input("Menu", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconOnly = input(false, {
+		...ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {},
+		alias: "icon-only",
+		transform: booleanAttribute
+	});
+	iconPosition = input("start", {
+		...ngDevMode ? { debugName: "iconPosition" } : /* istanbul ignore next */ {},
+		alias: "icon-position"
+	});
+	triggerVariant = input("button", {
+		...ngDevMode ? { debugName: "triggerVariant" } : /* istanbul ignore next */ {},
+		alias: "trigger-variant"
+	});
+	triggerFloating = input(false, {
+		...ngDevMode ? { debugName: "triggerFloating" } : /* istanbul ignore next */ {},
+		alias: "trigger-floating",
+		transform: booleanAttribute
+	});
+	panelViewport = input(false, {
+		...ngDevMode ? { debugName: "panelViewport" } : /* istanbul ignore next */ {},
+		alias: "panel-viewport",
+		transform: booleanAttribute
+	});
+	triggerClass = input("", {
+		...ngDevMode ? { debugName: "triggerClass" } : /* istanbul ignore next */ {},
+		alias: "trigger-class"
+	});
+	triggerButtonClass = input("", {
+		...ngDevMode ? { debugName: "triggerButtonClass" } : /* istanbul ignore next */ {},
+		alias: "trigger-button-class"
+	});
+	position = input(null, {
+		...ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {},
+		alias: "nav-position"
+	});
+	typeStyle = input("flat", {
+		...ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {},
+		alias: "nav-type-style"
+	});
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const config = {
+			orientation: "horizontal",
+			type: "flyout",
+			position: this.position,
+			flyoutLabel: this.label,
+			flyoutIcon: this.icon,
+			flyoutIconOnly: this.iconOnly,
+			flyoutIconPosition: this.iconPosition,
+			flyoutTriggerVariant: this.triggerVariant,
+			flyoutTriggerFloating: this.triggerFloating,
+			flyoutPanelViewport: this.panelViewport,
+			flyoutTriggerClass: this.triggerClass,
+			flyoutTriggerButtonClass: this.triggerButtonClass,
+			typeStyle: this.typeStyle
+		};
+		this.container.registerType(config);
+		this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationFlyoutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: NavigationFlyoutComponent,
+		isStandalone: true,
+		selector: "NavigationFlyout",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconOnly: {
+				classPropertyName: "iconOnly",
+				publicName: "icon-only",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconPosition: {
+				classPropertyName: "iconPosition",
+				publicName: "icon-position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerVariant: {
+				classPropertyName: "triggerVariant",
+				publicName: "trigger-variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerFloating: {
+				classPropertyName: "triggerFloating",
+				publicName: "trigger-floating",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelViewport: {
+				classPropertyName: "panelViewport",
+				publicName: "panel-viewport",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerClass: {
+				classPropertyName: "triggerClass",
+				publicName: "trigger-class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerButtonClass: {
+				classPropertyName: "triggerButtonClass",
+				publicName: "trigger-button-class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "nav-position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			typeStyle: {
+				classPropertyName: "typeStyle",
+				publicName: "nav-type-style",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "hostClasses()" } },
+		ngImport: i0,
+		template: `
+    <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
+         NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
+         bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
+         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
+    <NavigationContent>
+      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+    </NavigationContent>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: NavigationContentComponent,
+			selector: "NavigationContent",
+			inputs: ["class"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationFlyoutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationFlyout",
+			imports: [NavigationContentComponent],
+			host: { "[class]": "hostClasses()" },
+			template: `
+    <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
+         NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
+         bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
+         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
+    <NavigationContent>
+      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+    </NavigationContent>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon-only",
+				required: false
+			}]
+		}],
+		iconPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon-position",
+				required: false
+			}]
+		}],
+		triggerVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger-variant",
+				required: false
+			}]
+		}],
+		triggerFloating: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger-floating",
+				required: false
+			}]
+		}],
+		panelViewport: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panel-viewport",
+				required: false
+			}]
+		}],
+		triggerClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger-class",
+				required: false
+			}]
+		}],
+		triggerButtonClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger-button-class",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nav-position",
+				required: false
+			}]
+		}],
+		typeStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nav-type-style",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+function isCompactDisplay(shell) {
+	const state = shell.displayState();
+	if (state.orientation !== "vertical") return false;
+	if (state.type === "dockbar") return true;
+	return shell.collapseEnabled() && state.collapsed;
+}
+var NavigationCollapseRootDirective = class NavigationCollapseRootDirective {
+	shell = inject(NAVIGATION_SHELL);
+	collapseEnabled = computed(() => {
+		const state = this.shell.displayState();
+		return state.orientation === "vertical" && (this.shell.collapseEnabled() || state.type === "dockbar");
+	}, ...ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []);
+	displayCollapsed = computed(() => isCompactDisplay(this.shell), ...ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationCollapseRootDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: NavigationCollapseRootDirective,
+		isStandalone: true,
+		selector: "[NavigationCollapseRoot]",
+		host: { properties: {
+			"class.w-full": "collapseEnabled()",
+			"class.justify-center": "displayCollapsed()"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationCollapseRootDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[NavigationCollapseRoot]",
+			host: {
+				"[class.w-full]": "collapseEnabled()",
+				"[class.justify-center]": "displayCollapsed()"
+			}
+		}]
+	}]
+});
+var NavigationCollapseExpandedDirective = class NavigationCollapseExpandedDirective {
+	shell = inject(NAVIGATION_SHELL);
+	templateRef = inject(TemplateRef);
+	viewContainer = inject(ViewContainerRef);
+	hasView = false;
+	shouldRender = computed(() => !isCompactDisplay(this.shell), ...ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (this.shouldRender()) {
+				if (!this.hasView) {
+					this.viewContainer.createEmbeddedView(this.templateRef);
+					this.hasView = true;
+				}
+				return;
+			}
+			if (this.hasView) {
+				this.viewContainer.clear();
+				this.hasView = false;
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationCollapseExpandedDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: NavigationCollapseExpandedDirective,
+		isStandalone: true,
+		selector: "[NavigationCollapseExpanded]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationCollapseExpandedDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[NavigationCollapseExpanded]" }]
+	}],
+	ctorParameters: () => []
+});
+var NavigationFooterActionComponent = class NavigationFooterActionComponent {
+	shell = inject(NAVIGATION_SHELL, { optional: true });
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	collapsed = computed(() => {
+		const state = this.shell?.displayState();
+		return state ? state.orientation === "vertical" && state.collapsed : false;
+	}, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.collapsed() ? "hidden" : "ml-auto flex shrink-0 items-center gap-1", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationFooterActionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: NavigationFooterActionComponent,
+		isStandalone: true,
+		selector: "NavigationFooterAction",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "hostClasses()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationFooterActionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationFooterAction",
+			host: { "[class]": "hostClasses()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+function deriveNavigationInitials(name) {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return "";
+	const first = parts[0] ?? "";
+	if (parts.length === 1) return first.slice(0, 2).toUpperCase();
+	const last = parts[parts.length - 1] ?? "";
+	return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+const INITIAL_HOST_CLASSES = "inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary/10 text-primary";
+function setupNavigationInitial(sources) {
+	return {
+		resolvedInitials: computed(() => sources.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(sources.name())),
+		iconClasses: computed(() => sources.compact() ? "text-(length:--nav-icon-size-rail)" : "text-(length:--nav-icon-size)"),
+		hostClasses: computed(() => cn(INITIAL_HOST_CLASSES, sources.class()))
+	};
+}
+var NavigationFooterInitialComponent = class NavigationFooterInitialComponent {
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	initials = input(null, ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	view = setupNavigationInitial({
+		name: () => this.name(),
+		initials: () => this.initials(),
+		compact: () => false,
+		class: () => this.class()
+	});
+	resolvedInitials = this.view.resolvedInitials;
+	hostClasses = this.view.hostClasses;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationFooterInitialComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationFooterInitialComponent,
+		isStandalone: true,
+		selector: "NavigationFooterInitial",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			initials: {
+				classPropertyName: "initials",
+				publicName: "initials",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.role": "name() ? 'img' : null",
+			"attr.aria-label": "name() || null"
+		} },
+		ngImport: i0,
+		template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" size="inherit" [fill]="1" class="text-(length:--nav-icon-size)" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "Icon",
+			inputs: [
+				"name",
+				"class",
+				"size",
+				"fill",
+				"weight",
+				"grade",
+				"opticalSize"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationFooterInitialComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationFooterInitial",
+			imports: [IconComponent],
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.role]": "name() ? 'img' : null",
+				"[attr.aria-label]": "name() || null"
+			},
+			template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" size="inherit" [fill]="1" class="text-(length:--nav-icon-size)" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		initials: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "initials",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var NavigationFooterTitleComponent = class NavigationFooterTitleComponent {
+	shell = inject(NAVIGATION_SHELL, { optional: true });
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	subtitle = input(null, ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	collapsed = computed(() => {
+		const state = this.shell?.displayState();
+		return state ? state.orientation === "vertical" && state.collapsed : false;
+	}, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.collapsed() ? "hidden" : "flex min-w-0 flex-col justify-center", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationFooterTitleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationFooterTitleComponent,
+		isStandalone: true,
+		selector: "NavigationFooterTitle",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			subtitle: {
+				classPropertyName: "subtitle",
+				publicName: "subtitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.data-collapsed": "collapsed()"
+		} },
+		ngImport: i0,
+		template: `
+    <span class="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle -mt-0.5 block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationFooterTitleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationFooterTitle",
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.data-collapsed]": "collapsed()"
+			},
+			template: `
+    <span class="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle -mt-0.5 block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var NavigationHeaderInitialComponent = class NavigationHeaderInitialComponent {
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	initials = input(null, ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	compact = input(false, {
+		...ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	view = setupNavigationInitial({
+		name: () => this.name(),
+		initials: () => this.initials(),
+		compact: () => this.compact(),
+		class: () => this.class()
+	});
+	resolvedInitials = this.view.resolvedInitials;
+	iconClasses = this.view.iconClasses;
+	hostClasses = this.view.hostClasses;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationHeaderInitialComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationHeaderInitialComponent,
+		isStandalone: true,
+		selector: "NavigationHeaderInitial",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			initials: {
+				classPropertyName: "initials",
+				publicName: "initials",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.role": "name() ? 'img' : null",
+			"attr.aria-label": "name() || null"
+		} },
+		ngImport: i0,
+		template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" size="inherit" [fill]="1" [class]="iconClasses()" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "Icon",
+			inputs: [
+				"name",
+				"class",
+				"size",
+				"fill",
+				"weight",
+				"grade",
+				"opticalSize"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationHeaderInitialComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationHeaderInitial",
+			imports: [IconComponent],
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.role]": "name() ? 'img' : null",
+				"[attr.aria-label]": "name() || null"
+			},
+			template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" size="inherit" [fill]="1" [class]="iconClasses()" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		initials: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "initials",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var NavigationHeaderTitleComponent = class NavigationHeaderTitleComponent {
+	shell = inject(NAVIGATION_SHELL, { optional: true });
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	subtitle = input(null, ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	collapsed = computed(() => {
+		const state = this.shell?.displayState();
+		return state ? state.orientation === "vertical" && state.collapsed : false;
+	}, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn(this.collapsed() ? "hidden" : "flex min-w-0 flex-col justify-center", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationHeaderTitleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationHeaderTitleComponent,
+		isStandalone: true,
+		selector: "NavigationHeaderTitle",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			subtitle: {
+				classPropertyName: "subtitle",
+				publicName: "subtitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.data-collapsed": "collapsed()"
+		} },
+		ngImport: i0,
+		template: `
+    <span class="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationHeaderTitleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationHeaderTitle",
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.data-collapsed]": "collapsed()"
+			},
+			template: `
+    <span class="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { NAVIGATION_DOCKBAR_FALLBACK_ICON, NavigationAsideFooterDirective, NavigationCollapseExpandedDirective, NavigationCollapseRootDirective, NavigationContainerComponent, NavigationContentComponent, NavigationDockbarComponent, NavigationFlyoutComponent, NavigationFooterActionComponent, NavigationFooterComponent, NavigationFooterInitialComponent, NavigationFooterTitleComponent, NavigationHeaderComponent, NavigationHeaderInitialComponent, NavigationHeaderTitleComponent, NavigationIconDirective, NavigationNavbarComponent, NavigationSidebarComponent, deriveNavigationInitials, formatNavigationBadgeCount, normalizeUiNavItems };