@edsis/ui 0.0.2 → 0.0.3

package/fesm2022/edsis-ui-nav.mjs

@@ -0,0 +1,2340 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, signal, computed, Injectable, DestroyRef, effect, input, ChangeDetectionStrategy, Component, output, ElementRef, InjectionToken, booleanAttribute, model, contentChild, forwardRef, ViewContainerRef } from '@angular/core';
+import { cn } from '@edsis/ui/utils';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+
+class NavIconDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NavIconDirective, isStandalone: true, selector: "ng-template[uiNavIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[uiNavIcon]',
+                }]
+        }] });
+
+const DEFAULT_NAV_ID = 'default';
+const DEFAULT_VERTICAL_APPEARANCE = 'sidebar';
+const DEFAULT_HORIZONTAL_APPEARANCE = 'navbar';
+const DEFAULT_POSITION = 'left';
+const DEFAULT_DOCKBAR_MODE = 'sticky';
+const VERTICAL_APPEARANCE_STORAGE_KEY = 'nav-vertical-appearance';
+const HORIZONTAL_APPEARANCE_STORAGE_KEY = 'nav-horizontal-appearance';
+class NavService {
+    documentRef = inject(DOCUMENT, { optional: true });
+    router = inject(Router, { optional: true });
+    routerUrl = signal(this.router?.url ?? '/', ...(ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []));
+    states = signal({}, ...(ngDevMode ? [{ debugName: "states" }] : /* istanbul ignore next */ []));
+    openPanelKeys = signal({}, ...(ngDevMode ? [{ debugName: "openPanelKeys" }] : /* istanbul ignore next */ []));
+    drawerOpenState = signal({}, ...(ngDevMode ? [{ debugName: "drawerOpenState" }] : /* istanbul ignore next */ []));
+    openPanelKey = computed(() => this.openPanelKeys()[DEFAULT_NAV_ID] ?? null, ...(ngDevMode ? [{ debugName: "openPanelKey" }] : /* istanbul ignore next */ []));
+    exactMatchOptions = {
+        paths: 'exact',
+        queryParams: 'exact',
+        fragment: 'exact',
+        matrixParams: 'exact',
+    };
+    subsetMatchOptions = {
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+    };
+    constructor() {
+        this.ensureAppearanceDefaults();
+        this.router?.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this.routerUrl.set(event.urlAfterRedirects);
+            }
+        });
+    }
+    register(input) {
+        this.ensureAppearanceDefaults();
+        const state = this.resolveState(input);
+        this.states.update((states) => ({ ...states, [state.id]: state }));
+        this.persistState(state);
+        return state;
+    }
+    unregister(id) {
+        const navId = this.normalizeId(id);
+        this.states.update((states) => this.withoutKey(states, navId));
+        this.openPanelKeys.update((state) => this.withoutKey(state, navId));
+        this.drawerOpenState.update((state) => this.withoutKey(state, navId));
+    }
+    state(id) {
+        const navId = this.normalizeId(id);
+        return computed(() => this.states()[navId] ?? null);
+    }
+    currentState(id) {
+        return this.states()[this.normalizeId(id)] ?? null;
+    }
+    currentPanelKey(id) {
+        return this.openPanelKeys()[this.normalizeId(id)] ?? null;
+    }
+    update(id, patch) {
+        const navId = this.normalizeId(id);
+        const current = this.states()[navId] ?? this.resolveState({ id: navId, orientation: patch.orientation ?? 'vertical' });
+        return this.register({
+            id: navId,
+            orientation: patch.orientation ?? current.orientation,
+            appearance: patch.appearance ?? current.appearance,
+            position: patch.position ?? current.position,
+            collapsed: patch.collapsed ?? current.collapsed,
+            dockbarMode: patch.dockbarMode ?? current.dockbarMode,
+        });
+    }
+    setAppearance(id, appearance) {
+        return this.update(id, { appearance });
+    }
+    setPosition(id, position) {
+        return this.update(id, { position });
+    }
+    setCollapsed(id, collapsed) {
+        return this.update(id, { collapsed });
+    }
+    toggleCollapsed(id) {
+        const navId = this.normalizeId(id);
+        const current = this.states()[navId] ?? this.resolveState({ id: navId, orientation: 'vertical' });
+        return this.setCollapsed(navId, !current.collapsed);
+    }
+    setDockbarMode(id, mode) {
+        return this.update(id, { dockbarMode: mode });
+    }
+    isRouterItem(item) {
+        return !!item.link && !item.externalLink;
+    }
+    hrefFor(item) {
+        if (item.href) {
+            return item.href;
+        }
+        if (item.externalLink && typeof item.link === 'string') {
+            return item.link;
+        }
+        return null;
+    }
+    relFor(item) {
+        if (item.rel) {
+            return item.rel;
+        }
+        return item.target === '_blank' || item.externalLink ? 'noopener noreferrer' : null;
+    }
+    routerLinkActiveOptions(item) {
+        return item.isActiveMatchOptions ?? (item.exactMatch ? this.exactMatchOptions : this.subsetMatchOptions);
+    }
+    itemRole(orientation, level) {
+        return orientation === 'horizontal' || level > 0 ? 'menuitem' : null;
+    }
+    compactLabel(item, compact) {
+        return compact ? (item.tooltip ?? item.title ?? null) : null;
+    }
+    titleFor(item, compact) {
+        return item.tooltip ?? (compact ? (item.title ?? null) : null);
+    }
+    compactFallback(item) {
+        return (item.title ?? item.id ?? '?').trim().slice(0, 2);
+    }
+    iconContext(item, active, level, orientation) {
+        return {
+            $implicit: item.icon ?? '',
+            icon: item.icon ?? '',
+            item: item.source,
+            active,
+            orientation,
+            level,
+        };
+    }
+    isItemActive(item, activeIds, explicitActiveUrl) {
+        if (item.active || activeIds.has(item.stateId) || activeIds.has(item.key)) {
+            return true;
+        }
+        if (this.matchesActiveUrl(item, explicitActiveUrl)) {
+            return true;
+        }
+        return item.children.some((child) => this.isItemActive(child, activeIds, explicitActiveUrl));
+    }
+    isPanelOpen(navIdOrItem, item) {
+        const { navId, navItem } = this.resolvePanelArgs(navIdOrItem, item);
+        return this.openPanelKeys()[navId] === navItem.key;
+    }
+    openPanel(navIdOrItem, item) {
+        const { navId, navItem } = this.resolvePanelArgs(navIdOrItem, item);
+        if (navItem.disabled) {
+            return;
+        }
+        this.openPanelKeys.update((state) => ({ ...state, [navId]: navItem.key }));
+    }
+    togglePanel(navIdOrItem, item) {
+        const { navId, navItem } = this.resolvePanelArgs(navIdOrItem, item);
+        if (navItem.disabled) {
+            return;
+        }
+        this.openPanelKeys.update((state) => ({
+            ...state,
+            [navId]: state[navId] === navItem.key ? null : navItem.key,
+        }));
+    }
+    closePanel(id = DEFAULT_NAV_ID) {
+        const navId = this.normalizeId(id);
+        this.openPanelKeys.update((state) => ({ ...state, [navId]: null }));
+    }
+    isDrawerOpen(id) {
+        return this.drawerOpenState()[this.normalizeId(id)] ?? false;
+    }
+    openDrawer(id) {
+        const navId = this.normalizeId(id);
+        this.drawerOpenState.update((state) => ({ ...state, [navId]: true }));
+    }
+    toggleDrawer(id) {
+        const navId = this.normalizeId(id);
+        this.drawerOpenState.update((state) => ({ ...state, [navId]: !(state[navId] ?? false) }));
+    }
+    closeDrawer(id) {
+        const navId = this.normalizeId(id);
+        this.drawerOpenState.update((state) => ({ ...state, [navId]: false }));
+    }
+    matchesActiveUrl(item, explicitActiveUrl) {
+        if (!item.link || item.externalLink || typeof item.link !== 'string') {
+            return false;
+        }
+        const activeUrl = explicitActiveUrl ?? this.routerUrl();
+        const link = item.link;
+        if (link === '/') {
+            return activeUrl === '/';
+        }
+        if (item.exactMatch || item.isActiveMatchOptions?.paths === 'exact') {
+            return activeUrl === link;
+        }
+        return activeUrl === link || activeUrl.startsWith(`${link}/`) || activeUrl.startsWith(`${link}?`);
+    }
+    resolveState(input) {
+        const id = this.normalizeId(input.id);
+        const orientation = input.orientation;
+        return {
+            id,
+            orientation,
+            appearance: this.resolveAppearance(id, orientation, input.appearance),
+            position: this.resolvePosition(id, input.position),
+            collapsed: this.resolveCollapsed(id, input.collapsed),
+            dockbarMode: this.resolveDockbarMode(id, input.dockbarMode),
+        };
+    }
+    resolveAppearance(id, orientation, appearance) {
+        if (this.isAppearanceForOrientation(appearance, orientation)) {
+            return appearance;
+        }
+        const stored = this.readStorage(this.instanceStorageKey(id, 'appearance'));
+        if (this.isAppearanceForOrientation(stored, orientation)) {
+            return stored;
+        }
+        return this.readOrientationAppearance(orientation);
+    }
+    resolvePosition(id, position) {
+        if (this.isPosition(position)) {
+            return position;
+        }
+        const stored = this.readStorage(this.instanceStorageKey(id, 'position'));
+        return this.isPosition(stored) ? stored : DEFAULT_POSITION;
+    }
+    resolveCollapsed(id, collapsed) {
+        if (typeof collapsed === 'boolean') {
+            return collapsed;
+        }
+        const stored = this.readStorage(this.instanceStorageKey(id, 'collapsed'));
+        if (stored === 'true') {
+            return true;
+        }
+        if (stored === 'false') {
+            return false;
+        }
+        return false;
+    }
+    resolveDockbarMode(id, mode) {
+        if (this.isDockbarMode(mode)) {
+            return mode;
+        }
+        const stored = this.readStorage(this.instanceStorageKey(id, 'dockbar-mode'));
+        return this.isDockbarMode(stored) ? stored : DEFAULT_DOCKBAR_MODE;
+    }
+    persistState(state) {
+        this.writeStorage(this.instanceStorageKey(state.id, 'orientation'), state.orientation);
+        this.writeStorage(this.instanceStorageKey(state.id, 'appearance'), state.appearance);
+        this.writeStorage(this.instanceStorageKey(state.id, 'position'), state.position);
+        this.writeStorage(this.instanceStorageKey(state.id, 'collapsed'), String(state.collapsed));
+        this.writeStorage(this.instanceStorageKey(state.id, 'dockbar-mode'), state.dockbarMode);
+    }
+    readOrientationAppearance(orientation) {
+        const key = orientation === 'vertical' ? VERTICAL_APPEARANCE_STORAGE_KEY : HORIZONTAL_APPEARANCE_STORAGE_KEY;
+        const fallback = orientation === 'vertical' ? DEFAULT_VERTICAL_APPEARANCE : DEFAULT_HORIZONTAL_APPEARANCE;
+        const stored = this.readStorage(key);
+        if (this.isAppearanceForOrientation(stored, orientation)) {
+            return stored;
+        }
+        this.writeStorage(key, fallback);
+        return fallback;
+    }
+    ensureAppearanceDefaults() {
+        if (!this.isVerticalAppearance(this.readStorage(VERTICAL_APPEARANCE_STORAGE_KEY))) {
+            this.writeStorage(VERTICAL_APPEARANCE_STORAGE_KEY, DEFAULT_VERTICAL_APPEARANCE);
+        }
+        if (!this.isHorizontalAppearance(this.readStorage(HORIZONTAL_APPEARANCE_STORAGE_KEY))) {
+            this.writeStorage(HORIZONTAL_APPEARANCE_STORAGE_KEY, DEFAULT_HORIZONTAL_APPEARANCE);
+        }
+    }
+    storage() {
+        try {
+            return this.documentRef?.defaultView?.localStorage ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    readStorage(key) {
+        try {
+            return this.storage()?.getItem(key) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    writeStorage(key, value) {
+        try {
+            this.storage()?.setItem(key, value);
+        }
+        catch {
+            return;
+        }
+    }
+    instanceStorageKey(id, property) {
+        return `nav:${id}:${property}`;
+    }
+    normalizeId(id) {
+        return id.trim() || DEFAULT_NAV_ID;
+    }
+    withoutKey(record, key) {
+        const next = { ...record };
+        delete next[key];
+        return next;
+    }
+    resolvePanelArgs(navIdOrItem, item) {
+        if (typeof navIdOrItem === 'string') {
+            return { navId: this.normalizeId(navIdOrItem), navItem: item };
+        }
+        return { navId: DEFAULT_NAV_ID, navItem: navIdOrItem };
+    }
+    isAppearanceForOrientation(value, orientation) {
+        return orientation === 'vertical' ? this.isVerticalAppearance(value) : this.isHorizontalAppearance(value);
+    }
+    isVerticalAppearance(value) {
+        return value === 'sidebar' || value === 'dockbar';
+    }
+    isHorizontalAppearance(value) {
+        return value === 'navbar' || value === 'flyout';
+    }
+    isPosition(value) {
+        return value === 'left' || value === 'right';
+    }
+    isDockbarMode(value) {
+        return value === 'drawer' || value === 'sticky';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+function normalizeType(type, hasChildren) {
+    if (type === 'divider' || type === 'spacer' || type === 'group' || type === 'mega') {
+        return type;
+    }
+    if (type === 'collapsible' || type === 'collapsable') {
+        return 'collapsible';
+    }
+    if (type === 'aside' && hasChildren) {
+        return 'collapsible';
+    }
+    if (!type && hasChildren) {
+        return 'collapsible';
+    }
+    return 'item';
+}
+function toKeyPart(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+function itemFallbackKey(item, index) {
+    return toKeyPart(item.title ?? item.link?.toString() ?? item.href ?? `item-${index}`) || `item-${index}`;
+}
+function normalizeItem(item, index, path) {
+    if (item.isHidden?.(item)) {
+        return null;
+    }
+    const children = (item.children ?? [])
+        .map((child, childIndex) => normalizeItem(child, childIndex, `${path}-${childIndex}`))
+        .filter((child) => child !== null);
+    const hasChildren = children.length > 0;
+    const key = item.id ?? `${path}-${itemFallbackKey(item, index)}`;
+    return {
+        ...item,
+        key,
+        stateId: item.id ?? key,
+        panelId: `ui-nav-panel-${toKeyPart(key) || index}`,
+        type: normalizeType(item.type, hasChildren),
+        source: item,
+        children,
+    };
+}
+function normalizeUiNavItems(items) {
+    return items
+        .map((item, index) => normalizeItem(item, index, `ui-nav-${index}`))
+        .filter((item) => item !== null);
+}
+
+function injectUiNavController(inputs) {
+    const nav = inject(NavService);
+    const destroyRef = inject(DestroyRef);
+    const registeredState = signal(null, ...(ngDevMode ? [{ debugName: "registeredState" }] : /* istanbul ignore next */ []));
+    let previousRegisteredId = null;
+    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(() => {
+        const data = inputs.data();
+        return normalizeUiNavItems(data.length > 0 ? data : inputs.items());
+    }, ...(ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []));
+    const fallbackState = computed(() => ({
+        id: normalizedNavId(),
+        orientation: inputs.orientation(),
+        appearance: fallbackAppearance(inputs.orientation(), inputs.appearance()),
+        position: inputs.position() ?? '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 new Set();
+        }
+        return ids instanceof Set ? new Set(ids) : new Set(ids);
+    }, ...(ngDevMode ? [{ debugName: "activeIdSet" }] : /* istanbul ignore next */ []));
+    effect(() => {
+        const nextState = nav.register({
+            id: normalizedNavId(),
+            orientation: inputs.orientation(),
+            appearance: inputs.appearance(),
+            position: inputs.position(),
+            collapsed: collapsedPreference(),
+            dockbarMode: inputs.dockbarMode(),
+        });
+        if (previousRegisteredId && previousRegisteredId !== nextState.id) {
+            nav.unregister(previousRegisteredId);
+        }
+        previousRegisteredId = nextState.id;
+        registeredState.set(nextState);
+    });
+    destroyRef.onDestroy(() => {
+        if (previousRegisteredId) {
+            nav.unregister(previousRegisteredId);
+        }
+    });
+    return {
+        normalizedNavId,
+        normalizedItems,
+        resolvedState,
+        activeIdSet,
+        toggleCollapsed: () => nav.toggleCollapsed(normalizedNavId()),
+    };
+}
+function normalizeId(value) {
+    return value.trim() || 'default';
+}
+function fallbackAppearance(orientation, appearance) {
+    if (orientation === 'vertical' && (appearance === 'sidebar' || appearance === 'dockbar')) {
+        return appearance;
+    }
+    if (orientation === 'horizontal' && (appearance === 'navbar' || appearance === 'flyout')) {
+        return appearance;
+    }
+    return orientation === 'horizontal' ? 'navbar' : 'sidebar';
+}
+
+class NavItemContentComponent {
+    nav = inject(NavService);
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    iconSlotClasses = computed(() => cn('relative z-10 inline-flex shrink-0 items-center justify-center transition-[border-color,background-color,color,box-shadow] duration-200', this.orientation() === 'vertical'
+        ? this.compact()
+            ? 'h-8 w-8 rounded-full border'
+            : 'h-7 w-7 rounded-full border'
+        : 'h-5 w-5 rounded-full border border-transparent', this.usesStraightVerticalSurface() && 'overflow-hidden bg-background/85 backdrop-blur-sm border-transparent', this.active() && !this.usesStraightVerticalSurface() ? 'border-primary text-current' : 'border-transparent', this.active() && this.usesStraightVerticalSurface() && 'text-current', this.compact() && 'mx-auto'), ...(ngDevMode ? [{ debugName: "iconSlotClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => cn('block truncate', this.active() && 'font-semibold text-foreground', this.item().classes?.title), ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    showSubtitle = computed(() => !!this.item().subtitle && !(this.orientation() === 'horizontal' && this.level() === 0), ...(ngDevMode ? [{ debugName: "showSubtitle" }] : /* istanbul ignore next */ []));
+    subtitleClasses = computed(() => cn('block truncate text-xs font-normal text-muted-foreground', this.item().classes?.subtitle), ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : /* istanbul ignore next */ []));
+    compactFallbackClasses = computed(() => cn('inline-flex h-5 min-w-5 items-center justify-center text-xs font-semibold uppercase'), ...(ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []));
+    defaultBadgeClasses = computed(() => cn('ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2 text-xs font-medium', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), ...(ngDevMode ? [{ debugName: "defaultBadgeClasses" }] : /* istanbul ignore next */ []));
+    defaultIconClasses = computed(() => cn('inline-flex h-4 w-4 shrink-0 rounded-full border', this.usesStraightVerticalSurface()
+        ? 'border-transparent bg-transparent'
+        : this.active()
+            ? 'border-primary'
+            : 'border-border bg-muted', this.item().classes?.icon), ...(ngDevMode ? [{ debugName: "defaultIconClasses" }] : /* istanbul ignore next */ []));
+    iconContext = computed(() => this.nav.iconContext(this.item(), this.active(), this.level(), this.orientation()), ...(ngDevMode ? [{ debugName: "iconContext" }] : /* istanbul ignore next */ []));
+    compactFallback() {
+        return this.nav.compactFallback(this.item());
+    }
+    usesStraightVerticalSurface() {
+        return this.orientation() === 'vertical' && !this.compact() && this.collapseTree() === 'straight';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NavItemContentComponent, isStandalone: true, selector: "ui-nav-item-content", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @if (item().icon) {
+      <span data-ui-nav-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container [ngTemplateOutlet]="customIcon.template" [ngTemplateOutletContext]="iconContext()" />
+        } @else {
+          <span aria-hidden="true" [class]="defaultIconClasses()" [attr.data-icon]="item().icon"></span>
+        }
+      </span>
+    }
+
+    @if (!compact()) {
+      <span class="min-w-0 flex-1">
+        <span [class]="titleClasses()">{{ item().title }}</span>
+        @if (showSubtitle()) {
+          <span [class]="subtitleClasses()">{{ item().subtitle }}</span>
+        }
+      </span>
+
+      @if (item().badge; as badge) {
+        <span [class]="badge.classes ?? defaultBadgeClasses()">{{ badge.title }}</span>
+      }
+    }
+
+    @if (compact() && !item().icon) {
+      <span aria-hidden="true" [class]="compactFallbackClasses()">{{ compactFallback() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-item-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @if (item().icon) {
+      <span data-ui-nav-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container [ngTemplateOutlet]="customIcon.template" [ngTemplateOutletContext]="iconContext()" />
+        } @else {
+          <span aria-hidden="true" [class]="defaultIconClasses()" [attr.data-icon]="item().icon"></span>
+        }
+      </span>
+    }
+
+    @if (!compact()) {
+      <span class="min-w-0 flex-1">
+        <span [class]="titleClasses()">{{ item().title }}</span>
+        @if (showSubtitle()) {
+          <span [class]="subtitleClasses()">{{ item().subtitle }}</span>
+        }
+      </span>
+
+      @if (item().badge; as badge) {
+        <span [class]="badge.classes ?? defaultBadgeClasses()">{{ badge.title }}</span>
+      }
+    }
+
+    @if (compact() && !item().icon) {
+      <span aria-hidden="true" [class]="compactFallbackClasses()">{{ compactFallback() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }] } });
+
+class NavItemComponent {
+    nav = inject(NavService);
+    navId = input('default', ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    straightRail = input(false, ...(ngDevMode ? [{ debugName: "straightRail" }] : /* istanbul ignore next */ []));
+    straightRailActive = input(false, ...(ngDevMode ? [{ debugName: "straightRailActive" }] : /* istanbul ignore next */ []));
+    firstInBranch = input(false, ...(ngDevMode ? [{ debugName: "firstInBranch" }] : /* istanbul ignore next */ []));
+    lastInBranch = input(false, ...(ngDevMode ? [{ debugName: "lastInBranch" }] : /* istanbul ignore next */ []));
+    openedIds = input([], ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    openedIdSet = computed(() => new Set(this.openedIds()), ...(ngDevMode ? [{ debugName: "openedIdSet" }] : /* istanbul ignore next */ []));
+    isHorizontalRoot = computed(() => this.orientation() === 'horizontal' && this.level() === 0, ...(ngDevMode ? [{ debugName: "isHorizontalRoot" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => this.nav.isItemActive(this.item(), this.activeIds(), this.activeUrl()), ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    showChildren = computed(() => !this.compact() && this.isOpen(), ...(ngDevMode ? [{ debugName: "showChildren" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        if (this.item().type === 'divider') {
+            return this.dividerClasses();
+        }
+        if (this.item().type === 'spacer') {
+            return 'flex-1';
+        }
+        if (this.item().type === 'group' || this.item().type === 'mega') {
+            return this.groupContainerClasses();
+        }
+        return this.itemContainerClasses();
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    hostRole = computed(() => {
+        if (this.item().type === 'divider') {
+            return 'separator';
+        }
+        return this.orientation() === 'horizontal' ? 'none' : null;
+    }, ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    headingId = computed(() => `${this.item().panelId}-heading`, ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
+    isRouterItem() {
+        return this.nav.isRouterItem(this.item());
+    }
+    hrefFor() {
+        return this.nav.hrefFor(this.item());
+    }
+    relFor() {
+        return this.nav.relFor(this.item());
+    }
+    routerLinkActiveOptions() {
+        return this.nav.routerLinkActiveOptions(this.item());
+    }
+    itemRole() {
+        return this.nav.itemRole(this.orientation(), this.level());
+    }
+    compactLabel() {
+        return this.nav.compactLabel(this.item(), this.compact());
+    }
+    titleFor() {
+        return this.nav.titleFor(this.item(), this.compact());
+    }
+    isOpen() {
+        return this.openedIdSet().has(this.item().stateId) || this.openedIdSet().has(this.item().key) || this.isActive();
+    }
+    toggleOpen() {
+        if (this.item().disabled) {
+            return;
+        }
+        const next = new Set(this.openedIds());
+        if (next.has(this.item().stateId)) {
+            next.delete(this.item().stateId);
+        }
+        else {
+            next.add(this.item().stateId);
+        }
+        this.openedIdsChange.emit([...next]);
+    }
+    selectItem(event) {
+        if (this.item().disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.item().action?.(this.item().source);
+        this.itemSelected.emit({
+            item: this.item().source,
+            key: this.item().key,
+            type: this.item().type,
+            link: this.item().link,
+            external: !!this.hrefFor(),
+        });
+        this.nav.closePanel(this.navId());
+        this.nav.closeDrawer(this.navId());
+    }
+    leafClasses(active) {
+        return cn('ui-nav-item group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().disabled && 'pointer-events-none opacity-50', this.item().classes?.wrapper, this.itemClass());
+    }
+    triggerClasses(active) {
+        return cn('ui-nav-trigger group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
+    }
+    interactiveStateClasses(active) {
+        const showsNestedActiveConnector = active &&
+            this.orientation() === 'vertical' &&
+            !this.compact() &&
+            this.level() > 1 &&
+            this.collapseTree() === 'stairs';
+        if (this.orientation() === 'vertical' && !this.compact()) {
+            return cn('relative isolate', "before:pointer-events-none before:absolute before:inset-y-0 before:left-2 before:right-2 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-transparent before:transition-colors before:duration-200 before:content-['']", showsNestedActiveConnector &&
+                "after:pointer-events-none after:absolute after:-left-2 after:top-1/2 after:-z-10 after:h-px after:w-5 after:-translate-y-1/2 after:rounded-full after:bg-current/25 after:content-['']", active
+                ? 'font-semibold text-foreground hover:before:border-primary'
+                : 'text-foreground/80 hover:text-accent-foreground hover:before:border-primary hover:before:bg-accent');
+        }
+        return active ? 'font-semibold text-foreground' : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground';
+    }
+    chevronClasses() {
+        return cn('ml-auto shrink-0 text-base leading-none transition-transform', this.isOpen() && 'rotate-90');
+    }
+    itemContainerClasses() {
+        return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'relative' : 'w-full', this.compact() && 'flex justify-center', this.straightRailClasses());
+    }
+    groupContainerClasses() {
+        return cn('w-full', this.level() > 0 && 'pt-2');
+    }
+    dividerClasses() {
+        return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'mx-1 h-5 w-px' : 'my-2 w-full px-2');
+    }
+    groupHeadingClasses() {
+        return cn('px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground', this.item().classes?.title);
+    }
+    childListClasses() {
+        const isGroupedBranch = this.item().type === 'group' || this.item().type === 'mega';
+        const usesStairsTree = this.collapseTree() === 'stairs';
+        return cn('flex list-none flex-col gap-0.5 p-0', !this.compact() && 'mt-0.5', this.level() >= 0 &&
+            !this.compact() &&
+            !isGroupedBranch &&
+            usesStairsTree &&
+            cn("relative ml-[1.625rem] pl-2 before:absolute before:-top-2 before:bottom-0 before:left-0 before:w-px before:-translate-x-1/2 before:rounded-full before:content-['']", this.isActive() ? 'before:bg-current/25' : 'before:bg-border'));
+    }
+    showStraightRailForChildren() {
+        return (!this.compact() &&
+            this.collapseTree() === 'straight' &&
+            this.item().type !== 'group' &&
+            this.item().type !== 'mega');
+    }
+    straightRailClasses() {
+        if (!this.straightRail() || this.orientation() !== 'vertical' || this.compact()) {
+            return '';
+        }
+        return cn('relative', "before:pointer-events-none before:absolute before:left-[1.625rem] before:w-0 before:-z-10 before:border-l before:border-dotted before:content-['']", this.straightRailActive() ? 'before:border-primary/50' : 'before:border-border/50', this.firstInBranch() ? 'before:-top-9' : 'before:-top-0.5', this.lastInBranch() ? 'before:bottom-[calc(100%-1.25rem)]' : 'before:-bottom-0.5');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NavItemComponent, isStandalone: true, selector: "li[ui-nav-item]", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", 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 }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, straightRail: { classPropertyName: "straightRail", publicName: "straightRail", isSignal: true, isRequired: false, transformFunction: null }, straightRailActive: { classPropertyName: "straightRailActive", publicName: "straightRailActive", isSignal: true, isRequired: false, transformFunction: null }, firstInBranch: { classPropertyName: "firstInBranch", publicName: "firstInBranch", isSignal: true, isRequired: false, transformFunction: null }, lastInBranch: { classPropertyName: "lastInBranch", publicName: "lastInBranch", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.role": "hostRole()", "attr.data-ui-nav-item-key": "item().key", "attr.aria-hidden": "item().type === \"spacer\" ? \"true\" : null" } }, ngImport: i0, template: `
+    @switch (item().type) {
+      @case ('divider') {
+        <span class="block h-px w-full bg-border"></span>
+      }
+
+      @case ('spacer') {}
+
+      @case ('group') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              ui-nav-item
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-controls]="item().panelId"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()">
+          <ui-nav-item-content
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [collapseTree]="collapseTree()"
+            [iconTemplate]="iconTemplate()" />
+
+          @if (!compact()) {
+            <span aria-hidden="true" [class]="chevronClasses()">›</span>
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="item().panelId" [class]="childListClasses()" role="group">
+            @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+              <li
+                ui-nav-item
+                [navId]="navId()"
+                [item]="child"
+                [level]="level() + 1"
+                [orientation]="orientation()"
+                [compact]="false"
+                [itemClass]="itemClass()"
+                [activeIds]="activeIds()"
+                [activeUrl]="activeUrl()"
+                [iconTemplate]="iconTemplate()"
+                [collapseTree]="collapseTree()"
+                [straightRail]="showStraightRailForChildren()"
+                [straightRailActive]="isActive()"
+                [firstInBranch]="isFirst"
+                [lastInBranch]="isLast"
+                [openedIds]="openedIds()"
+                (openedIdsChange)="openedIdsChange.emit($event)"
+                (itemSelected)="itemSelected.emit($event)"></li>
+            }
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              ui-nav-item
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="item().link ?? null"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-ui-nav-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <ui-nav-item-content
+              [item]="item()"
+              [active]="routerActive.isActive || isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefFor()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-ui-nav-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <ui-nav-item-content
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="leafClasses(isActive())"
+            [disabled]="item().disabled || null"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-ui-nav-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <ui-nav-item-content
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </button>
+        }
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavItemComponent, selector: "li[ui-nav-item]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NavItemContentComponent, selector: "ui-nav-item-content", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[ui-nav-item]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterLink, RouterLinkActive, NavItemContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'hostRole()',
+                        '[attr.data-ui-nav-item-key]': 'item().key',
+                        '[attr.aria-hidden]': 'item().type === "spacer" ? "true" : null',
+                    },
+                    template: `
+    @switch (item().type) {
+      @case ('divider') {
+        <span class="block h-px w-full bg-border"></span>
+      }
+
+      @case ('spacer') {}
+
+      @case ('group') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              ui-nav-item
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-controls]="item().panelId"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()">
+          <ui-nav-item-content
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [collapseTree]="collapseTree()"
+            [iconTemplate]="iconTemplate()" />
+
+          @if (!compact()) {
+            <span aria-hidden="true" [class]="chevronClasses()">›</span>
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="item().panelId" [class]="childListClasses()" role="group">
+            @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+              <li
+                ui-nav-item
+                [navId]="navId()"
+                [item]="child"
+                [level]="level() + 1"
+                [orientation]="orientation()"
+                [compact]="false"
+                [itemClass]="itemClass()"
+                [activeIds]="activeIds()"
+                [activeUrl]="activeUrl()"
+                [iconTemplate]="iconTemplate()"
+                [collapseTree]="collapseTree()"
+                [straightRail]="showStraightRailForChildren()"
+                [straightRailActive]="isActive()"
+                [firstInBranch]="isFirst"
+                [lastInBranch]="isLast"
+                [openedIds]="openedIds()"
+                (openedIdsChange)="openedIdsChange.emit($event)"
+                (itemSelected)="itemSelected.emit($event)"></li>
+            }
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              ui-nav-item
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="item().link ?? null"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-ui-nav-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <ui-nav-item-content
+              [item]="item()"
+              [active]="routerActive.isActive || isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefFor()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-ui-nav-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <ui-nav-item-content
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="leafClasses(isActive())"
+            [disabled]="item().disabled || null"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-ui-nav-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <ui-nav-item-content
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </button>
+        }
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], straightRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRail", required: false }] }], straightRailActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRailActive", required: false }] }], firstInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInBranch", required: false }] }], lastInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInBranch", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavHorizontalComponent {
+    nav = inject(NavService);
+    host = inject(ElementRef);
+    navId = input('default', ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    appearance = input('navbar', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    listClasses = computed(() => cn('flex min-w-0 list-none p-0', this.appearance() === 'flyout'
+        ? 'items-center gap-2'
+        : this.compact()
+            ? 'justify-center gap-1'
+            : 'items-center justify-center gap-1'), ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    isItemActive(item) {
+        return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    isPanelOpen(item) {
+        return this.nav.isPanelOpen(this.navId(), item);
+    }
+    openPanel(item) {
+        this.nav.openPanel(this.navId(), item);
+    }
+    togglePanel(item) {
+        this.nav.togglePanel(this.navId(), item);
+    }
+    compactLabel(item) {
+        return this.nav.compactLabel(item, this.compact());
+    }
+    titleFor(item) {
+        return this.nav.titleFor(item, this.compact());
+    }
+    triggerClasses(item) {
+        return cn('ui-nav-trigger group/nav inline-flex min-w-0 items-center gap-3 rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.appearance() === 'flyout'
+            ? 'h-10 rounded-full border border-border/60 px-4 py-2 shadow-sm'
+            : 'h-9 px-3 py-2', this.compact() && 'w-10 justify-center px-0', this.isItemActive(item)
+            ? 'bg-accent text-accent-foreground'
+            : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', item.classes?.wrapper, this.itemClass());
+    }
+    chevronClasses(item) {
+        return cn('ml-auto shrink-0 text-base leading-none transition-transform', this.isPanelOpen(item) && 'rotate-180');
+    }
+    panelClasses(item) {
+        return cn(this.appearance() === 'flyout'
+            ? 'absolute left-0 top-[calc(100%+0.75rem)] z-50 rounded-2xl border border-border/70 bg-background/95 p-3 text-foreground shadow-2xl backdrop-blur'
+            : 'absolute left-0 top-full z-50 mt-2 rounded-xl border border-border bg-popover p-2 text-popover-foreground shadow-lg', item.type === 'mega' ? 'w-[min(92vw,44rem)]' : 'min-w-56');
+    }
+    panelListClasses(item) {
+        const columns = Math.min(Math.max(item.columns ?? (item.type === 'mega' ? 2 : 1), 1), 4);
+        return cn('grid list-none gap-1 p-0', columns === 2 && 'md:grid-cols-2', columns === 3 && 'md:grid-cols-3', columns === 4 && 'md:grid-cols-4');
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            const panelKey = this.nav.currentPanelKey(this.navId());
+            this.nav.closePanel(this.navId());
+            this.focusOpenPanelTrigger(panelKey);
+            return;
+        }
+        const rootItems = this.rootFocusItems();
+        if (rootItems.length === 0) {
+            return;
+        }
+        const currentIndex = rootItems.indexOf(document.activeElement);
+        if (currentIndex === -1) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            const currentItem = rootItems[currentIndex];
+            if (currentItem.getAttribute('aria-haspopup') === 'menu') {
+                event.preventDefault();
+                currentItem.click();
+                queueMicrotask(() => this.focusFirstPanelItem(this.nav.currentPanelKey(this.navId())));
+            }
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const direction = event.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + direction + rootItems.length) % rootItems.length;
+            rootItems[nextIndex]?.focus();
+        }
+    }
+    onPanelKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        const panelKey = this.nav.currentPanelKey(this.navId());
+        this.nav.closePanel(this.navId());
+        this.focusOpenPanelTrigger(panelKey);
+    }
+    rootFocusItems() {
+        return Array.from(this.host.nativeElement.querySelectorAll('[data-ui-nav-root-item="true"]'));
+    }
+    focusOpenPanelTrigger(panelKey) {
+        if (!panelKey) {
+            return;
+        }
+        const trigger = this.host.nativeElement.querySelector(`[data-ui-nav-item-key="${panelKey}"] [data-ui-nav-root-item="true"]`);
+        trigger?.focus();
+    }
+    focusFirstPanelItem(panelKey) {
+        if (!panelKey) {
+            return;
+        }
+        const panel = this.host.nativeElement.querySelector(`[data-ui-nav-panel="${panelKey}"]`);
+        const item = panel?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        item?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NavHorizontalComponent, isStandalone: true, selector: "ui-nav-horizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", 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 }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: `
+    <ul [class]="listClasses()" role="menubar" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('collapsible') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('mega') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @default {
+            <li
+              ui-nav-item
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li role="none" class="relative" [attr.data-ui-nav-item-key]="item.key">
+        <button
+          type="button"
+          role="menuitem"
+          data-ui-nav-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="item.panelId"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)"
+          (mouseenter)="openPanel(item)">
+          <ui-nav-item-content
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()" />
+          <span aria-hidden="true" [class]="chevronClasses(item)">⌄</span>
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="item.panelId"
+            role="menu"
+            [class]="panelClasses(item)"
+            [attr.data-ui-nav-panel]="item.key"
+            (keydown)="onPanelKeydown($event)">
+            <ul [class]="panelListClasses(item)" role="none">
+              @for (child of item.children; track child.key) {
+                <li
+                  ui-nav-item
+                  [navId]="navId()"
+                  [item]="child"
+                  [level]="1"
+                  [orientation]="'horizontal'"
+                  [compact]="false"
+                  [itemClass]="itemClass()"
+                  [activeIds]="activeIds()"
+                  [activeUrl]="activeUrl()"
+                  [iconTemplate]="iconTemplate()"
+                  [collapseTree]="collapseTree()"
+                  [openedIds]="openedIds()"
+                  (openedIdsChange)="openedIdsChange.emit($event)"
+                  (itemSelected)="itemSelected.emit($event)"></li>
+              }
+            </ul>
+          </div>
+        }
+      </li>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavItemComponent, selector: "li[ui-nav-item]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavItemContentComponent, selector: "ui-nav-item-content", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-horizontal',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, NavItemComponent, NavItemContentComponent],
+                    host: {
+                        class: 'block w-full',
+                    },
+                    template: `
+    <ul [class]="listClasses()" role="menubar" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('collapsible') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('mega') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @default {
+            <li
+              ui-nav-item
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li role="none" class="relative" [attr.data-ui-nav-item-key]="item.key">
+        <button
+          type="button"
+          role="menuitem"
+          data-ui-nav-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="item.panelId"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)"
+          (mouseenter)="openPanel(item)">
+          <ui-nav-item-content
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()" />
+          <span aria-hidden="true" [class]="chevronClasses(item)">⌄</span>
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="item.panelId"
+            role="menu"
+            [class]="panelClasses(item)"
+            [attr.data-ui-nav-panel]="item.key"
+            (keydown)="onPanelKeydown($event)">
+            <ul [class]="panelListClasses(item)" role="none">
+              @for (child of item.children; track child.key) {
+                <li
+                  ui-nav-item
+                  [navId]="navId()"
+                  [item]="child"
+                  [level]="1"
+                  [orientation]="'horizontal'"
+                  [compact]="false"
+                  [itemClass]="itemClass()"
+                  [activeIds]="activeIds()"
+                  [activeUrl]="activeUrl()"
+                  [iconTemplate]="iconTemplate()"
+                  [collapseTree]="collapseTree()"
+                  [openedIds]="openedIds()"
+                  (openedIdsChange)="openedIdsChange.emit($event)"
+                  (itemSelected)="itemSelected.emit($event)"></li>
+              }
+            </ul>
+          </div>
+        }
+      </li>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavFlyoutComponent {
+    navId = input('default', ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NavFlyoutComponent, isStandalone: true, selector: "ui-nav-flyout", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", 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 }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: `
+    <ui-nav-horizontal
+      [navId]="navId()"
+      [appearance]="'flyout'"
+      [items]="items()"
+      [compact]="compact()"
+      [itemClass]="itemClass()"
+      [activeIds]="activeIds()"
+      [activeUrl]="activeUrl()"
+      [iconTemplate]="iconTemplate()"
+      [collapseTree]="collapseTree()"
+      [openedIds]="openedIds()"
+      (openedIdsChange)="openedIdsChange.emit($event)"
+      (itemSelected)="itemSelected.emit($event)" />
+  `, isInline: true, dependencies: [{ kind: "component", type: NavHorizontalComponent, selector: "ui-nav-horizontal", inputs: ["navId", "appearance", "items", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavFlyoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-flyout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NavHorizontalComponent],
+                    host: {
+                        class: 'block w-full',
+                    },
+                    template: `
+    <ui-nav-horizontal
+      [navId]="navId()"
+      [appearance]="'flyout'"
+      [items]="items()"
+      [compact]="compact()"
+      [itemClass]="itemClass()"
+      [activeIds]="activeIds()"
+      [activeUrl]="activeUrl()"
+      [iconTemplate]="iconTemplate()"
+      [collapseTree]="collapseTree()"
+      [openedIds]="openedIds()"
+      (openedIdsChange)="openedIdsChange.emit($event)"
+      (itemSelected)="itemSelected.emit($event)" />
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavNavbarComponent {
+    navId = input('default', ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: NavNavbarComponent, isStandalone: true, selector: "ui-nav-navbar", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", 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 }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: `
+    <ui-nav-horizontal
+      [navId]="navId()"
+      [appearance]="'navbar'"
+      [items]="items()"
+      [compact]="compact()"
+      [itemClass]="itemClass()"
+      [activeIds]="activeIds()"
+      [activeUrl]="activeUrl()"
+      [iconTemplate]="iconTemplate()"
+      [collapseTree]="collapseTree()"
+      [openedIds]="openedIds()"
+      (openedIdsChange)="openedIdsChange.emit($event)"
+      (itemSelected)="itemSelected.emit($event)" />
+  `, isInline: true, dependencies: [{ kind: "component", type: NavHorizontalComponent, selector: "ui-nav-horizontal", inputs: ["navId", "appearance", "items", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavNavbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-navbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NavHorizontalComponent],
+                    host: {
+                        class: 'block w-full',
+                    },
+                    template: `
+    <ui-nav-horizontal
+      [navId]="navId()"
+      [appearance]="'navbar'"
+      [items]="items()"
+      [compact]="compact()"
+      [itemClass]="itemClass()"
+      [activeIds]="activeIds()"
+      [activeUrl]="activeUrl()"
+      [iconTemplate]="iconTemplate()"
+      [collapseTree]="collapseTree()"
+      [openedIds]="openedIds()"
+      (openedIdsChange)="openedIdsChange.emit($event)"
+      (itemSelected)="itemSelected.emit($event)" />
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavSidebarComponent {
+    navId = input('default', ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    isCollapsed = computed(() => this.collapsed() || this.compact(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('block', this.position() === 'right' && 'items-end text-right'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => this.isCollapsed()
+        ? cn('flex list-none flex-col items-center gap-0.5 p-0')
+        : cn('flex list-none flex-col gap-0.5 p-0', this.position() === 'right' && 'items-end'), ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NavSidebarComponent, isStandalone: true, selector: "ui-nav-sidebar", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", 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 }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    <ul [class]="listClasses()" role="list">
+      @for (item of items(); track item.key) {
+        <li
+          ui-nav-item
+          [navId]="navId()"
+          [item]="item"
+          [level]="0"
+          [orientation]="'vertical'"
+          [compact]="isCollapsed()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIds()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTemplate()"
+          [collapseTree]="collapseTree()"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)"></li>
+      }
+    </ul>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavItemComponent, selector: "li[ui-nav-item]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavSidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-sidebar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NavItemComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-position]': 'position()',
+                    },
+                    template: `
+    <ul [class]="listClasses()" role="list">
+      @for (item of items(); track item.key) {
+        <li
+          ui-nav-item
+          [navId]="navId()"
+          [item]="item"
+          [level]="0"
+          [orientation]="'vertical'"
+          [compact]="isCollapsed()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIds()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTemplate()"
+          [collapseTree]="collapseTree()"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)"></li>
+      }
+    </ul>
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavDockbarComponent {
+    nav = inject(NavService);
+    host = inject(ElementRef);
+    navId = input('default', ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    mode = input('sticky', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    isDrawerMode = computed(() => this.mode() === 'drawer', ...(ngDevMode ? [{ debugName: "isDrawerMode" }] : /* istanbul ignore next */ []));
+    isDrawerOpen = computed(() => this.nav.isDrawerOpen(this.navId()), ...(ngDevMode ? [{ debugName: "isDrawerOpen" }] : /* istanbul ignore next */ []));
+    panelId = computed(() => `ui-nav-dockbar-${this.safeId(this.navId())}`, ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('block', this.isDrawerMode() ? 'w-auto' : 'w-16', this.position() === 'right' && 'justify-self-end'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    railClasses = computed(() => cn('flex min-h-full w-16 justify-center rounded-2xl border border-border/60 bg-background/70 px-2 py-3 backdrop-blur', this.position() === 'right' && 'ml-auto'), ...(ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []));
+    triggerClasses() {
+        return cn('inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-border/60 bg-background/80 text-foreground shadow-sm transition-colors', 'hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring');
+    }
+    drawerClasses() {
+        return cn('fixed bottom-4 top-4 z-50 w-72 overflow-y-auto rounded-2xl border border-border bg-background p-4 shadow-2xl', this.position() === 'right' ? 'right-4' : 'left-4');
+    }
+    toggleDrawer() {
+        const wasOpen = this.isDrawerOpen();
+        this.nav.toggleDrawer(this.navId());
+        if (wasOpen) {
+            queueMicrotask(() => this.focusTrigger());
+            return;
+        }
+        queueMicrotask(() => this.focusFirstDrawerItem());
+    }
+    closeDrawer() {
+        if (!this.isDrawerOpen()) {
+            return;
+        }
+        this.nav.closeDrawer(this.navId());
+        queueMicrotask(() => this.focusTrigger());
+    }
+    onDrawerKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        this.closeDrawer();
+    }
+    focusFirstDrawerItem() {
+        const panel = this.host.nativeElement.querySelector(`#${this.panelId()}`);
+        const focusable = panel?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        focusable?.focus();
+    }
+    focusTrigger() {
+        const trigger = this.host.nativeElement.querySelector('[data-ui-nav-dockbar-trigger="true"]');
+        trigger?.focus();
+    }
+    safeId(value) {
+        const normalized = value
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9_-]+/g, '-');
+        return normalized || 'default';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavDockbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NavDockbarComponent, isStandalone: true, selector: "ui-nav-dockbar", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", 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 }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.data-mode": "mode()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    @if (isDrawerMode()) {
+      <div class="relative">
+        <button
+          type="button"
+          data-ui-nav-dockbar-trigger="true"
+          [class]="triggerClasses()"
+          [attr.aria-expanded]="isDrawerOpen()"
+          [attr.aria-controls]="panelId()"
+          aria-haspopup="dialog"
+          aria-label="Open navigation drawer"
+          (click)="toggleDrawer()">
+          <span aria-hidden="true" class="text-lg leading-none">☰</span>
+        </button>
+
+        @if (isDrawerOpen()) {
+          <div class="fixed inset-0 z-40 bg-black/40" aria-hidden="true" (click)="closeDrawer()"></div>
+
+          <aside
+            [id]="panelId()"
+            [class]="drawerClasses()"
+            role="dialog"
+            aria-modal="true"
+            (keydown)="onDrawerKeydown($event)">
+            <div class="mb-3 flex items-center justify-between gap-3 px-1">
+              <span class="text-sm font-semibold text-foreground">Navigation</span>
+              <button
+                type="button"
+                class="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                (click)="closeDrawer()">
+                Close
+              </button>
+            </div>
+
+            <ui-nav-sidebar
+              [navId]="navId()"
+              [items]="items()"
+              [collapsed]="false"
+              [position]="position()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)" />
+          </aside>
+        }
+      </div>
+    } @else {
+      <div [class]="railClasses()">
+        <ui-nav-sidebar
+          [navId]="navId()"
+          [items]="items()"
+          [collapsed]="true"
+          [position]="position()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIds()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTemplate()"
+          [collapseTree]="collapseTree()"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)" />
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavSidebarComponent, selector: "ui-nav-sidebar", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavDockbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-dockbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NavSidebarComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-mode]': 'mode()',
+                        '[attr.data-position]': 'position()',
+                    },
+                    template: `
+    @if (isDrawerMode()) {
+      <div class="relative">
+        <button
+          type="button"
+          data-ui-nav-dockbar-trigger="true"
+          [class]="triggerClasses()"
+          [attr.aria-expanded]="isDrawerOpen()"
+          [attr.aria-controls]="panelId()"
+          aria-haspopup="dialog"
+          aria-label="Open navigation drawer"
+          (click)="toggleDrawer()">
+          <span aria-hidden="true" class="text-lg leading-none">☰</span>
+        </button>
+
+        @if (isDrawerOpen()) {
+          <div class="fixed inset-0 z-40 bg-black/40" aria-hidden="true" (click)="closeDrawer()"></div>
+
+          <aside
+            [id]="panelId()"
+            [class]="drawerClasses()"
+            role="dialog"
+            aria-modal="true"
+            (keydown)="onDrawerKeydown($event)">
+            <div class="mb-3 flex items-center justify-between gap-3 px-1">
+              <span class="text-sm font-semibold text-foreground">Navigation</span>
+              <button
+                type="button"
+                class="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                (click)="closeDrawer()">
+                Close
+              </button>
+            </div>
+
+            <ui-nav-sidebar
+              [navId]="navId()"
+              [items]="items()"
+              [collapsed]="false"
+              [position]="position()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)" />
+          </aside>
+        }
+      </div>
+    } @else {
+      <div [class]="railClasses()">
+        <ui-nav-sidebar
+          [navId]="navId()"
+          [items]="items()"
+          [collapsed]="true"
+          [position]="position()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIds()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTemplate()"
+          [collapseTree]="collapseTree()"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)" />
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class UiNavOutletComponent {
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: UiNavOutletComponent, isStandalone: true, selector: "ui-nav-outlet", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", 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 }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, ngImport: i0, template: `
+    @let navState = state();
+
+    @if (navState.orientation === 'horizontal' && navState.appearance === 'flyout') {
+      <ui-nav-flyout
+        [navId]="navState.id"
+        [items]="items()"
+        [compact]="compact()"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    } @else if (navState.orientation === 'horizontal') {
+      <ui-nav-navbar
+        [navId]="navState.id"
+        [items]="items()"
+        [compact]="compact()"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    } @else if (navState.appearance === 'dockbar') {
+      <ui-nav-dockbar
+        [navId]="navState.id"
+        [items]="items()"
+        [mode]="navState.dockbarMode"
+        [position]="navState.position"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    } @else {
+      <ui-nav-sidebar
+        [navId]="navState.id"
+        [items]="items()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavDockbarComponent, selector: "ui-nav-dockbar", inputs: ["navId", "items", "mode", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavFlyoutComponent, selector: "ui-nav-flyout", inputs: ["navId", "items", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavNavbarComponent, selector: "ui-nav-navbar", inputs: ["navId", "items", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavSidebarComponent, selector: "ui-nav-sidebar", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavOutletComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-outlet',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NavDockbarComponent, NavFlyoutComponent, NavNavbarComponent, NavSidebarComponent],
+                    template: `
+    @let navState = state();
+
+    @if (navState.orientation === 'horizontal' && navState.appearance === 'flyout') {
+      <ui-nav-flyout
+        [navId]="navState.id"
+        [items]="items()"
+        [compact]="compact()"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    } @else if (navState.orientation === 'horizontal') {
+      <ui-nav-navbar
+        [navId]="navState.id"
+        [items]="items()"
+        [compact]="compact()"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    } @else if (navState.appearance === 'dockbar') {
+      <ui-nav-dockbar
+        [navId]="navState.id"
+        [items]="items()"
+        [mode]="navState.dockbarMode"
+        [position]="navState.position"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    } @else {
+      <ui-nav-sidebar
+        [navId]="navState.id"
+        [items]="items()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="itemClass()"
+        [activeIds]="activeIds()"
+        [activeUrl]="activeUrl()"
+        [iconTemplate]="iconTemplate()"
+        [collapseTree]="collapseTree()"
+        [openedIds]="openedIds()"
+        (openedIdsChange)="openedIdsChange.emit($event)"
+        (itemSelected)="itemSelected.emit($event)" />
+    }
+  `,
+                }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+const UI_NAV_SHELL = new InjectionToken('UI_NAV_SHELL');
+
+class UiNavFooterComponent {
+    shell = inject(UI_NAV_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 */ []));
+    hostClasses = computed(() => cn(this.isHorizontal()
+        ? 'relative z-10 block h-full w-auto shrink-0'
+        : 'sticky bottom-0 z-10 block h-12 shrink-0 border-t border-border/70', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: UiNavFooterComponent, isStandalone: true, selector: "ui-nav-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="flex h-full items-center">
+      <ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-footer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    <div class="flex h-full items-center">
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UiNavHeaderComponent {
+    shell = inject(UI_NAV_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() && !this.displayCollapsed());
+    }, ...(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 */ []));
+    contentClasses = computed(() => (this.isHorizontal() ? 'min-w-0' : 'min-w-0 flex-1'), ...(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-12 shrink-0 border-b border-border/70', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    toggleCollapsed() {
+        this.shell.toggleCollapsed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: UiNavHeaderComponent, isStandalone: true, selector: "ui-nav-header", 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="flex h-full items-center gap-3 px-3">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex h-8 w-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-ui-nav-header-toggle="true"
+          (click)="toggleCollapsed()">
+          <span
+            aria-hidden="true"
+            data-ui-nav-header-toggle-icon="true"
+            class="material-symbols-outlined leading-none"
+            style="font-size: 18px; line-height: 18px;">
+            {{ toggleIconName() }}
+          </span>
+        </button>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'displayCollapsed()',
+                    },
+                    template: `
+    <div class="flex h-full items-center gap-3 px-3">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex h-8 w-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-ui-nav-header-toggle="true"
+          (click)="toggleCollapsed()">
+          <span
+            aria-hidden="true"
+            data-ui-nav-header-toggle-icon="true"
+            class="material-symbols-outlined leading-none"
+            style="font-size: 18px; line-height: 18px;">
+            {{ toggleIconName() }}
+          </span>
+        </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 }] }] } });
+
+class UiNavMainComponent {
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('min-h-0 flex-1', this.orientation() === 'horizontal'
+        ? 'flex h-full min-w-0 items-stretch justify-center overflow-visible'
+        : 'block overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: UiNavMainComponent, isStandalone: true, selector: "ui-nav-main", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavMainComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-main',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: ` <ng-content /> `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+class UiNavComponent {
+    navId = input('default', { ...(ngDevMode ? { debugName: "navId" } : /* istanbul ignore next */ {}), alias: 'id' });
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    appearance = input(null, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    position = input(null, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    collapsed = input(null, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    dockbarMode = input(null, ...(ngDevMode ? [{ debugName: "dockbarMode" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    previewExpanded = input(false, ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
+    sidebarCollapse = input(false, { ...(ngDevMode ? { debugName: "sidebarCollapse" } : /* istanbul ignore next */ {}), alias: 'nav-sidebar-collapse', transform: booleanAttribute });
+    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 */ []));
+    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();
+    hoverPreviewExpanded = signal(false, ...(ngDevMode ? [{ debugName: "hoverPreviewExpanded" }] : /* istanbul ignore next */ []));
+    controller = injectUiNavController({
+        navId: this.navId,
+        data: this.data,
+        items: this.items,
+        orientation: this.orientation,
+        appearance: this.appearance,
+        position: this.position,
+        collapsed: this.collapsed,
+        dockbarMode: this.dockbarMode,
+        compact: this.compact,
+        activeIds: this.activeIds,
+    });
+    headerSlot = contentChild(UiNavHeaderComponent, ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
+    footerSlot = contentChild(UiNavFooterComponent, ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+    iconTemplate = contentChild(NavIconDirective, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    normalizedItems = this.controller.normalizedItems;
+    resolvedState = this.controller.resolvedState;
+    activeIdSet = this.controller.activeIdSet;
+    previewRailExpanded = computed(() => {
+        const state = this.resolvedState();
+        if (state.orientation !== 'vertical' || state.appearance !== 'sidebar' || !state.collapsed) {
+            return false;
+        }
+        return this.previewExpanded() || (this.sidebarCollapse() && this.hoverPreviewExpanded());
+    }, ...(ngDevMode ? [{ debugName: "previewRailExpanded" }] : /* istanbul ignore next */ []));
+    previewRailOffset = computed(() => (this.previewRailExpanded() ? '15rem' : '0px'), ...(ngDevMode ? [{ debugName: "previewRailOffset" }] : /* istanbul ignore next */ []));
+    displayState = computed(() => {
+        const state = this.resolvedState();
+        return this.previewRailExpanded() ? { ...state, collapsed: false } : state;
+    }, ...(ngDevMode ? [{ debugName: "displayState" }] : /* istanbul ignore next */ []));
+    collapseEnabled = computed(() => {
+        const state = this.resolvedState();
+        return this.sidebarCollapse() && state.orientation === 'vertical' && state.appearance === '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'
+        : 'flex-col overflow-hidden', this.resolvedState().position === 'right' ? 'origin-right' : 'origin-left', this.previewRailExpanded() && [
+        'absolute inset-y-0 z-20 w-76 overflow-hidden bg-background shadow-xl',
+        this.resolvedState().position === 'right'
+            ? 'right-0 border-l border-border/70'
+            : 'left-0 border-r border-border/70',
+    ]), ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    state = this.resolvedState;
+    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'
+        ? 'w-full'
+        : this.resolvedState().appearance === 'dockbar'
+            ? 'w-auto'
+            : this.resolvedState().collapsed
+                ? 'w-16'
+                : 'w-76', this.resolvedState().orientation === 'horizontal' || this.previewRailExpanded()
+        ? 'overflow-visible'
+        : 'overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    toggleCollapsed() {
+        this.controller.toggleCollapsed();
+    }
+    setHoverPreview(value) {
+        this.hoverPreviewExpanded.set(this.sidebarCollapse() ? value : false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: UiNavComponent, isStandalone: true, selector: "ui-nav", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, dockbarMode: { classPropertyName: "dockbarMode", publicName: "dockbarMode", 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 }, previewExpanded: { classPropertyName: "previewExpanded", publicName: "previewExpanded", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapse: { classPropertyName: "sidebarCollapse", publicName: "nav-sidebar-collapse", 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 }, 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)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-nav-id": "resolvedState().id", "attr.data-orientation": "resolvedState().orientation", "attr.data-appearance": "resolvedState().appearance", "attr.data-position": "resolvedState().orientation === \"vertical\" ? resolvedState().position : null", "attr.data-collapse-tree": "collapseTree()", "attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null" } }, providers: [{ provide: UI_NAV_SHELL, useExisting: forwardRef(() => UiNavComponent) }], queries: [{ propertyName: "headerSlot", first: true, predicate: UiNavHeaderComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: UiNavFooterComponent, descendants: true, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: NavIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @let iconTpl = iconTemplate();
+    @let navState = displayState();
+
+    <div [class]="shellClasses()">
+      @if (headerSlot()) {
+        <ng-content select="ui-nav-header" />
+      }
+
+      <ui-nav-main [orientation]="navState.orientation">
+        <ui-nav-outlet
+          [state]="navState"
+          [items]="normalizedItems()"
+          [compact]="compact()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIdSet()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTpl"
+          [collapseTree]="collapseTree()"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIds.set($event)"
+          (itemSelected)="itemSelected.emit($event)" />
+      </ui-nav-main>
+
+      @if (footerSlot()) {
+        <ng-content select="ui-nav-footer" />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: UiNavMainComponent, selector: "ui-nav-main", inputs: ["class", "orientation"] }, { kind: "component", type: UiNavOutletComponent, selector: "ui-nav-outlet", inputs: ["state", "items", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [UiNavMainComponent, UiNavOutletComponent],
+                    providers: [{ provide: UI_NAV_SHELL, useExisting: forwardRef(() => UiNavComponent) }],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-nav-id]': 'resolvedState().id',
+                        '[attr.data-orientation]': 'resolvedState().orientation',
+                        '[attr.data-appearance]': 'resolvedState().appearance',
+                        '[attr.data-position]': 'resolvedState().orientation === "vertical" ? resolvedState().position : null',
+                        '[attr.data-collapse-tree]': 'collapseTree()',
+                        '[attr.data-preview-expanded]': 'previewRailExpanded() ? "true" : null',
+                        '(mouseenter)': 'setHoverPreview(true)',
+                        '(mouseleave)': 'setHoverPreview(false)',
+                    },
+                    template: `
+    @let iconTpl = iconTemplate();
+    @let navState = displayState();
+
+    <div [class]="shellClasses()">
+      @if (headerSlot()) {
+        <ng-content select="ui-nav-header" />
+      }
+
+      <ui-nav-main [orientation]="navState.orientation">
+        <ui-nav-outlet
+          [state]="navState"
+          [items]="normalizedItems()"
+          [compact]="compact()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIdSet()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTpl"
+          [collapseTree]="collapseTree()"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIds.set($event)"
+          (itemSelected)="itemSelected.emit($event)" />
+      </ui-nav-main>
+
+      @if (footerSlot()) {
+        <ng-content select="ui-nav-footer" />
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], dockbarMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockbarMode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], previewExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewExpanded", required: false }] }], sidebarCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-sidebar-collapse", 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 }] }], 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"] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UiNavHeaderComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UiNavFooterComponent), { isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavIconDirective), { isSignal: true }] }] } });
+
+class UiNavCollapseRootDirective {
+    shell = inject(UI_NAV_SHELL);
+    collapseEnabled = computed(() => this.shell.collapseEnabled() && this.shell.displayState().orientation === 'vertical', ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
+    displayCollapsed = computed(() => this.collapseEnabled() && this.shell.displayState().collapsed, ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavCollapseRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: UiNavCollapseRootDirective, isStandalone: true, selector: "[uiNavCollapseRoot]", host: { properties: { "class.w-full": "collapseEnabled()", "class.justify-center": "displayCollapsed()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavCollapseRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiNavCollapseRoot]',
+                    host: {
+                        '[class.w-full]': 'collapseEnabled()',
+                        '[class.justify-center]': 'displayCollapsed()',
+                    },
+                }]
+        }] });
+class UiNavCollapseExpandedDirective {
+    shell = inject(UI_NAV_SHELL);
+    templateRef = inject((TemplateRef));
+    viewContainer = inject(ViewContainerRef);
+    hasView = false;
+    shouldRender = computed(() => !this.shell.collapseEnabled() ||
+        this.shell.displayState().orientation !== 'vertical' ||
+        !this.shell.displayState().collapsed, ...(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: "21.2.15", ngImport: i0, type: UiNavCollapseExpandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: UiNavCollapseExpandedDirective, isStandalone: true, selector: "[uiNavCollapseExpanded]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiNavCollapseExpandedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiNavCollapseExpanded]',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavIconDirective, UiNavCollapseExpandedDirective, UiNavCollapseRootDirective, UiNavComponent, UiNavFooterComponent, UiNavHeaderComponent, UiNavMainComponent, normalizeUiNavItems };
+//# sourceMappingURL=edsis-ui-nav.mjs.map