@ojiepermana/angular-navigation 22.0.44 → 22.0.45

package/fesm2022/ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs

@@ -0,0 +1,2225 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, DestroyRef, signal, computed, effect, InjectionToken, input, model, output, contentChild, isDevMode, forwardRef, Component, booleanAttribute, ViewContainerRef } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+import { NavigationService } from '@ojiepermana/angular-navigation/service';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { IconComponent } from '@ojiepermana/angular-component/icon';
+import { NgTemplateOutlet } from '@angular/common';
+
+class NavigationIconDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NavigationIconDirective, isStandalone: true, selector: "ng-template[NavigationIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[NavigationIcon]',
+                }]
+        }] });
+
+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: `nav-panel-${toKeyPart(key) || index}`,
+        type: normalizeType(item.type, hasChildren),
+        source: item,
+        children,
+    };
+}
+function normalizeUiNavItems(items) {
+    return items
+        .map((item, index) => normalizeItem(item, index, `nav-${index}`))
+        .filter((item) => item !== null);
+}
+
+function injectNavigationController(inputs) {
+    const nav = inject(NavigationService);
+    const destroyRef = inject(DestroyRef);
+    // Token unik per instance <Navigation> untuk validasi keunikan id di NavigationService.
+    const owner = {};
+    const registeredState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredState" }] : /* istanbul ignore next */ []));
+    let previousRegisteredId = null;
+    const normalizedNavId = computed(() => normalizeId(inputs.navId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedNavId" }] : /* istanbul ignore next */ []));
+    const collapsedPreference = computed(() => inputs.collapsed() ?? (inputs.compact() ? true : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []));
+    const normalizedItems = computed(() => normalizeUiNavItems(inputs.data()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []));
+    const fallbackState = computed(() => ({
+        id: normalizedNavId(),
+        orientation: inputs.orientation(),
+        type: fallbackType(inputs.orientation(), inputs.type()),
+        position: inputs.position() ?? (inputs.orientation() === 'horizontal' ? 'top' : 'left'),
+        collapsed: collapsedPreference() ?? false,
+        dockbarMode: inputs.dockbarMode() ?? 'sticky',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallbackState" }] : /* istanbul ignore next */ []));
+    const resolvedState = computed(() => nav.currentState(normalizedNavId()) ?? registeredState() ?? fallbackState(), /* @ts-ignore */
+    ...(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);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIdSet" }] : /* istanbul ignore next */ []));
+    effect(() => {
+        if (!inputs.enabled()) {
+            return;
+        }
+        const nextState = nav.register({
+            id: normalizedNavId(),
+            orientation: inputs.orientation(),
+            type: inputs.type(),
+            position: inputs.position(),
+            collapsed: collapsedPreference(),
+            dockbarMode: inputs.dockbarMode(),
+        }, owner);
+        if (previousRegisteredId && previousRegisteredId !== nextState.id) {
+            nav.unregister(previousRegisteredId, owner);
+        }
+        previousRegisteredId = nextState.id;
+        registeredState.set(nextState);
+    });
+    destroyRef.onDestroy(() => {
+        if (previousRegisteredId) {
+            nav.unregister(previousRegisteredId, owner);
+        }
+    });
+    return {
+        normalizedNavId,
+        normalizedItems,
+        resolvedState,
+        activeIdSet,
+        toggleCollapsed: () => nav.toggleCollapsed(normalizedNavId()),
+    };
+}
+function normalizeId(value) {
+    return value.trim() || 'default';
+}
+function fallbackType(orientation, type) {
+    if (orientation === 'vertical' && (type === 'sidebar' || type === 'dockbar')) {
+        return type;
+    }
+    if (orientation === 'horizontal' && (type === 'navbar' || type === 'flyout')) {
+        return type;
+    }
+    return orientation === 'horizontal' ? 'navbar' : 'sidebar';
+}
+
+const NAVIGATION_SHELL = new InjectionToken('NAVIGATION_SHELL');
+
+/**
+ * Container navigasi deklaratif. Type ditentukan oleh komponen anak:
+ *
+ * ```html
+ * <Navigation id="main" [data]="items">
+ *   <NavigationSidebar>
+ *     <NavigationHeader>…</NavigationHeader>
+ *     <NavigationContent />
+ *     <NavigationFooter>…</NavigationFooter>
+ *   </NavigationSidebar>
+ * </Navigation>
+ * ```
+ *
+ * Header dan footer opsional; `NavigationContent` selalu dirender oleh
+ * type (default otomatis bila tidak diproyeksikan).
+ */
+class NavigationContainerComponent {
+    navId = input('default', { ...(ngDevMode ? { debugName: "navId" } : /* istanbul ignore next */ {}), alias: 'id' });
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', { ...(ngDevMode ? { debugName: "collapseTree" } : /* istanbul ignore next */ {}), alias: 'collapse-tree' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk container `<li>` group horizontal (flyout tab / navbar group). */
+    groupClass = input('', { ...(ngDevMode ? { debugName: "groupClass" } : /* istanbul ignore next */ {}), alias: 'nav-group-class' });
+    activeIds = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    openedIds = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    itemSelected = output();
+    nav = inject(NavigationService);
+    destroyRef = inject(DestroyRef);
+    hoverPreviewExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverPreviewExpanded" }] : /* istanbul ignore next */ []));
+    /** Konfigurasi type aktif yang didaftarkan wrapper anak (sidebar/dockbar/navbar/flyout). */
+    typeConfig = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeConfig" }] : /* istanbul ignore next */ []));
+    orientationPreference = computed(() => this.typeConfig()?.orientation ?? 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientationPreference" }] : /* istanbul ignore next */ []));
+    typePreference = computed(() => this.typeConfig()?.type ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typePreference" }] : /* istanbul ignore next */ []));
+    positionPreference = computed(() => this.typeConfig()?.position?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionPreference" }] : /* istanbul ignore next */ []));
+    collapsedPreference = computed(() => this.typeConfig()?.collapsed?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []));
+    dockbarModePreference = computed(() => this.typeConfig()?.dockbarMode?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarModePreference" }] : /* istanbul ignore next */ []));
+    sidebarCollapse = computed(() => this.typeConfig()?.sidebarCollapse?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarCollapse" }] : /* istanbul ignore next */ []));
+    previewExpanded = computed(() => this.typeConfig()?.previewExpanded?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
+    typeStyle = computed(() => this.typeConfig()?.typeStyle?.() ?? 'flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
+    flyoutLabel = computed(() => this.typeConfig()?.flyoutLabel?.() ?? 'Menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutLabel" }] : /* istanbul ignore next */ []));
+    flyoutIcon = computed(() => this.typeConfig()?.flyoutIcon?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutIcon" }] : /* istanbul ignore next */ []));
+    flyoutIconOnly = computed(() => this.typeConfig()?.flyoutIconOnly?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutIconOnly" }] : /* istanbul ignore next */ []));
+    flyoutIconPosition = computed(() => this.typeConfig()?.flyoutIconPosition?.() ?? 'start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutIconPosition" }] : /* istanbul ignore next */ []));
+    flyoutTriggerVariant = computed(() => this.typeConfig()?.flyoutTriggerVariant?.() ?? 'button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerVariant" }] : /* istanbul ignore next */ []));
+    flyoutTriggerFloating = computed(() => this.typeConfig()?.flyoutTriggerFloating?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerFloating" }] : /* istanbul ignore next */ []));
+    flyoutTriggerClass = computed(() => this.typeConfig()?.flyoutTriggerClass?.() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerClass" }] : /* istanbul ignore next */ []));
+    controller = injectNavigationController({
+        navId: this.navId,
+        data: this.data,
+        orientation: this.orientationPreference,
+        type: this.typePreference,
+        position: this.positionPreference,
+        collapsed: this.collapsedPreference,
+        dockbarMode: this.dockbarModePreference,
+        compact: this.compact,
+        activeIds: this.activeIds,
+        enabled: computed(() => this.typeConfig() !== null),
+    });
+    iconTemplate = contentChild(NavigationIconDirective, /* @ts-ignore */
+    ...(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.type !== 'sidebar' || !state.collapsed) {
+            return false;
+        }
+        return this.previewExpanded() || (this.sidebarCollapse() && this.hoverPreviewExpanded());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewRailExpanded" }] : /* istanbul ignore next */ []));
+    previewRailOffset = computed(() => (this.previewRailExpanded() ? '15rem' : '0px'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewRailOffset" }] : /* istanbul ignore next */ []));
+    displayState = computed(() => {
+        const state = this.resolvedState();
+        if (state.type === 'dockbar') {
+            return { ...state, collapsed: true };
+        }
+        return this.previewRailExpanded() ? { ...state, collapsed: false } : state;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayState" }] : /* istanbul ignore next */ []));
+    dockbarAsideOpen = computed(() => {
+        const state = this.resolvedState();
+        if (state.type !== 'dockbar' || state.dockbarMode !== 'sticky') {
+            return false;
+        }
+        return (this.nav.resolveDockbarGroup(state.id, this.normalizedItems(), state.dockbarMode, this.activeIdSet(), this.activeUrl()) !== null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarAsideOpen" }] : /* istanbul ignore next */ []));
+    collapseEnabled = computed(() => {
+        const state = this.resolvedState();
+        return this.sidebarCollapse() && state.orientation === 'vertical' && state.type === 'sidebar';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
+    /** Kelas shell yang dipakai host komponen type (eks `div` shell internal). */
+    shellClasses = computed(() => cn('flex h-full min-h-0 transition-[width,box-shadow,transform] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none', this.resolvedState().orientation === 'horizontal'
+        ? 'flex-row items-stretch overflow-visible'
+        : this.resolvedState().type === 'dockbar'
+            ? 'flex-col overflow-visible'
+            : 'flex-col overflow-hidden', this.resolvedState().type === 'dockbar' && [
+        'w-16 shrink-0',
+        this.resolvedState().position === 'right' && 'ml-auto',
+    ], this.resolvedState().position === 'right' ? 'origin-right' : 'origin-left', this.previewRailExpanded() && [
+        'absolute inset-y-0 z-20 w-76 overflow-hidden bg-background shadow-xl',
+        this.resolvedState().position === 'right'
+            ? 'right-0 border-l border-[hsl(var(--border)/var(--opacity-70))]'
+            : 'left-0 border-r border-[hsl(var(--border)/var(--opacity-70))]',
+    ]), /* @ts-ignore */
+    ...(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'
+        ? 'h-full w-full'
+        : this.resolvedState().type === 'dockbar'
+            ? this.dockbarAsideOpen()
+                ? 'w-76'
+                : 'w-16'
+            : this.resolvedState().collapsed
+                ? 'w-16'
+                : 'w-76', this.resolvedState().orientation === 'horizontal' ||
+        this.resolvedState().type === 'dockbar' ||
+        this.previewRailExpanded()
+        ? 'overflow-visible'
+        : 'overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Publikasikan data ke registry by id agar surface lain (mis. apps-launcher di `Page`)
+        // bisa membaca nav by id tanpa mendaftarkan ulang `<Navigation>` dengan id yang sama.
+        effect(() => this.nav.publishData(this.navId(), this.data()));
+        this.destroyRef.onDestroy(() => this.nav.clearData(this.navId()));
+    }
+    /**
+     * Dipanggil komponen type saat dibuat. Satu `<Navigation>` hanya boleh
+     * memuat satu type hidup — pendaftaran ganda dianggap salah konfigurasi.
+     */
+    registerType(config) {
+        if (this.typeConfig() !== null && isDevMode()) {
+            throw new Error('[Navigation] Hanya satu type (<NavigationSidebar>/<NavigationDockbar>/<NavigationNavbar>/<NavigationFlyout>) yang boleh hidup dalam satu <Navigation>.');
+        }
+        this.typeConfig.set(config);
+    }
+    unregisterType(config) {
+        if (this.typeConfig() === config) {
+            this.typeConfig.set(null);
+        }
+    }
+    toggleCollapsed() {
+        this.controller.toggleCollapsed();
+    }
+    setHoverPreview(value) {
+        this.hoverPreviewExpanded.set(this.sidebarCollapse() ? value : false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapse-tree", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "nav-group-class", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIds: "openedIdsChange", itemSelected: "itemSelected" }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "setHoverPreview(true)", "mouseleave": "setHoverPreview(false)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "attr.data-orientation": "resolvedState().orientation", "attr.data-type": "resolvedState().type", "attr.data-type-style": "typeStyle()", "attr.data-position": "resolvedState().position", "attr.data-collapse-tree": "collapseTree()", "attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null" } }, providers: [
+            { provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) },
+        ], queries: [{ propertyName: "iconTemplate", first: true, predicate: NavigationIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Navigation',
+                    providers: [
+                        { provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) },
+                    ],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-navigation-id]': 'resolvedState().id',
+                        '[attr.data-orientation]': 'resolvedState().orientation',
+                        '[attr.data-type]': 'resolvedState().type',
+                        '[attr.data-type-style]': 'typeStyle()',
+                        '[attr.data-position]': 'resolvedState().position',
+                        '[attr.data-collapse-tree]': 'collapseTree()',
+                        '[attr.data-preview-expanded]': 'previewRailExpanded() ? "true" : null',
+                        '(mouseenter)': 'setHoverPreview(true)',
+                        '(mouseleave)': 'setHoverPreview(false)',
+                    },
+                    template: ` <ng-content /> `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-tree", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-group-class", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }, { type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationIconDirective), { isSignal: true }] }] } });
+
+class NavigationItemContentComponent {
+    nav = inject(NavigationService);
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    level = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(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'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSlotClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => cn('block truncate', this.active() && 'font-semibold text-foreground', this.item().classes?.title), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    showSubtitle = computed(() => !!this.item().subtitle && !(this.orientation() === 'horizontal' && this.level() === 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSubtitle" }] : /* istanbul ignore next */ []));
+    subtitleClasses = computed(() => cn('block truncate text-xs font-normal text-muted-foreground', this.item().classes?.subtitle), /* @ts-ignore */
+    ...(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'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []));
+    defaultBadgeClasses = computed(() => cn('nav-badge ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultBadgeClasses" }] : /* istanbul ignore next */ []));
+    defaultIconSize = computed(() => this.usesStraightVerticalSurface() ? 18 : 16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultIconSize" }] : /* istanbul ignore next */ []));
+    defaultIconClasses = computed(() => cn('text-current', this.item().classes?.icon), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultIconClasses" }] : /* istanbul ignore next */ []));
+    iconContext = computed(() => this.nav.iconContext(this.item(), this.active(), this.level(), this.orientation()), /* @ts-ignore */
+    ...(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: "22.0.4", ngImport: i0, type: NavigationItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationItemContentComponent, isStandalone: true, selector: "NavigationItemContent", 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; as iconName) {
+      <span data-navigation-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container
+            [ngTemplateOutlet]="customIcon.template"
+            [ngTemplateOutletContext]="iconContext()"
+          />
+        } @else {
+          <Icon [name]="iconName" [class]="defaultIconClasses()" [size]="defaultIconSize()" />
+        }
+      </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"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationItemContent',
+                    imports: [NgTemplateOutlet, IconComponent],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @if (item().icon; as iconName) {
+      <span data-navigation-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container
+            [ngTemplateOutlet]="customIcon.template"
+            [ngTemplateOutletContext]="iconContext()"
+          />
+        } @else {
+          <Icon [name]="iconName" [class]="defaultIconClasses()" [size]="defaultIconSize()" />
+        }
+      </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 NavigationItemComponent {
+    nav = inject(NavigationService);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    level = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    straightRail = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "straightRail" }] : /* istanbul ignore next */ []));
+    straightRailActive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "straightRailActive" }] : /* istanbul ignore next */ []));
+    firstInBranch = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstInBranch" }] : /* istanbul ignore next */ []));
+    lastInBranch = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastInBranch" }] : /* istanbul ignore next */ []));
+    openedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    openedIdSet = computed(() => new Set(this.openedIds()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIdSet" }] : /* istanbul ignore next */ []));
+    isHorizontalRoot = computed(() => this.orientation() === 'horizontal' && this.level() === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontalRoot" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => this.nav.isItemActive(this.item(), this.activeIds(), this.activeUrl()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    showChildren = computed(() => !this.compact() && this.isOpen(), /* @ts-ignore */
+    ...(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();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    hostRole = computed(() => {
+        if (this.item().type === 'divider') {
+            return 'separator';
+        }
+        return this.orientation() === 'horizontal' ? 'none' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    headingId = computed(() => `${this.item().panelId}-heading`, /* @ts-ignore */
+    ...(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('NavigationItem nav-text group/nav inline-flex min-w-0 items-center rounded-md 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('nav-trigger nav-text group/nav inline-flex min-w-0 items-center rounded-md 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 self-center transition-transform duration-200', 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('nav-heading px-3 py-2 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: "22.0.4", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationItemComponent, isStandalone: true, selector: "li[NavigationItem]", 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-navigation-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
+              NavigationItem
+              [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()"
+        >
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [collapseTree]="collapseTree()"
+            [iconTemplate]="iconTemplate()"
+          />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" [size]="16" [class]="chevronClasses()" />
+          }
+        </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
+                NavigationItem
+                [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
+              NavigationItem
+              [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-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [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-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [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-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </button>
+        }
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", 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", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[NavigationItem]',
+                    imports: [RouterLink, RouterLinkActive, IconComponent, NavigationItemContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'hostRole()',
+                        '[attr.data-navigation-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
+              NavigationItem
+              [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()"
+        >
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [collapseTree]="collapseTree()"
+            [iconTemplate]="iconTemplate()"
+          />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" [size]="16" [class]="chevronClasses()" />
+          }
+        </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
+                NavigationItem
+                [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
+              NavigationItem
+              [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-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [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-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [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-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [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 NavigationListComponent {
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    collapsed = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    position = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    isCollapsed = computed(() => this.collapsed() || this.compact(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('block', this.position() === 'right' && 'items-end text-right'), /* @ts-ignore */
+    ...(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'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationListComponent, isStandalone: true, selector: "NavigationList", 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
+          NavigationItem
+          [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: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationList',
+                    imports: [NavigationItemComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-position]': 'position()',
+                    },
+                    template: `
+    <ul [class]="listClasses()" role="list">
+      @for (item of items(); track item.key) {
+        <li
+          NavigationItem
+          [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"] }] } });
+
+/**
+ * Area konten navigasi: merender daftar item sesuai type aktif dari
+ * `<Navigation>` induk. Selalu hadir di setiap type — komponen type
+ * merender default-nya bila consumer tidak memproyeksikan `<NavigationContent />`.
+ */
+class NavigationContentComponent {
+    container = inject(NavigationContainerComponent);
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    hostClasses = computed(() => cn('min-h-0 flex-1', this.container.displayState().orientation === 'horizontal'
+        ? 'flex h-full min-w-0 items-stretch justify-center overflow-visible'
+        : 'block overflow-y-auto overflow-x-hidden py-2', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationContentComponent, isStandalone: true, selector: "NavigationContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    @let navState = container.displayState();
+
+    @if (navState.orientation === 'horizontal' && navState.type === 'flyout') {
+      <!-- Less-common renderers are code-split: a sidebar-only app never bundles them. -->
+      @defer (on immediate) {
+        <NavigationFlyoutMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [label]="container.flyoutLabel()"
+          [icon]="container.flyoutIcon()"
+          [iconOnly]="container.flyoutIconOnly()"
+          [iconPosition]="container.flyoutIconPosition()"
+          [variant]="container.flyoutTriggerVariant()"
+          [floating]="container.flyoutTriggerFloating()"
+          [triggerClass]="container.flyoutTriggerClass()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        >
+          <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+          <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+        </NavigationFlyoutMenu>
+      }
+    } @else if (navState.orientation === 'horizontal') {
+      @defer (on immediate) {
+        <NavigationHorizontal
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else if (navState.type === 'dockbar') {
+      @defer (on immediate) {
+        <NavigationDockbarMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [mode]="navState.dockbarMode"
+          [position]="navState.position"
+          [itemClass]="container.itemClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else {
+      <!-- The vertical list (sidebar) is the common default — kept eager, no first-paint pop-in. -->
+      <NavigationList
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], deferBlockDependencies: [() => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-CACN0O3T.mjs').then(m => m.NavigationFlyoutMenuComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-horizontal.component-SK1lXswT.mjs').then(m => m.NavigationHorizontalComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-BQgpBy1I.mjs').then(m => m.NavigationDockbarMenuComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.4", ngImport: i0, type: NavigationContentComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-CACN0O3T.mjs').then(m => m.NavigationFlyoutMenuComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-horizontal.component-SK1lXswT.mjs').then(m => m.NavigationHorizontalComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-BQgpBy1I.mjs').then(m => m.NavigationDockbarMenuComponent)], resolveMetadata: (NavigationFlyoutMenuComponent, NavigationHorizontalComponent, NavigationDockbarMenuComponent) => ({ decorators: [{
+                type: Component,
+                args: [{
+                        selector: 'NavigationContent',
+                        imports: [
+                            NavigationDockbarMenuComponent,
+                            NavigationFlyoutMenuComponent,
+                            NavigationHorizontalComponent,
+                            NavigationListComponent,
+                        ],
+                        host: {
+                            '[class]': 'hostClasses()',
+                        },
+                        template: `
+    @let navState = container.displayState();
+
+    @if (navState.orientation === 'horizontal' && navState.type === 'flyout') {
+      <!-- Less-common renderers are code-split: a sidebar-only app never bundles them. -->
+      @defer (on immediate) {
+        <NavigationFlyoutMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [label]="container.flyoutLabel()"
+          [icon]="container.flyoutIcon()"
+          [iconOnly]="container.flyoutIconOnly()"
+          [iconPosition]="container.flyoutIconPosition()"
+          [variant]="container.flyoutTriggerVariant()"
+          [floating]="container.flyoutTriggerFloating()"
+          [triggerClass]="container.flyoutTriggerClass()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        >
+          <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+          <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+        </NavigationFlyoutMenu>
+      }
+    } @else if (navState.orientation === 'horizontal') {
+      @defer (on immediate) {
+        <NavigationHorizontal
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else if (navState.type === 'dockbar') {
+      @defer (on immediate) {
+        <NavigationDockbarMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [mode]="navState.dockbarMode"
+          [position]="navState.position"
+          [itemClass]="container.itemClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else {
+      <!-- The vertical list (sidebar) is the common default — kept eager, no first-paint pop-in. -->
+      <NavigationList
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
+    }
+  `,
+                    }]
+            }], ctorParameters: null, propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
+
+class NavigationFooterComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    isHorizontal = computed(() => this.shell?.displayState().orientation === 'horizontal', /* @ts-ignore */
+    ...(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-[hsl(var(--border)/var(--opacity-70))]', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationFooterComponent, isStandalone: true, selector: "NavigationFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="flex h-full min-w-0 items-center gap-3">
+      <ng-content />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooter',
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    <div class="flex h-full min-w-0 items-center gap-3">
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class NavigationHeaderComponent {
+    shell = inject(NAVIGATION_SHELL);
+    toggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => this.shell.state().collapsed, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    displayCollapsed = computed(() => this.shell.displayState().collapsed, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
+    isHorizontal = computed(() => this.shell.displayState().orientation === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+    showToggle = computed(() => {
+        if (this.isHorizontal()) {
+            return false;
+        }
+        return this.toggle() || (this.shell.collapseEnabled() && !this.displayCollapsed());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+    toggleAriaLabel = computed(() => this.collapsed() ? 'Expand navigation' : 'Collapse navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
+    toggleIconName = computed(() => this.collapsed() ? 'left_panel_open' : 'left_panel_close', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []));
+    /**
+     * Baris isi header. Saat collapsed/dockbar (vertical) isi (inisial/ikon) dipusatkan di tengah
+     * rail agar simetris dengan ikon nav-item di bawahnya (yang juga center di rail); selain itu kiri
+     * dengan padding `px-3`.
+     */
+    rowClasses = computed(() => cn('flex h-full items-center', !this.isHorizontal() && this.displayCollapsed() ? 'justify-center' : 'gap-3 px-3'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []));
+    contentClasses = computed(() => {
+        if (this.isHorizontal()) {
+            return 'flex min-w-0 items-center gap-3';
+        }
+        // Collapsed/dockbar: inisial center (tanpa `flex-1` yang membuatnya rata kiri).
+        return this.displayCollapsed()
+            ? 'flex min-w-0 items-center justify-center'
+            : 'flex min-w-0 flex-1 items-center gap-3';
+    }, /* @ts-ignore */
+    ...(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-[hsl(var(--border)/var(--opacity-70))]', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    toggleCollapsed() {
+        this.shell.toggleCollapsed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationHeaderComponent, isStandalone: true, selector: "NavigationHeader", inputs: { toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "displayCollapsed()" } }, ngImport: i0, template: `
+    <div [class]="rowClasses()">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex 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-navigation-header-toggle="true"
+          (click)="toggleCollapsed()"
+        >
+          <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHeader',
+                    imports: [IconComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'displayCollapsed()',
+                    },
+                    template: `
+    <div [class]="rowClasses()">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex 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-navigation-header-toggle="true"
+          (click)="toggleCollapsed()"
+        >
+          <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
+        </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 }] }] } });
+
+/**
+ * Type sidebar vertikal untuk `<Navigation>`. Slot `NavigationHeader` dan
+ * `NavigationFooter` opsional; `NavigationContent` selalu dirender (default
+ * otomatis bila tidak diproyeksikan).
+ */
+class NavigationSidebarComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    position = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    collapsed = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    collapse = input(false, { ...(ngDevMode ? { debugName: "collapse" } : /* istanbul ignore next */ {}), alias: 'nav-sidebar-collapse', transform: booleanAttribute });
+    previewExpanded = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
+    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
+    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const config = {
+            orientation: 'vertical',
+            type: 'sidebar',
+            position: this.position,
+            collapsed: this.collapsed,
+            sidebarCollapse: this.collapse,
+            previewExpanded: this.previewExpanded,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationSidebarComponent, isStandalone: true, selector: "NavigationSidebar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "nav-sidebar-collapse", isSignal: true, isRequired: false, transformFunction: null }, previewExpanded: { classPropertyName: "previewExpanded", publicName: "previewExpanded", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationSidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationSidebar',
+                    imports: [NavigationContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-sidebar-collapse", required: false }] }], previewExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewExpanded", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+
+/**
+ * Type dockbar vertikal (rail ikon + aside) untuk `<Navigation>`. Slot
+ * `NavigationHeader` dan `NavigationFooter` opsional; `NavigationContent`
+ * selalu dirender (default otomatis bila tidak diproyeksikan).
+ */
+class NavigationDockbarComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    mode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
+    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
+    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const config = {
+            orientation: 'vertical',
+            type: 'dockbar',
+            position: this.position,
+            dockbarMode: this.mode,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationDockbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationDockbarComponent, isStandalone: true, selector: "NavigationDockbar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationDockbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationDockbar',
+                    imports: [NavigationContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+
+/**
+ * Type navbar horizontal untuk `<Navigation>`. Slot `NavigationHeader`
+ * dan `NavigationFooter` opsional; `NavigationContent` selalu dirender
+ * (default otomatis bila tidak diproyeksikan).
+ */
+class NavigationNavbarComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    /** Posisi bar terhadap konten layout: `top` (default) atau `bottom` — panel grid membuka ke arah sebaliknya. */
+    position = input(null, { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'nav-position' });
+    typeStyle = input('flat', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-appearance' });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
+    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
+    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const config = {
+            orientation: 'horizontal',
+            type: 'navbar',
+            position: this.position,
+            typeStyle: this.typeStyle,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationNavbarComponent, isStandalone: true, selector: "NavigationNavbar", inputs: { position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-appearance", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationNavbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationNavbar',
+                    imports: [NavigationContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-appearance", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+
+/**
+ * Type flyout horizontal (trigger + panel menu) untuk `<Navigation>`.
+ * Slot `NavigationHeader` dan `NavigationFooter` opsional; `NavigationContent`
+ * selalu dirender (default otomatis bila tidak diproyeksikan).
+ */
+class NavigationFlyoutComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    label = input('Menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Nama Material Symbols untuk trigger (mis. `apps`, `menu`); `null` = label saja. */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Trigger hanya menampilkan ikon; label tetap dipakai sebagai aria-label/title. */
+    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), alias: 'icon-only', transform: booleanAttribute });
+    /** Penempatan ikon relatif terhadap label: `start` (default) atau `end`. */
+    iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : /* istanbul ignore next */ {}), alias: 'icon-position' });
+    /** Bentuk visual tombol trigger: `button` (pil, default) | `link` | `plain` (ghost). */
+    triggerVariant = input('button', { ...(ngDevMode ? { debugName: "triggerVariant" } : /* istanbul ignore next */ {}), alias: 'trigger-variant' });
+    /**
+     * Trigger mengambang (`fixed`) alih-alih mengalir di dalam bar/div. Default pojok kanan-atas;
+     * pakai `trigger-class` untuk pindah pojok (mis. `bottom-6 right-6 top-auto`).
+     *
+     * Catatan: `position: fixed` ber-anchor ke viewport HANYA bila tak ada ancestor pembentuk
+     * containing block. Di dalam `<Layout>` (frame-nya memakai `backdrop-blur`), trigger ber-anchor
+     * ke kotak konten frame (bukan viewport sebenarnya) dan bisa ter-clip oleh frame `overflow-hidden`.
+     * Untuk floating sebenar-viewport, tempatkan `<Navigation>` flyout di luar frame `<Layout>`.
+     */
+    triggerFloating = input(false, { ...(ngDevMode ? { debugName: "triggerFloating" } : /* istanbul ignore next */ {}), alias: 'trigger-floating',
+        transform: booleanAttribute });
+    /** Kelas Tailwind untuk host trigger (posisi pojok floating / styling wrapper saat in-flow). */
+    triggerClass = input('', { ...(ngDevMode ? { debugName: "triggerClass" } : /* istanbul ignore next */ {}), alias: 'trigger-class' });
+    /** Posisi bar terhadap konten layout: `top` (default) atau `bottom` — panel membuka ke arah sebaliknya. */
+    position = input(null, { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'nav-position' });
+    typeStyle = input('flat', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-appearance' });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const config = {
+            orientation: 'horizontal',
+            type: 'flyout',
+            position: this.position,
+            flyoutLabel: this.label,
+            flyoutIcon: this.icon,
+            flyoutIconOnly: this.iconOnly,
+            flyoutIconPosition: this.iconPosition,
+            flyoutTriggerVariant: this.triggerVariant,
+            flyoutTriggerFloating: this.triggerFloating,
+            flyoutTriggerClass: this.triggerClass,
+            typeStyle: this.typeStyle,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationFlyoutComponent, isStandalone: true, selector: "NavigationFlyout", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "icon-only", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "icon-position", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "trigger-variant", isSignal: true, isRequired: false, transformFunction: null }, triggerFloating: { classPropertyName: "triggerFloating", publicName: "trigger-floating", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "trigger-class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-appearance", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
+         NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
+         bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
+         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
+    <NavigationContent>
+      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+    </NavigationContent>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFlyoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFlyout',
+                    imports: [NavigationContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
+         NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
+         bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
+         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
+    <NavigationContent>
+      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+    </NavigationContent>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-only", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-position", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-variant", required: false }] }], triggerFloating: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-floating", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-appearance", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Tampilan compact aktif saat sidebar collapsible sedang collapsed, atau saat
+ * type dockbar aktif — rail dockbar selalu selebar ikon (`w-16`) sehingga
+ * konten expanded tidak pernah muat.
+ */
+function isCompactDisplay(shell) {
+    const state = shell.displayState();
+    if (state.orientation !== 'vertical') {
+        return false;
+    }
+    if (state.type === 'dockbar') {
+        return true;
+    }
+    return shell.collapseEnabled() && state.collapsed;
+}
+class NavigationCollapseRootDirective {
+    shell = inject(NAVIGATION_SHELL);
+    collapseEnabled = computed(() => {
+        const state = this.shell.displayState();
+        return state.orientation === 'vertical' && (this.shell.collapseEnabled() || state.type === 'dockbar');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
+    displayCollapsed = computed(() => isCompactDisplay(this.shell), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationCollapseRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NavigationCollapseRootDirective, isStandalone: true, selector: "[NavigationCollapseRoot]", host: { properties: { "class.w-full": "collapseEnabled()", "class.justify-center": "displayCollapsed()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationCollapseRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NavigationCollapseRoot]',
+                    host: {
+                        '[class.w-full]': 'collapseEnabled()',
+                        '[class.justify-center]': 'displayCollapsed()',
+                    },
+                }]
+        }] });
+class NavigationCollapseExpandedDirective {
+    shell = inject(NAVIGATION_SHELL);
+    templateRef = inject((TemplateRef));
+    viewContainer = inject(ViewContainerRef);
+    hasView = false;
+    shouldRender = computed(() => !isCompactDisplay(this.shell), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.shouldRender()) {
+                if (!this.hasView) {
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                    this.hasView = true;
+                }
+                return;
+            }
+            if (this.hasView) {
+                this.viewContainer.clear();
+                this.hasView = false;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationCollapseExpandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NavigationCollapseExpandedDirective, isStandalone: true, selector: "[NavigationCollapseExpanded]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationCollapseExpandedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NavigationCollapseExpanded]',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Slot aksi di sisi kanan `NavigationFooter`. Selalu didorong ke kanan (`ml-auto`),
+ * rata tengah vertikal, dengan jarak antar-child otomatis (`gap`). Isi bebas dengan
+ * ikon, button, atau teks — mis. tombol logout.
+ *
+ * Otomatis disembunyikan saat sidebar vertical sedang collapsed (rail icon-only)
+ * agar tidak overflow; konsisten dengan `NavigationFooterTitle`.
+ */
+class NavigationFooterActionComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => {
+        const state = this.shell?.displayState();
+        return state ? state.orientation === 'vertical' && state.collapsed : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'ml-auto flex shrink-0 items-center gap-1', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationFooterActionComponent, isStandalone: true, selector: "NavigationFooterAction", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooterAction',
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Turunkan inisial ringkas dari sebuah nama untuk avatar fallback.
+ *
+ *   "Ojie Permana" → "OP"
+ *   "Ojiepermana"  → "OJ"
+ *   ""             → ""
+ *
+ * Mengambil huruf depan kata pertama dan kata terakhir; bila hanya satu kata,
+ * memakai dua huruf pertamanya.
+ */
+function deriveNavigationInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+        return '';
+    }
+    const first = parts[0] ?? '';
+    if (parts.length === 1) {
+        return first.slice(0, 2).toUpperCase();
+    }
+    const last = parts[parts.length - 1] ?? '';
+    return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+
+/**
+ * Blok avatar/inisial untuk slot `NavigationFooter` (profil user). Sama seperti
+ * `NavigationHeaderInitial` tetapi default-nya bulat (rounded-full) sesuai
+ * konvensi avatar user. Consumer cukup memberi `name`; inisial diturunkan
+ * otomatis. Beri `src` untuk foto, `icon` untuk material symbol, atau `initials`
+ * untuk override.
+ *
+ * Tetap tampil saat sidebar collapsed; pasangannya `NavigationFooterTitle` yang
+ * menyembunyikan diri.
+ */
+class NavigationFooterInitialComponent {
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    initials = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    resolvedInitials = computed(() => this.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(this.name()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 text-primary', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationFooterInitialComponent, isStandalone: true, selector: "NavigationFooterInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterInitialComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooterInitial',
+                    imports: [IconComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': "name() ? 'img' : null",
+                        '[attr.aria-label]': 'name() || null',
+                    },
+                    template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Judul + subjudul untuk slot `NavigationFooter` (mis. nama + email user).
+ * Otomatis disembunyikan saat sidebar vertical sedang collapsed (rail icon-only)
+ * dengan membaca `NAVIGATION_SHELL`.
+ */
+class NavigationFooterTitleComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => {
+        const state = this.shell?.displayState();
+        return state ? state.orientation === 'vertical' && state.collapsed : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'flex min-w-0 flex-col justify-center', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationFooterTitleComponent, isStandalone: true, selector: "NavigationFooterTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
+    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{
+      title()
+    }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFooterTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooterTitle',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'collapsed()',
+                    },
+                    template: `
+    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{
+      title()
+    }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Blok avatar/inisial untuk slot `NavigationHeader` (brand/logo). Consumer cukup
+ * memberi `name`; inisial diturunkan otomatis ("Ojie Permana" → "OP"). Beri `src`
+ * untuk gambar, `icon` (material symbol) sebagai ganti inisial, atau `initials`
+ * untuk override manual.
+ *
+ * Selalu tampil baik saat sidebar expanded maupun collapsed karena ukurannya muat
+ * di rail icon-only — pasangannya, `NavigationHeaderTitle`, yang menyembunyikan
+ * diri saat collapsed.
+ */
+class NavigationHeaderInitialComponent {
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    initials = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    resolvedInitials = computed(() => this.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(this.name()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary/10 text-primary', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHeaderInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationHeaderInitialComponent, isStandalone: true, selector: "NavigationHeaderInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHeaderInitialComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHeaderInitial',
+                    imports: [IconComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': "name() ? 'img' : null",
+                        '[attr.aria-label]': 'name() || null',
+                    },
+                    template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Judul + subjudul untuk slot `NavigationHeader`. Otomatis disembunyikan saat
+ * sidebar vertical sedang collapsed (rail icon-only) dengan membaca
+ * `NAVIGATION_SHELL` — consumer tidak perlu mengelola state collapse sendiri.
+ */
+class NavigationHeaderTitleComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => {
+        const state = this.shell?.displayState();
+        return state ? state.orientation === 'vertical' && state.collapsed : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'flex min-w-0 flex-col justify-center', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationHeaderTitleComponent, isStandalone: true, selector: "NavigationHeaderTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
+    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{
+      title()
+    }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHeaderTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHeaderTitle',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'collapsed()',
+                    },
+                    template: `
+    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{
+      title()
+    }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavigationItemComponent as N, NavigationItemContentComponent as a, NavigationListComponent as b, NavigationCollapseExpandedDirective as c, NavigationCollapseRootDirective as d, NavigationContainerComponent as e, NavigationContentComponent as f, NavigationDockbarComponent as g, NavigationFlyoutComponent as h, NavigationFooterActionComponent as i, NavigationFooterComponent as j, NavigationFooterInitialComponent as k, NavigationFooterTitleComponent as l, NavigationHeaderComponent as m, NavigationHeaderInitialComponent as n, NavigationHeaderTitleComponent as o, NavigationIconDirective as p, NavigationNavbarComponent as q, NavigationSidebarComponent as r, deriveNavigationInitials as s, normalizeUiNavItems as t };