@ojiepermana/angular 22.1.11 → 22.1.13

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

@@ -0,0 +1,2642 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, InjectionToken, input, model, output, contentChild, isDevMode, forwardRef, Component, DestroyRef, booleanAttribute, TemplateRef, Directive, ElementRef, Injector, afterNextRender, ViewContainerRef } from '@angular/core';
+import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { NavigationIconDirective } from '@ojiepermana/angular/navigation/icon';
+import { NAVIGATION_ADAPTER, NAVIGATION_ROUTE_CONTEXT_ADAPTER } from '@ojiepermana/angular/navigation/core';
+import { normalizeUiNavItems, NAVIGATION_DOCKBAR_FALLBACK_ICON } from '@ojiepermana/angular/navigation/types';
+import { NgTemplateOutlet } from '@angular/common';
+import { IconComponent } from '@ojiepermana/angular/component/icon';
+
+function injectNavigationController(inputs) {
+    const nav = inject(NAVIGATION_ADAPTER);
+    // 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 */ []));
+    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((onCleanup) => {
+        if (!inputs.enabled()) {
+            return;
+        }
+        const nextState = nav.register({
+            id: normalizedNavId(),
+            orientation: inputs.orientation(),
+            type: inputs.type(),
+            position: inputs.position(),
+            collapsed: collapsedPreference(),
+            dockbarMode: inputs.dockbarMode(),
+        }, owner);
+        registeredState.set(nextState);
+        onCleanup(() => nav.unregister(nextState.id, owner));
+    });
+    return {
+        normalizedNavId,
+        normalizedItems,
+        resolvedState,
+        activeIdSet,
+        toggleCollapsed: () => nav.toggleCollapsed(normalizedNavId()),
+    };
+}
+function normalizeId(value) {
+    return value.trim() || 'default';
+}
+function fallbackType(orientation, type) {
+    if (orientation === 'vertical' && (type === 'sidebar' || type === 'dockbar')) {
+        return type;
+    }
+    if (orientation === 'horizontal' && (type === 'navbar' || type === 'flyout')) {
+        return type;
+    }
+    return orientation === 'horizontal' ? 'navbar' : 'sidebar';
+}
+
+const NAVIGATION_SHELL = new InjectionToken('NAVIGATION_SHELL');
+
+const EMPTY_NAVIGATION_BADGE_CONTEXT$1 = Object.freeze({});
+const EMPTY_NAVIGATION_ACTIVE_IDS = new Set();
+/**
+ * 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' });
+    /** Id data publik dapat dipisahkan dari id state. Berguna untuk mirror mobile tanpa berbagi persistence state. */
+    dataId = input(null, { ...(ngDevMode ? { debugName: "dataId" } : /* istanbul ignore next */ {}), alias: 'data-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(NAVIGATION_ADAPTER);
+    routeContextAdapter = inject(NAVIGATION_ROUTE_CONTEXT_ADAPTER);
+    activatedRoute = inject(ActivatedRoute, { optional: true });
+    dataOwner = {};
+    hoverPreviewExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverPreviewExpanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Keyboard twin of the hover preview: a collapsed rail hides the children of
+     * every collapsible, so without this the only way into a nested route is a
+     * pointer hovering the rail.
+     */
+    focusPreviewExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusPreviewExpanded" }] : /* 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 */ []));
+    dockbarRouteContextPreference = computed(() => this.typeConfig()?.dockbarRouteContext?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarRouteContextPreference" }] : /* istanbul ignore next */ []));
+    dockbarBadgeContext = computed(() => this.typeConfig()?.dockbarBadgeContext?.() ?? EMPTY_NAVIGATION_BADGE_CONTEXT$1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarBadgeContext" }] : /* istanbul ignore next */ []));
+    dockbarRouteHeaderVisible = computed(() => this.typeConfig()?.dockbarRouteHeaderVisible?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarRouteHeaderVisible" }] : /* istanbul ignore next */ []));
+    /** Template footer aside dockbar dari slot `ng-template[NavigationAsideFooter]`. */
+    dockbarAsideFooter = computed(() => this.typeConfig()?.dockbarAsideFooter?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarAsideFooter" }] : /* 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 */ []));
+    flyoutPanelViewport = computed(() => this.typeConfig()?.flyoutPanelViewport?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutPanelViewport" }] : /* istanbul ignore next */ []));
+    flyoutTriggerClass = computed(() => this.typeConfig()?.flyoutTriggerClass?.() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerClass" }] : /* istanbul ignore next */ []));
+    flyoutTriggerButtonClass = computed(() => this.typeConfig()?.flyoutTriggerButtonClass?.() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerButtonClass" }] : /* istanbul ignore next */ []));
+    controller = injectNavigationController({
+        navId: this.navId,
+        data: this.data,
+        orientation: this.orientationPreference,
+        type: this.typePreference,
+        position: this.positionPreference,
+        collapsed: this.collapsedPreference,
+        dockbarMode: this.dockbarModePreference,
+        compact: this.compact,
+        activeIds: this.activeIds,
+        enabled: computed(() => this.typeConfig() !== null),
+    });
+    iconTemplate = contentChild(NavigationIconDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    normalizedItems = this.controller.normalizedItems;
+    resolvedState = this.controller.resolvedState;
+    activeIdSet = this.controller.activeIdSet;
+    dockbarRouteEnabled = computed(() => {
+        const context = this.dockbarRouteContextPreference();
+        return context !== null && context !== false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarRouteEnabled" }] : /* istanbul ignore next */ []));
+    dockbarResolvedRouteContext = computed(() => {
+        const automatic = this.routeContextAdapter.routeContext();
+        const config = this.dockbarRouteConfig();
+        return {
+            url: this.cleanString(config.url) ?? this.activeUrl() ?? automatic.url,
+            icon: config.icon === undefined ? automatic.icon : this.cleanString(config.icon),
+            badge: config.badge === undefined ? automatic.badge : this.cleanString(config.badge),
+            label: config.label === undefined ? automatic.label : this.cleanString(config.label),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarResolvedRouteContext" }] : /* istanbul ignore next */ []));
+    dockbarActiveRouteEntry = computed(() => {
+        if (!this.dockbarRouteEnabled()) {
+            return null;
+        }
+        const activeUrl = this.dockbarResolvedRouteContext().url;
+        return (this.normalizedItems().find((entry) => this.routeContextAdapter.isItemRouteActive(entry, activeUrl, this.activatedRoute)) ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarActiveRouteEntry" }] : /* istanbul ignore next */ []));
+    dockbarResolvedActiveIds = computed(() => this.dockbarRouteEnabled() ? EMPTY_NAVIGATION_ACTIVE_IDS : this.activeIdSet(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarResolvedActiveIds" }] : /* istanbul ignore next */ []));
+    dockbarActiveRoutePanelGroup = computed(() => {
+        const entry = this.dockbarActiveRouteEntry();
+        return entry && entry.children.length > 0 ? entry : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarActiveRoutePanelGroup" }] : /* istanbul ignore next */ []));
+    dockbarRouteHeader = computed(() => {
+        if (!this.dockbarRouteEnabled()) {
+            return null;
+        }
+        const activeEntry = this.dockbarActiveRouteEntry();
+        const route = this.dockbarResolvedRouteContext();
+        const fallbackIcon = this.cleanString(this.dockbarRouteConfig().fallbackIcon) ?? NAVIGATION_DOCKBAR_FALLBACK_ICON;
+        const icon = activeEntry
+            ? (this.cleanString(activeEntry.icon) ?? fallbackIcon)
+            : (route.icon ?? fallbackIcon);
+        const label = this.cleanString(activeEntry?.title) ?? route.label ?? 'Current navigation route';
+        const badgeKey = activeEntry?.badge?.source ?? route.badge;
+        const badge = badgeKey ? (this.dockbarBadgeContext()[badgeKey] ?? null) : null;
+        const item = activeEntry?.source ?? { title: label, icon };
+        return {
+            activeEntry,
+            panelGroup: this.dockbarActiveRoutePanelGroup(),
+            icon,
+            label,
+            badge,
+            badgeClass: cn('absolute -right-1 -top-1', activeEntry?.badge?.classes),
+            iconContext: {
+                $implicit: icon,
+                icon,
+                item,
+                active: true,
+                orientation: 'vertical',
+                level: 0,
+            },
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarRouteHeader" }] : /* istanbul ignore next */ []));
+    dockbarRailItems = computed(() => {
+        const activeEntry = this.dockbarRouteHeaderVisible() ? this.dockbarActiveRouteEntry() : null;
+        if (activeEntry === null) {
+            return this.normalizedItems();
+        }
+        return this.normalizedItems().filter((entry) => entry.key !== activeEntry.key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarRailItems" }] : /* istanbul ignore next */ []));
+    dockbarAsideId = computed(() => `nav-dockbar-${this.safeId(this.resolvedState().id)}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarAsideId" }] : /* istanbul ignore next */ []));
+    dockbarOpenGroup = computed(() => {
+        const state = this.resolvedState();
+        if (state.type !== 'dockbar') {
+            return null;
+        }
+        if (!this.dockbarRouteEnabled()) {
+            return this.nav.resolveDockbarGroup(state.id, this.normalizedItems(), state.dockbarMode, this.activeIdSet(), this.activeUrl());
+        }
+        const groups = this.nav.dockbarGroups(this.normalizedItems());
+        const explicitKey = this.nav.currentPanelKey(state.id);
+        const explicitGroup = explicitKey === null ? null : (groups.find((group) => group.key === explicitKey) ?? null);
+        if (explicitGroup !== null) {
+            return explicitGroup;
+        }
+        return state.dockbarMode === 'sticky' ? this.dockbarActiveRoutePanelGroup() : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarOpenGroup" }] : /* istanbul ignore next */ []));
+    dockbarActiveRoutePanelExpanded = computed(() => {
+        const panelGroup = this.dockbarActiveRoutePanelGroup();
+        const state = this.resolvedState();
+        if (panelGroup === null || state.type !== 'dockbar') {
+            return false;
+        }
+        return this.dockbarOpenGroup()?.key === panelGroup.key;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarActiveRoutePanelExpanded" }] : /* istanbul ignore next */ []));
+    previewRailExpanded = computed(() => {
+        const state = this.resolvedState();
+        if (state.orientation !== 'vertical' || state.type !== 'sidebar' || !state.collapsed) {
+            return false;
+        }
+        return (this.previewExpanded() ||
+            (this.sidebarCollapse() && (this.hoverPreviewExpanded() || this.focusPreviewExpanded())));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewRailExpanded" }] : /* istanbul ignore next */ []));
+    previewRailOffset = computed(() => this.previewRailExpanded()
+        ? 'calc(var(--layout-sidebar-width) - var(--layout-sidebar-collapsed-width))'
+        : '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.dockbarOpenGroup() !== 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-(--layout-sidebar-collapsed-width) shrink-0',
+        this.resolvedState().position === 'right' && 'ml-auto',
+    ], this.resolvedState().position === 'right' ? 'origin-right' : 'origin-left', this.previewRailExpanded() && [
+        'absolute inset-y-0 z-20 w-(--layout-sidebar-width) overflow-hidden bg-background shadow-xl',
+        this.resolvedState().position === 'right'
+            ? 'right-0 border-l border-border'
+            : 'left-0 border-r border-border',
+    ]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    state = this.resolvedState;
+    resolvedDataId = computed(() => this.dataId()?.trim() || this.navId().trim() || 'default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDataId" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('relative block min-h-0 text-foreground transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none', this.resolvedState().orientation === 'horizontal'
+        ? 'h-full w-full'
+        : this.resolvedState().type === 'dockbar'
+            ? this.dockbarAsideOpen()
+                ? // Rail + aside sit side by side, so the host reserves both widths.
+                    'w-[calc(var(--layout-sidebar-collapsed-width)+var(--layout-aside-width))]'
+                : 'w-(--layout-sidebar-collapsed-width)'
+            : this.resolvedState().collapsed
+                ? 'w-(--layout-sidebar-collapsed-width)'
+                : 'w-(--layout-sidebar-width)', this.resolvedState().orientation === 'horizontal' ||
+        this.resolvedState().type === 'dockbar' ||
+        this.previewRailExpanded()
+        ? 'overflow-visible'
+        : 'overflow-hidden', this.class()), /* @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((onCleanup) => {
+            const dataId = this.resolvedDataId();
+            this.nav.publishData(dataId, this.data(), this.dataOwner);
+            onCleanup(() => this.nav.clearData(dataId, this.dataOwner));
+        });
+    }
+    /**
+     * 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();
+    }
+    toggleDockbarActiveRoutePanel() {
+        const state = this.resolvedState();
+        const panelGroup = this.dockbarActiveRoutePanelGroup();
+        if (state.type === 'dockbar' && state.dockbarMode === 'drawer' && panelGroup !== null) {
+            this.nav.togglePanel(state.id, panelGroup);
+        }
+    }
+    closeDockbarPanel() {
+        const state = this.resolvedState();
+        if (state.type === 'dockbar' && this.nav.currentPanelKey(state.id) !== null) {
+            this.nav.closePanel(state.id);
+            return true;
+        }
+        return false;
+    }
+    restoreDockbarRoutePanel() {
+        const state = this.resolvedState();
+        if (!this.dockbarRouteEnabled() ||
+            state.type !== 'dockbar' ||
+            state.dockbarMode !== 'sticky' ||
+            this.nav.currentPanelKey(state.id) === null) {
+            return;
+        }
+        this.nav.closePanel(state.id);
+    }
+    setHoverPreview(value) {
+        this.hoverPreviewExpanded.set(this.sidebarCollapse() ? value : false);
+    }
+    setFocusPreview(value, event) {
+        if (!this.sidebarCollapse()) {
+            this.focusPreviewExpanded.set(false);
+            return;
+        }
+        // `focusout` also fires while focus moves between two items inside the rail;
+        // collapsing then would yank the next item out of the DOM mid-Tab.
+        if (!value && event) {
+            const next = event.relatedTarget;
+            const host = event.currentTarget;
+            if (next instanceof Node && host instanceof Node && host.contains(next)) {
+                return;
+            }
+        }
+        this.focusPreviewExpanded.set(value);
+    }
+    dockbarRouteConfig() {
+        const context = this.dockbarRouteContextPreference();
+        return context !== null && typeof context === 'object' ? context : {};
+    }
+    cleanString(value) {
+        return typeof value === 'string' && value.trim() ? value.trim() : null;
+    }
+    safeId(value) {
+        const normalized = value
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9_-]+/g, '-');
+        return normalized || 'default';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "data-id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapse-tree", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "nav-group-class", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIds: "openedIdsChange", itemSelected: "itemSelected" }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "setHoverPreview(true)", "mouseleave": "setHoverPreview(false)", "focusin": "setFocusPreview(true)", "focusout": "setFocusPreview(false, $event)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "attr.data-id": "resolvedDataId()", "attr.data-orientation": "resolvedState().orientation", "attr.data-type": "resolvedState().type", "attr.data-type-style": "typeStyle()", "attr.data-position": "resolvedState().position", "attr.data-collapse-tree": "collapseTree()", "attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null" } }, providers: [
+            { provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) },
+        ], queries: [{ propertyName: "iconTemplate", first: true, predicate: NavigationIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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-id]': 'resolvedDataId()',
+                        '[attr.data-orientation]': 'resolvedState().orientation',
+                        '[attr.data-type]': 'resolvedState().type',
+                        '[attr.data-type-style]': 'typeStyle()',
+                        '[attr.data-position]': 'resolvedState().position',
+                        '[attr.data-collapse-tree]': 'collapseTree()',
+                        '[attr.data-preview-expanded]': 'previewRailExpanded() ? "true" : null',
+                        '(mouseenter)': 'setHoverPreview(true)',
+                        '(mouseleave)': 'setHoverPreview(false)',
+                        '(focusin)': 'setFocusPreview(true)',
+                        '(focusout)': 'setFocusPreview(false, $event)',
+                    },
+                    template: ` <ng-content /> `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-tree", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-group-class", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }, { type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationIconDirective), { isSignal: true }] }] } });
+
+class NavigationItemContentComponent {
+    nav = inject(NAVIGATION_ADAPTER);
+    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 */ []));
+    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-colors duration-200', this.compact() && 'mx-auto', this.active() ? 'text-current' : 'text-muted-foreground group-hover/nav:text-current'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSlotClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => cn('block truncate', this.active() && '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('nav-subtitle block truncate 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-(length:--nav-icon-size-sub) 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 */ []));
+    defaultIconClasses = computed(() => cn(this.compact() ? 'text-(length:--nav-icon-size-rail)' : 'text-(length:--nav-icon-size)', '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());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 }, 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="inherit" [fill]="1" />
+        }
+      </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?.title; as badgeTitle) {
+        <span [class]="item().badge?.classes ?? defaultBadgeClasses()">{{ badgeTitle }}</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.1.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="inherit" [fill]="1" />
+        }
+      </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?.title; as badgeTitle) {
+        <span [class]="item().badge?.classes ?? defaultBadgeClasses()">{{ badgeTitle }}</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 }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }] } });
+
+/**
+ * `item.panelId` is derived from the item key alone, so the same data rendered
+ * by two navigations — the desktop `main` rail and its `main-mobile` mirror, for
+ * instance — emits the same element id twice. Every id an item contributes is
+ * therefore scoped by the navigation that renders it.
+ */
+function navigationPanelId(navId, item) {
+    return `${safeNavId(navId)}-${item.panelId}`;
+}
+function navigationHeadingId(navId, item) {
+    return `${navigationPanelId(navId, item)}-heading`;
+}
+function safeNavId(value) {
+    return (value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]+/g, '-') || 'default');
+}
+
+class NavigationItemComponent {
+    nav = inject(NAVIGATION_ADAPTER);
+    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 */ []));
+    stairsRail = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stairsRail" }] : /* 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 */ []));
+    listedAsOpen = computed(() => this.openedIdSet().has(this.item().stateId) || this.openedIdSet().has(this.item().key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listedAsOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * An active branch opens itself, which leaves `openedIds` unable to say
+     * "closed": dropping the id lets `isActive()` re-open the branch on the next
+     * read, so `aria-expanded` reports a state the chevron never reaches.
+     *
+     * Auto-opening is therefore only a starting position. Once the chevron has
+     * been used, `openedIds` alone decides, so a collapse holds and a later
+     * `openedIds` carrying this branch still re-opens it.
+     */
+    userToggled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userToggled" }] : /* 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(() => {
+        // Dividers are decorative (aria-hidden); a `separator` role is not a valid
+        // child of `list` and would trip axe's aria-required-children. Horizontal
+        // items are presentational `<li>` wrappers around the real menuitem.
+        return this.orientation() === 'horizontal' ? 'none' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    panelId = computed(() => navigationPanelId(this.navId(), this.item()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    headingId = computed(() => navigationHeadingId(this.navId(), this.item()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
+    isRouterItem() {
+        return this.nav.isRouterItem(this.item());
+    }
+    hrefFor() {
+        return this.nav.hrefFor(this.item());
+    }
+    /**
+     * The `routerLink` a disabled item never gets.
+     *
+     * `RouterLink` registers its OWN click listener on the host, so a guard in
+     * `selectItem` was racing it rather than stopping it: the route changed even
+     * though the item looked dead. Not binding the link at all removes the
+     * navigation path from the start, which is the only version of "disabled" that
+     * is actually true.
+     */
+    routerLinkFor() {
+        return this.item().disabled ? null : (this.item().link ?? null);
+    }
+    /** Same rule for a plain anchor: no `href` means nothing to follow. */
+    hrefAttribute() {
+        return this.item().disabled ? null : this.hrefFor();
+    }
+    /**
+     * An anchor without `href` is already out of the tab order; this states it
+     * outright, so the item cannot be reached by Tab and then activated by Enter.
+     */
+    leafTabIndex() {
+        return this.item().disabled ? -1 : null;
+    }
+    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() {
+        if (this.userToggled()) {
+            return this.listedAsOpen();
+        }
+        return this.listedAsOpen() || this.isActive();
+    }
+    toggleOpen() {
+        if (this.item().disabled) {
+            return;
+        }
+        const open = this.isOpen();
+        this.userToggled.set(true);
+        const next = new Set(this.openedIds());
+        if (open) {
+            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 transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.orientation() === 'horizontal' && this.level() === 0
+            ? 'h-(--nav-item-height) px-(--nav-item-padding-x)'
+            : 'min-h-(--nav-item-height) w-full px-(--nav-item-padding-x) py-1 text-left', 'gap-(--nav-item-gap)', this.compact() && 'size-(--nav-rail-item-size) justify-center gap-0 px-0 py-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 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-(--nav-item-height) px-(--nav-item-padding-x)'
+            : 'min-h-(--nav-item-height) w-full px-(--nav-item-padding-x) py-1 text-left', 'gap-(--nav-item-gap)', this.compact() && 'size-(--nav-rail-item-size) justify-center gap-0 px-0 py-0 text-center', this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
+    }
+    interactiveStateClasses(active) {
+        // Konektor hanya digambar saat list induk memang menggambar rail stairs —
+        // anak langsung sebuah group tidak punya rail, konektornya akan mengambang.
+        const showsNestedActiveConnector = active && this.orientation() === 'vertical' && !this.compact() && this.stairsRail();
+        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-[calc(var(--nav-indent)-var(--nav-rail-offset))] after:top-1/2 after:-z-10 after:h-px after:w-[calc(var(--nav-indent)-var(--nav-rail-offset))] after:-translate-y-1/2 after:rounded-full after:bg-current/25 after:content-['']", active
+                ? 'text-foreground before:bg-accent'
+                : 'text-foreground/80 hover:text-accent-foreground hover:before:bg-accent');
+        }
+        return active
+            ? 'text-foreground bg-accent'
+            : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground';
+    }
+    chevronClasses() {
+        return cn('ml-auto shrink-0 self-center text-(length:--nav-icon-size-sub) text-muted-foreground/70 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-(--nav-item-padding-x) pt-4 pb-1 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-(--nav-rail-offset) pl-[calc(var(--nav-indent)-var(--nav-rail-offset))] 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'));
+    }
+    showsStairsRailForChildren() {
+        return (!this.compact() &&
+            this.collapseTree() === 'stairs' &&
+            this.item().type !== 'group' &&
+            this.item().type !== 'mega');
+    }
+    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-(--nav-rail-offset) 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-[calc(var(--nav-item-height)/2+var(--spacing-base)*0.5)]'
+            : 'before:-top-0.5', this.lastInBranch()
+            ? 'before:bottom-[calc(100%-var(--nav-item-height)/2)]'
+            : 'before:-bottom-0.5');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 }, stairsRail: { classPropertyName: "stairsRail", publicName: "stairsRail", 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\" || item().type === \"divider\" ? \"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()">
+            <span class="block truncate">{{ item().title }}</span>
+
+            @if (item().subtitle) {
+              <span
+                class="nav-subtitle -mt-0.5 block truncate text-2xs normal-case text-muted-foreground"
+                data-navigation-group-subtitle
+              >
+                {{ item().subtitle }}
+              </span>
+            }
+          </div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="showChildren()"
+          [attr.aria-controls]="showChildren() ? panelId() : null"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()"
+        >
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [iconTemplate]="iconTemplate()"
+          />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" size="inherit" [class]="chevronClasses()" />
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="panelId()" [class]="childListClasses()" role="list">
+            <ng-container [ngTemplateOutlet]="childItems" />
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="routerLinkFor()"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            [attr.rel]="relFor()"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [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()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefAttribute()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [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()"
+              [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()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </button>
+        }
+      }
+    }
+    <!--
+      The recursive child list, defined once.
+
+      It was written out three times, in the group, collapsible, and mega
+      branches, 25 identical lines each. Nothing needs passing in: every binding
+      is a member of this component and so is lexically in scope here, and
+      isFirst / isLast are @for locals declared inside.
+
+      The collapsible copy used to hardcode compact="false". That is the same
+      value there: its list only renders under showChildren(), which already
+      requires compact() to be false.
+    -->
+    <ng-template #childItems>
+      @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()"
+          [stairsRail]="showsStairsRailForChildren()"
+          [straightRailActive]="isActive()"
+          [firstInBranch]="isFirst"
+          [lastInBranch]="isLast"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)"
+        ></li>
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { 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", "iconTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[NavigationItem]',
+                    imports: [
+                        IconComponent,
+                        NavigationItemContentComponent,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        RouterLinkActive,
+                    ],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'hostRole()',
+                        '[attr.data-navigation-item-key]': 'item().key',
+                        '[attr.aria-hidden]': 'item().type === "spacer" || item().type === "divider" ? "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()">
+            <span class="block truncate">{{ item().title }}</span>
+
+            @if (item().subtitle) {
+              <span
+                class="nav-subtitle -mt-0.5 block truncate text-2xs normal-case text-muted-foreground"
+                data-navigation-group-subtitle
+              >
+                {{ item().subtitle }}
+              </span>
+            }
+          </div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="showChildren()"
+          [attr.aria-controls]="showChildren() ? panelId() : null"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()"
+        >
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [iconTemplate]="iconTemplate()"
+          />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" size="inherit" [class]="chevronClasses()" />
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="panelId()" [class]="childListClasses()" role="list">
+            <ng-container [ngTemplateOutlet]="childItems" />
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="routerLinkFor()"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            [attr.rel]="relFor()"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [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()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefAttribute()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [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()"
+              [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()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </button>
+        }
+      }
+    }
+    <!--
+      The recursive child list, defined once.
+
+      It was written out three times, in the group, collapsible, and mega
+      branches, 25 identical lines each. Nothing needs passing in: every binding
+      is a member of this component and so is lexically in scope here, and
+      isFirst / isLast are @for locals declared inside.
+
+      The collapsible copy used to hardcode compact="false". That is the same
+      value there: its list only renders under showChildren(), which already
+      requires compact() to be false.
+    -->
+    <ng-template #childItems>
+      @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()"
+          [stairsRail]="showsStairsRailForChildren()"
+          [straightRailActive]="isActive()"
+          [firstInBranch]="isFirst"
+          [lastInBranch]="isLast"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)"
+        ></li>
+      }
+    </ng-template>
+  `,
+                }]
+        }], 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 }] }], stairsRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "stairsRail", 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.1.4", ngImport: i0, type: NavigationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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.1.4", ngImport: i0, type: NavigationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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()"
+          [viewport]="container.flyoutPanelViewport()"
+          [triggerClass]="container.flyoutTriggerClass()"
+          [triggerButtonClass]="container.flyoutTriggerButtonClass()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        >
+          <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+          <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+        </NavigationFlyoutMenu>
+      }
+    } @else if (navState.orientation === 'horizontal') {
+      @defer (on immediate) {
+        <NavigationHorizontal
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else if (navState.type === 'dockbar') {
+      @defer (on immediate) {
+        <NavigationDockbarMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [railItems]="container.dockbarRailItems()"
+          [badgeContext]="container.dockbarBadgeContext()"
+          [mode]="navState.dockbarMode"
+          [position]="navState.position"
+          [asideFooterTemplate]="container.dockbarAsideFooter()"
+          [itemClass]="container.itemClass()"
+          [activeIds]="container.dockbarResolvedActiveIds()"
+          [resolvedGroup]="container.dockbarOpenGroup()"
+          [activeUrl]="
+            container.dockbarRouteEnabled()
+              ? container.dockbarResolvedRouteContext().url
+              : container.activeUrl()
+          "
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else {
+      <!-- The vertical list (sidebar) is the common default — kept eager, no first-paint pop-in. -->
+      <NavigationList
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], deferBlockDependencies: [() => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-BCGvhoYj.mjs').then(m => m.NavigationFlyoutMenuComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-horizontal.component-Dk_03e-6.mjs').then(m => m.NavigationHorizontalComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-DBQHdvGa.mjs').then(m => m.NavigationDockbarMenuComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ngImport: i0, type: NavigationContentComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-BCGvhoYj.mjs').then(m => m.NavigationFlyoutMenuComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-horizontal.component-Dk_03e-6.mjs').then(m => m.NavigationHorizontalComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-DBQHdvGa.mjs').then(m => m.NavigationDockbarMenuComponent)], resolveMetadata: (NavigationFlyoutMenuComponent, NavigationHorizontalComponent, NavigationDockbarMenuComponent) => ({ decorators: [{
+                type: Component,
+                args: [{
+                        selector: 'NavigationContent',
+                        imports: [
+                            NavigationDockbarMenuComponent,
+                            NavigationFlyoutMenuComponent,
+                            NavigationHorizontalComponent,
+                            NavigationListComponent,
+                        ],
+                        host: {
+                            '[class]': 'hostClasses()',
+                        },
+                        template: `
+    @let navState = container.displayState();
+
+    @if (navState.orientation === 'horizontal' && navState.type === 'flyout') {
+      <!-- Less-common renderers are code-split: a sidebar-only app never bundles them. -->
+      @defer (on immediate) {
+        <NavigationFlyoutMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [label]="container.flyoutLabel()"
+          [icon]="container.flyoutIcon()"
+          [iconOnly]="container.flyoutIconOnly()"
+          [iconPosition]="container.flyoutIconPosition()"
+          [variant]="container.flyoutTriggerVariant()"
+          [floating]="container.flyoutTriggerFloating()"
+          [viewport]="container.flyoutPanelViewport()"
+          [triggerClass]="container.flyoutTriggerClass()"
+          [triggerButtonClass]="container.flyoutTriggerButtonClass()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        >
+          <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+          <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+        </NavigationFlyoutMenu>
+      }
+    } @else if (navState.orientation === 'horizontal') {
+      @defer (on immediate) {
+        <NavigationHorizontal
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [position]="navState.position"
+          [typeStyle]="container.typeStyle()"
+          [compact]="container.compact()"
+          [itemClass]="container.itemClass()"
+          [groupClass]="container.groupClass()"
+          [activeIds]="container.activeIdSet()"
+          [activeUrl]="container.activeUrl()"
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else if (navState.type === 'dockbar') {
+      @defer (on immediate) {
+        <NavigationDockbarMenu
+          [navId]="navState.id"
+          [items]="container.normalizedItems()"
+          [railItems]="container.dockbarRailItems()"
+          [badgeContext]="container.dockbarBadgeContext()"
+          [mode]="navState.dockbarMode"
+          [position]="navState.position"
+          [asideFooterTemplate]="container.dockbarAsideFooter()"
+          [itemClass]="container.itemClass()"
+          [activeIds]="container.dockbarResolvedActiveIds()"
+          [resolvedGroup]="container.dockbarOpenGroup()"
+          [activeUrl]="
+            container.dockbarRouteEnabled()
+              ? container.dockbarResolvedRouteContext().url
+              : container.activeUrl()
+          "
+          [iconTemplate]="container.iconTemplate()"
+          [collapseTree]="container.collapseTree()"
+          [openedIds]="container.openedIds()"
+          (openedIdsChange)="container.openedIds.set($event)"
+          (itemSelected)="container.itemSelected.emit($event)"
+        />
+      }
+    } @else {
+      <!-- The vertical list (sidebar) is the common default — kept eager, no first-paint pop-in. -->
+      <NavigationList
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [collapsed]="navState.collapsed"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
+    }
+  `,
+                    }]
+            }], ctorParameters: null, propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
+
+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 */ []));
+    displayCollapsed = computed(() => this.shell?.displayState().collapsed ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * Baris isi footer. Saat collapsed/dockbar (vertical) isi (inisial user) dipusatkan
+     * di tengah rail agar simetris dengan `NavigationHeader` dan ikon nav-item; selain
+     * itu rata kiri dengan `gap-3` (padding diserahkan consumer, mis. `px-3`).
+     */
+    rowClasses = computed(() => cn('flex h-full min-w-0 w-full items-center', !this.isHorizontal() && this.displayCollapsed() ? 'justify-center' : 'gap-3'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.isHorizontal()
+        ? 'relative z-10 block h-full w-auto shrink-0'
+        : 'sticky bottom-0 z-10 block h-(--layout-topbar-height) shrink-0 border-t border-[hsl(var(--border)/var(--section-border-opacity))]', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavigationFooterComponent, isStandalone: true, selector: "NavigationFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "displayCollapsed()" } }, ngImport: i0, template: `
+    <div [class]="rowClasses()">
+      <ng-content />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooter',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'displayCollapsed()',
+                    },
+                    template: `
+    <div [class]="rowClasses()">
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+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 */ []));
+    /**
+     * The toggle used to disappear once the rail collapsed, which left the
+     * collapsed rail with no control that could expand it again — nested items
+     * below a collapsible were then reachable by hover only.
+     */
+    showToggle = computed(() => {
+        if (this.isHorizontal()) {
+            return false;
+        }
+        return this.toggle() || this.shell.collapseEnabled();
+    }, /* @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-(--layout-topbar-height) shrink-0 border-b border-[hsl(var(--border)/var(--section-border-opacity))]', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    toggleCollapsed() {
+        this.shell.toggleCollapsed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 size-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          [attr.aria-label]="toggleAriaLabel()"
+          [attr.title]="toggleAriaLabel()"
+          data-navigation-header-toggle="true"
+          (click)="toggleCollapsed()"
+        >
+          <Icon
+            data-navigation-header-toggle-icon="true"
+            [name]="toggleIconName()"
+            size="inherit"
+            class="text-(length:--nav-icon-size)"
+          />
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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 size-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          [attr.aria-label]="toggleAriaLabel()"
+          [attr.title]="toggleAriaLabel()"
+          data-navigation-header-toggle="true"
+          (click)="toggleCollapsed()"
+        >
+          <Icon
+            data-navigation-header-toggle-icon="true"
+            [name]="toggleIconName()"
+            size="inherit"
+            class="text-(length:--nav-icon-size)"
+          />
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * 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.1.4", ngImport: i0, type: NavigationSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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.1.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 }] }] } });
+
+/**
+ * Slot footer untuk aside dockbar. Proyeksikan sebagai `ng-template` di dalam
+ * `<NavigationDockbar>`; dirender di dasar aside (h-12, border-t) setiap kali
+ * panel group terbuka — baik mode `sticky` maupun `drawer`.
+ *
+ * ```html
+ * <NavigationDockbar>
+ *   <NavigationFooter>…rail…</NavigationFooter>
+ *   <ng-template NavigationAsideFooter>…identitas user + aksi…</ng-template>
+ * </NavigationDockbar>
+ * ```
+ *
+ * Berbeda dengan `NavigationFooter` (kolom rail, selalu collapsed pada dockbar),
+ * isi template ini tampil dalam konteks lebar penuh aside — cocok untuk nama +
+ * email + tombol aksi seperti footer sidebar expanded.
+ */
+class NavigationAsideFooterDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationAsideFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: NavigationAsideFooterDirective, isStandalone: true, selector: "ng-template[NavigationAsideFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationAsideFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[NavigationAsideFooter]',
+                }]
+        }] });
+
+const EMPTY_NAVIGATION_BADGE_CONTEXT = Object.freeze({});
+/**
+ * Type dockbar vertikal (rail ikon + aside) untuk `<Navigation>`. Slot
+ * `NavigationHeader` dan `NavigationFooter` opsional; `NavigationContent`
+ * selalu dirender (default otomatis bila tidak diproyeksikan). Slot
+ * `ng-template[NavigationAsideFooter]` opsional — dirender sebagai footer di
+ * dasar aside saat panel group terbuka.
+ */
+class NavigationDockbarComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    mode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    routeContext = input(null, { ...(ngDevMode ? { debugName: "routeContext" } : /* istanbul ignore next */ {}), alias: 'dockbar-route-context' });
+    badgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT, { ...(ngDevMode ? { debugName: "badgeContext" } : /* istanbul ignore next */ {}), alias: 'dockbar-badge' });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    headerSlot = contentChild(NavigationHeaderComponent, /* @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 */ []));
+    asideFooterSlot = contentChild(NavigationAsideFooterDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideFooterSlot" }] : /* istanbul ignore next */ []));
+    routeContextEnabled = computed(() => {
+        const context = this.routeContext();
+        return context !== null && context !== false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routeContextEnabled" }] : /* 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,
+            dockbarRouteContext: this.routeContext,
+            dockbarBadgeContext: this.badgeContext,
+            dockbarRouteHeaderVisible: computed(() => this.routeContextEnabled() && this.headerSlot() === undefined),
+            dockbarAsideFooter: computed(() => this.asideFooterSlot()?.templateRef ?? null),
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    onPointerOut(event) {
+        const relatedTarget = event.relatedTarget;
+        const nodeType = this.host.nativeElement.ownerDocument.defaultView?.Node;
+        if (relatedTarget !== null &&
+            nodeType !== undefined &&
+            relatedTarget instanceof nodeType &&
+            this.host.nativeElement.contains(relatedTarget)) {
+            return;
+        }
+        this.container.restoreDockbarRoutePanel();
+    }
+    onEscape(event) {
+        const state = this.container.resolvedState();
+        // Escape dari menu/aside sudah ditangani child dan ditandai preventDefault.
+        // Handler host ini menutup gap saat fokus kembali ke route-header sibling.
+        if (event.defaultPrevented || state.type !== 'dockbar' || state.dockbarMode !== 'drawer') {
+            return;
+        }
+        if (!this.container.closeDockbarPanel()) {
+            return;
+        }
+        event.preventDefault();
+        this.host.nativeElement
+            .querySelector('[data-navigation-dockbar-route-trigger="true"]')
+            ?.focus();
+    }
+    toggleActiveRoutePanel() {
+        const wasExpanded = this.container.dockbarActiveRoutePanelExpanded();
+        this.container.toggleDockbarActiveRoutePanel();
+        if (!wasExpanded) {
+            afterNextRender({
+                read: () => {
+                    const aside = this.host.nativeElement.querySelector(`#${this.container.dockbarAsideId()}`);
+                    aside
+                        ?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')
+                        ?.focus();
+                },
+            }, { injector: this.injector });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationDockbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 }, routeContext: { classPropertyName: "routeContext", publicName: "dockbar-route-context", isSignal: true, isRequired: false, transformFunction: null }, badgeContext: { classPropertyName: "badgeContext", publicName: "dockbar-badge", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape($event)", "pointerout": "onPointerOut($event)" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }, { propertyName: "asideFooterSlot", first: true, predicate: NavigationAsideFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    } @else if (container.dockbarRouteHeader(); as routeHeader) {
+      <NavigationHeader>
+        <ng-template #routeIndicator>
+          <span
+            aria-hidden="true"
+            class="inline-flex items-center justify-center text-(length:--nav-icon-size-rail) text-current"
+          >
+            @if (container.iconTemplate(); as customIcon) {
+              <ng-container
+                [ngTemplateOutlet]="customIcon.template"
+                [ngTemplateOutletContext]="routeHeader.iconContext"
+              />
+            } @else {
+              <Icon [name]="routeHeader.icon" size="inherit" [fill]="1" />
+            }
+          </span>
+
+          @if (routeHeader.badge; as badge) {
+            @defer (on immediate) {
+              <NavigationBadgeCount [badge]="badge" [class]="routeHeader.badgeClass" />
+            }
+          }
+        </ng-template>
+
+        @if (routeHeader.panelGroup && container.resolvedState().dockbarMode === 'drawer') {
+          <button
+            type="button"
+            data-navigation-dockbar-route-header="true"
+            data-navigation-dockbar-route-trigger="true"
+            [attr.data-navigation-item-key]="routeHeader.activeEntry?.key"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center rounded-md bg-accent text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            [attr.aria-controls]="container.dockbarAsideId()"
+            [attr.aria-expanded]="container.dockbarActiveRoutePanelExpanded()"
+            (click)="toggleActiveRoutePanel()"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </button>
+        } @else {
+          <span
+            data-navigation-dockbar-route-header="true"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center text-foreground"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </span>
+        }
+      </NavigationHeader>
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], deferBlockDependencies: [() => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-badge-count.component-CDBxQ8rk.mjs').then(m => m.NavigationBadgeCountComponent)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ngImport: i0, type: NavigationDockbarComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-badge-count.component-CDBxQ8rk.mjs').then(m => m.NavigationBadgeCountComponent)], resolveMetadata: NavigationBadgeCountComponent => ({ decorators: [{
+                type: Component,
+                args: [{
+                        selector: 'NavigationDockbar',
+                        imports: [
+                            IconComponent,
+                            NavigationBadgeCountComponent,
+                            NavigationContentComponent,
+                            NavigationHeaderComponent,
+                            NgTemplateOutlet,
+                        ],
+                        host: {
+                            '[class]': 'hostClasses()',
+                            '(keydown.escape)': 'onEscape($event)',
+                            '(pointerout)': 'onPointerOut($event)',
+                        },
+                        template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    } @else if (container.dockbarRouteHeader(); as routeHeader) {
+      <NavigationHeader>
+        <ng-template #routeIndicator>
+          <span
+            aria-hidden="true"
+            class="inline-flex items-center justify-center text-(length:--nav-icon-size-rail) text-current"
+          >
+            @if (container.iconTemplate(); as customIcon) {
+              <ng-container
+                [ngTemplateOutlet]="customIcon.template"
+                [ngTemplateOutletContext]="routeHeader.iconContext"
+              />
+            } @else {
+              <Icon [name]="routeHeader.icon" size="inherit" [fill]="1" />
+            }
+          </span>
+
+          @if (routeHeader.badge; as badge) {
+            @defer (on immediate) {
+              <NavigationBadgeCount [badge]="badge" [class]="routeHeader.badgeClass" />
+            }
+          }
+        </ng-template>
+
+        @if (routeHeader.panelGroup && container.resolvedState().dockbarMode === 'drawer') {
+          <button
+            type="button"
+            data-navigation-dockbar-route-header="true"
+            data-navigation-dockbar-route-trigger="true"
+            [attr.data-navigation-item-key]="routeHeader.activeEntry?.key"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center rounded-md bg-accent text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            [attr.aria-controls]="container.dockbarAsideId()"
+            [attr.aria-expanded]="container.dockbarActiveRoutePanelExpanded()"
+            (click)="toggleActiveRoutePanel()"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </button>
+        } @else {
+          <span
+            data-navigation-dockbar-route-header="true"
+            class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center text-foreground"
+          >
+            <span class="sr-only">{{ routeHeader.label }}</span>
+            <ng-container [ngTemplateOutlet]="routeIndicator" />
+          </span>
+        }
+      </NavigationHeader>
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+                    }]
+            }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], routeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockbar-route-context", required: false }] }], badgeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockbar-badge", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }], asideFooterSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationAsideFooterDirective), { isSignal: true }] }] } }) });
+
+/**
+ * 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-type-style' });
+    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.1.4", ngImport: i0, type: NavigationNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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-type-style", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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-type-style", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+
+/**
+ * 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 });
+    /**
+     * Saat trigger floating dibuka, tempelkan panel ke batas atas viewport dan
+     * bentangkan sepanjang viewport. Dipakai window chrome; default popover tetap
+     * menempel ke trigger.
+     */
+    panelViewport = input(false, { ...(ngDevMode ? { debugName: "panelViewport" } : /* istanbul ignore next */ {}), alias: 'panel-viewport',
+        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' });
+    /** Kelas tambahan khusus tombol trigger, tanpa memengaruhi host atau item di dalam panel. */
+    triggerButtonClass = input('', { ...(ngDevMode ? { debugName: "triggerButtonClass" } : /* istanbul ignore next */ {}), alias: 'trigger-button-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-type-style' });
+    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,
+            flyoutPanelViewport: this.panelViewport,
+            flyoutTriggerClass: this.triggerClass,
+            flyoutTriggerButtonClass: this.triggerButtonClass,
+            typeStyle: this.typeStyle,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.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 }, panelViewport: { classPropertyName: "panelViewport", publicName: "panel-viewport", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "trigger-class", isSignal: true, isRequired: false, transformFunction: null }, triggerButtonClass: { classPropertyName: "triggerButtonClass", publicName: "trigger-button-class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-type-style", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
+         NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
+         bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
+         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
+    <NavigationContent>
+      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+    </NavigationContent>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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 }] }], panelViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel-viewport", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-class", required: false }] }], triggerButtonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-button-class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type-style", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Tampilan compact aktif saat sidebar collapsible sedang collapsed, atau saat
+ * type dockbar aktif — rail dockbar selalu selebar ikon
+ * (`--layout-sidebar-collapsed-width`) 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.1.4", ngImport: i0, type: NavigationCollapseRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.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.1.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.1.4", ngImport: i0, type: NavigationCollapseExpandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: NavigationCollapseExpandedDirective, isStandalone: true, selector: "[NavigationCollapseExpanded]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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.1.4", ngImport: i0, type: NavigationFooterActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.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.1.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();
+}
+
+/**
+ * Internal, on purpose: this file is deliberately NOT re-exported from
+ * `shell/public-api.ts`. `navigation-initials.ts` is, and putting the
+ * composition there would have made it public API by accident.
+ */
+/** The base look of an initial block, shared by the header and footer slots. */
+const INITIAL_HOST_CLASSES = 'inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary/10 text-primary';
+/**
+ * The derived state both initial blocks need.
+ *
+ * `NavigationHeaderInitial` and `NavigationFooterInitial` were 95 percent the
+ * same file, differing only in whether they exposed a `compact` input. Each
+ * component keeps its own decorator (the selector, host bindings, and template
+ * have to stay literal for the compiler) and takes its derived state from here,
+ * so the initials rule and the base look cannot drift between the two.
+ */
+function setupNavigationInitial(sources) {
+    return {
+        // An explicit `initials` override wins, trimmed to two upper-case letters.
+        resolvedInitials: computed(() => sources.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(sources.name())),
+        iconClasses: computed(() => sources.compact() ? 'text-(length:--nav-icon-size-rail)' : 'text-(length:--nav-icon-size)'),
+        hostClasses: computed(() => cn(INITIAL_HOST_CLASSES, sources.class())),
+    };
+}
+
+/**
+ * Blok avatar/inisial untuk slot `NavigationFooter` (profil user). Sama seperti
+ * `NavigationHeaderInitial` dengan bentuk identitas yang seragam (rounded-md).
+ * 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' });
+    view = setupNavigationInitial({
+        name: () => this.name(),
+        initials: () => this.initials(),
+        // The footer slot has no `compact` input and never used the rail token, so
+        // this stays false rather than widening its public surface.
+        compact: () => false,
+        class: () => this.class(),
+    });
+    resolvedInitials = this.view.resolvedInitials;
+    hostClasses = this.view.hostClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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="inherit" [fill]="1" class="text-(length:--nav-icon-size)" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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="inherit" [fill]="1" class="text-(length:--nav-icon-size)" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * 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.1.4", ngImport: i0, type: NavigationFooterTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle -mt-0.5 block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooterTitle',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'collapsed()',
+                    },
+                    template: `
+    <span class="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle -mt-0.5 block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * 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 */ []));
+    /** Use the rail icon token when the header is rendered in compact navigation. */
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    view = setupNavigationInitial({
+        name: () => this.name(),
+        initials: () => this.initials(),
+        compact: () => this.compact(),
+        class: () => this.class(),
+    });
+    resolvedInitials = this.view.resolvedInitials;
+    iconClasses = this.view.iconClasses;
+    hostClasses = this.view.hostClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" size="inherit" [fill]="1" [class]="iconClasses()" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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="inherit" [fill]="1" [class]="iconClasses()" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * 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.1.4", ngImport: i0, type: NavigationHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHeaderTitle',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'collapsed()',
+                    },
+                    template: `
+    <span class="nav-text block truncate text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span
+        class="nav-subtitle block truncate text-muted-foreground"
+        data-navigation-sidebar-subtitle
+      >
+        {{ sub }}
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavigationItemComponent as N, NavigationItemContentComponent as a, NavigationListComponent as b, NavigationAsideFooterDirective as c, NavigationCollapseExpandedDirective as d, NavigationCollapseRootDirective as e, NavigationContainerComponent as f, NavigationContentComponent as g, NavigationDockbarComponent as h, NavigationFlyoutComponent as i, NavigationFooterActionComponent as j, NavigationFooterComponent as k, NavigationFooterInitialComponent as l, NavigationFooterTitleComponent as m, navigationPanelId as n, NavigationHeaderComponent as o, NavigationHeaderInitialComponent as p, NavigationHeaderTitleComponent as q, NavigationNavbarComponent as r, NavigationSidebarComponent as s, deriveNavigationInitials as t };