@filip.mazev/blocks 1.4.16 → 1.4.18

package/fesm2022/filip.mazev-blocks-navigation.mjs

@@ -1,10 +1,18 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, computed, inject, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, TemplateRef, afterNextRender, afterRenderEffect, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
 import { NavigationEnd, Router, RouterLink } from "@angular/router";
-import { filter } from "rxjs";
-import { toSignal } from "@angular/core/rxjs-interop";
-import { BX_I18N, BxA11yService, isTextWithKey } from "@filip.mazev/blocks/core";
+import { Subject, filter } from "rxjs";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import { BX_I18N, BxA11yService, ScrollLockService, WindowDimensionsService, isTextWithKey, resolveText, uuidv4 } from "@filip.mazev/blocks/core";
 import { Icon } from "@filip.mazev/blocks/icons";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i1 from "@angular/cdk/a11y";
+import { A11yModule, FocusMonitor } from "@angular/cdk/a11y";
+import * as i2 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { Button, SearchInput } from "@filip.mazev/blocks/forms";
+import { BxSurfaceDirective } from "@filip.mazev/blocks/effects";
+import { Menu, MenuCascadeService, MenuTriggerDirective, Tag, TooltipDirective, navigateMenuKey } from "@filip.mazev/blocks/primitives";
 const NAVIGATION_CONFIG = new InjectionToken("NAVIGATION_CONFIG");
 const NAVIGATION_ACCESS_ADAPTER = new InjectionToken("NAVIGATION_ACCESS_ADAPTER");
 var NavigationService = class NavigationService {
@@ -22,6 +30,7 @@ var NavigationService = class NavigationService {
 		return this.accessAdapter?.resolveBaseRoute();
 	}, ...ngDevMode ? [{ debugName: "routeBase" }] : /* istanbul ignore next */ []);
 	routes = computed(() => {
+		this.navEnd();
 		this.i18n?.version?.();
 		return this.extractRoutes(this.router.config);
 	}, ...ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []);
@@ -48,7 +57,7 @@ var NavigationService = class NavigationService {
 		const sections = [...this.config?.sections ?? []].sort((a, b) => (a.order ?? Number.POSITIVE_INFINITY) - (b.order ?? Number.POSITIVE_INFINITY));
 		const groups = new Map(sections.map((section) => [section.id, {
 			id: section.id,
-			title: section.title ?? section.id,
+			title: resolveText(section.title ?? section.id, this.i18n),
 			items: []
 		}]));
 		for (const item of this.flattenRoutes(this.menu())) {
@@ -70,6 +79,17 @@ var NavigationService = class NavigationService {
 		}
 		return [...groups.values()].filter((group) => group.items.length > 0);
 	}, ...ngDevMode ? [{ debugName: "menuGroups" }] : /* istanbul ignore next */ []);
+	menuTreeGroups = computed(() => {
+		this.i18n?.version?.();
+		const sections = [...this.config?.sections ?? []].sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity));
+		const groups = new Map(sections.map((section) => [section.id, {
+			...section,
+			title: resolveText(section.title ?? section.id, this.i18n),
+			items: []
+		}]));
+		this.groupTree(this.menu(), groups);
+		return [...groups.values()].filter((group) => group.items.length > 0);
+	}, ...ngDevMode ? [{ debugName: "menuTreeGroups" }] : /* istanbul ignore next */ []);
 	navigateBack() {
 		const breadcrumbs = this.current().breadcrumbs;
 		if (breadcrumbs.length > 1) {
@@ -77,7 +97,38 @@ var NavigationService = class NavigationService {
 			this.router.navigateByUrl(previousBreadcrumb.route);
 		} else this.router.navigateByUrl(this.routeBase() ?? "/");
 	}
-	extractRoutes(routes, parentSegment = []) {
+	groupTree(items, groups, inheritedSection = "", parent) {
+		for (const item of items) {
+			const section = item.section ?? inheritedSection;
+			let group = groups.get(section);
+			if (!group) {
+				group = {
+					id: section,
+					title: section,
+					items: []
+				};
+				groups.set(section, group);
+			}
+			if (!item.visible || item.data?.hidden) continue;
+			if (item.data?.menu === false) {
+				this.groupTree(item.children ?? [], groups, section, section === inheritedSection ? parent : void 0);
+				continue;
+			}
+			const entry = {
+				...item,
+				section,
+				children: []
+			};
+			(parent && section === inheritedSection ? parent.children ??= [] : group.items).push(entry);
+			this.groupTree(item.children ?? [], groups, section, entry);
+		}
+	}
+	includeBreadcrumb(item) {
+		if (item.data?.hidden && !this.config?.includeHiddenInBreadcrumbs) return false;
+		const section = this.config?.sections?.find((candidate) => candidate.id === item.section);
+		return item.showInBreadcrumbs ?? item.data?.showInBreadcrumbs ?? section?.showInBreadcrumbs ?? true;
+	}
+	extractRoutes(routes, parentSegment = [], parentSection) {
 		const items = [];
 		for (const route of routes) {
 			if (route.redirectTo) continue;
@@ -85,8 +136,8 @@ var NavigationService = class NavigationService {
 			const ownPath = route.path ?? "";
 			const fullSegments = ownPath ? [...parentSegment, ownPath] : [...parentSegment];
 			const fullRoute = "/" + fullSegments.filter(Boolean).join("/");
-			const children = route.children?.length ? this.extractRoutes(route.children, fullSegments) : [];
 			const nav = route.data?.["nav"];
+			const children = route.children?.length ? this.extractRoutes(route.children, fullSegments, nav?.section ?? parentSection) : [];
 			if (!nav) {
 				items.push(...children);
 				continue;
@@ -96,7 +147,8 @@ var NavigationService = class NavigationService {
 				route: fullRoute,
 				label: this.resolveNavText(nav.label, { snapshot: void 0 }) ?? "",
 				icon: nav.icon,
-				section: nav.section,
+				showInBreadcrumbs: nav.showInBreadcrumbs,
+				section: nav.section ?? parentSection,
 				visible: nav.visible ? nav.visible() : true,
 				data: nav,
 				children
@@ -124,7 +176,7 @@ var NavigationService = class NavigationService {
 		for (const segment of urlSegments) {
 			currentUrl += "/" + segment;
 			const matchingItem = this.matchRouteToUrl(allItems, currentUrl);
-			if (matchingItem && matchingItem.data && !matchingItem.data.hidden) {
+			if (matchingItem?.data && this.includeBreadcrumb(matchingItem)) {
 				const ctx = { snapshot: finalSnapshot };
 				const label = this.resolveNavText(matchingItem.data.breadcrumb, ctx) ?? this.resolveNavText(matchingItem.data.label, ctx);
 				if (label && breadcrumbs[breadcrumbs.length - 1]?.label !== label) breadcrumbs.push({
@@ -141,6 +193,7 @@ var NavigationService = class NavigationService {
 			route: fullUrl,
 			label: this.resolveNavText(leafNav.label, { snapshot: finalSnapshot }) ?? "",
 			icon: leafNav.icon,
+			showInBreadcrumbs: leafNav.showInBreadcrumbs,
 			section: leafNav.section,
 			visible: leafNav.visible ? leafNav.visible() : true,
 			data: leafNav
@@ -152,6 +205,7 @@ var NavigationService = class NavigationService {
 	}
 	buildMenu(items) {
 		return items.map((item) => {
+			if (!item.visible || item.data?.hidden) return null;
 			const children = this.buildMenu(item.children ?? []);
 			if (!(item.visible && item.data?.menu !== false) && !children.length) return null;
 			return {
@@ -188,7 +242,7 @@ var NavigationService = class NavigationService {
 	resolveNavText(textDef, ctx) {
 		if (!textDef) return void 0;
 		const text = typeof textDef === "function" ? textDef(ctx) : textDef;
-		if (isTextWithKey(text)) return this.i18n?.translate(text.key, { route: ctx.snapshot });
+		if (isTextWithKey(text)) return this.i18n?.translate(text.key, { route: ctx.snapshot }) ?? text.key;
 		return text;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -362,6 +416,1117 @@ function withNav(route, nav) {
 		}
 	};
 }
-export { Breadcrumbs, NAVIGATION_ACCESS_ADAPTER, NAVIGATION_CONFIG, NavigationService, defineNavigation, provideNavigation, withNav };
+const SIDE_NAV_DEFAULTS = {
+	side: "left",
+	position: "fixed",
+	width: "17rem",
+	collapsedWidth: "4.5rem",
+	searchable: true,
+	showItemIcons: true,
+	showSectionIcons: true,
+	collapsible: true,
+	collapsed: false,
+	mobileBreakpoint: "lg",
+	showMobileTrigger: true,
+	ariaLabel: "Main navigation",
+	searchPlaceholder: "Search navigation…",
+	searchLabel: "Search navigation",
+	clearSearchLabel: "Clear search",
+	emptyText: "No matching pages.",
+	openLabel: "Open navigation",
+	closeLabel: "Close navigation",
+	collapseLabel: "Collapse navigation",
+	expandLabel: "Expand navigation",
+	submenuLabel: "Open submenu",
+	resultLabel: "Search result"
+};
+const SIDE_NAV_ACTIVE_OPTIONS = {
+	paths: "subset",
+	queryParams: "ignored",
+	matrixParams: "ignored",
+	fragment: "ignored"
+};
+const SIDE_NAV_CURRENT_OPTIONS = {
+	...SIDE_NAV_ACTIVE_OPTIONS,
+	paths: "exact"
+};
+function normalizeNavText(value) {
+	return value.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase().trim();
+}
+function navMatchScore(label, query) {
+	const text = normalizeNavText(label);
+	const term = normalizeNavText(query);
+	if (!term) return 0;
+	if (text === term) return 1e3;
+	if (text.includes(term)) return Math.max(600, 800 - text.indexOf(term) - (text.length - term.length));
+	let index = 0;
+	let gaps = 0;
+	for (const letter of text) if (letter === term[index]) index++;
+	else if (index) gaps++;
+	if (index === term.length) return Math.max(1, 500 - gaps - text.length);
+	if (term.length < 4) return -1;
+	for (const word of text.split(/\s+/)) {
+		if (Math.abs(word.length - term.length) > 1) continue;
+		const previous = Array.from({ length: term.length + 1 }, (_, i) => i);
+		for (let row = 1; row <= word.length; row++) {
+			let diagonal = previous[0];
+			previous[0] = row;
+			for (let column = 1; column <= term.length; column++) {
+				const saved = previous[column];
+				previous[column] = Math.min(previous[column] + 1, previous[column - 1] + 1, diagonal + (word[row - 1] === term[column - 1] ? 0 : 1));
+				diagonal = saved;
+			}
+		}
+		if (previous[term.length] <= 1) return 250;
+	}
+	return -1;
+}
+function searchNavigation(groups, query) {
+	if (!query.trim()) return {
+		groups,
+		path: []
+	};
+	let bestScore = -1;
+	let bestPath = [];
+	let bestLabel;
+	const filter = (items, path, sectionTitle) => items.flatMap((item) => {
+		const nextPath = [...path, item.id];
+		const children = item.data?.disabled ? [] : filter(item.children ?? [], nextPath, sectionTitle);
+		const keywords = item.data?.keywords?.filter((keyword) => typeof keyword === "string") ?? [];
+		const score = Math.max(navMatchScore(item.label, query), ...keywords.map((term) => navMatchScore(term, query)), navMatchScore(sectionTitle, query) - 100);
+		if (score > bestScore && !item.data?.disabled) {
+			bestScore = score;
+			bestPath = nextPath;
+			bestLabel = item.label;
+		}
+		return score >= 0 || children.length ? [{
+			...item,
+			children: score >= 0 && !children.length ? item.children : children
+		}] : [];
+	});
+	return {
+		groups: groups.map((group) => ({
+			...group,
+			items: filter(group.items, [], group.title)
+		})).filter((group) => group.items.length),
+		path: bestPath,
+		target: bestPath.at(-1),
+		label: bestLabel
+	};
+}
+function findNavigationPath(groups, id) {
+	const visit = (items, path) => {
+		for (const item of items) {
+			const next = [...path, item.id];
+			if (item.id === id) return next;
+			const found = visit(item.children ?? [], next);
+			if (found) return found;
+		}
+	};
+	for (const group of groups) {
+		const result = visit(group.items, []);
+		if (result) return result;
+	}
+	return [];
+}
+var SideNavStateService = class SideNavStateService {
+	router = inject(Router);
+	activeRoute = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd)));
+	i18n = inject(BX_I18N, { optional: true });
+	lastSelected = signal(void 0, ...ngDevMode ? [{ debugName: "lastSelected" }] : /* istanbul ignore next */ []);
+	rememberedPath = signal([], ...ngDevMode ? [{ debugName: "rememberedPath" }] : /* istanbul ignore next */ []);
+	searchSelected = signal(false, ...ngDevMode ? [{ debugName: "searchSelected" }] : /* istanbul ignore next */ []);
+	config = signal({}, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	sourceGroups = signal([], ...ngDevMode ? [{ debugName: "sourceGroups" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	itemTemplate = signal(void 0, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	activated = new Subject();
+	groups = computed(() => {
+		this.i18n?.version?.();
+		const resolveItems = (items) => items.filter((item) => item.visible && !item.data?.hidden).map((item) => ({
+			...item,
+			label: item.data?.label === void 0 ? item.label : this.resolveNav(item.data.label),
+			data: {
+				...item.data,
+				keywords: item.data?.keywords?.map((term) => this.resolveNav(term))
+			},
+			children: resolveItems(item.children ?? [])
+		}));
+		return this.sourceGroups().map((group) => ({
+			...group,
+			items: resolveItems(group.items)
+		}));
+	}, ...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
+	activeItem = computed(() => {
+		this.activeRoute();
+		return this.findActiveItem(this.groups().flatMap((group) => group.items));
+	}, ...ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []);
+	activeIds = computed(() => {
+		const item = this.activeItem();
+		return new Set(item ? findNavigationPath(this.groups(), item.id) : []);
+	}, ...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
+	searchResult = computed(() => searchNavigation(this.groups(), this.query()), ...ngDevMode ? [{ debugName: "searchResult" }] : /* istanbul ignore next */ []);
+	revealPath = computed(() => this.query().trim() ? this.searchSelected() ? [] : this.searchResult().path : this.rememberedPath(), ...ngDevMode ? [{ debugName: "revealPath" }] : /* istanbul ignore next */ []);
+	target = computed(() => this.query().trim() && !this.searchSelected() ? this.searchResult().target : void 0, ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
+	text = computed(() => {
+		this.i18n?.version?.();
+		const config = this.config();
+		return {
+			ariaLabel: resolveText(config.ariaLabel ?? SIDE_NAV_DEFAULTS.ariaLabel, this.i18n),
+			searchPlaceholder: resolveText(config.searchPlaceholder ?? SIDE_NAV_DEFAULTS.searchPlaceholder, this.i18n),
+			searchLabel: resolveText(config.searchLabel ?? SIDE_NAV_DEFAULTS.searchLabel, this.i18n),
+			clearSearchLabel: resolveText(config.clearSearchLabel ?? SIDE_NAV_DEFAULTS.clearSearchLabel, this.i18n),
+			emptyText: resolveText(config.emptyText ?? SIDE_NAV_DEFAULTS.emptyText, this.i18n),
+			openLabel: resolveText(config.openLabel ?? SIDE_NAV_DEFAULTS.openLabel, this.i18n),
+			closeLabel: resolveText(config.closeLabel ?? SIDE_NAV_DEFAULTS.closeLabel, this.i18n),
+			collapseLabel: resolveText(config.collapseLabel ?? SIDE_NAV_DEFAULTS.collapseLabel, this.i18n),
+			expandLabel: resolveText(config.expandLabel ?? SIDE_NAV_DEFAULTS.expandLabel, this.i18n),
+			submenuLabel: resolveText(config.submenuLabel ?? SIDE_NAV_DEFAULTS.submenuLabel, this.i18n),
+			resultLabel: resolveText(config.resultLabel ?? SIDE_NAV_DEFAULTS.resultLabel, this.i18n)
+		};
+	}, ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.activated.complete());
+	}
+	isCurrent(item) {
+		this.activeRoute();
+		return !item.data?.disabled && this.router.isActive(item.route, SIDE_NAV_CURRENT_OPTIONS);
+	}
+	search(query) {
+		const wasSearching = !!this.query().trim();
+		this.searchSelected.set(false);
+		this.query.set(query);
+		if (wasSearching && !query.trim()) {
+			const selected = this.lastSelected();
+			this.rememberedPath.set(selected ? findNavigationPath(this.groups(), selected) : []);
+		} else this.rememberedPath.set([]);
+	}
+	select(item) {
+		if (item.data?.disabled) return;
+		this.lastSelected.set(item.id);
+		this.searchSelected.set(true);
+		this.rememberedPath.set([]);
+		this.activated.next(item);
+	}
+	findActiveItem(items) {
+		let selected;
+		for (const item of items) {
+			const child = this.findActiveItem(item.children ?? []);
+			const own = !item.data?.disabled && this.router.isActive(item.route, SIDE_NAV_ACTIVE_OPTIONS) ? item : void 0;
+			const candidate = child && (!own || this.routeSpecificity(child) >= this.routeSpecificity(own)) ? child : own;
+			if (candidate && (!selected || this.routeSpecificity(candidate) > this.routeSpecificity(selected))) selected = candidate;
+		}
+		return selected;
+	}
+	routeSpecificity(item) {
+		return item.route.split(/[?#]/)[0].length;
+	}
+	resolveNav(text) {
+		return resolveText(typeof text === "function" ? text({ snapshot: void 0 }) : text, this.i18n);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: SideNavStateService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: SideNavStateService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SideNavStateService,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => []
+});
+var SideNavBranch = class SideNavBranch {
+	element = inject(ElementRef).nativeElement;
+	a11y = inject(BxA11yService);
+	trigger = viewChild(MenuTriggerDirective, ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	state = inject(SideNavStateService);
+	active = computed(() => this.state.activeItem()?.id === this.item().id, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	ancestor = computed(() => !this.active() && this.state.activeIds().has(this.item().id), ...ngDevMode ? [{ debugName: "ancestor" }] : /* istanbul ignore next */ []);
+	current = computed(() => this.state.isCurrent(this.item()), ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	side = computed(() => this.state.config().side === "right" ? "left" : "right", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	submenuOpen = computed(() => this.trigger()?.isOpen() ?? false, ...ngDevMode ? [{ debugName: "submenuOpen" }] : /* istanbul ignore next */ []);
+	highlighted = computed(() => this.state.target() === this.item().id, ...ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []);
+	animated = computed(() => !this.a11y.isReducedMotion(), ...ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []);
+	item = input.required(...ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	parentTrigger = input(void 0, ...ngDevMode ? [{ debugName: "parentTrigger" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			const item = this.item();
+			const reveal = this.state.revealPath().includes(item.id);
+			const trigger = this.trigger();
+			if (!reveal) return;
+			untracked(() => {
+				this.scrollIntoPanel();
+				if (item.children?.length) trigger?.open();
+			});
+		});
+	}
+	select() {
+		this.state.select(this.item());
+	}
+	hover(event) {
+		if (event.pointerType !== "touch" && !this.item().data?.disabled) this.trigger()?.open();
+	}
+	leave() {
+		this.trigger()?.scheduleClose();
+	}
+	openOnArrow(event) {
+		if (event.key !== (this.side() === "right" ? "ArrowRight" : "ArrowLeft") || !this.item().children?.length) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.trigger()?.open(true);
+	}
+	scrollIntoPanel() {
+		const scroller = this.element.closest(".bx-side-nav-scroll, .bx-nav-flyout");
+		if (!scroller) return;
+		const row = this.element.getBoundingClientRect();
+		const viewport = scroller.getBoundingClientRect();
+		if (row.top < viewport.top) scroller.scrollTop += row.top - viewport.top;
+		else if (row.bottom > viewport.bottom) scroller.scrollTop += row.bottom - viewport.bottom;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: SideNavBranch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: SideNavBranch,
+		isStandalone: true,
+		selector: "bx-side-nav-branch",
+		inputs: {
+			item: {
+				classPropertyName: "item",
+				publicName: "item",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			parentTrigger: {
+				classPropertyName: "parentTrigger",
+				publicName: "parentTrigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { attributes: { "role": "none" } },
+		viewQueries: [{
+			propertyName: "trigger",
+			first: true,
+			predicate: MenuTriggerDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div #row class=\"bx-nav-row\" role=\"none\" [class.is-active]=\"active()\" [class.is-ancestor]=\"ancestor()\" [class.is-open]=\"submenuOpen()\" [class.is-compact]=\"compact()\" [class.is-highlighted]=\"highlighted()\"\n  [class.is-animated]=\"animated()\" [class.is-right]=\"state.config().side === 'right'\" [class.is-disabled]=\"item().data?.disabled\"\n  [attr.data-nav-id]=\"item().id\" (pointerenter)=\"hover($event)\" (pointerleave)=\"leave()\">\n  @if (!(compact() && item().children?.length)) {\n    <a class=\"bx-nav-link\" role=\"menuitem\" [routerLink]=\"item().data?.disabled ? null : item().route\"\n      [attr.aria-current]=\"current() ? 'page' : null\"\n      [attr.aria-disabled]=\"item().data?.disabled || null\" [attr.tabindex]=\"item().data?.disabled ? -1 : 0\"\n      [attr.aria-label]=\"compact() ? item().label : null\" [bxTooltip]=\"compact() ? item().label : ''\"\n      [placement]=\"side()\" (click)=\"select()\" (keydown)=\"openOnArrow($event)\">\n      @if (state.itemTemplate(); as template) {\n        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item(), active: active(), collapsed: compact() }\" />\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"label\" />\n      }\n    </a>\n  }\n  @if (item().children?.length) {\n    <button type=\"button\" role=\"menuitem\" class=\"bx-nav-disclosure\" [class.bx-nav-link]=\"compact()\" [disabled]=\"item().data?.disabled\"\n      [attr.aria-label]=\"state.text().submenuLabel + ': ' + item().label\" [bxMenuTrigger]=\"flyout\" #trigger=\"bxMenuTrigger\"\n      [menuOrigin]=\"row\" [menuParent]=\"parentTrigger()\" [menuSide]=\"side()\" [menuLabel]=\"item().label\" [menuHover]=\"true\" [menuPinned]=\"state.revealPath().includes(item().id)\">\n      @if (compact()) { <ng-container [ngTemplateOutlet]=\"label\" /> }\n      @else { <bx-icon [name]=\"side() === 'right' ? 'chevron-right' : 'chevron-left'\" size=\"16\" /> }\n    </button>\n    <ng-template #flyout>\n      <div class=\"bx-nav-flyout\" [class.is-right]=\"state.config().side === 'right'\">\n        <bx-menu>\n          @if (compact()) {\n            <a role=\"menuitem\" class=\"bx-nav-parent-link\" [class.is-active]=\"active()\" [attr.aria-current]=\"current() ? 'page' : null\" [routerLink]=\"item().route\" (click)=\"select()\">{{ item().label }}</a>\n          }\n          @for (child of item().children; track child.id) {\n            <bx-side-nav-branch [item]=\"child\" [parentTrigger]=\"trigger\" />\n          }\n        </bx-menu>\n      </div>\n    </ng-template>\n  }\n  @if (highlighted()) {\n    <span class=\"bx-nav-target\" aria-hidden=\"true\"><bx-icon [name]=\"side() === 'right' ? 'arrow-left' : 'arrow-right'\" size=\"20\" /></span>\n  }\n</div>\n<ng-template #label>\n  @if (compact() || state.config().showItemIcons !== false) {\n  <bx-icon class=\"bx-nav-icon\" [name]=\"item().icon?.name ?? item().data?.icon?.name ?? 'circle'\" [size]=\"item().icon?.size ?? item().data?.icon?.size ?? '20'\" [color]=\"item().icon?.color ?? item().data?.icon?.color\"\n    [bgColor]=\"item().icon?.bgColor ?? item().data?.icon?.bgColor\" [strokeWidth]=\"item().icon?.strokeWidth ?? item().data?.icon?.strokeWidth\" />\n  }\n  @if (!compact()) {\n    <span class=\"bx-nav-label\">{{ item().label }}</span>\n    @for (tag of item().data?.tags; track $index) { <bx-tag [opaque]=\"true\" [text]=\"tag.text\" [config]=\"tag.config ?? {}\" size=\"small\" [focusable]=\"false\" /> }\n    @if (item().data?.endIcon; as icon) { <bx-icon [name]=\"icon.name\" [size]=\"icon.size ?? '16'\" [color]=\"icon.color\" [bgColor]=\"icon.bgColor\" [strokeWidth]=\"icon.strokeWidth\" /> }\n  }\n</ng-template>\n",
+		styles: [":host{display:block;min-width:0}.bx-nav-row{display:flex;position:relative;align-items:stretch;gap:.25rem;border:1px solid transparent;border-radius:var(--bx-side-nav-item-radius, .5rem);background:var(--bx-side-nav-item-background, transparent);color:var(--bx-text-primary)}.bx-nav-row:not(.is-disabled):is(:hover,:focus-within,.is-open){background:var(--bx-side-nav-item-hover-background, var(--bx-accent-subtle));color:var(--bx-text-accent)}.bx-nav-row.is-active:not(.is-disabled){background:var(--bx-side-nav-item-active-background, var(--bx-accent-subtle));border-color:var(--bx-border-accent);color:var(--bx-text-accent)}.bx-nav-row.is-highlighted:not(.is-disabled){background:var(--bx-side-nav-item-highlight-background, var(--bx-accent-subtle));color:var(--bx-text-accent);outline:2px dashed var(--bx-border-accent);outline-offset:-2px}.bx-nav-row:has(:focus-visible),.bx-nav-row:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}@media(forced-colors:active){.bx-nav-row.is-active{border-color:Highlight}.bx-nav-row.is-highlighted{outline-color:Highlight}}.bx-nav-row.is-ancestor{color:var(--bx-text-accent)}.bx-nav-row.is-disabled{opacity:.5}.bx-nav-link,.bx-nav-disclosure,.bx-nav-parent-link{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;min-height:2.75rem;padding:.5rem .75rem;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;font-size:.875rem;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}.bx-nav-link:focus-visible,.bx-nav-disclosure:focus-visible,.bx-nav-parent-link:focus-visible{outline:none}.bx-nav-link[aria-disabled=true],.bx-nav-link:disabled,.bx-nav-disclosure[aria-disabled=true],.bx-nav-disclosure:disabled,.bx-nav-parent-link[aria-disabled=true],.bx-nav-parent-link:disabled{cursor:default}.bx-nav-link{flex:1;min-width:0}.bx-nav-label{flex:1;min-width:0;overflow-wrap:anywhere}.bx-nav-icon{flex:none}.bx-nav-disclosure{flex:none;padding-inline:.5rem}.bx-nav-parent-link{border:1px solid transparent;border-radius:var(--bx-side-nav-item-radius, .5rem);background:var(--bx-side-nav-item-background, transparent);color:var(--bx-text-primary)}.bx-nav-parent-link:not(.is-disabled):is(:hover,:focus-within,.is-open){background:var(--bx-side-nav-item-hover-background, var(--bx-accent-subtle));color:var(--bx-text-accent)}.bx-nav-parent-link.is-active:not(.is-disabled){background:var(--bx-side-nav-item-active-background, var(--bx-accent-subtle));border-color:var(--bx-border-accent);color:var(--bx-text-accent)}.bx-nav-parent-link.is-highlighted:not(.is-disabled){background:var(--bx-side-nav-item-highlight-background, var(--bx-accent-subtle));color:var(--bx-text-accent);outline:2px dashed var(--bx-border-accent);outline-offset:-2px}.bx-nav-parent-link:has(:focus-visible),.bx-nav-parent-link:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}@media(forced-colors:active){.bx-nav-parent-link.is-active{border-color:Highlight}.bx-nav-parent-link.is-highlighted{outline-color:Highlight}}.bx-nav-parent-link{font-weight:600}.is-compact{justify-content:center}.is-compact .bx-nav-link{flex:1;justify-content:center;min-width:0;padding-inline:0}.is-compact.is-right{justify-content:center}.bx-nav-flyout{--bx-menu-min-width: 0;--bx-menu-item-gap: var(--bx-side-nav-item-gap, .5rem);box-sizing:border-box;width:var(--bx-side-nav-menu-width, 17rem);max-width:calc(100dvw - 1rem);max-height:min(var(--bx-side-nav-menu-max-height, 32rem),100dvh - 1rem);overflow:hidden auto;scrollbar-gutter:stable;overscroll-behavior:contain;border-radius:.75rem;color:var(--bx-text-primary);box-shadow:0 12px 20px -3px #0003,0 4px 6px -2px #0000001a}.bx-nav-target{display:flex;position:absolute;inset-inline-end:.25rem;top:50%;translate:0 -50%;pointer-events:none;color:var(--bx-text-accent);background:var(--bx-accent-subtle);border:1px solid var(--bx-border-accent);border-radius:9999px;padding:.25rem}.is-highlighted .bx-nav-link{padding-inline-end:2.5rem}.is-animated .bx-nav-target{animation:bx-nav-point .9s ease-in-out infinite alternate}@keyframes bx-nav-point{to{transform:translate(-.25rem)}}@media(forced-colors:active){.bx-nav-row.is-highlighted,.bx-nav-target{outline:2px solid Highlight}.bx-nav-row.is-active .bx-nav-link{text-decoration:underline}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: SideNavBranch,
+				selector: "bx-side-nav-branch",
+				inputs: [
+					"item",
+					"compact",
+					"parentTrigger"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "component",
+				type: Icon,
+				selector: "bx-icon",
+				inputs: [
+					"name",
+					"size",
+					"color",
+					"bgColor",
+					"strokeWidth",
+					"decorative",
+					"ariaLabel"
+				]
+			},
+			{
+				kind: "component",
+				type: Menu,
+				selector: "bx-menu"
+			},
+			{
+				kind: "component",
+				type: Tag,
+				selector: "bx-tag",
+				inputs: [
+					"opaque",
+					"text",
+					"config",
+					"color",
+					"variant",
+					"size",
+					"disabled",
+					"leadingIcon",
+					"trailingIcon",
+					"iconSize",
+					"leadingNumber",
+					"trailingNumber",
+					"locale",
+					"tooltip",
+					"tooltipOnTruncate",
+					"tooltipPlacement",
+					"ariaLabel",
+					"focusable"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[bxTooltip]",
+				inputs: [
+					"bxTooltip",
+					"placement",
+					"bxTooltipTouch",
+					"bxTooltipHover"
+				]
+			},
+			{
+				kind: "directive",
+				type: MenuTriggerDirective,
+				selector: "[bxMenuTrigger]",
+				inputs: [
+					"bxMenuTrigger",
+					"menuOrigin",
+					"menuParent",
+					"menuSide",
+					"menuHover",
+					"menuLabel",
+					"menuPinned"
+				],
+				outputs: ["menuOpened", "menuClosed"],
+				exportAs: ["bxMenuTrigger"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SideNavBranch,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bx-side-nav-branch",
+			imports: [
+				NgTemplateOutlet,
+				RouterLink,
+				Icon,
+				Menu,
+				Tag,
+				TooltipDirective,
+				MenuTriggerDirective
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { role: "none" },
+			template: "<div #row class=\"bx-nav-row\" role=\"none\" [class.is-active]=\"active()\" [class.is-ancestor]=\"ancestor()\" [class.is-open]=\"submenuOpen()\" [class.is-compact]=\"compact()\" [class.is-highlighted]=\"highlighted()\"\n  [class.is-animated]=\"animated()\" [class.is-right]=\"state.config().side === 'right'\" [class.is-disabled]=\"item().data?.disabled\"\n  [attr.data-nav-id]=\"item().id\" (pointerenter)=\"hover($event)\" (pointerleave)=\"leave()\">\n  @if (!(compact() && item().children?.length)) {\n    <a class=\"bx-nav-link\" role=\"menuitem\" [routerLink]=\"item().data?.disabled ? null : item().route\"\n      [attr.aria-current]=\"current() ? 'page' : null\"\n      [attr.aria-disabled]=\"item().data?.disabled || null\" [attr.tabindex]=\"item().data?.disabled ? -1 : 0\"\n      [attr.aria-label]=\"compact() ? item().label : null\" [bxTooltip]=\"compact() ? item().label : ''\"\n      [placement]=\"side()\" (click)=\"select()\" (keydown)=\"openOnArrow($event)\">\n      @if (state.itemTemplate(); as template) {\n        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item(), active: active(), collapsed: compact() }\" />\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"label\" />\n      }\n    </a>\n  }\n  @if (item().children?.length) {\n    <button type=\"button\" role=\"menuitem\" class=\"bx-nav-disclosure\" [class.bx-nav-link]=\"compact()\" [disabled]=\"item().data?.disabled\"\n      [attr.aria-label]=\"state.text().submenuLabel + ': ' + item().label\" [bxMenuTrigger]=\"flyout\" #trigger=\"bxMenuTrigger\"\n      [menuOrigin]=\"row\" [menuParent]=\"parentTrigger()\" [menuSide]=\"side()\" [menuLabel]=\"item().label\" [menuHover]=\"true\" [menuPinned]=\"state.revealPath().includes(item().id)\">\n      @if (compact()) { <ng-container [ngTemplateOutlet]=\"label\" /> }\n      @else { <bx-icon [name]=\"side() === 'right' ? 'chevron-right' : 'chevron-left'\" size=\"16\" /> }\n    </button>\n    <ng-template #flyout>\n      <div class=\"bx-nav-flyout\" [class.is-right]=\"state.config().side === 'right'\">\n        <bx-menu>\n          @if (compact()) {\n            <a role=\"menuitem\" class=\"bx-nav-parent-link\" [class.is-active]=\"active()\" [attr.aria-current]=\"current() ? 'page' : null\" [routerLink]=\"item().route\" (click)=\"select()\">{{ item().label }}</a>\n          }\n          @for (child of item().children; track child.id) {\n            <bx-side-nav-branch [item]=\"child\" [parentTrigger]=\"trigger\" />\n          }\n        </bx-menu>\n      </div>\n    </ng-template>\n  }\n  @if (highlighted()) {\n    <span class=\"bx-nav-target\" aria-hidden=\"true\"><bx-icon [name]=\"side() === 'right' ? 'arrow-left' : 'arrow-right'\" size=\"20\" /></span>\n  }\n</div>\n<ng-template #label>\n  @if (compact() || state.config().showItemIcons !== false) {\n  <bx-icon class=\"bx-nav-icon\" [name]=\"item().icon?.name ?? item().data?.icon?.name ?? 'circle'\" [size]=\"item().icon?.size ?? item().data?.icon?.size ?? '20'\" [color]=\"item().icon?.color ?? item().data?.icon?.color\"\n    [bgColor]=\"item().icon?.bgColor ?? item().data?.icon?.bgColor\" [strokeWidth]=\"item().icon?.strokeWidth ?? item().data?.icon?.strokeWidth\" />\n  }\n  @if (!compact()) {\n    <span class=\"bx-nav-label\">{{ item().label }}</span>\n    @for (tag of item().data?.tags; track $index) { <bx-tag [opaque]=\"true\" [text]=\"tag.text\" [config]=\"tag.config ?? {}\" size=\"small\" [focusable]=\"false\" /> }\n    @if (item().data?.endIcon; as icon) { <bx-icon [name]=\"icon.name\" [size]=\"icon.size ?? '16'\" [color]=\"icon.color\" [bgColor]=\"icon.bgColor\" [strokeWidth]=\"icon.strokeWidth\" /> }\n  }\n</ng-template>\n",
+			styles: [":host{display:block;min-width:0}.bx-nav-row{display:flex;position:relative;align-items:stretch;gap:.25rem;border:1px solid transparent;border-radius:var(--bx-side-nav-item-radius, .5rem);background:var(--bx-side-nav-item-background, transparent);color:var(--bx-text-primary)}.bx-nav-row:not(.is-disabled):is(:hover,:focus-within,.is-open){background:var(--bx-side-nav-item-hover-background, var(--bx-accent-subtle));color:var(--bx-text-accent)}.bx-nav-row.is-active:not(.is-disabled){background:var(--bx-side-nav-item-active-background, var(--bx-accent-subtle));border-color:var(--bx-border-accent);color:var(--bx-text-accent)}.bx-nav-row.is-highlighted:not(.is-disabled){background:var(--bx-side-nav-item-highlight-background, var(--bx-accent-subtle));color:var(--bx-text-accent);outline:2px dashed var(--bx-border-accent);outline-offset:-2px}.bx-nav-row:has(:focus-visible),.bx-nav-row:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}@media(forced-colors:active){.bx-nav-row.is-active{border-color:Highlight}.bx-nav-row.is-highlighted{outline-color:Highlight}}.bx-nav-row.is-ancestor{color:var(--bx-text-accent)}.bx-nav-row.is-disabled{opacity:.5}.bx-nav-link,.bx-nav-disclosure,.bx-nav-parent-link{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;min-height:2.75rem;padding:.5rem .75rem;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;font-size:.875rem;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}.bx-nav-link:focus-visible,.bx-nav-disclosure:focus-visible,.bx-nav-parent-link:focus-visible{outline:none}.bx-nav-link[aria-disabled=true],.bx-nav-link:disabled,.bx-nav-disclosure[aria-disabled=true],.bx-nav-disclosure:disabled,.bx-nav-parent-link[aria-disabled=true],.bx-nav-parent-link:disabled{cursor:default}.bx-nav-link{flex:1;min-width:0}.bx-nav-label{flex:1;min-width:0;overflow-wrap:anywhere}.bx-nav-icon{flex:none}.bx-nav-disclosure{flex:none;padding-inline:.5rem}.bx-nav-parent-link{border:1px solid transparent;border-radius:var(--bx-side-nav-item-radius, .5rem);background:var(--bx-side-nav-item-background, transparent);color:var(--bx-text-primary)}.bx-nav-parent-link:not(.is-disabled):is(:hover,:focus-within,.is-open){background:var(--bx-side-nav-item-hover-background, var(--bx-accent-subtle));color:var(--bx-text-accent)}.bx-nav-parent-link.is-active:not(.is-disabled){background:var(--bx-side-nav-item-active-background, var(--bx-accent-subtle));border-color:var(--bx-border-accent);color:var(--bx-text-accent)}.bx-nav-parent-link.is-highlighted:not(.is-disabled){background:var(--bx-side-nav-item-highlight-background, var(--bx-accent-subtle));color:var(--bx-text-accent);outline:2px dashed var(--bx-border-accent);outline-offset:-2px}.bx-nav-parent-link:has(:focus-visible),.bx-nav-parent-link:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}@media(forced-colors:active){.bx-nav-parent-link.is-active{border-color:Highlight}.bx-nav-parent-link.is-highlighted{outline-color:Highlight}}.bx-nav-parent-link{font-weight:600}.is-compact{justify-content:center}.is-compact .bx-nav-link{flex:1;justify-content:center;min-width:0;padding-inline:0}.is-compact.is-right{justify-content:center}.bx-nav-flyout{--bx-menu-min-width: 0;--bx-menu-item-gap: var(--bx-side-nav-item-gap, .5rem);box-sizing:border-box;width:var(--bx-side-nav-menu-width, 17rem);max-width:calc(100dvw - 1rem);max-height:min(var(--bx-side-nav-menu-max-height, 32rem),100dvh - 1rem);overflow:hidden auto;scrollbar-gutter:stable;overscroll-behavior:contain;border-radius:.75rem;color:var(--bx-text-primary);box-shadow:0 12px 20px -3px #0003,0 4px 6px -2px #0000001a}.bx-nav-target{display:flex;position:absolute;inset-inline-end:.25rem;top:50%;translate:0 -50%;pointer-events:none;color:var(--bx-text-accent);background:var(--bx-accent-subtle);border:1px solid var(--bx-border-accent);border-radius:9999px;padding:.25rem}.is-highlighted .bx-nav-link{padding-inline-end:2.5rem}.is-animated .bx-nav-target{animation:bx-nav-point .9s ease-in-out infinite alternate}@keyframes bx-nav-point{to{transform:translate(-.25rem)}}@media(forced-colors:active){.bx-nav-row.is-highlighted,.bx-nav-target{outline:2px solid Highlight}.bx-nav-row.is-active .bx-nav-link{text-decoration:underline}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		trigger: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MenuTriggerDirective), { isSignal: true }]
+		}],
+		item: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "item",
+				required: true
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		parentTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "parentTrigger",
+				required: false
+			}]
+		}]
+	}
+});
+function definedSideNavConfig(config) {
+	return Object.fromEntries(Object.entries(config ?? {}).filter(([, value]) => value !== void 0));
+}
+var SideNav = class SideNav {
+	document = inject(DOCUMENT);
+	router = inject(Router);
+	destroyRef = inject(DestroyRef);
+	dimensions = inject(WindowDimensionsService);
+	navigation = inject(NavigationService);
+	defaults = inject(NAVIGATION_CONFIG, { optional: true });
+	scrollLock = inject(ScrollLockService);
+	cascade = inject(MenuCascadeService);
+	a11y = inject(BxA11yService);
+	injector = inject(Injector);
+	focusMonitor = inject(FocusMonitor);
+	toggleElement = viewChild("mobileToggle", {
+		...ngDevMode ? { debugName: "toggleElement" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	saved = signal({ sections: {} }, ...ngDevMode ? [{ debugName: "saved" }] : /* istanbul ignore next */ []);
+	loadedKey = signal(void 0, ...ngDevMode ? [{ debugName: "loadedKey" }] : /* istanbul ignore next */ []);
+	lockId = uuidv4();
+	presentation = computed(() => `${this.isMobile()}:${this.resolvedConfig().position}:${this.resolvedConfig().side}`, ...ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []);
+	drawerAnimated = signal(false, ...ngDevMode ? [{ debugName: "drawerAnimated" }] : /* istanbul ignore next */ []);
+	state = inject(SideNavStateService);
+	id = `bx-side-nav-${this.lockId}`;
+	headerTemplate = signal(null, ...ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []);
+	footerTemplate = signal(null, ...ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []);
+	reducedMotion = this.a11y.isReducedMotion;
+	visibleGroups = computed(() => this.state.searchResult().groups, ...ngDevMode ? [{ debugName: "visibleGroups" }] : /* istanbul ignore next */ []);
+	slotContext = computed(() => ({
+		$implicit: this.isCollapsed(),
+		collapsed: this.isCollapsed(),
+		mobile: this.isMobile()
+	}), ...ngDevMode ? [{ debugName: "slotContext" }] : /* istanbul ignore next */ []);
+	config = input({}, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	groups = input(void 0, ...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
+	itemTemplate = input(void 0, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	collapsed = input(void 0, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	collapsedChange = output();
+	mobileOpen = model(false, ...ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []);
+	itemSelected = output();
+	layoutChange = output();
+	resolvedConfig = computed(() => ({
+		...SIDE_NAV_DEFAULTS,
+		...definedSideNavConfig(this.defaults?.sideNav),
+		...definedSideNavConfig(this.config())
+	}), ...ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []);
+	isMobile = computed(() => this.resolvedConfig().mobile ?? this.dimensions.dimensions().width <= this.dimensions.breakpoints[this.resolvedConfig().mobileBreakpoint], ...ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []);
+	isCollapsed = computed(() => !this.isMobile() && !this.state.query().trim() && (this.collapsed() ?? this.saved().collapsed ?? this.resolvedConfig().collapsed), ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
+	query = this.state.query.asReadonly();
+	layout = computed(() => ({
+		side: this.resolvedConfig().side,
+		offset: this.isMobile() ? "0px" : this.isCollapsed() ? this.resolvedConfig().collapsedWidth : this.resolvedConfig().width,
+		collapsed: this.isCollapsed(),
+		mobile: this.isMobile(),
+		open: !this.isMobile() || this.mobileOpen()
+	}), ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	restoreFocus;
+	focusReturnOrigin = "program";
+	focusRevision = 0;
+	constructor() {
+		effect(() => {
+			this.state.config.set(this.resolvedConfig());
+			this.state.sourceGroups.set(this.groups() ?? this.navigation.menuTreeGroups());
+			this.state.itemTemplate.set(this.itemTemplate());
+		});
+		effect(() => {
+			const key = this.resolvedConfig().persistenceKey;
+			untracked(() => {
+				this.saved.set(this.readSavedState(key));
+				this.loadedKey.set(key);
+			});
+		});
+		effect(() => {
+			const key = this.resolvedConfig().persistenceKey;
+			const loaded = this.loadedKey();
+			const saved = this.saved();
+			const collapsed = this.collapsed() ?? saved.collapsed ?? this.resolvedConfig().collapsed;
+			if (!key || loaded !== key || !this.document.defaultView) return;
+			try {
+				this.document.defaultView.localStorage.setItem(key, JSON.stringify({
+					collapsed,
+					sections: saved.sections
+				}));
+			} catch {}
+		});
+		effect(() => {
+			if (this.isMobile() && this.mobileOpen() && this.resolvedConfig().position !== "inline") this.scrollLock.disableScroll(this.lockId, { handleTouchInput: false });
+			else this.scrollLock.enableScroll(this.lockId);
+		});
+		effect(() => {
+			this.presentation();
+			untracked(() => {
+				this.drawerAnimated.set(false);
+				this.cascade.closeAll();
+				if (this.mobileOpen()) this.close();
+			});
+		});
+		effect(() => this.layoutChange.emit(this.layout()));
+		this.state.activated.pipe(takeUntilDestroyed()).subscribe((item) => {
+			this.itemSelected.emit(item);
+			this.cascade.closeAll();
+			if (this.isMobile()) this.close();
+		});
+		this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+			if (event instanceof NavigationEnd) {
+				this.cascade.closeAll();
+				if (this.mobileOpen()) this.close();
+			}
+		});
+		this.destroyRef.onDestroy(() => {
+			this.scrollLock.enableScroll(this.lockId);
+		});
+	}
+	setHeaderTemplate(template) {
+		this.headerTemplate.set(template);
+	}
+	setFooterTemplate(template) {
+		this.footerTemplate.set(template);
+	}
+	toggle(origin) {
+		if (this.mobileOpen()) this.close();
+		else this.open(origin);
+	}
+	open(origin) {
+		const view = this.document.defaultView;
+		if (!view || !this.isMobile() || this.mobileOpen()) return;
+		const target = origin && "currentTarget" in origin ? origin.currentTarget : origin;
+		const opener = target instanceof view.HTMLElement ? target : void 0;
+		const active = this.document.activeElement;
+		const previous = active && active !== this.document.body && active !== this.document.documentElement ? active : void 0;
+		this.restoreFocus = opener ?? previous ?? this.toggleElement()?.nativeElement;
+		this.focusReturnOrigin = this.restoreFocus?.matches(":focus-visible") ? "keyboard" : "program";
+		++this.focusRevision;
+		if (this.restoreFocus) this.focusMonitor.focusVia(this.restoreFocus, this.focusReturnOrigin, { preventScroll: true });
+		this.drawerAnimated.set(true);
+		this.mobileOpen.set(true);
+	}
+	close() {
+		if (!this.mobileOpen()) return;
+		this.cascade.closeAll();
+		const target = this.restoreFocus?.isConnected ? this.restoreFocus : this.toggleElement()?.nativeElement;
+		const origin = this.focusReturnOrigin;
+		const revision = ++this.focusRevision;
+		this.restoreFocus = void 0;
+		this.mobileOpen.set(false);
+		afterNextRender(() => {
+			if (!this.destroyRef.destroyed && revision === this.focusRevision && !this.mobileOpen() && target?.isConnected) this.focusMonitor.focusVia(target, origin, { preventScroll: true });
+		}, { injector: this.injector });
+	}
+	toggleCollapsed() {
+		const next = !(this.collapsed() ?? this.saved().collapsed ?? this.resolvedConfig().collapsed);
+		this.saved.update((saved) => ({
+			...saved,
+			collapsed: next
+		}));
+		this.collapsedChange.emit(next);
+	}
+	search(query) {
+		this.cascade.closeAll();
+		this.state.search(query);
+	}
+	closeFromControl(event) {
+		this.focusReturnOrigin = event.detail === 0 ? "keyboard" : "program";
+		this.close();
+	}
+	sectionActive(group) {
+		return group.items.some((item) => this.state.activeIds().has(item.id));
+	}
+	sectionHighlighted(group) {
+		return group.items.some((item) => this.state.revealPath().includes(item.id));
+	}
+	sectionCollapsed(group) {
+		const revealing = this.state.revealPath();
+		if (this.query().trim() || group.items.some((item) => revealing.includes(item.id))) return false;
+		return !this.isCollapsed() && !!group.collapsible && (this.saved().sections[group.id] ?? group.collapsed ?? false);
+	}
+	toggleSection(group) {
+		if (!group.collapsible) return;
+		const collapsed = !this.sectionCollapsed(group);
+		this.saved.update((saved) => ({
+			...saved,
+			sections: {
+				...saved.sections,
+				[group.id]: collapsed
+			}
+		}));
+	}
+	menuKey(event) {
+		const menu = event.target?.closest("[role=\"menu\"]");
+		if (menu) navigateMenuKey(event, menu);
+	}
+	panelKey(event) {
+		if (event.defaultPrevented || event.key !== "Escape" || !this.mobileOpen() || this.cascade.hasOpenMenus()) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.focusReturnOrigin = "keyboard";
+		this.close();
+	}
+	readSavedState(key) {
+		if (!key || !this.document.defaultView) return { sections: {} };
+		try {
+			const value = JSON.parse(this.document.defaultView.localStorage.getItem(key) ?? "null");
+			if (!value || typeof value !== "object") return { sections: {} };
+			const collapsed = "collapsed" in value && typeof value.collapsed === "boolean" ? value.collapsed : void 0;
+			const raw = "sections" in value && value.sections && typeof value.sections === "object" ? value.sections : {};
+			return {
+				collapsed,
+				sections: Object.fromEntries(Object.entries(raw).filter((entry) => typeof entry[1] === "boolean"))
+			};
+		} catch {
+			return { sections: {} };
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: SideNav,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: SideNav,
+		isStandalone: true,
+		selector: "bx-side-nav",
+		inputs: {
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groups: {
+				classPropertyName: "groups",
+				publicName: "groups",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			itemTemplate: {
+				classPropertyName: "itemTemplate",
+				publicName: "itemTemplate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mobileOpen: {
+				classPropertyName: "mobileOpen",
+				publicName: "mobileOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			collapsedChange: "collapsedChange",
+			mobileOpen: "mobileOpenChange",
+			itemSelected: "itemSelected",
+			layoutChange: "layoutChange"
+		},
+		host: { properties: {
+			"class.is-mobile": "isMobile()",
+			"class.is-collapsed": "isCollapsed()",
+			"class.is-right": "resolvedConfig().side === \"right\"",
+			"class.is-inline": "resolvedConfig().position === \"inline\"",
+			"class.is-animated": "!reducedMotion()",
+			"class.is-drawer-animated": "drawerAnimated() && !reducedMotion()",
+			"style.--bx-side-nav-width": "resolvedConfig().width",
+			"style.--bx-side-nav-collapsed-width": "resolvedConfig().collapsedWidth"
+		} },
+		providers: [SideNavStateService],
+		viewQueries: [{
+			propertyName: "toggleElement",
+			first: true,
+			predicate: ["mobileToggle"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		exportAs: ["bxSideNav"],
+		ngImport: i0,
+		template: "@if (isMobile() && resolvedConfig().showMobileTrigger) {\n  <button #mobileToggle bx-button variant=\"tonal\" color=\"grayscale\" class=\"bx-nav-hamburger\" type=\"button\" [class.is-open]=\"mobileOpen()\"\n    [attr.aria-label]=\"state.text().openLabel\" [attr.aria-hidden]=\"mobileOpen() ? true : null\" [attr.inert]=\"mobileOpen() ? '' : null\" [attr.aria-expanded]=\"mobileOpen()\" [attr.aria-controls]=\"id\" (click)=\"toggle($event)\">\n    <bx-icon name=\"menu\" size=\"20\" />\n  </button>\n}\n@if (isMobile() && mobileOpen()) {\n  <button class=\"bx-nav-backdrop\" type=\"button\" tabindex=\"-1\" [attr.aria-label]=\"state.text().closeLabel\" (click)=\"closeFromControl($event)\"></button>\n}\n<aside tabindex=\"-1\" bxSurface [bxSurfaceInteractive]=\"false\" class=\"bx-nav-panel\" [id]=\"id\" [class.is-open]=\"!isMobile() || mobileOpen()\"\n  [attr.role]=\"isMobile() ? 'dialog' : null\" [attr.aria-modal]=\"isMobile() && mobileOpen() ? true : null\" [attr.aria-label]=\"state.text().ariaLabel\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\" [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? true : null\"\n  [cdkTrapFocus]=\"isMobile() && mobileOpen()\" [cdkTrapFocusAutoCapture]=\"isMobile() && mobileOpen()\" (keydown)=\"panelKey($event)\">\n  <div class=\"bx-nav-header\">\n    @if (headerTemplate(); as template) { <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"slotContext()\" /> }\n    @else if (!isCollapsed()) { <strong>{{ state.text().ariaLabel }}</strong> }\n    @if (isMobile()) {\n      <button bx-button variant=\"icon\" color=\"grayscale\" class=\"bx-nav-panel-toggle\" type=\"button\" [attr.aria-label]=\"state.text().closeLabel\" (click)=\"closeFromControl($event)\"><bx-icon name=\"x\" size=\"20\" /></button>\n    } @else if (resolvedConfig().collapsible) {\n      <button bx-button variant=\"icon\" color=\"grayscale\" class=\"bx-nav-panel-toggle\" type=\"button\" [attr.aria-label]=\"isCollapsed() ? state.text().expandLabel : state.text().collapseLabel\"\n        [attr.aria-expanded]=\"!isCollapsed()\" (click)=\"toggleCollapsed()\">\n        <bx-icon [name]=\"(resolvedConfig().side === 'left') !== isCollapsed() ? 'panel-left-close' : 'panel-right-close'\" size=\"20\" />\n      </button>\n    }\n  </div>\n  @if (resolvedConfig().searchable) {\n    @if (isCollapsed()) {\n      <button bx-button variant=\"icon\" color=\"grayscale\" type=\"button\" class=\"bx-nav-search-toggle\" [attr.aria-label]=\"state.text().searchLabel\" (click)=\"toggleCollapsed()\"><bx-icon name=\"search\" size=\"20\" /></button>\n    } @else {\n      <bx-search-input class=\"bx-nav-search\" [placeholder]=\"state.text().searchPlaceholder\" [ariaLabel]=\"state.text().searchLabel\" [clearLabel]=\"state.text().clearSearchLabel\"\n        [ngModel]=\"query()\" (ngModelChange)=\"search($event)\" />\n    }\n  }\n  <div class=\"bx-side-nav-scroll\">\n    <nav [attr.aria-label]=\"state.text().ariaLabel\">\n      @for (group of visibleGroups(); track group.id) {\n        <section class=\"bx-nav-section\" [attr.aria-label]=\"group.title || state.text().ariaLabel\">\n          @if (group.title) {\n            @if (isCollapsed()) {\n              <button type=\"button\" class=\"bx-nav-section-toggle is-compact\" [class.is-active]=\"sectionActive(group)\" [class.is-highlighted]=\"sectionHighlighted(group)\" [class.is-open]=\"sectionTrigger.isOpen()\" [attr.aria-label]=\"group.title\" [bxMenuTrigger]=\"sectionMenu\" #sectionTrigger=\"bxMenuTrigger\"\n                [menuSide]=\"resolvedConfig().side === 'left' ? 'right' : 'left'\" [menuLabel]=\"group.title\">\n                <bx-icon [name]=\"group.icon?.name ?? 'folder'\" size=\"20\" />\n              </button>\n              <ng-template #sectionMenu>\n                <div class=\"bx-nav-section-flyout\">\n                  <bx-menu>\n                    @for (item of group.items; track item.id) { <bx-side-nav-branch [item]=\"item\" [parentTrigger]=\"sectionTrigger\" /> }\n                  </bx-menu>\n                </div>\n              </ng-template>\n            } @else if (group.collapsible) {\n              <button type=\"button\" class=\"bx-nav-section-toggle\" [class.is-active]=\"sectionActive(group)\" [class.is-highlighted]=\"sectionHighlighted(group)\" [attr.aria-expanded]=\"!sectionCollapsed(group)\" [attr.aria-controls]=\"id + '-section-' + $index\" (click)=\"toggleSection(group)\">\n                @if (resolvedConfig().showSectionIcons) { <bx-icon [name]=\"group.icon?.name ?? 'folder'\" size=\"20\" /> }<span>{{ group.title }}</span><bx-icon [name]=\"sectionCollapsed(group) ? 'chevron-right' : 'chevron-down'\" size=\"16\" />\n              </button>\n            } @else {\n              <h2 class=\"bx-nav-section-heading\" [class.is-active]=\"sectionActive(group)\" [class.is-highlighted]=\"sectionHighlighted(group)\">@if (resolvedConfig().showSectionIcons) { <bx-icon [name]=\"group.icon?.name ?? 'folder'\" size=\"20\" /> }<span>{{ group.title }}</span></h2>\n            }\n          }\n          <div class=\"bx-nav-items\" role=\"menu\" [attr.aria-label]=\"group.title || state.text().ariaLabel\" [id]=\"id + '-section-' + $index\" [hidden]=\"sectionCollapsed(group)\" tabindex=\"-1\" (keydown)=\"menuKey($event)\">\n            @for (item of group.items; track item.id) { <bx-side-nav-branch [item]=\"item\" [compact]=\"isCollapsed()\" /> }\n          </div>\n        </section>\n      } @empty { <p class=\"bx-nav-empty\" role=\"status\">{{ state.text().emptyText }}</p> }\n    </nav>\n  </div>\n  @if (footerTemplate(); as template) { <footer class=\"bx-nav-footer\"><ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"slotContext()\" /></footer> }\n  <span class=\"cdk-visually-hidden\" role=\"status\" aria-live=\"polite\">@if (state.target()) { {{ state.text().resultLabel }}: {{ state.searchResult().label }} }</span>\n</aside>\n",
+		styles: [":host{display:block;order:0;flex:0 0 var(--bx-side-nav-width, 17rem);width:var(--bx-side-nav-width, 17rem);color:var(--bx-text-primary);font-family:inherit}.bx-nav-panel{--bx-glass-radius: 0;--bx-glass-min-opacity: .8;position:fixed;inset-block:0;left:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--bx-side-nav-width, 17rem);max-width:100dvw;height:100dvh;min-height:0;overflow:hidden;border-inline-end:1px solid var(--bx-border-default);z-index:300}.bx-nav-header,.bx-nav-footer{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem .75rem;min-width:0;overflow-wrap:anywhere}.bx-nav-header>:first-child{min-width:0}.bx-nav-footer{border-block-start:1px solid var(--bx-border-default)}.bx-nav-panel-toggle,.bx-nav-search-toggle{--bx-glass-radius: 9999px;flex:none;width:2.5rem;height:2.5rem;padding:0}.bx-nav-panel-toggle{margin-inline-start:auto}.bx-nav-search{display:block;flex:none;padding-inline:.75rem}.bx-nav-search-toggle{margin-inline:auto}.bx-side-nav-scroll{flex:1;min-height:0;min-width:0;overflow:hidden auto;scrollbar-gutter:stable;overscroll-behavior:contain;padding:.5rem;scroll-behavior:auto}.bx-nav-items{display:flex;flex-direction:column;gap:var(--bx-side-nav-item-gap, .5rem)}.bx-nav-items[hidden]{display:none}.bx-nav-section+.bx-nav-section{margin-block-start:1rem}.bx-nav-section-heading,.bx-nav-section-toggle{border:1px solid transparent;border-radius:var(--bx-side-nav-item-radius, .5rem);background:transparent;color:var(--bx-text-secondary)}.bx-nav-section-heading.is-active,.bx-nav-section-heading.is-highlighted,.bx-nav-section-toggle.is-active,.bx-nav-section-toggle.is-highlighted{color:var(--bx-text-accent)}.bx-nav-section-heading:focus-visible,.bx-nav-section-toggle:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-nav-section-heading,.bx-nav-section-toggle{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;margin:0 0 .25rem;padding:.5rem;font-size:.75rem;font-weight:600;text-align:start;overflow-wrap:anywhere}.bx-nav-section-heading span,.bx-nav-section-toggle span{flex:1;min-width:0}.bx-nav-section-heading bx-icon,.bx-nav-section-toggle bx-icon{flex:none}.bx-nav-section-toggle{min-height:2.75rem;cursor:pointer;font-family:inherit}.bx-nav-section-toggle:hover,.bx-nav-section-toggle.is-open{background:var(--bx-primary-subtle);color:var(--bx-text-brand)}.bx-nav-section-toggle.is-compact{width:100%;min-width:0;justify-content:center;padding-inline:0}.bx-nav-empty{color:var(--bx-text-secondary);padding:.75rem}.bx-nav-section-flyout{--bx-menu-min-width: 0;--bx-menu-item-gap: var(--bx-side-nav-item-gap, .5rem);box-sizing:border-box;width:var(--bx-side-nav-menu-width, 17rem);max-width:calc(100dvw - 1rem);max-height:calc(100dvh - 1rem);overflow:hidden auto;scrollbar-gutter:stable;overscroll-behavior:contain;background:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.75rem;box-shadow:0 12px 20px -3px #0003,0 4px 6px -2px #0000001a;padding:.25rem}.bx-nav-backdrop{position:fixed;inset:0;z-index:300;border:0;background:var(--bx-side-nav-backdrop, var(--bx-backdrop-color, rgba(0, 0, 0, .4)));cursor:pointer}.bx-nav-hamburger{position:fixed;top:.5rem;left:.5rem;z-index:302;--bx-glass-radius: .5rem;width:2.5rem;height:2.5rem;padding:0}.bx-nav-hamburger.is-open{visibility:hidden;pointer-events:none}:host(.is-animated:not(.is-mobile)) .bx-nav-panel{transition-property:width;transition-duration:calc(var(--bx-side-nav-duration, .25s) * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:var(--bx-side-nav-easing, ease)}:host(.is-collapsed) .bx-side-nav-scroll{scrollbar-gutter:stable both-edges;padding-inline:.25rem}:host(.is-collapsed){width:var(--bx-side-nav-collapsed-width, 4.5rem);flex-basis:var(--bx-side-nav-collapsed-width, 4.5rem)}:host(.is-collapsed) .bx-nav-panel{width:var(--bx-side-nav-collapsed-width, 4.5rem)}:host(.is-collapsed) .bx-nav-header{align-items:center;flex-direction:column;padding-inline:.25rem}:host(.is-collapsed) .bx-nav-panel-toggle{margin-inline:auto}:host(.is-collapsed) .bx-nav-footer{justify-content:center;padding-inline:.25rem}:host(.is-inline) .bx-nav-panel{position:relative;height:var(--bx-side-nav-height, 38rem);max-height:100dvh}:host(.is-inline) .bx-nav-hamburger{position:relative;inset:auto}:host(.is-right) .bx-nav-panel{left:auto;right:0;border-inline-end:0;border-inline-start:1px solid var(--bx-border-default)}:host(.is-right) .bx-nav-hamburger{left:auto;right:.5rem}:host(.is-mobile){width:0;flex-basis:0}:host(.is-mobile) .bx-nav-panel{position:fixed;height:100dvh;width:min(var(--bx-side-nav-width, 17rem),100dvw - 3rem);transform:translate(-100%);visibility:hidden}:host(.is-mobile) .bx-nav-panel.is-open{transform:translate(0);visibility:visible;z-index:301}:host(.is-mobile) .bx-nav-header{padding-top:.75rem}:host(.is-mobile.is-right) .bx-nav-panel{transform:translate(100%)}:host(.is-mobile.is-right) .bx-nav-panel.is-open{transform:translate(0)}:host(.is-inline.is-mobile){position:absolute;inset:0;width:100%;height:100%;pointer-events:none}:host(.is-inline.is-mobile) .bx-nav-panel{position:absolute;inset-block:0;height:100%;max-height:100%;width:min(var(--bx-side-nav-width, 17rem),100% - 3rem);pointer-events:auto}:host(.is-inline.is-mobile) .bx-nav-backdrop{position:absolute;pointer-events:auto}:host(.is-inline.is-mobile) .bx-nav-hamburger{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;pointer-events:auto}@media(forced-colors:active){.bx-nav-panel,.bx-nav-hamburger{border:1px solid CanvasText}.bx-nav-backdrop{background:Canvas;opacity:.7}}:host(.is-mobile.is-drawer-animated) .bx-nav-panel{transition:transform var(--bx-side-nav-duration, .25s) var(--bx-side-nav-easing, ease),visibility 0s var(--bx-side-nav-duration, .25s)}:host(.is-mobile.is-drawer-animated) .bx-nav-panel.is-open{transition-delay:0s}:host(.is-right){order:1}:host(:dir(rtl)){order:1}:host(.is-right:dir(rtl)){order:0}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: A11yModule
+			},
+			{
+				kind: "directive",
+				type: i1.CdkTrapFocus,
+				selector: "[cdkTrapFocus]",
+				inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"],
+				exportAs: ["cdkTrapFocus"]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: SearchInput,
+				selector: "bx-search-input",
+				inputs: [
+					"clearLabel",
+					"autocomplete",
+					"loadError",
+					"loadingLabel",
+					"loadingAriaLabel",
+					"retryLabel",
+					"retryConfig"
+				],
+				outputs: ["search", "retry"]
+			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "bx-button, button[bx-button], a[bx-button]",
+				inputs: [
+					"variant",
+					"color",
+					"outlined",
+					"elevated",
+					"disabled",
+					"loading",
+					"interactive",
+					"surfaceEffects"
+				]
+			},
+			{
+				kind: "directive",
+				type: BxSurfaceDirective,
+				selector: "[bxSurface]",
+				inputs: [
+					"bxSurfaceInteractive",
+					"bxSurfaceGlassiness",
+					"bxSurfaceEmission",
+					"bxSurfaceFocusEmission",
+					"bxReducedTransparency"
+				],
+				exportAs: ["bxSurface"]
+			},
+			{
+				kind: "component",
+				type: Icon,
+				selector: "bx-icon",
+				inputs: [
+					"name",
+					"size",
+					"color",
+					"bgColor",
+					"strokeWidth",
+					"decorative",
+					"ariaLabel"
+				]
+			},
+			{
+				kind: "component",
+				type: SideNavBranch,
+				selector: "bx-side-nav-branch",
+				inputs: [
+					"item",
+					"compact",
+					"parentTrigger"
+				]
+			},
+			{
+				kind: "directive",
+				type: MenuTriggerDirective,
+				selector: "[bxMenuTrigger]",
+				inputs: [
+					"bxMenuTrigger",
+					"menuOrigin",
+					"menuParent",
+					"menuSide",
+					"menuHover",
+					"menuLabel",
+					"menuPinned"
+				],
+				outputs: ["menuOpened", "menuClosed"],
+				exportAs: ["bxMenuTrigger"]
+			},
+			{
+				kind: "component",
+				type: Menu,
+				selector: "bx-menu"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SideNav,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bx-side-nav",
+			exportAs: "bxSideNav",
+			imports: [
+				NgTemplateOutlet,
+				A11yModule,
+				FormsModule,
+				SearchInput,
+				Button,
+				BxSurfaceDirective,
+				Icon,
+				SideNavBranch,
+				MenuTriggerDirective,
+				Menu
+			],
+			providers: [SideNavStateService],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class.is-mobile]": "isMobile()",
+				"[class.is-collapsed]": "isCollapsed()",
+				"[class.is-right]": "resolvedConfig().side === \"right\"",
+				"[class.is-inline]": "resolvedConfig().position === \"inline\"",
+				"[class.is-animated]": "!reducedMotion()",
+				"[class.is-drawer-animated]": "drawerAnimated() && !reducedMotion()",
+				"[style.--bx-side-nav-width]": "resolvedConfig().width",
+				"[style.--bx-side-nav-collapsed-width]": "resolvedConfig().collapsedWidth"
+			},
+			template: "@if (isMobile() && resolvedConfig().showMobileTrigger) {\n  <button #mobileToggle bx-button variant=\"tonal\" color=\"grayscale\" class=\"bx-nav-hamburger\" type=\"button\" [class.is-open]=\"mobileOpen()\"\n    [attr.aria-label]=\"state.text().openLabel\" [attr.aria-hidden]=\"mobileOpen() ? true : null\" [attr.inert]=\"mobileOpen() ? '' : null\" [attr.aria-expanded]=\"mobileOpen()\" [attr.aria-controls]=\"id\" (click)=\"toggle($event)\">\n    <bx-icon name=\"menu\" size=\"20\" />\n  </button>\n}\n@if (isMobile() && mobileOpen()) {\n  <button class=\"bx-nav-backdrop\" type=\"button\" tabindex=\"-1\" [attr.aria-label]=\"state.text().closeLabel\" (click)=\"closeFromControl($event)\"></button>\n}\n<aside tabindex=\"-1\" bxSurface [bxSurfaceInteractive]=\"false\" class=\"bx-nav-panel\" [id]=\"id\" [class.is-open]=\"!isMobile() || mobileOpen()\"\n  [attr.role]=\"isMobile() ? 'dialog' : null\" [attr.aria-modal]=\"isMobile() && mobileOpen() ? true : null\" [attr.aria-label]=\"state.text().ariaLabel\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\" [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? true : null\"\n  [cdkTrapFocus]=\"isMobile() && mobileOpen()\" [cdkTrapFocusAutoCapture]=\"isMobile() && mobileOpen()\" (keydown)=\"panelKey($event)\">\n  <div class=\"bx-nav-header\">\n    @if (headerTemplate(); as template) { <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"slotContext()\" /> }\n    @else if (!isCollapsed()) { <strong>{{ state.text().ariaLabel }}</strong> }\n    @if (isMobile()) {\n      <button bx-button variant=\"icon\" color=\"grayscale\" class=\"bx-nav-panel-toggle\" type=\"button\" [attr.aria-label]=\"state.text().closeLabel\" (click)=\"closeFromControl($event)\"><bx-icon name=\"x\" size=\"20\" /></button>\n    } @else if (resolvedConfig().collapsible) {\n      <button bx-button variant=\"icon\" color=\"grayscale\" class=\"bx-nav-panel-toggle\" type=\"button\" [attr.aria-label]=\"isCollapsed() ? state.text().expandLabel : state.text().collapseLabel\"\n        [attr.aria-expanded]=\"!isCollapsed()\" (click)=\"toggleCollapsed()\">\n        <bx-icon [name]=\"(resolvedConfig().side === 'left') !== isCollapsed() ? 'panel-left-close' : 'panel-right-close'\" size=\"20\" />\n      </button>\n    }\n  </div>\n  @if (resolvedConfig().searchable) {\n    @if (isCollapsed()) {\n      <button bx-button variant=\"icon\" color=\"grayscale\" type=\"button\" class=\"bx-nav-search-toggle\" [attr.aria-label]=\"state.text().searchLabel\" (click)=\"toggleCollapsed()\"><bx-icon name=\"search\" size=\"20\" /></button>\n    } @else {\n      <bx-search-input class=\"bx-nav-search\" [placeholder]=\"state.text().searchPlaceholder\" [ariaLabel]=\"state.text().searchLabel\" [clearLabel]=\"state.text().clearSearchLabel\"\n        [ngModel]=\"query()\" (ngModelChange)=\"search($event)\" />\n    }\n  }\n  <div class=\"bx-side-nav-scroll\">\n    <nav [attr.aria-label]=\"state.text().ariaLabel\">\n      @for (group of visibleGroups(); track group.id) {\n        <section class=\"bx-nav-section\" [attr.aria-label]=\"group.title || state.text().ariaLabel\">\n          @if (group.title) {\n            @if (isCollapsed()) {\n              <button type=\"button\" class=\"bx-nav-section-toggle is-compact\" [class.is-active]=\"sectionActive(group)\" [class.is-highlighted]=\"sectionHighlighted(group)\" [class.is-open]=\"sectionTrigger.isOpen()\" [attr.aria-label]=\"group.title\" [bxMenuTrigger]=\"sectionMenu\" #sectionTrigger=\"bxMenuTrigger\"\n                [menuSide]=\"resolvedConfig().side === 'left' ? 'right' : 'left'\" [menuLabel]=\"group.title\">\n                <bx-icon [name]=\"group.icon?.name ?? 'folder'\" size=\"20\" />\n              </button>\n              <ng-template #sectionMenu>\n                <div class=\"bx-nav-section-flyout\">\n                  <bx-menu>\n                    @for (item of group.items; track item.id) { <bx-side-nav-branch [item]=\"item\" [parentTrigger]=\"sectionTrigger\" /> }\n                  </bx-menu>\n                </div>\n              </ng-template>\n            } @else if (group.collapsible) {\n              <button type=\"button\" class=\"bx-nav-section-toggle\" [class.is-active]=\"sectionActive(group)\" [class.is-highlighted]=\"sectionHighlighted(group)\" [attr.aria-expanded]=\"!sectionCollapsed(group)\" [attr.aria-controls]=\"id + '-section-' + $index\" (click)=\"toggleSection(group)\">\n                @if (resolvedConfig().showSectionIcons) { <bx-icon [name]=\"group.icon?.name ?? 'folder'\" size=\"20\" /> }<span>{{ group.title }}</span><bx-icon [name]=\"sectionCollapsed(group) ? 'chevron-right' : 'chevron-down'\" size=\"16\" />\n              </button>\n            } @else {\n              <h2 class=\"bx-nav-section-heading\" [class.is-active]=\"sectionActive(group)\" [class.is-highlighted]=\"sectionHighlighted(group)\">@if (resolvedConfig().showSectionIcons) { <bx-icon [name]=\"group.icon?.name ?? 'folder'\" size=\"20\" /> }<span>{{ group.title }}</span></h2>\n            }\n          }\n          <div class=\"bx-nav-items\" role=\"menu\" [attr.aria-label]=\"group.title || state.text().ariaLabel\" [id]=\"id + '-section-' + $index\" [hidden]=\"sectionCollapsed(group)\" tabindex=\"-1\" (keydown)=\"menuKey($event)\">\n            @for (item of group.items; track item.id) { <bx-side-nav-branch [item]=\"item\" [compact]=\"isCollapsed()\" /> }\n          </div>\n        </section>\n      } @empty { <p class=\"bx-nav-empty\" role=\"status\">{{ state.text().emptyText }}</p> }\n    </nav>\n  </div>\n  @if (footerTemplate(); as template) { <footer class=\"bx-nav-footer\"><ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"slotContext()\" /></footer> }\n  <span class=\"cdk-visually-hidden\" role=\"status\" aria-live=\"polite\">@if (state.target()) { {{ state.text().resultLabel }}: {{ state.searchResult().label }} }</span>\n</aside>\n",
+			styles: [":host{display:block;order:0;flex:0 0 var(--bx-side-nav-width, 17rem);width:var(--bx-side-nav-width, 17rem);color:var(--bx-text-primary);font-family:inherit}.bx-nav-panel{--bx-glass-radius: 0;--bx-glass-min-opacity: .8;position:fixed;inset-block:0;left:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--bx-side-nav-width, 17rem);max-width:100dvw;height:100dvh;min-height:0;overflow:hidden;border-inline-end:1px solid var(--bx-border-default);z-index:300}.bx-nav-header,.bx-nav-footer{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem .75rem;min-width:0;overflow-wrap:anywhere}.bx-nav-header>:first-child{min-width:0}.bx-nav-footer{border-block-start:1px solid var(--bx-border-default)}.bx-nav-panel-toggle,.bx-nav-search-toggle{--bx-glass-radius: 9999px;flex:none;width:2.5rem;height:2.5rem;padding:0}.bx-nav-panel-toggle{margin-inline-start:auto}.bx-nav-search{display:block;flex:none;padding-inline:.75rem}.bx-nav-search-toggle{margin-inline:auto}.bx-side-nav-scroll{flex:1;min-height:0;min-width:0;overflow:hidden auto;scrollbar-gutter:stable;overscroll-behavior:contain;padding:.5rem;scroll-behavior:auto}.bx-nav-items{display:flex;flex-direction:column;gap:var(--bx-side-nav-item-gap, .5rem)}.bx-nav-items[hidden]{display:none}.bx-nav-section+.bx-nav-section{margin-block-start:1rem}.bx-nav-section-heading,.bx-nav-section-toggle{border:1px solid transparent;border-radius:var(--bx-side-nav-item-radius, .5rem);background:transparent;color:var(--bx-text-secondary)}.bx-nav-section-heading.is-active,.bx-nav-section-heading.is-highlighted,.bx-nav-section-toggle.is-active,.bx-nav-section-toggle.is-highlighted{color:var(--bx-text-accent)}.bx-nav-section-heading:focus-visible,.bx-nav-section-toggle:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-nav-section-heading,.bx-nav-section-toggle{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;margin:0 0 .25rem;padding:.5rem;font-size:.75rem;font-weight:600;text-align:start;overflow-wrap:anywhere}.bx-nav-section-heading span,.bx-nav-section-toggle span{flex:1;min-width:0}.bx-nav-section-heading bx-icon,.bx-nav-section-toggle bx-icon{flex:none}.bx-nav-section-toggle{min-height:2.75rem;cursor:pointer;font-family:inherit}.bx-nav-section-toggle:hover,.bx-nav-section-toggle.is-open{background:var(--bx-primary-subtle);color:var(--bx-text-brand)}.bx-nav-section-toggle.is-compact{width:100%;min-width:0;justify-content:center;padding-inline:0}.bx-nav-empty{color:var(--bx-text-secondary);padding:.75rem}.bx-nav-section-flyout{--bx-menu-min-width: 0;--bx-menu-item-gap: var(--bx-side-nav-item-gap, .5rem);box-sizing:border-box;width:var(--bx-side-nav-menu-width, 17rem);max-width:calc(100dvw - 1rem);max-height:calc(100dvh - 1rem);overflow:hidden auto;scrollbar-gutter:stable;overscroll-behavior:contain;background:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.75rem;box-shadow:0 12px 20px -3px #0003,0 4px 6px -2px #0000001a;padding:.25rem}.bx-nav-backdrop{position:fixed;inset:0;z-index:300;border:0;background:var(--bx-side-nav-backdrop, var(--bx-backdrop-color, rgba(0, 0, 0, .4)));cursor:pointer}.bx-nav-hamburger{position:fixed;top:.5rem;left:.5rem;z-index:302;--bx-glass-radius: .5rem;width:2.5rem;height:2.5rem;padding:0}.bx-nav-hamburger.is-open{visibility:hidden;pointer-events:none}:host(.is-animated:not(.is-mobile)) .bx-nav-panel{transition-property:width;transition-duration:calc(var(--bx-side-nav-duration, .25s) * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:var(--bx-side-nav-easing, ease)}:host(.is-collapsed) .bx-side-nav-scroll{scrollbar-gutter:stable both-edges;padding-inline:.25rem}:host(.is-collapsed){width:var(--bx-side-nav-collapsed-width, 4.5rem);flex-basis:var(--bx-side-nav-collapsed-width, 4.5rem)}:host(.is-collapsed) .bx-nav-panel{width:var(--bx-side-nav-collapsed-width, 4.5rem)}:host(.is-collapsed) .bx-nav-header{align-items:center;flex-direction:column;padding-inline:.25rem}:host(.is-collapsed) .bx-nav-panel-toggle{margin-inline:auto}:host(.is-collapsed) .bx-nav-footer{justify-content:center;padding-inline:.25rem}:host(.is-inline) .bx-nav-panel{position:relative;height:var(--bx-side-nav-height, 38rem);max-height:100dvh}:host(.is-inline) .bx-nav-hamburger{position:relative;inset:auto}:host(.is-right) .bx-nav-panel{left:auto;right:0;border-inline-end:0;border-inline-start:1px solid var(--bx-border-default)}:host(.is-right) .bx-nav-hamburger{left:auto;right:.5rem}:host(.is-mobile){width:0;flex-basis:0}:host(.is-mobile) .bx-nav-panel{position:fixed;height:100dvh;width:min(var(--bx-side-nav-width, 17rem),100dvw - 3rem);transform:translate(-100%);visibility:hidden}:host(.is-mobile) .bx-nav-panel.is-open{transform:translate(0);visibility:visible;z-index:301}:host(.is-mobile) .bx-nav-header{padding-top:.75rem}:host(.is-mobile.is-right) .bx-nav-panel{transform:translate(100%)}:host(.is-mobile.is-right) .bx-nav-panel.is-open{transform:translate(0)}:host(.is-inline.is-mobile){position:absolute;inset:0;width:100%;height:100%;pointer-events:none}:host(.is-inline.is-mobile) .bx-nav-panel{position:absolute;inset-block:0;height:100%;max-height:100%;width:min(var(--bx-side-nav-width, 17rem),100% - 3rem);pointer-events:auto}:host(.is-inline.is-mobile) .bx-nav-backdrop{position:absolute;pointer-events:auto}:host(.is-inline.is-mobile) .bx-nav-hamburger{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;pointer-events:auto}@media(forced-colors:active){.bx-nav-panel,.bx-nav-hamburger{border:1px solid CanvasText}.bx-nav-backdrop{background:Canvas;opacity:.7}}:host(.is-mobile.is-drawer-animated) .bx-nav-panel{transition:transform var(--bx-side-nav-duration, .25s) var(--bx-side-nav-easing, ease),visibility 0s var(--bx-side-nav-duration, .25s)}:host(.is-mobile.is-drawer-animated) .bx-nav-panel.is-open{transition-delay:0s}:host(.is-right){order:1}:host(:dir(rtl)){order:1}:host(.is-right:dir(rtl)){order:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		toggleElement: [{
+			type: i0.ViewChild,
+			args: ["mobileToggle", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}],
+		groups: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groups",
+				required: false
+			}]
+		}],
+		itemTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemTemplate",
+				required: false
+			}]
+		}],
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}],
+		collapsedChange: [{
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}],
+		mobileOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mobileOpen",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["mobileOpenChange"]
+		}],
+		itemSelected: [{
+			type: i0.Output,
+			args: ["itemSelected"]
+		}],
+		layoutChange: [{
+			type: i0.Output,
+			args: ["layoutChange"]
+		}]
+	}
+});
+var SideNavHeaderDirective = class SideNavHeaderDirective {
+	template = inject(TemplateRef);
+	nav = inject(SideNav);
+	constructor() {
+		this.nav.setHeaderTemplate(this.template);
+		inject(DestroyRef).onDestroy(() => this.nav.setHeaderTemplate(null));
+	}
+	static ngTemplateContextGuard(_directive, _context) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: SideNavHeaderDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: SideNavHeaderDirective,
+		isStandalone: true,
+		selector: "[bxSideNavHeader]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SideNavHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[bxSideNavHeader]" }]
+	}],
+	ctorParameters: () => []
+});
+var SideNavFooterDirective = class SideNavFooterDirective {
+	template = inject(TemplateRef);
+	nav = inject(SideNav);
+	constructor() {
+		this.nav.setFooterTemplate(this.template);
+		inject(DestroyRef).onDestroy(() => this.nav.setFooterTemplate(null));
+	}
+	static ngTemplateContextGuard(_directive, _context) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: SideNavFooterDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: SideNavFooterDirective,
+		isStandalone: true,
+		selector: "[bxSideNavFooter]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: SideNavFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[bxSideNavFooter]" }]
+	}],
+	ctorParameters: () => []
+});
+export { Breadcrumbs, NAVIGATION_ACCESS_ADAPTER, NAVIGATION_CONFIG, NavigationService, SideNav, SideNavFooterDirective, SideNavHeaderDirective, defineNavigation, provideNavigation, withNav };
 
 //# sourceMappingURL=filip.mazev-blocks-navigation.mjs.map