@ojiepermana/angular-navigation 22.0.27

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -0,0 +1,3568 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, DestroyRef, signal, computed, effect, InjectionToken, input, model, output, contentChild, isDevMode, forwardRef, ChangeDetectionStrategy, Component, ElementRef, Injector, afterNextRender, booleanAttribute, ViewContainerRef } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+import { NavigationService } from '@ojiepermana/angular-navigation/service';
+import { IconComponent } from '@ojiepermana/angular-component/icon';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { NgTemplateOutlet } from '@angular/common';
+
+class NavigationIconDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: NavigationIconDirective, isStandalone: true, selector: "ng-template[NavigationIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[NavigationIcon]',
+                }]
+        }] });
+
+function normalizeType(type, hasChildren) {
+    if (type === 'divider' || type === 'spacer' || type === 'group' || type === 'mega') {
+        return type;
+    }
+    if (type === 'collapsible' || type === 'collapsable') {
+        return 'collapsible';
+    }
+    if (type === 'aside' && hasChildren) {
+        return 'collapsible';
+    }
+    if (!type && hasChildren) {
+        return 'collapsible';
+    }
+    return 'item';
+}
+function toKeyPart(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+function itemFallbackKey(item, index) {
+    return toKeyPart(item.title ?? item.link?.toString() ?? item.href ?? `item-${index}`) || `item-${index}`;
+}
+function normalizeItem(item, index, path) {
+    if (item.isHidden?.(item)) {
+        return null;
+    }
+    const children = (item.children ?? [])
+        .map((child, childIndex) => normalizeItem(child, childIndex, `${path}-${childIndex}`))
+        .filter((child) => child !== null);
+    const hasChildren = children.length > 0;
+    const key = item.id ?? `${path}-${itemFallbackKey(item, index)}`;
+    return {
+        ...item,
+        key,
+        stateId: item.id ?? key,
+        panelId: `nav-panel-${toKeyPart(key) || index}`,
+        type: normalizeType(item.type, hasChildren),
+        source: item,
+        children,
+    };
+}
+function normalizeUiNavItems(items) {
+    return items
+        .map((item, index) => normalizeItem(item, index, `nav-${index}`))
+        .filter((item) => item !== null);
+}
+
+function injectNavigationController(inputs) {
+    const nav = inject(NavigationService);
+    const destroyRef = inject(DestroyRef);
+    // Token unik per instance <Navigation> untuk validasi keunikan id di NavigationService.
+    const owner = {};
+    const registeredState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredState" }] : /* istanbul ignore next */ []));
+    let previousRegisteredId = null;
+    const normalizedNavId = computed(() => normalizeId(inputs.navId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedNavId" }] : /* istanbul ignore next */ []));
+    const collapsedPreference = computed(() => inputs.collapsed() ?? (inputs.compact() ? true : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []));
+    const normalizedItems = computed(() => {
+        const data = inputs.data();
+        return normalizeUiNavItems(data.length > 0 ? data : inputs.items());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []));
+    const fallbackState = computed(() => ({
+        id: normalizedNavId(),
+        orientation: inputs.orientation(),
+        type: fallbackType(inputs.orientation(), inputs.type()),
+        position: inputs.position() ?? (inputs.orientation() === 'horizontal' ? 'top' : 'left'),
+        collapsed: collapsedPreference() ?? false,
+        dockbarMode: inputs.dockbarMode() ?? 'sticky',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallbackState" }] : /* istanbul ignore next */ []));
+    const resolvedState = computed(() => nav.currentState(normalizedNavId()) ?? registeredState() ?? fallbackState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    const activeIdSet = computed(() => {
+        const ids = inputs.activeIds();
+        if (!ids) {
+            return new Set();
+        }
+        return ids instanceof Set ? new Set(ids) : new Set(ids);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIdSet" }] : /* istanbul ignore next */ []));
+    effect(() => {
+        if (!inputs.enabled()) {
+            return;
+        }
+        const nextState = nav.register({
+            id: normalizedNavId(),
+            orientation: inputs.orientation(),
+            type: inputs.type(),
+            position: inputs.position(),
+            collapsed: collapsedPreference(),
+            dockbarMode: inputs.dockbarMode(),
+        }, owner);
+        if (previousRegisteredId && previousRegisteredId !== nextState.id) {
+            nav.unregister(previousRegisteredId, owner);
+        }
+        previousRegisteredId = nextState.id;
+        registeredState.set(nextState);
+    });
+    destroyRef.onDestroy(() => {
+        if (previousRegisteredId) {
+            nav.unregister(previousRegisteredId, owner);
+        }
+    });
+    return {
+        normalizedNavId,
+        normalizedItems,
+        resolvedState,
+        activeIdSet,
+        toggleCollapsed: () => nav.toggleCollapsed(normalizedNavId()),
+    };
+}
+function normalizeId(value) {
+    return value.trim() || 'default';
+}
+function fallbackType(orientation, type) {
+    if (orientation === 'vertical' && (type === 'sidebar' || type === 'dockbar')) {
+        return type;
+    }
+    if (orientation === 'horizontal' && (type === 'navbar' || type === 'flyout')) {
+        return type;
+    }
+    return orientation === 'horizontal' ? 'navbar' : 'sidebar';
+}
+
+const NAVIGATION_SHELL = new InjectionToken('NAVIGATION_SHELL');
+
+/**
+ * Container navigasi deklaratif. Type ditentukan oleh komponen anak:
+ *
+ * ```html
+ * <Navigation id="main" [data]="items">
+ *   <NavigationSidebar>
+ *     <NavigationHeader>…</NavigationHeader>
+ *     <NavigationContent />
+ *     <NavigationFooter>…</NavigationFooter>
+ *   </NavigationSidebar>
+ * </Navigation>
+ * ```
+ *
+ * Header dan footer opsional; `NavigationContent` selalu dirender oleh
+ * type (default otomatis bila tidak diproyeksikan).
+ */
+class NavigationContainerComponent {
+    navId = input('default', { ...(ngDevMode ? { debugName: "navId" } : /* istanbul ignore next */ {}), alias: 'id' });
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', { ...(ngDevMode ? { debugName: "collapseTree" } : /* istanbul ignore next */ {}), alias: 'collapse-tree' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk container `<li>` group horizontal (flyout tab / navbar group). */
+    groupClass = input('', { ...(ngDevMode ? { debugName: "groupClass" } : /* istanbul ignore next */ {}), alias: 'nav-group-class' });
+    activeIds = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    openedIds = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    itemSelected = output();
+    nav = inject(NavigationService);
+    hoverPreviewExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverPreviewExpanded" }] : /* istanbul ignore next */ []));
+    /** Konfigurasi type aktif yang didaftarkan wrapper anak (sidebar/dockbar/navbar/flyout). */
+    typeConfig = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeConfig" }] : /* istanbul ignore next */ []));
+    orientationPreference = computed(() => this.typeConfig()?.orientation ?? 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientationPreference" }] : /* istanbul ignore next */ []));
+    typePreference = computed(() => this.typeConfig()?.type ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typePreference" }] : /* istanbul ignore next */ []));
+    positionPreference = computed(() => this.typeConfig()?.position?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionPreference" }] : /* istanbul ignore next */ []));
+    collapsedPreference = computed(() => this.typeConfig()?.collapsed?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []));
+    dockbarModePreference = computed(() => this.typeConfig()?.dockbarMode?.() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarModePreference" }] : /* istanbul ignore next */ []));
+    sidebarCollapse = computed(() => this.typeConfig()?.sidebarCollapse?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarCollapse" }] : /* istanbul ignore next */ []));
+    previewExpanded = computed(() => this.typeConfig()?.previewExpanded?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
+    typeStyle = computed(() => this.typeConfig()?.typeStyle?.() ?? 'default', /* @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 */ []));
+    controller = injectNavigationController({
+        navId: this.navId,
+        data: this.data,
+        items: this.items,
+        orientation: this.orientationPreference,
+        type: this.typePreference,
+        position: this.positionPreference,
+        collapsed: this.collapsedPreference,
+        dockbarMode: this.dockbarModePreference,
+        compact: this.compact,
+        activeIds: this.activeIds,
+        enabled: computed(() => this.typeConfig() !== null),
+    });
+    iconTemplate = contentChild(NavigationIconDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    normalizedItems = this.controller.normalizedItems;
+    resolvedState = this.controller.resolvedState;
+    activeIdSet = this.controller.activeIdSet;
+    previewRailExpanded = computed(() => {
+        const state = this.resolvedState();
+        if (state.orientation !== 'vertical' || state.type !== 'sidebar' || !state.collapsed) {
+            return false;
+        }
+        return this.previewExpanded() || (this.sidebarCollapse() && this.hoverPreviewExpanded());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewRailExpanded" }] : /* istanbul ignore next */ []));
+    previewRailOffset = computed(() => (this.previewRailExpanded() ? '15rem' : '0px'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewRailOffset" }] : /* istanbul ignore next */ []));
+    displayState = computed(() => {
+        const state = this.resolvedState();
+        if (state.type === 'dockbar') {
+            return { ...state, collapsed: true };
+        }
+        return this.previewRailExpanded() ? { ...state, collapsed: false } : state;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayState" }] : /* istanbul ignore next */ []));
+    dockbarAsideOpen = computed(() => {
+        const state = this.resolvedState();
+        if (state.type !== 'dockbar' || state.dockbarMode !== 'sticky') {
+            return false;
+        }
+        return (this.nav.resolveDockbarGroup(state.id, this.normalizedItems(), state.dockbarMode, this.activeIdSet(), this.activeUrl()) !== null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarAsideOpen" }] : /* istanbul ignore next */ []));
+    collapseEnabled = computed(() => {
+        const state = this.resolvedState();
+        return this.sidebarCollapse() && state.orientation === 'vertical' && state.type === 'sidebar';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
+    /** Kelas shell yang dipakai host komponen type (eks `div` shell internal). */
+    shellClasses = computed(() => cn('flex h-full min-h-0 transition-[width,box-shadow,transform] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none', this.resolvedState().orientation === 'horizontal'
+        ? 'flex-row items-stretch overflow-visible'
+        : this.resolvedState().type === 'dockbar'
+            ? 'flex-col overflow-visible'
+            : 'flex-col overflow-hidden', this.resolvedState().type === 'dockbar' && [
+        'w-16 shrink-0',
+        this.resolvedState().position === 'right' && 'ml-auto',
+    ], this.resolvedState().position === 'right' ? 'origin-right' : 'origin-left', this.previewRailExpanded() && [
+        'absolute inset-y-0 z-20 w-76 overflow-hidden bg-background shadow-xl',
+        this.resolvedState().position === 'right'
+            ? 'right-0 border-l border-[hsl(var(--border)/var(--opacity-70))]'
+            : 'left-0 border-r border-[hsl(var(--border)/var(--opacity-70))]',
+    ]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    state = this.resolvedState;
+    hostClasses = computed(() => cn('relative block min-h-0 text-foreground transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none', this.resolvedState().orientation === 'horizontal'
+        ? 'w-full'
+        : this.resolvedState().type === 'dockbar'
+            ? this.dockbarAsideOpen()
+                ? 'w-76'
+                : 'w-16'
+            : this.resolvedState().collapsed
+                ? 'w-16'
+                : 'w-76', this.resolvedState().orientation === 'horizontal' ||
+        this.resolvedState().type === 'dockbar' ||
+        this.previewRailExpanded()
+        ? 'overflow-visible'
+        : 'overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Dipanggil komponen type saat dibuat. Satu `<Navigation>` hanya boleh
+     * memuat satu type hidup — pendaftaran ganda dianggap salah konfigurasi.
+     */
+    registerType(config) {
+        if (this.typeConfig() !== null && isDevMode()) {
+            throw new Error('[Navigation] Hanya satu type (<NavigationSidebar>/<NavigationDockbar>/<NavigationNavbar>/<NavigationFlyout>) yang boleh hidup dalam satu <Navigation>.');
+        }
+        this.typeConfig.set(config);
+    }
+    unregisterType(config) {
+        if (this.typeConfig() === config) {
+            this.typeConfig.set(null);
+        }
+    }
+    toggleCollapsed() {
+        this.controller.toggleCollapsed();
+    }
+    setHoverPreview(value) {
+        this.hoverPreviewExpanded.set(this.sidebarCollapse() ? value : false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapse-tree", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "nav-group-class", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIds: "openedIdsChange", itemSelected: "itemSelected" }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "setHoverPreview(true)", "mouseleave": "setHoverPreview(false)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "attr.data-orientation": "resolvedState().orientation", "attr.data-type": "resolvedState().type", "attr.data-type-style": "typeStyle()", "attr.data-position": "resolvedState().position", "attr.data-collapse-tree": "collapseTree()", "attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null" } }, providers: [{ provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) }], queries: [{ propertyName: "iconTemplate", first: true, predicate: NavigationIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Navigation',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) }],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-navigation-id]': 'resolvedState().id',
+                        '[attr.data-orientation]': 'resolvedState().orientation',
+                        '[attr.data-type]': 'resolvedState().type',
+                        '[attr.data-type-style]': 'typeStyle()',
+                        '[attr.data-position]': 'resolvedState().position',
+                        '[attr.data-collapse-tree]': 'collapseTree()',
+                        '[attr.data-preview-expanded]': 'previewRailExpanded() ? "true" : null',
+                        '(mouseenter)': 'setHoverPreview(true)',
+                        '(mouseleave)': 'setHoverPreview(false)',
+                    },
+                    template: ` <ng-content /> `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-tree", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-group-class", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }, { type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationIconDirective), { isSignal: true }] }] } });
+
+class NavigationItemContentComponent {
+    nav = inject(NavigationService);
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    level = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    iconSlotClasses = computed(() => cn('relative z-10 inline-flex shrink-0 items-center justify-center transition-[border-color,background-color,color,box-shadow] duration-200', this.orientation() === 'vertical'
+        ? this.compact()
+            ? 'h-8 w-8 rounded-full border'
+            : 'h-7 w-7 rounded-full border'
+        : 'h-5 w-5 rounded-full border border-transparent', this.usesStraightVerticalSurface() && 'overflow-hidden bg-background/85 backdrop-blur-sm border-transparent', this.active() && !this.usesStraightVerticalSurface() ? 'border-primary text-current' : 'border-transparent', this.active() && this.usesStraightVerticalSurface() && 'text-current', this.compact() && 'mx-auto'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSlotClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => cn('block truncate', this.active() && 'font-semibold text-foreground', this.item().classes?.title), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    showSubtitle = computed(() => !!this.item().subtitle && !(this.orientation() === 'horizontal' && this.level() === 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSubtitle" }] : /* istanbul ignore next */ []));
+    subtitleClasses = computed(() => cn('block truncate text-xs font-normal text-muted-foreground', this.item().classes?.subtitle), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : /* istanbul ignore next */ []));
+    compactFallbackClasses = computed(() => cn('inline-flex h-5 min-w-5 items-center justify-center text-xs font-semibold uppercase'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []));
+    defaultBadgeClasses = computed(() => cn('ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2 text-xs font-medium', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultBadgeClasses" }] : /* istanbul ignore next */ []));
+    defaultIconSize = computed(() => (this.usesStraightVerticalSurface() ? 18 : 16), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultIconSize" }] : /* istanbul ignore next */ []));
+    defaultIconClasses = computed(() => cn('text-current', this.item().classes?.icon), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultIconClasses" }] : /* istanbul ignore next */ []));
+    iconContext = computed(() => this.nav.iconContext(this.item(), this.active(), this.level(), this.orientation()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconContext" }] : /* istanbul ignore next */ []));
+    compactFallback() {
+        return this.nav.compactFallback(this.item());
+    }
+    usesStraightVerticalSurface() {
+        return this.orientation() === 'vertical' && !this.compact() && this.collapseTree() === 'straight';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationItemContentComponent, isStandalone: true, selector: "NavigationItemContent", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @if (item().icon; as iconName) {
+      <span data-navigation-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container [ngTemplateOutlet]="customIcon.template" [ngTemplateOutletContext]="iconContext()" />
+        } @else {
+          <Icon [name]="iconName" [class]="defaultIconClasses()" [size]="defaultIconSize()" />
+        }
+      </span>
+    }
+
+    @if (!compact()) {
+      <span class="min-w-0 flex-1">
+        <span [class]="titleClasses()">{{ item().title }}</span>
+        @if (showSubtitle()) {
+          <span [class]="subtitleClasses()">{{ item().subtitle }}</span>
+        }
+      </span>
+
+      @if (item().badge; as badge) {
+        <span [class]="badge.classes ?? defaultBadgeClasses()">{{ badge.title }}</span>
+      }
+    }
+
+    @if (compact() && !item().icon) {
+      <span aria-hidden="true" [class]="compactFallbackClasses()">{{ compactFallback() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationItemContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, IconComponent],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @if (item().icon; as iconName) {
+      <span data-navigation-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container [ngTemplateOutlet]="customIcon.template" [ngTemplateOutletContext]="iconContext()" />
+        } @else {
+          <Icon [name]="iconName" [class]="defaultIconClasses()" [size]="defaultIconSize()" />
+        }
+      </span>
+    }
+
+    @if (!compact()) {
+      <span class="min-w-0 flex-1">
+        <span [class]="titleClasses()">{{ item().title }}</span>
+        @if (showSubtitle()) {
+          <span [class]="subtitleClasses()">{{ item().subtitle }}</span>
+        }
+      </span>
+
+      @if (item().badge; as badge) {
+        <span [class]="badge.classes ?? defaultBadgeClasses()">{{ badge.title }}</span>
+      }
+    }
+
+    @if (compact() && !item().icon) {
+      <span aria-hidden="true" [class]="compactFallbackClasses()">{{ compactFallback() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }] } });
+
+class NavigationItemComponent {
+    nav = inject(NavigationService);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    level = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    straightRail = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "straightRail" }] : /* istanbul ignore next */ []));
+    straightRailActive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "straightRailActive" }] : /* istanbul ignore next */ []));
+    firstInBranch = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstInBranch" }] : /* istanbul ignore next */ []));
+    lastInBranch = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastInBranch" }] : /* istanbul ignore next */ []));
+    openedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    openedIdSet = computed(() => new Set(this.openedIds()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIdSet" }] : /* istanbul ignore next */ []));
+    isHorizontalRoot = computed(() => this.orientation() === 'horizontal' && this.level() === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontalRoot" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => this.nav.isItemActive(this.item(), this.activeIds(), this.activeUrl()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    showChildren = computed(() => !this.compact() && this.isOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showChildren" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        if (this.item().type === 'divider') {
+            return this.dividerClasses();
+        }
+        if (this.item().type === 'spacer') {
+            return 'flex-1';
+        }
+        if (this.item().type === 'group' || this.item().type === 'mega') {
+            return this.groupContainerClasses();
+        }
+        return this.itemContainerClasses();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    hostRole = computed(() => {
+        if (this.item().type === 'divider') {
+            return 'separator';
+        }
+        return this.orientation() === 'horizontal' ? 'none' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    headingId = computed(() => `${this.item().panelId}-heading`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
+    isRouterItem() {
+        return this.nav.isRouterItem(this.item());
+    }
+    hrefFor() {
+        return this.nav.hrefFor(this.item());
+    }
+    relFor() {
+        return this.nav.relFor(this.item());
+    }
+    routerLinkActiveOptions() {
+        return this.nav.routerLinkActiveOptions(this.item());
+    }
+    itemRole() {
+        return this.nav.itemRole(this.orientation(), this.level());
+    }
+    compactLabel() {
+        return this.nav.compactLabel(this.item(), this.compact());
+    }
+    titleFor() {
+        return this.nav.titleFor(this.item(), this.compact());
+    }
+    isOpen() {
+        return this.openedIdSet().has(this.item().stateId) || this.openedIdSet().has(this.item().key) || this.isActive();
+    }
+    toggleOpen() {
+        if (this.item().disabled) {
+            return;
+        }
+        const next = new Set(this.openedIds());
+        if (next.has(this.item().stateId)) {
+            next.delete(this.item().stateId);
+        }
+        else {
+            next.add(this.item().stateId);
+        }
+        this.openedIdsChange.emit([...next]);
+    }
+    selectItem(event) {
+        if (this.item().disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.item().action?.(this.item().source);
+        this.itemSelected.emit({
+            item: this.item().source,
+            key: this.item().key,
+            type: this.item().type,
+            link: this.item().link,
+            external: !!this.hrefFor(),
+        });
+        this.nav.closePanel(this.navId());
+        this.nav.closeDrawer(this.navId());
+    }
+    leafClasses(active) {
+        return cn('NavigationItem group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().disabled && 'pointer-events-none opacity-50', this.item().classes?.wrapper, this.itemClass());
+    }
+    triggerClasses(active) {
+        return cn('nav-trigger group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
+    }
+    interactiveStateClasses(active) {
+        const showsNestedActiveConnector = active &&
+            this.orientation() === 'vertical' &&
+            !this.compact() &&
+            this.level() > 1 &&
+            this.collapseTree() === 'stairs';
+        if (this.orientation() === 'vertical' && !this.compact()) {
+            return cn('relative isolate', "before:pointer-events-none before:absolute before:inset-y-0 before:left-2 before:right-2 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-transparent before:transition-colors before:duration-200 before:content-['']", showsNestedActiveConnector &&
+                "after:pointer-events-none after:absolute after:-left-2 after:top-1/2 after:-z-10 after:h-px after:w-5 after:-translate-y-1/2 after:rounded-full after:bg-current/25 after:content-['']", active
+                ? 'font-semibold text-foreground hover:before:border-primary'
+                : 'text-foreground/80 hover:text-accent-foreground hover:before:border-primary hover:before:bg-accent');
+        }
+        return active ? 'font-semibold text-foreground' : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground';
+    }
+    chevronClasses() {
+        return cn('ml-auto shrink-0 self-center transition-transform duration-200', this.isOpen() && 'rotate-90');
+    }
+    itemContainerClasses() {
+        return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'relative' : 'w-full', this.compact() && 'flex justify-center', this.straightRailClasses());
+    }
+    groupContainerClasses() {
+        return cn('w-full', this.level() > 0 && 'pt-2');
+    }
+    dividerClasses() {
+        return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'mx-1 h-5 w-px' : 'my-2 w-full px-2');
+    }
+    groupHeadingClasses() {
+        return cn('px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground', this.item().classes?.title);
+    }
+    childListClasses() {
+        const isGroupedBranch = this.item().type === 'group' || this.item().type === 'mega';
+        const usesStairsTree = this.collapseTree() === 'stairs';
+        return cn('flex list-none flex-col gap-0.5 p-0', !this.compact() && 'mt-0.5', this.level() >= 0 &&
+            !this.compact() &&
+            !isGroupedBranch &&
+            usesStairsTree &&
+            cn("relative ml-[1.625rem] pl-2 before:absolute before:-top-2 before:bottom-0 before:left-0 before:w-px before:-translate-x-1/2 before:rounded-full before:content-['']", this.isActive() ? 'before:bg-current/25' : 'before:bg-border'));
+    }
+    showStraightRailForChildren() {
+        return (!this.compact() &&
+            this.collapseTree() === 'straight' &&
+            this.item().type !== 'group' &&
+            this.item().type !== 'mega');
+    }
+    straightRailClasses() {
+        if (!this.straightRail() || this.orientation() !== 'vertical' || this.compact()) {
+            return '';
+        }
+        return cn('relative', "before:pointer-events-none before:absolute before:left-[1.625rem] before:w-0 before:-z-10 before:border-l before:border-dotted before:content-['']", this.straightRailActive() ? 'before:border-primary/50' : 'before:border-border/50', this.firstInBranch() ? 'before:-top-9' : 'before:-top-0.5', this.lastInBranch() ? 'before:bottom-[calc(100%-1.25rem)]' : 'before:-bottom-0.5');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationItemComponent, isStandalone: true, selector: "li[NavigationItem]", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, straightRail: { classPropertyName: "straightRail", publicName: "straightRail", isSignal: true, isRequired: false, transformFunction: null }, straightRailActive: { classPropertyName: "straightRailActive", publicName: "straightRailActive", isSignal: true, isRequired: false, transformFunction: null }, firstInBranch: { classPropertyName: "firstInBranch", publicName: "firstInBranch", isSignal: true, isRequired: false, transformFunction: null }, lastInBranch: { classPropertyName: "lastInBranch", publicName: "lastInBranch", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.role": "hostRole()", "attr.data-navigation-item-key": "item().key", "attr.aria-hidden": "item().type === \"spacer\" ? \"true\" : null" } }, ngImport: i0, template: `
+    @switch (item().type) {
+      @case ('divider') {
+        <span class="block h-px w-full bg-border"></span>
+      }
+
+      @case ('spacer') {}
+
+      @case ('group') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-controls]="item().panelId"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()">
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [collapseTree]="collapseTree()"
+            [iconTemplate]="iconTemplate()" />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" [size]="16" [class]="chevronClasses()" />
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="item().panelId" [class]="childListClasses()" role="group">
+            @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+              <li
+                NavigationItem
+                [navId]="navId()"
+                [item]="child"
+                [level]="level() + 1"
+                [orientation]="orientation()"
+                [compact]="false"
+                [itemClass]="itemClass()"
+                [activeIds]="activeIds()"
+                [activeUrl]="activeUrl()"
+                [iconTemplate]="iconTemplate()"
+                [collapseTree]="collapseTree()"
+                [straightRail]="showStraightRailForChildren()"
+                [straightRailActive]="isActive()"
+                [firstInBranch]="isFirst"
+                [lastInBranch]="isLast"
+                [openedIds]="openedIds()"
+                (openedIdsChange)="openedIdsChange.emit($event)"
+                (itemSelected)="itemSelected.emit($event)"></li>
+            }
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="item().link ?? null"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <NavigationItemContent
+              [item]="item()"
+              [active]="routerActive.isActive || isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefFor()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="leafClasses(isActive())"
+            [disabled]="item().disabled || null"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </button>
+        }
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[NavigationItem]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterLink, RouterLinkActive, IconComponent, NavigationItemContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'hostRole()',
+                        '[attr.data-navigation-item-key]': 'item().key',
+                        '[attr.aria-hidden]': 'item().type === "spacer" ? "true" : null',
+                    },
+                    template: `
+    @switch (item().type) {
+      @case ('divider') {
+        <span class="block h-px w-full bg-border"></span>
+      }
+
+      @case ('spacer') {}
+
+      @case ('group') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-controls]="item().panelId"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()">
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [collapseTree]="collapseTree()"
+            [iconTemplate]="iconTemplate()" />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" [size]="16" [class]="chevronClasses()" />
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="item().panelId" [class]="childListClasses()" role="group">
+            @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+              <li
+                NavigationItem
+                [navId]="navId()"
+                [item]="child"
+                [level]="level() + 1"
+                [orientation]="orientation()"
+                [compact]="false"
+                [itemClass]="itemClass()"
+                [activeIds]="activeIds()"
+                [activeUrl]="activeUrl()"
+                [iconTemplate]="iconTemplate()"
+                [collapseTree]="collapseTree()"
+                [straightRail]="showStraightRailForChildren()"
+                [straightRailActive]="isActive()"
+                [firstInBranch]="isFirst"
+                [lastInBranch]="isLast"
+                [openedIds]="openedIds()"
+                (openedIdsChange)="openedIdsChange.emit($event)"
+                (itemSelected)="itemSelected.emit($event)"></li>
+            }
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul [class]="childListClasses()" role="group" [attr.aria-labelledby]="item().title ? headingId() : null">
+          @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="child"
+              [level]="level() + 1"
+              [orientation]="orientation()"
+              [compact]="compact()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [straightRail]="showStraightRailForChildren()"
+              [straightRailActive]="isActive()"
+              [firstInBranch]="isFirst"
+              [lastInBranch]="isLast"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="item().link ?? null"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <NavigationItemContent
+              [item]="item()"
+              [active]="routerActive.isActive || isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefFor()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="leafClasses(isActive())"
+            [disabled]="item().disabled || null"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)">
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [collapseTree]="collapseTree()"
+              [iconTemplate]="iconTemplate()" />
+          </button>
+        }
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], straightRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRail", required: false }] }], straightRailActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRailActive", required: false }] }], firstInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInBranch", required: false }] }], lastInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInBranch", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavigationListComponent {
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    collapsed = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    position = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    isCollapsed = computed(() => this.collapsed() || this.compact(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('block', this.position() === 'right' && 'items-end text-right'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => this.isCollapsed()
+        ? cn('flex list-none flex-col items-center gap-0.5 p-0')
+        : cn('flex list-none flex-col gap-0.5 p-0', this.position() === 'right' && 'items-end'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationListComponent, isStandalone: true, selector: "NavigationList", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    <ul [class]="listClasses()" role="list">
+      @for (item of items(); track item.key) {
+        <li
+          NavigationItem
+          [navId]="navId()"
+          [item]="item"
+          [level]="0"
+          [orientation]="'vertical'"
+          [compact]="isCollapsed()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIds()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTemplate()"
+          [collapseTree]="collapseTree()"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)"></li>
+      }
+    </ul>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationList',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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"] }] } });
+
+class NavigationDockbarMenuComponent {
+    nav = inject(NavigationService);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    mode = input('sticky', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* 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();
+    isDrawerMode = computed(() => this.mode() === 'drawer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDrawerMode" }] : /* istanbul ignore next */ []));
+    asideId = computed(() => `nav-dockbar-${this.safeId(this.navId())}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideId" }] : /* istanbul ignore next */ []));
+    asideHeadingId = computed(() => `${this.asideId()}-heading`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideHeadingId" }] : /* istanbul ignore next */ []));
+    openGroup = computed(() => this.nav.resolveDockbarGroup(this.navId(), this.items(), this.mode(), this.activeIds(), this.activeUrl()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openGroup" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('block w-16'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    railClasses = computed(() => cn('flex w-full list-none flex-col items-center gap-0.5 p-2', 
+    // Mode drawer: rail tetap di atas backdrop (z-40) agar user bisa langsung
+    // berpindah group lain tanpa menutup drawer lebih dulu.
+    this.isDrawerMode() && this.openGroup() !== null && 'relative z-50'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []));
+    asideClasses = computed(() => cn('absolute inset-y-0 flex w-60 flex-col bg-background', this.position() === 'right'
+        ? 'right-16 border-r border-[hsl(var(--border)/var(--opacity-70))]'
+        : 'left-16 border-l border-[hsl(var(--border)/var(--opacity-70))]', this.isDrawerMode() &&
+        cn('z-50 shadow-xl', this.position() === 'right'
+            ? 'border-l border-l-[hsl(var(--border)/var(--opacity-70))]'
+            : 'border-r border-r-[hsl(var(--border)/var(--opacity-70))]')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Offset backdrop agar kolom navigasi (rail + header/footer) benar-benar bebas
+     * overlay — dockbar dan aside drawer berada di level yang sama di atas backdrop.
+     * `null` berarti pengukuran tidak tersedia (mis. jsdom) dan backdrop jatuh ke
+     * `inset-0` penuh seperti sebelumnya.
+     */
+    backdropInset = signal({
+        left: null,
+        right: null,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdropInset" }] : /* istanbul ignore next */ []));
+    onWindowResize() {
+        if (this.isDrawerMode() && this.openGroup() !== null) {
+            this.measureBackdropInset();
+        }
+    }
+    measureBackdropInset() {
+        const navEl = this.host.nativeElement.closest('[data-navigation-id]') ?? this.host.nativeElement;
+        const rect = navEl.getBoundingClientRect();
+        const viewportWidth = this.host.nativeElement.ownerDocument?.defaultView?.innerWidth ?? 0;
+        if (rect.width <= 0 || viewportWidth <= 0) {
+            this.backdropInset.set({ left: null, right: null });
+            return;
+        }
+        // Containing block backdrop `fixed` bisa bergeser dari viewport (ancestor dengan
+        // filter/contain). Koreksi origin dihitung dari posisi aktual backdrop terhadap
+        // style left/right yang sedang berlaku — konvergen dalam satu langkah re-measure.
+        const backdrop = this.host.nativeElement.querySelector('[data-navigation-dockbar-backdrop="true"]');
+        const backdropRect = backdrop?.getBoundingClientRect() ?? null;
+        let originLeft = 0;
+        let originRight = viewportWidth;
+        if (backdrop && backdropRect && backdropRect.width > 0) {
+            originLeft = backdropRect.left - this.parsePx(backdrop.style.left);
+            originRight = backdropRect.right + this.parsePx(backdrop.style.right);
+        }
+        if (this.position() === 'right') {
+            this.backdropInset.set({ left: null, right: Math.max(originRight - rect.left, 0) });
+            return;
+        }
+        this.backdropInset.set({ left: Math.max(rect.right - originLeft, 0), right: null });
+    }
+    parsePx(value) {
+        const parsed = Number.parseFloat(value);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+    isGroupOpen(entry) {
+        return this.openGroup()?.key === entry.key;
+    }
+    isGroupActive(entry) {
+        return this.nav.isItemActive(entry, this.activeIds(), this.activeUrl());
+    }
+    triggerClasses(entry) {
+        return cn('group/nav inline-flex h-10 w-10 items-center justify-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isGroupOpen(entry)
+            ? 'bg-accent text-accent-foreground'
+            : this.isGroupActive(entry)
+                ? 'font-semibold text-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', entry.classes?.wrapper, this.itemClass());
+    }
+    toggleGroup(entry) {
+        const wasOpen = this.isGroupOpen(entry);
+        if (!wasOpen && this.isDrawerMode()) {
+            this.measureBackdropInset();
+        }
+        this.nav.togglePanel(this.navId(), entry);
+        if (!this.isDrawerMode()) {
+            return;
+        }
+        if (wasOpen) {
+            this.afterRender(() => this.focusTrigger(entry.key));
+            return;
+        }
+        this.afterRender(() => {
+            // Ukur ulang setelah render: geometri kolom bisa bergeser saat panel terbuka.
+            this.measureBackdropInset();
+            this.focusFirstAsideItem();
+        });
+    }
+    closeAside() {
+        const openKey = this.openGroup()?.key ?? null;
+        this.nav.closePanel(this.navId());
+        if (openKey !== null) {
+            this.afterRender(() => this.focusTrigger(openKey));
+        }
+    }
+    onEscape(event) {
+        if (!this.isDrawerMode() || this.openGroup() === null) {
+            return;
+        }
+        event.preventDefault();
+        this.closeAside();
+    }
+    afterRender(callback) {
+        afterNextRender({ read: callback }, { injector: this.injector });
+    }
+    focusFirstAsideItem() {
+        const aside = this.host.nativeElement.querySelector(`#${this.asideId()}`);
+        const focusable = aside?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        focusable?.focus();
+    }
+    focusTrigger(key) {
+        const trigger = this.host.nativeElement.querySelector(`[data-navigation-dockbar-trigger="true"][data-navigation-item-key="${key}"]`);
+        trigger?.focus();
+    }
+    safeId(value) {
+        const normalized = value
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9_-]+/g, '-');
+        return normalized || 'default';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationDockbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationDockbarMenuComponent, isStandalone: true, selector: "NavigationDockbarMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { listeners: { "keydown.escape": "onEscape($event)", "window:resize": "onWindowResize()" }, properties: { "class": "hostClasses()", "attr.data-mode": "mode()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    <ul [class]="railClasses()" role="list">
+      @for (entry of items(); track entry.key) {
+        @if (entry.children.length > 0) {
+          <li class="flex w-full justify-center">
+            <button
+              type="button"
+              data-navigation-dockbar-trigger="true"
+              [class]="triggerClasses(entry)"
+              [attr.aria-expanded]="isGroupOpen(entry)"
+              [attr.aria-controls]="asideId()"
+              [attr.aria-label]="entry.tooltip ?? entry.title ?? null"
+              [attr.title]="entry.tooltip ?? entry.title ?? null"
+              [attr.data-navigation-item-key]="entry.key"
+              [disabled]="entry.disabled || null"
+              (click)="toggleGroup(entry)">
+              <NavigationItemContent
+                [item]="entry"
+                [active]="isGroupActive(entry)"
+                [compact]="true"
+                orientation="vertical"
+                [level]="0"
+                [collapseTree]="collapseTree()"
+                [iconTemplate]="iconTemplate()" />
+            </button>
+          </li>
+        } @else {
+          <li
+            NavigationItem
+            [navId]="navId()"
+            [item]="entry"
+            [level]="0"
+            orientation="vertical"
+            [compact]="true"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)"></li>
+        }
+      }
+    </ul>
+
+    @if (openGroup(); as group) {
+      @if (isDrawerMode()) {
+        <div
+          class="fixed inset-0 z-40 bg-[hsl(var(--overlay-backdrop-strong))]"
+          data-navigation-dockbar-backdrop="true"
+          aria-hidden="true"
+          [style.left.px]="backdropInset().left"
+          [style.right.px]="backdropInset().right"
+          (click)="closeAside()"></div>
+      }
+
+      <!-- Drawer non-modal: rail tetap interaktif di atas backdrop, jadi tanpa aria-modal. -->
+      <aside
+        [id]="asideId()"
+        [class]="asideClasses()"
+        data-navigation-dockbar-aside="true"
+        [attr.role]="isDrawerMode() ? 'dialog' : null"
+        [attr.aria-labelledby]="asideHeadingId()">
+        <header
+          class="flex h-12 shrink-0 items-center gap-2 border-b border-[hsl(var(--border)/var(--opacity-70))] px-4">
+          <div class="min-w-0 flex-1">
+            <h2 [id]="asideHeadingId()" class="truncate text-sm font-semibold leading-tight text-foreground">
+              {{ group.title }}
+            </h2>
+            @if (group.subtitle) {
+              <p class="truncate text-xs leading-tight text-muted-foreground">{{ group.subtitle }}</p>
+            }
+          </div>
+
+          @if (isDrawerMode()) {
+            <button
+              type="button"
+              class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-foreground/80 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              data-navigation-dockbar-close="true"
+              aria-label="Close navigation panel"
+              (click)="closeAside()">
+              <Icon name="close" [size]="16" />
+            </button>
+          }
+        </header>
+
+        <div class="min-h-0 flex-1 overflow-y-auto px-2 py-3" data-navigation-dockbar-aside-scroll="true">
+          <NavigationList
+            [navId]="navId()"
+            [items]="group.children"
+            [collapsed]="false"
+            position="left"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)" />
+        </div>
+      </aside>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }, { kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationDockbarMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationDockbarMenu',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent, NavigationItemComponent, NavigationItemContentComponent, NavigationListComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-mode]': 'mode()',
+                        '[attr.data-position]': 'position()',
+                        '(keydown.escape)': 'onEscape($event)',
+                        '(window:resize)': 'onWindowResize()',
+                    },
+                    template: `
+    <ul [class]="railClasses()" role="list">
+      @for (entry of items(); track entry.key) {
+        @if (entry.children.length > 0) {
+          <li class="flex w-full justify-center">
+            <button
+              type="button"
+              data-navigation-dockbar-trigger="true"
+              [class]="triggerClasses(entry)"
+              [attr.aria-expanded]="isGroupOpen(entry)"
+              [attr.aria-controls]="asideId()"
+              [attr.aria-label]="entry.tooltip ?? entry.title ?? null"
+              [attr.title]="entry.tooltip ?? entry.title ?? null"
+              [attr.data-navigation-item-key]="entry.key"
+              [disabled]="entry.disabled || null"
+              (click)="toggleGroup(entry)">
+              <NavigationItemContent
+                [item]="entry"
+                [active]="isGroupActive(entry)"
+                [compact]="true"
+                orientation="vertical"
+                [level]="0"
+                [collapseTree]="collapseTree()"
+                [iconTemplate]="iconTemplate()" />
+            </button>
+          </li>
+        } @else {
+          <li
+            NavigationItem
+            [navId]="navId()"
+            [item]="entry"
+            [level]="0"
+            orientation="vertical"
+            [compact]="true"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)"></li>
+        }
+      }
+    </ul>
+
+    @if (openGroup(); as group) {
+      @if (isDrawerMode()) {
+        <div
+          class="fixed inset-0 z-40 bg-[hsl(var(--overlay-backdrop-strong))]"
+          data-navigation-dockbar-backdrop="true"
+          aria-hidden="true"
+          [style.left.px]="backdropInset().left"
+          [style.right.px]="backdropInset().right"
+          (click)="closeAside()"></div>
+      }
+
+      <!-- Drawer non-modal: rail tetap interaktif di atas backdrop, jadi tanpa aria-modal. -->
+      <aside
+        [id]="asideId()"
+        [class]="asideClasses()"
+        data-navigation-dockbar-aside="true"
+        [attr.role]="isDrawerMode() ? 'dialog' : null"
+        [attr.aria-labelledby]="asideHeadingId()">
+        <header
+          class="flex h-12 shrink-0 items-center gap-2 border-b border-[hsl(var(--border)/var(--opacity-70))] px-4">
+          <div class="min-w-0 flex-1">
+            <h2 [id]="asideHeadingId()" class="truncate text-sm font-semibold leading-tight text-foreground">
+              {{ group.title }}
+            </h2>
+            @if (group.subtitle) {
+              <p class="truncate text-xs leading-tight text-muted-foreground">{{ group.subtitle }}</p>
+            }
+          </div>
+
+          @if (isDrawerMode()) {
+            <button
+              type="button"
+              class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-foreground/80 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              data-navigation-dockbar-close="true"
+              aria-label="Close navigation panel"
+              (click)="closeAside()">
+              <Icon name="close" [size]="16" />
+            </button>
+          }
+        </header>
+
+        <div class="min-h-0 flex-1 overflow-y-auto px-2 py-3" data-navigation-dockbar-aside-scroll="true">
+          <NavigationList
+            [navId]="navId()"
+            [items]="group.children"
+            [collapsed]="false"
+            position="left"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)" />
+        </div>
+      </aside>
+    }
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+/**
+ * Grid entry ala flyout: children sebuah branch dirender sebagai entry
+ * icon-box + title/subtitle dalam grid responsif (1/sm:2/md:3/lg:4, dibatasi
+ * `columns`); entry ber-children tampil terbuka secara default dengan collapse
+ * vertical yang icon-nya sejajar satu garis dengan icon induk. Dipakai oleh
+ * flyout dan panel mega navbar.
+ */
+class NavigationEntryGridComponent {
+    nav = inject(NavigationService);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    branch = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []));
+    typeStyle = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* 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();
+    isBorderRail = computed(() => this.typeStyle() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    /** Kelas tambahan untuk NavigationItem bersarang saat style border-rail aktif. */
+    navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && 'rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Entry ber-children tampil TERBUKA secara default; set ini hanya menyimpan
+     * entry yang sengaja di-collapse pengguna. Instance grid dibuat ulang setiap
+     * panel dibuka sehingga state kembali terbuka semua.
+     */
+    collapsedEntryKeys = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedEntryKeys" }] : /* istanbul ignore next */ []));
+    isItemActive(item) {
+        return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    isEntryOpen(item) {
+        return !this.collapsedEntryKeys().has(item.stateId);
+    }
+    toggleEntry(item) {
+        if (item.disabled) {
+            return;
+        }
+        const next = new Set(this.collapsedEntryKeys());
+        if (next.has(item.stateId)) {
+            next.delete(item.stateId);
+        }
+        else {
+            next.add(item.stateId);
+        }
+        this.collapsedEntryKeys.set(next);
+    }
+    selectEntry(item, event) {
+        if (item.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        item.action?.(item.source);
+        this.itemSelected.emit({
+            item: item.source,
+            key: item.key,
+            type: item.type,
+            link: item.link,
+            external: !!this.nav.hrefFor(item),
+        });
+        this.nav.closePanel(this.navId());
+        this.nav.closeDrawer(this.navId());
+    }
+    isRouterItem(item) {
+        return this.nav.isRouterItem(item);
+    }
+    hrefFor(item) {
+        return this.nav.hrefFor(item);
+    }
+    relFor(item) {
+        return this.nav.relFor(item);
+    }
+    routerLinkActiveOptions(item) {
+        return this.nav.routerLinkActiveOptions(item);
+    }
+    iconContext(item, active) {
+        return this.nav.iconContext(item, active, 1, 'horizontal');
+    }
+    fallbackInitials(item) {
+        return this.nav.compactFallback(item);
+    }
+    contentGridClasses(branch) {
+        // Skala responsif: mobile 1, sm 2, md 3, lg ke atas 4; `columns` membatasi maksimumnya.
+        const columns = Math.min(Math.max(branch.columns ?? 4, 1), 4);
+        return cn('m-0 grid list-none grid-cols-1 gap-1 p-0', columns >= 2 && 'sm:grid-cols-2', columns >= 3 && 'md:grid-cols-3', columns >= 4 && 'lg:grid-cols-4');
+    }
+    entryClasses(item, active) {
+        return cn('group/nav flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.isBorderRail()
+            ? cn('rounded-none', active ? 'text-primary' : 'text-foreground hover:text-primary')
+            : cn('rounded-lg', active
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground hover:bg-accent hover:text-accent-foreground'), item.disabled && 'pointer-events-none opacity-50', item.classes?.wrapper, this.itemClass());
+    }
+    entryIconClasses(active) {
+        if (this.isBorderRail()) {
+            // Kotak icon polos; bingkai digambar oleh rail line yang menjorok melewati sudut.
+            return cn('relative flex h-10 w-10 shrink-0 items-center justify-center self-center text-foreground transition-colors group-hover/nav:text-primary', active && 'text-primary');
+        }
+        return cn('relative flex h-10 w-10 shrink-0 items-center justify-center self-center rounded-lg border bg-background text-foreground shadow-sm transition-colors', active ? 'border-primary text-primary' : 'border-[hsl(var(--border)/var(--opacity-70))]');
+    }
+    entryIconGlyphClasses(item) {
+        return cn('text-current', item.classes?.icon);
+    }
+    entryTitleClasses(item, active) {
+        return cn('block truncate text-sm font-medium', this.isBorderRail() ? 'text-current' : 'text-foreground', active && 'font-semibold', item.classes?.title);
+    }
+    entrySubtitleClasses(item) {
+        return cn('mt-0.5 block truncate text-xs text-muted-foreground', item.classes?.subtitle);
+    }
+    entryChevronClasses(item) {
+        return cn('shrink-0 self-center text-muted-foreground transition-transform duration-200', this.isEntryOpen(item) && 'rotate-90');
+    }
+    nestedListClasses() {
+        // Children sejajar satu garis vertical dengan icon induk: rail digambar lewat pseudo-element
+        // di x = 32px (px-3 entry + setengah icon box w-10); pl-2.5 membuat icon child (px-3 + slot
+        // w-5) ber-center tepat di garis yang sama.
+        return cn("relative mt-1 flex list-none flex-col gap-0.5 p-0 pl-2.5 before:pointer-events-none before:absolute before:inset-y-0 before:left-8 before:w-0 before:border-l before:content-['']", this.isBorderRail()
+            ? 'before:border-dashed before:border-border/40'
+            : 'before:border-[hsl(var(--border)/var(--opacity-60))]');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationEntryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationEntryGridComponent, isStandalone: true, selector: "NavigationEntryGrid", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, branch: { classPropertyName: "branch", publicName: "branch", isSignal: true, isRequired: true, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @let branchItem = branch();
+
+    <div
+      role="group"
+      [id]="branchItem.panelId"
+      [attr.aria-label]="branchItem.title || null"
+      [attr.data-navigation-flyout-content]="branchItem.key"
+      class="p-2 md:p-3">
+      <ul role="none" [class]="contentGridClasses(branchItem)">
+        @for (child of branchItem.children; track child.key) {
+          @switch (child.type) {
+            @case ('divider') {
+              <li role="separator" class="col-span-full my-1 h-px bg-border"></li>
+            }
+            @case ('spacer') {}
+            @default {
+              @if (child.children.length > 0) {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    data-navigation-flyout-entry="true"
+                    [class]="entryClasses(child, isItemActive(child))"
+                    [attr.aria-expanded]="isEntryOpen(child)"
+                    [attr.aria-controls]="child.panelId"
+                    [disabled]="child.disabled || null"
+                    (click)="toggleEntry(child)">
+                    <ng-container
+                      [ngTemplateOutlet]="entryContent"
+                      [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }" />
+                    <Icon name="chevron_right" [size]="16" [class]="entryChevronClasses(child)" />
+                  </button>
+
+                  @if (isEntryOpen(child)) {
+                    <ul [id]="child.panelId" role="none" [class]="nestedListClasses()">
+                      @for (nested of child.children; track nested.key) {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="nested"
+                          [level]="2"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"></li>
+                      }
+                    </ul>
+                  }
+                </li>
+              } @else {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  @if (isRouterItem(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, routerActive.isActive || isItemActive(child))"
+                      [routerLink]="child.link ?? null"
+                      [queryParams]="child.queryParams ?? null"
+                      [queryParamsHandling]="child.queryParamsHandling ?? null"
+                      [fragment]="child.fragment ?? undefined"
+                      [preserveFragment]="child.preserveFragment ?? false"
+                      [target]="child.target ?? undefined"
+                      routerLinkActive
+                      #routerActive="routerLinkActive"
+                      [routerLinkActiveOptions]="routerLinkActiveOptions(child)"
+                      [attr.aria-current]="routerActive.isActive || isItemActive(child) ? 'page' : null"
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)">
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: routerActive.isActive || isItemActive(child),
+                        }" />
+                    </a>
+                  } @else if (hrefFor(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [attr.href]="hrefFor(child)"
+                      [attr.target]="child.target ?? (child.externalLink ? '_blank' : null)"
+                      [attr.rel]="relFor(child)"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)">
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }" />
+                    </a>
+                  } @else {
+                    <button
+                      type="button"
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [disabled]="child.disabled || null"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      (click)="selectEntry(child, $event)">
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }" />
+                    </button>
+                  }
+                </li>
+              }
+            }
+          }
+        }
+      </ul>
+    </div>
+
+    <ng-template #entryContent let-child let-active="active">
+      <span [class]="entryIconClasses(active)">
+        @if (isBorderRail()) {
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="top"
+            class="pointer-events-none absolute -inset-x-1.5 top-0 h-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="bottom"
+            class="pointer-events-none absolute -inset-x-1.5 bottom-0 h-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="left"
+            class="pointer-events-none absolute -inset-y-1.5 left-0 w-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="right"
+            class="pointer-events-none absolute -inset-y-1.5 right-0 w-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-horizontal"
+            class="pointer-events-none absolute -inset-x-1.5 top-1/2 border-t border-dashed border-border/40"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-vertical"
+            class="pointer-events-none absolute -inset-y-1.5 left-1/2 border-l border-dashed border-border/40"></span>
+        }
+
+        @if (child.icon) {
+          @if (iconTemplate(); as customIcon) {
+            <ng-container
+              [ngTemplateOutlet]="customIcon.template"
+              [ngTemplateOutletContext]="iconContext(child, active)" />
+          } @else {
+            <Icon [name]="child.icon" [size]="18" [class]="entryIconGlyphClasses(child)" />
+          }
+        } @else {
+          <span aria-hidden="true" class="text-xs font-semibold uppercase">{{ fallbackInitials(child) }}</span>
+        }
+      </span>
+
+      <span class="min-w-0 flex-1">
+        <span [class]="entryTitleClasses(child, active)">{{ child.title }}</span>
+        @if (child.subtitle) {
+          <span [class]="entrySubtitleClasses(child)">{{ child.subtitle }}</span>
+        }
+      </span>
+
+      @if (child.badge; as badge) {
+        <span
+          [class]="
+            badge.classes ??
+            'inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground'
+          "
+          >{{ badge.title }}</span
+        >
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationEntryGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationEntryGrid',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, IconComponent, NavigationItemComponent],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @let branchItem = branch();
+
+    <div
+      role="group"
+      [id]="branchItem.panelId"
+      [attr.aria-label]="branchItem.title || null"
+      [attr.data-navigation-flyout-content]="branchItem.key"
+      class="p-2 md:p-3">
+      <ul role="none" [class]="contentGridClasses(branchItem)">
+        @for (child of branchItem.children; track child.key) {
+          @switch (child.type) {
+            @case ('divider') {
+              <li role="separator" class="col-span-full my-1 h-px bg-border"></li>
+            }
+            @case ('spacer') {}
+            @default {
+              @if (child.children.length > 0) {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    data-navigation-flyout-entry="true"
+                    [class]="entryClasses(child, isItemActive(child))"
+                    [attr.aria-expanded]="isEntryOpen(child)"
+                    [attr.aria-controls]="child.panelId"
+                    [disabled]="child.disabled || null"
+                    (click)="toggleEntry(child)">
+                    <ng-container
+                      [ngTemplateOutlet]="entryContent"
+                      [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }" />
+                    <Icon name="chevron_right" [size]="16" [class]="entryChevronClasses(child)" />
+                  </button>
+
+                  @if (isEntryOpen(child)) {
+                    <ul [id]="child.panelId" role="none" [class]="nestedListClasses()">
+                      @for (nested of child.children; track nested.key) {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="nested"
+                          [level]="2"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"></li>
+                      }
+                    </ul>
+                  }
+                </li>
+              } @else {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  @if (isRouterItem(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, routerActive.isActive || isItemActive(child))"
+                      [routerLink]="child.link ?? null"
+                      [queryParams]="child.queryParams ?? null"
+                      [queryParamsHandling]="child.queryParamsHandling ?? null"
+                      [fragment]="child.fragment ?? undefined"
+                      [preserveFragment]="child.preserveFragment ?? false"
+                      [target]="child.target ?? undefined"
+                      routerLinkActive
+                      #routerActive="routerLinkActive"
+                      [routerLinkActiveOptions]="routerLinkActiveOptions(child)"
+                      [attr.aria-current]="routerActive.isActive || isItemActive(child) ? 'page' : null"
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)">
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: routerActive.isActive || isItemActive(child),
+                        }" />
+                    </a>
+                  } @else if (hrefFor(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [attr.href]="hrefFor(child)"
+                      [attr.target]="child.target ?? (child.externalLink ? '_blank' : null)"
+                      [attr.rel]="relFor(child)"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)">
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }" />
+                    </a>
+                  } @else {
+                    <button
+                      type="button"
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [disabled]="child.disabled || null"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      (click)="selectEntry(child, $event)">
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }" />
+                    </button>
+                  }
+                </li>
+              }
+            }
+          }
+        }
+      </ul>
+    </div>
+
+    <ng-template #entryContent let-child let-active="active">
+      <span [class]="entryIconClasses(active)">
+        @if (isBorderRail()) {
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="top"
+            class="pointer-events-none absolute -inset-x-1.5 top-0 h-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="bottom"
+            class="pointer-events-none absolute -inset-x-1.5 bottom-0 h-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="left"
+            class="pointer-events-none absolute -inset-y-1.5 left-0 w-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="right"
+            class="pointer-events-none absolute -inset-y-1.5 right-0 w-px bg-border/50"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-horizontal"
+            class="pointer-events-none absolute -inset-x-1.5 top-1/2 border-t border-dashed border-border/40"></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-vertical"
+            class="pointer-events-none absolute -inset-y-1.5 left-1/2 border-l border-dashed border-border/40"></span>
+        }
+
+        @if (child.icon) {
+          @if (iconTemplate(); as customIcon) {
+            <ng-container
+              [ngTemplateOutlet]="customIcon.template"
+              [ngTemplateOutletContext]="iconContext(child, active)" />
+          } @else {
+            <Icon [name]="child.icon" [size]="18" [class]="entryIconGlyphClasses(child)" />
+          }
+        } @else {
+          <span aria-hidden="true" class="text-xs font-semibold uppercase">{{ fallbackInitials(child) }}</span>
+        }
+      </span>
+
+      <span class="min-w-0 flex-1">
+        <span [class]="entryTitleClasses(child, active)">{{ child.title }}</span>
+        @if (child.subtitle) {
+          <span [class]="entrySubtitleClasses(child)">{{ child.subtitle }}</span>
+        }
+      </span>
+
+      @if (child.badge; as badge) {
+        <span
+          [class]="
+            badge.classes ??
+            'inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground'
+          "
+          >{{ badge.title }}</span
+        >
+      }
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], branch: [{ type: i0.Input, args: [{ isSignal: true, alias: "branch", required: true }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavigationFlyoutMenuComponent {
+    nav = inject(NavigationService);
+    host = inject(ElementRef);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    label = input('Menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Nama Material Symbols untuk trigger; `null` = label saja (mode normal). */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Trigger hanya ikon — label tetap diumumkan via aria-label/title. */
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /** Penempatan ikon relatif label: `start` (default) atau `end`. */
+    iconPosition = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    /** `bottom` = bar berada di bawah konten; panel menempel sisi bawah container dan tumbuh ke atas. */
+    position = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    typeStyle = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk container `<li>` tiap tab group (mengatur tinggi/border/padding container). */
+    groupClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupClass" }] : /* 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();
+    panelId = computed(() => `nav-flyout-${this.navId()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    isBorderRail = computed(() => this.typeStyle() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    isBottom = computed(() => this.position() === 'bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBottom" }] : /* istanbul ignore next */ []));
+    /** Compact (mobile) selalu icon-only; selain itu mengikuti input `iconOnly`. */
+    showIconOnly = computed(() => this.compact() || this.iconOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIconOnly" }] : /* istanbul ignore next */ []));
+    triggerIcon = computed(() => this.icon() ?? (this.showIconOnly() ? 'menu' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []));
+    /** Kelas tambahan untuk NavigationItem di dalam flyout saat style border-rail aktif. */
+    navItemClass = computed(() => 
+    // h-8 menjaga leaf di row tetap muat dalam tinggi 48px (py-2 + 32px) agar
+    // border bawah row tidak terdorong melewati posisi rail layout.
+    cn(this.itemClass(), this.isBorderRail() && 'h-8 rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
+    branches = computed(() => this.items().filter((item) => item.children.length > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []));
+    activeBranch = computed(() => {
+        const key = this.nav.currentPanelKey(this.navId());
+        return this.branches().find((branch) => branch.key === key) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeBranch" }] : /* istanbul ignore next */ []));
+    /**
+     * Offset panel terhadap host agar panel menimpa penuh container parent dari
+     * `Navigation` (lebar sama persis; posisi atas di mode top, posisi bawah di
+     * mode bottom). `null` berarti pengukuran tidak tersedia (mis. SSR/jsdom)
+     * dan panel jatuh ke lebar host sendiri.
+     */
+    panelPlacement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
+    panelWrapperClasses = computed(() => cn('absolute z-50', !this.panelPlacement() && cn('inset-x-0', this.isBottom() ? 'bottom-0' : 'top-0')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelWrapperClasses" }] : /* istanbul ignore next */ []));
+    /** Mode bottom membalik urutan visual: grid entri di atas, row tab di bawah (dekat bar). */
+    menuClasses = computed(() => cn('flex', this.isBottom() ? 'flex-col-reverse' : 'flex-col'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuClasses" }] : /* istanbul ignore next */ []));
+    closeButtonClasses() {
+        return cn('absolute right-2.5 z-10 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.isBottom() ? 'bottom-2' : 'top-2');
+    }
+    isOpen() {
+        return this.nav.isDrawerOpen(this.navId());
+    }
+    onWindowResize() {
+        if (this.isOpen()) {
+            this.measurePanelPlacement();
+        }
+    }
+    measurePanelPlacement() {
+        const hostEl = this.host.nativeElement;
+        const navEl = hostEl.closest('[data-navigation-id]');
+        let container = navEl?.parentElement ?? hostEl.parentElement;
+        // Wrapper display:contents punya rect kosong — naik terus sampai container yang punya box visual.
+        while (container && container.getBoundingClientRect().width <= 0 && container.parentElement) {
+            container = container.parentElement;
+        }
+        const containerRect = (container ?? hostEl).getBoundingClientRect();
+        const hostRect = hostEl.getBoundingClientRect();
+        if (containerRect.width <= 0) {
+            this.panelPlacement.set(null);
+            return;
+        }
+        this.panelPlacement.set({
+            left: containerRect.left - hostRect.left,
+            top: containerRect.top - hostRect.top,
+            bottom: hostRect.bottom - containerRect.bottom,
+            width: containerRect.width,
+        });
+    }
+    toggleFlyout() {
+        if (this.isOpen()) {
+            this.closeFlyout(false);
+            return;
+        }
+        this.measurePanelPlacement();
+        this.nav.openDrawer(this.navId());
+        const current = this.nav.currentPanelKey(this.navId());
+        const branches = this.branches();
+        if (!branches.some((branch) => branch.key === current)) {
+            const first = branches.find((branch) => !branch.disabled) ?? branches[0];
+            if (first) {
+                this.nav.openPanel(this.navId(), first);
+            }
+        }
+        queueMicrotask(() => this.focusFirstPanelItem());
+    }
+    closeFlyout(restoreFocus) {
+        this.nav.closeDrawer(this.navId());
+        if (restoreFocus) {
+            queueMicrotask(() => this.focusTrigger());
+        }
+    }
+    onEscape(event) {
+        if (!this.isOpen()) {
+            return;
+        }
+        event.preventDefault();
+        this.closeFlyout(true);
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen()) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.host.nativeElement.contains(target)) {
+            this.closeFlyout(false);
+        }
+    }
+    isItemActive(item) {
+        return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    isBranchOpen(item) {
+        return this.nav.isPanelOpen(this.navId(), item);
+    }
+    openBranch(item) {
+        this.nav.openPanel(this.navId(), item);
+    }
+    triggerClasses() {
+        return cn('nav-trigger group/nav inline-flex h-10 min-w-0 items-center gap-2 rounded-full border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.showIconOnly() && 'w-10 justify-center gap-0 px-0', this.isBorderRail()
+            ? this.isOpen()
+                ? 'text-primary'
+                : 'text-foreground/80 hover:text-primary'
+            : this.isOpen()
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass());
+    }
+    panelCardClasses() {
+        // Border-rail: panel menutup tepat content-box frame layout, jadi garis
+        // sisi bar memakai border frame (rail) itu sendiri — panel cukup menggambar
+        // border 1.5px senada rail pada sisi yang menjauh dari bar agar sambungan
+        // tetap lurus (bawah di mode top, atas di mode bottom).
+        return cn('relative overflow-hidden bg-popover text-popover-foreground shadow-2xl', this.isBorderRail()
+            ? cn('rounded-none border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
+            : 'rounded-xl border border-[hsl(var(--border)/var(--opacity-70))]');
+    }
+    rowClasses() {
+        // `min-h` menjaga tinggi row stabil meski hanya berisi tab group yang memakai
+        // `-my-2`. Border pemisah row↔grid selalu di sisi yang menjauh dari bar:
+        // border-b di mode top, border-t di mode bottom (row berada di bawah grid).
+        // Border-rail: total tinggi row 48px (min-h-12) + border 1.5px sehingga garis
+        // row jatuh persis di posisi rail horizontal layout dan menyambung lurus.
+        return cn('m-0 flex min-w-0 list-none flex-wrap items-center gap-1 px-2 py-2 pr-12 md:px-3 md:pr-14', this.isBorderRail()
+            ? cn('min-h-12 border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
+            : cn('min-h-[3.25rem] border-[hsl(var(--border)/var(--opacity-60))]', this.isBottom() ? 'border-t' : 'border-b'));
+    }
+    /**
+     * Container `<li>` tab group. Basis `flex -my-2 self-stretch` membuat tab setinggi
+     * penuh row (lihat tabClasses); consumer dapat menimpa/menambah lewat `nav-group-class`
+     * (global) atau `item.classes.container` (per-group) untuk fleksibilitas.
+     */
+    groupContainerClasses(item) {
+        return cn('flex -my-2 self-stretch', this.groupClass(), item.classes?.container);
+    }
+    tabClasses(item) {
+        return cn(
+        // Tinggi tab group mengikuti tinggi penuh row (parent). Wrapper <li> memakai
+        // `-my-2 self-stretch` untuk membatalkan `py-2` row; tombol `h-full` mengisi penuh
+        // sehingga sisinya rata dengan border row — sudut pada sisi border dibuat siku
+        // agar menyambung (bawah di mode top, atas di mode bottom).
+        'nav-trigger group/nav inline-flex h-full min-h-9 min-w-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors', this.isBottom() ? 'rounded-t-none' : 'rounded-b-none', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isBorderRail()
+            ? this.isBranchOpen(item) || this.isItemActive(item)
+                ? 'rounded-none text-primary'
+                : 'rounded-none text-foreground/80 hover:text-primary'
+            : this.isBranchOpen(item)
+                ? 'bg-accent text-accent-foreground'
+                : this.isItemActive(item)
+                    ? 'font-semibold text-foreground hover:bg-accent hover:text-accent-foreground'
+                    : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', item.classes?.wrapper, this.itemClass());
+    }
+    tabChevronClasses(item) {
+        return cn('shrink-0 self-center text-current transition-transform duration-200', this.isBranchOpen(item) && 'rotate-90');
+    }
+    onRowKeydown(event) {
+        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowDown') {
+            return;
+        }
+        const rowItems = Array.from(this.host.nativeElement.querySelectorAll('[data-navigation-flyout-row="true"] [role="menuitem"]'));
+        const currentIndex = rowItems.indexOf(document.activeElement);
+        if (currentIndex === -1) {
+            return;
+        }
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+            const entry = this.host.nativeElement.querySelector('[data-navigation-flyout-content] [role="menuitem"]');
+            entry?.focus();
+            return;
+        }
+        const direction = event.key === 'ArrowRight' ? 1 : -1;
+        rowItems[(currentIndex + direction + rowItems.length) % rowItems.length]?.focus();
+    }
+    focusFirstPanelItem() {
+        const panel = this.host.nativeElement.querySelector('[data-navigation-flyout-panel="true"]');
+        const target = panel?.querySelector('[role="menuitem"], a[href], button:not([disabled])');
+        target?.focus();
+    }
+    focusTrigger() {
+        this.host.nativeElement.querySelector('[data-navigation-flyout-trigger="true"]')?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFlyoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationFlyoutMenuComponent, isStandalone: true, selector: "NavigationFlyoutMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, 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: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", 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 }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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: { listeners: { "keydown.escape": "onEscape($event)", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" }, classAttribute: "relative block w-full" }, ngImport: i0, template: `
+    <button
+      type="button"
+      data-navigation-flyout-trigger="true"
+      [class]="triggerClasses()"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="isOpen() ? panelId() : null"
+      [attr.aria-label]="showIconOnly() ? label() : null"
+      [attr.title]="showIconOnly() ? label() : null"
+      (click)="toggleFlyout()">
+      @if (showIconOnly()) {
+        <Icon [name]="triggerIcon() ?? 'menu'" [size]="18" class="text-current" />
+      } @else {
+        @if (iconPosition() === 'start' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+
+        <span class="truncate">{{ label() }}</span>
+
+        @if (iconPosition() === 'end' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+      }
+    </button>
+
+    @if (isOpen()) {
+      <div
+        [id]="panelId()"
+        data-navigation-flyout-panel="true"
+        [class]="panelWrapperClasses()"
+        [style.left.px]="panelPlacement()?.left"
+        [style.top.px]="isBottom() ? null : panelPlacement()?.top"
+        [style.bottom.px]="isBottom() ? panelPlacement()?.bottom : null"
+        [style.width.px]="panelPlacement()?.width">
+        <div [class]="panelCardClasses()">
+          <button
+            type="button"
+            data-navigation-flyout-close="true"
+            [class]="closeButtonClasses()"
+            aria-label="Close menu"
+            (click)="closeFlyout(true)">
+            <span aria-hidden="true" class="text-base leading-none">✕</span>
+          </button>
+
+          <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
+            <ul role="none" data-navigation-flyout-row="true" [class]="rowClasses()" (keydown)="onRowKeydown($event)">
+              @for (item of items(); track item.key) {
+                @switch (item.type) {
+                  @case ('divider') {
+                    <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
+                  }
+                  @case ('spacer') {
+                    <li role="none" aria-hidden="true" class="flex-1"></li>
+                  }
+                  @default {
+                    @if (item.children.length > 0) {
+                      <li role="none" [class]="groupContainerClasses(item)" [attr.data-navigation-item-key]="item.key">
+                        <button
+                          type="button"
+                          role="menuitem"
+                          data-navigation-flyout-tab="true"
+                          [class]="tabClasses(item)"
+                          [attr.aria-expanded]="isBranchOpen(item)"
+                          [attr.aria-controls]="item.panelId"
+                          [disabled]="item.disabled || null"
+                          (click)="openBranch(item)">
+                          <NavigationItemContent
+                            [item]="item"
+                            [active]="isItemActive(item)"
+                            [compact]="false"
+                            [orientation]="'horizontal'"
+                            [level]="0"
+                            [iconTemplate]="iconTemplate()" />
+                          <Icon name="chevron_right" [size]="16" [class]="tabChevronClasses(item)" />
+                        </button>
+                      </li>
+                    } @else {
+                      <li
+                        NavigationItem
+                        [navId]="navId()"
+                        [item]="item"
+                        [level]="0"
+                        [orientation]="'horizontal'"
+                        [compact]="false"
+                        [itemClass]="navItemClass()"
+                        [activeIds]="activeIds()"
+                        [activeUrl]="activeUrl()"
+                        [iconTemplate]="iconTemplate()"
+                        [collapseTree]="collapseTree()"
+                        [openedIds]="openedIds()"
+                        (openedIdsChange)="openedIdsChange.emit($event)"
+                        (itemSelected)="itemSelected.emit($event)"></li>
+                    }
+                  }
+                }
+              }
+            </ul>
+
+            @if (activeBranch(); as branch) {
+              <NavigationEntryGrid
+                [navId]="navId()"
+                [branch]="branch"
+                [typeStyle]="typeStyle()"
+                [itemClass]="itemClass()"
+                [activeIds]="activeIds()"
+                [activeUrl]="activeUrl()"
+                [iconTemplate]="iconTemplate()"
+                [collapseTree]="collapseTree()"
+                [openedIds]="openedIds()"
+                (openedIdsChange)="openedIdsChange.emit($event)"
+                (itemSelected)="itemSelected.emit($event)" />
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFlyoutMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFlyoutMenu',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent, NavigationEntryGridComponent, NavigationItemComponent, NavigationItemContentComponent],
+                    host: {
+                        class: 'relative block w-full',
+                        '(keydown.escape)': 'onEscape($event)',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(window:resize)': 'onWindowResize()',
+                    },
+                    template: `
+    <button
+      type="button"
+      data-navigation-flyout-trigger="true"
+      [class]="triggerClasses()"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="isOpen() ? panelId() : null"
+      [attr.aria-label]="showIconOnly() ? label() : null"
+      [attr.title]="showIconOnly() ? label() : null"
+      (click)="toggleFlyout()">
+      @if (showIconOnly()) {
+        <Icon [name]="triggerIcon() ?? 'menu'" [size]="18" class="text-current" />
+      } @else {
+        @if (iconPosition() === 'start' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+
+        <span class="truncate">{{ label() }}</span>
+
+        @if (iconPosition() === 'end' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+      }
+    </button>
+
+    @if (isOpen()) {
+      <div
+        [id]="panelId()"
+        data-navigation-flyout-panel="true"
+        [class]="panelWrapperClasses()"
+        [style.left.px]="panelPlacement()?.left"
+        [style.top.px]="isBottom() ? null : panelPlacement()?.top"
+        [style.bottom.px]="isBottom() ? panelPlacement()?.bottom : null"
+        [style.width.px]="panelPlacement()?.width">
+        <div [class]="panelCardClasses()">
+          <button
+            type="button"
+            data-navigation-flyout-close="true"
+            [class]="closeButtonClasses()"
+            aria-label="Close menu"
+            (click)="closeFlyout(true)">
+            <span aria-hidden="true" class="text-base leading-none">✕</span>
+          </button>
+
+          <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
+            <ul role="none" data-navigation-flyout-row="true" [class]="rowClasses()" (keydown)="onRowKeydown($event)">
+              @for (item of items(); track item.key) {
+                @switch (item.type) {
+                  @case ('divider') {
+                    <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
+                  }
+                  @case ('spacer') {
+                    <li role="none" aria-hidden="true" class="flex-1"></li>
+                  }
+                  @default {
+                    @if (item.children.length > 0) {
+                      <li role="none" [class]="groupContainerClasses(item)" [attr.data-navigation-item-key]="item.key">
+                        <button
+                          type="button"
+                          role="menuitem"
+                          data-navigation-flyout-tab="true"
+                          [class]="tabClasses(item)"
+                          [attr.aria-expanded]="isBranchOpen(item)"
+                          [attr.aria-controls]="item.panelId"
+                          [disabled]="item.disabled || null"
+                          (click)="openBranch(item)">
+                          <NavigationItemContent
+                            [item]="item"
+                            [active]="isItemActive(item)"
+                            [compact]="false"
+                            [orientation]="'horizontal'"
+                            [level]="0"
+                            [iconTemplate]="iconTemplate()" />
+                          <Icon name="chevron_right" [size]="16" [class]="tabChevronClasses(item)" />
+                        </button>
+                      </li>
+                    } @else {
+                      <li
+                        NavigationItem
+                        [navId]="navId()"
+                        [item]="item"
+                        [level]="0"
+                        [orientation]="'horizontal'"
+                        [compact]="false"
+                        [itemClass]="navItemClass()"
+                        [activeIds]="activeIds()"
+                        [activeUrl]="activeUrl()"
+                        [iconTemplate]="iconTemplate()"
+                        [collapseTree]="collapseTree()"
+                        [openedIds]="openedIds()"
+                        (openedIdsChange)="openedIdsChange.emit($event)"
+                        (itemSelected)="itemSelected.emit($event)"></li>
+                    }
+                  }
+                }
+              }
+            </ul>
+
+            @if (activeBranch(); as branch) {
+              <NavigationEntryGrid
+                [navId]="navId()"
+                [branch]="branch"
+                [typeStyle]="typeStyle()"
+                [itemClass]="itemClass()"
+                [activeIds]="activeIds()"
+                [activeUrl]="activeUrl()"
+                [iconTemplate]="iconTemplate()"
+                [collapseTree]="collapseTree()"
+                [openedIds]="openedIds()"
+                (openedIdsChange)="openedIdsChange.emit($event)"
+                (itemSelected)="itemSelected.emit($event)" />
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], 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: "iconOnly", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+class NavigationHorizontalComponent {
+    nav = inject(NavigationService);
+    host = inject(ElementRef);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Posisi bar terhadap konten: `bottom` membuka panel ke atas; selain itu ke bawah. */
+    position = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    typeStyle = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk container `<li>` group navbar. */
+    groupClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupClass" }] : /* 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();
+    isBorderRail = computed(() => this.typeStyle() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    isBottom = computed(() => this.position() === 'bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBottom" }] : /* istanbul ignore next */ []));
+    /** Kelas tambahan untuk NavigationItem leaf di row saat style border-rail aktif. */
+    navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && 'rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => cn('flex min-w-0 list-none p-0', this.compact() ? 'justify-center gap-1' : 'items-center justify-center gap-1'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    isItemActive(item) {
+        return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    isPanelOpen(item) {
+        return this.nav.isPanelOpen(this.navId(), item);
+    }
+    togglePanel(item) {
+        if (!this.isPanelOpen(item)) {
+            this.measurePanelPlacement();
+        }
+        this.nav.togglePanel(this.navId(), item);
+    }
+    onWindowResize() {
+        if (this.nav.currentPanelKey(this.navId())) {
+            this.measurePanelPlacement();
+        }
+    }
+    /** Klik di luar menubar/panel menutup panel mega yang sedang terbuka. */
+    onDocumentClick(event) {
+        if (!this.nav.currentPanelKey(this.navId())) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.host.nativeElement.contains(target)) {
+            this.nav.closePanel(this.navId());
+        }
+    }
+    /**
+     * Lebar & posisi kiri panel mengikuti container parent dari `Navigation`
+     * (wrapper display:contents dilewati). `null` = pengukuran tak tersedia dan
+     * panel jatuh ke lebar host (inset-x-0).
+     */
+    panelPlacement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
+    measurePanelPlacement() {
+        const hostEl = this.host.nativeElement;
+        const navEl = hostEl.closest('[data-navigation-id]');
+        let container = navEl?.parentElement ?? hostEl.parentElement;
+        while (container && container.getBoundingClientRect().width <= 0 && container.parentElement) {
+            container = container.parentElement;
+        }
+        const containerRect = (container ?? hostEl).getBoundingClientRect();
+        const hostRect = hostEl.getBoundingClientRect();
+        if (containerRect.width <= 0) {
+            this.panelPlacement.set(null);
+            return;
+        }
+        this.panelPlacement.set({
+            left: containerRect.left - hostRect.left,
+            width: containerRect.width,
+        });
+    }
+    compactLabel(item) {
+        return this.nav.compactLabel(item, this.compact());
+    }
+    titleFor(item) {
+        return this.nav.titleFor(item, this.compact());
+    }
+    /** Container `<li>` group navbar; consumer atur lewat `nav-group-class` atau `item.classes.container`. */
+    groupContainerClasses(item) {
+        return cn(this.groupClass(), item.classes?.container);
+    }
+    triggerClasses(item) {
+        return cn('nav-trigger group/nav inline-flex min-w-0 items-center gap-3 rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', 'h-9 px-3 py-2', this.compact() && 'w-10 justify-center px-0', this.isBorderRail()
+            ? this.isPanelOpen(item) || this.isItemActive(item)
+                ? 'rounded-none text-primary'
+                : 'rounded-none text-foreground/80 hover:text-primary'
+            : this.isItemActive(item)
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', item.classes?.wrapper, this.itemClass());
+    }
+    chevronClasses(item) {
+        return cn('ml-auto shrink-0 self-center transition-transform duration-200', this.isPanelOpen(item) && 'rotate-90');
+    }
+    panelClasses() {
+        // Panel mega selebar container parent, menempel rapat tanpa gap pada sisi bar:
+        // nav-position top membuka ke bawah (sisi atas siku), bottom membuka ke atas
+        // (sisi bawah siku) sehingga sambungan border selalu menyatu dengan bar.
+        // Border-rail: rail horizontal layout menjadi garis sisi-bar panel — panel
+        // cukup menggambar border 1.5px senada rail pada sisi yang menjauh dari bar.
+        return cn('absolute z-50 overflow-hidden bg-popover text-popover-foreground shadow-lg', this.isBottom() ? 'bottom-full' : 'top-full', !this.panelPlacement() && 'inset-x-0', this.isBorderRail()
+            ? cn('rounded-none border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
+            : cn('rounded-xl border border-[hsl(var(--border)/var(--opacity-70))]', this.isBottom() ? 'rounded-b-none' : 'rounded-t-none'));
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            const panelKey = this.nav.currentPanelKey(this.navId());
+            this.nav.closePanel(this.navId());
+            this.focusOpenPanelTrigger(panelKey);
+            return;
+        }
+        const rootItems = this.rootFocusItems();
+        if (rootItems.length === 0) {
+            return;
+        }
+        const currentIndex = rootItems.indexOf(document.activeElement);
+        if (currentIndex === -1) {
+            return;
+        }
+        // ArrowDown membuka panel di posisi top; ArrowUp di posisi bottom (panel di atas bar).
+        if (event.key === (this.isBottom() ? 'ArrowUp' : 'ArrowDown')) {
+            const currentItem = rootItems[currentIndex];
+            if (currentItem.getAttribute('aria-haspopup') === 'menu') {
+                event.preventDefault();
+                currentItem.click();
+                queueMicrotask(() => this.focusFirstPanelItem(this.nav.currentPanelKey(this.navId())));
+            }
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const direction = event.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + direction + rootItems.length) % rootItems.length;
+            rootItems[nextIndex]?.focus();
+        }
+    }
+    onPanelKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        const panelKey = this.nav.currentPanelKey(this.navId());
+        this.nav.closePanel(this.navId());
+        this.focusOpenPanelTrigger(panelKey);
+    }
+    rootFocusItems() {
+        return Array.from(this.host.nativeElement.querySelectorAll('[data-navigation-root-item="true"]'));
+    }
+    focusOpenPanelTrigger(panelKey) {
+        if (!panelKey) {
+            return;
+        }
+        const trigger = this.host.nativeElement.querySelector(`[data-navigation-item-key="${panelKey}"] [data-navigation-root-item="true"]`);
+        trigger?.focus();
+    }
+    focusFirstPanelItem(panelKey) {
+        if (!panelKey) {
+            return;
+        }
+        const panel = this.host.nativeElement.querySelector(`[data-navigation-panel="${panelKey}"]`);
+        const item = panel?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        item?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationHorizontalComponent, isStandalone: true, selector: "NavigationHorizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", 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 }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, classAttribute: "relative block w-full" }, ngImport: i0, template: `
+    <ul [class]="listClasses()" role="menubar" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('collapsible') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('mega') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @default {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="navItemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li role="none" [class]="groupContainerClasses(item)" [attr.data-navigation-item-key]="item.key">
+        <button
+          type="button"
+          role="menuitem"
+          data-navigation-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="item.panelId"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)">
+          <NavigationItemContent
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()" />
+          <Icon name="chevron_right" [size]="16" [class]="chevronClasses(item)" />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="item.panelId"
+            role="menu"
+            [class]="panelClasses()"
+            [style.left.px]="panelPlacement()?.left"
+            [style.width.px]="panelPlacement()?.width"
+            [attr.data-navigation-panel]="item.key"
+            (keydown)="onPanelKeydown($event)">
+            <NavigationEntryGrid
+              [navId]="navId()"
+              [branch]="item"
+              [typeStyle]="typeStyle()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)" />
+          </div>
+        }
+      </li>
+    </ng-template>
+  `, 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"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHorizontal',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NgTemplateOutlet,
+                        IconComponent,
+                        NavigationEntryGridComponent,
+                        NavigationItemComponent,
+                        NavigationItemContentComponent,
+                    ],
+                    host: {
+                        class: 'relative block w-full',
+                        '(window:resize)': 'onWindowResize()',
+                        '(document:click)': 'onDocumentClick($event)',
+                    },
+                    template: `
+    <ul [class]="listClasses()" role="menubar" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('collapsible') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @case ('mega') {
+            <ng-container [ngTemplateOutlet]="branchTemplate" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+          @default {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="navItemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li role="none" [class]="groupContainerClasses(item)" [attr.data-navigation-item-key]="item.key">
+        <button
+          type="button"
+          role="menuitem"
+          data-navigation-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="item.panelId"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)">
+          <NavigationItemContent
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()" />
+          <Icon name="chevron_right" [size]="16" [class]="chevronClasses(item)" />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="item.panelId"
+            role="menu"
+            [class]="panelClasses()"
+            [style.left.px]="panelPlacement()?.left"
+            [style.width.px]="panelPlacement()?.width"
+            [attr.data-navigation-panel]="item.key"
+            (keydown)="onPanelKeydown($event)">
+            <NavigationEntryGrid
+              [navId]="navId()"
+              [branch]="item"
+              [typeStyle]="typeStyle()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)" />
+          </div>
+        }
+      </li>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", 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', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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') {
+      <NavigationFlyoutMenu
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [label]="container.flyoutLabel()"
+        [icon]="container.flyoutIcon()"
+        [iconOnly]="container.flyoutIconOnly()"
+        [iconPosition]="container.flyoutIconPosition()"
+        [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.orientation === 'horizontal') {
+      <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') {
+      <NavigationDockbarMenu
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [mode]="navState.dockbarMode"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)" />
+    } @else {
+      <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: NavigationDockbarMenuComponent, selector: "NavigationDockbarMenu", inputs: ["navId", "items", "mode", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutMenuComponent, selector: "NavigationFlyoutMenu", inputs: ["navId", "items", "label", "icon", "iconOnly", "iconPosition", "position", "typeStyle", "compact", "itemClass", "groupClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationHorizontalComponent, selector: "NavigationHorizontal", inputs: ["navId", "items", "position", "typeStyle", "compact", "itemClass", "groupClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NavigationDockbarMenuComponent,
+                        NavigationFlyoutMenuComponent,
+                        NavigationHorizontalComponent,
+                        NavigationListComponent,
+                    ],
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    @let navState = container.displayState();
+
+    @if (navState.orientation === 'horizontal' && navState.type === 'flyout') {
+      <NavigationFlyoutMenu
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [label]="container.flyoutLabel()"
+        [icon]="container.flyoutIcon()"
+        [iconOnly]="container.flyoutIconOnly()"
+        [iconPosition]="container.flyoutIconPosition()"
+        [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.orientation === 'horizontal') {
+      <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') {
+      <NavigationDockbarMenu
+        [navId]="navState.id"
+        [items]="container.normalizedItems()"
+        [mode]="navState.dockbarMode"
+        [position]="navState.position"
+        [itemClass]="container.itemClass()"
+        [activeIds]="container.activeIdSet()"
+        [activeUrl]="container.activeUrl()"
+        [iconTemplate]="container.iconTemplate()"
+        [collapseTree]="container.collapseTree()"
+        [openedIds]="container.openedIds()"
+        (openedIdsChange)="container.openedIds.set($event)"
+        (itemSelected)="container.itemSelected.emit($event)" />
+    } @else {
+      <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)" />
+    }
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class NavigationFooterComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    isHorizontal = computed(() => this.shell?.displayState().orientation === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.isHorizontal()
+        ? 'relative z-10 block h-full w-auto shrink-0'
+        : 'sticky bottom-0 z-10 block h-12 shrink-0 border-t border-[hsl(var(--border)/var(--opacity-70))]', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: NavigationFooterComponent, isStandalone: true, selector: "NavigationFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="flex h-full items-center">
+      <ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    <div class="flex h-full items-center">
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class NavigationHeaderComponent {
+    shell = inject(NAVIGATION_SHELL);
+    toggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => this.shell.state().collapsed, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    displayCollapsed = computed(() => this.shell.displayState().collapsed, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
+    isHorizontal = computed(() => this.shell.displayState().orientation === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+    showToggle = computed(() => {
+        if (this.isHorizontal()) {
+            return false;
+        }
+        return this.toggle() || (this.shell.collapseEnabled() && !this.displayCollapsed());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+    toggleAriaLabel = computed(() => (this.collapsed() ? 'Expand navigation' : 'Collapse navigation'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
+    toggleIconName = computed(() => (this.collapsed() ? 'left_panel_open' : 'left_panel_close'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []));
+    contentClasses = computed(() => (this.isHorizontal() ? 'min-w-0' : 'min-w-0 flex-1'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.isHorizontal()
+        ? 'relative z-10 block h-full w-auto shrink-0'
+        : 'sticky top-0 z-10 block h-12 shrink-0 border-b border-[hsl(var(--border)/var(--opacity-70))]', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    toggleCollapsed() {
+        this.shell.toggleCollapsed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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="flex h-full items-center gap-3 px-3">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex h-8 w-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          [attr.aria-label]="toggleAriaLabel()"
+          [attr.title]="toggleAriaLabel()"
+          data-navigation-header-toggle="true"
+          (click)="toggleCollapsed()">
+          <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHeader',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'displayCollapsed()',
+                    },
+                    template: `
+    <div class="flex h-full items-center gap-3 px-3">
+      <div [class]="contentClasses()">
+        <ng-content />
+      </div>
+
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="inline-flex h-8 w-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          [attr.aria-label]="toggleAriaLabel()"
+          [attr.title]="toggleAriaLabel()"
+          data-navigation-header-toggle="true"
+          (click)="toggleCollapsed()">
+          <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Type sidebar vertikal untuk `<Navigation>`. Slot `NavigationHeader` dan
+ * `NavigationFooter` opsional; `NavigationContent` selalu dirender (default
+ * otomatis bila tidak diproyeksikan).
+ */
+class NavigationSidebarComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    position = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    collapsed = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    collapse = input(false, { ...(ngDevMode ? { debugName: "collapse" } : /* istanbul ignore next */ {}), alias: 'nav-sidebar-collapse', transform: booleanAttribute });
+    previewExpanded = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
+    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
+    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const config = {
+            orientation: 'vertical',
+            type: 'sidebar',
+            position: this.position,
+            collapsed: this.collapsed,
+            sidebarCollapse: this.collapse,
+            previewExpanded: this.previewExpanded,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationSidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationSidebar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NavigationContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-sidebar-collapse", required: false }] }], previewExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewExpanded", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+
+/**
+ * Type dockbar vertikal (rail ikon + aside) untuk `<Navigation>`. Slot
+ * `NavigationHeader` dan `NavigationFooter` opsional; `NavigationContent`
+ * selalu dirender (default otomatis bila tidak diproyeksikan).
+ */
+class NavigationDockbarComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    mode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
+    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
+    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const config = {
+            orientation: 'vertical',
+            type: 'dockbar',
+            position: this.position,
+            dockbarMode: this.mode,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationDockbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationDockbarComponent, isStandalone: true, selector: "NavigationDockbar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationDockbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationDockbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NavigationContentComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    @if (headerSlot()) {
+      <ng-content select="NavigationHeader" />
+    }
+
+    @if (contentSlot()) {
+      <ng-content select="NavigationContent" />
+    } @else {
+      <NavigationContent />
+    }
+
+    @if (footerSlot()) {
+      <ng-content select="NavigationFooter" />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+
+/**
+ * Type navbar horizontal untuk `<Navigation>`. Slot `NavigationHeader`
+ * dan `NavigationFooter` opsional; `NavigationContent` selalu dirender
+ * (default otomatis bila tidak diproyeksikan).
+ */
+class NavigationNavbarComponent {
+    container = inject(NavigationContainerComponent);
+    destroyRef = inject(DestroyRef);
+    /** Posisi bar terhadap konten layout: `top` (default) atau `bottom` — panel grid membuka ke arah sebaliknya. */
+    position = input(null, { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'nav-position' });
+    typeStyle = input('default', { ...(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.0.2", ngImport: i0, type: NavigationNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationNavbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationNavbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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' });
+    /** 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('default', { ...(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: 'flyout',
+            position: this.position,
+            flyoutLabel: this.label,
+            flyoutIcon: this.icon,
+            flyoutIconOnly: this.iconOnly,
+            flyoutIconPosition: this.iconPosition,
+            typeStyle: this.typeStyle,
+        };
+        this.container.registerType(config);
+        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 }, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFlyoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFlyout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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: { 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 }] }], 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 }] }] } });
+
+/**
+ * Tampilan compact aktif saat sidebar collapsible sedang collapsed, atau saat
+ * type dockbar aktif — rail dockbar selalu selebar ikon (`w-16`) sehingga
+ * konten expanded tidak pernah muat.
+ */
+function isCompactDisplay(shell) {
+    const state = shell.displayState();
+    if (state.orientation !== 'vertical') {
+        return false;
+    }
+    if (state.type === 'dockbar') {
+        return true;
+    }
+    return shell.collapseEnabled() && state.collapsed;
+}
+class NavigationCollapseRootDirective {
+    shell = inject(NAVIGATION_SHELL);
+    collapseEnabled = computed(() => {
+        const state = this.shell.displayState();
+        return state.orientation === 'vertical' && (this.shell.collapseEnabled() || state.type === 'dockbar');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
+    displayCollapsed = computed(() => isCompactDisplay(this.shell), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationCollapseRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: NavigationCollapseRootDirective, isStandalone: true, selector: "[NavigationCollapseRoot]", host: { properties: { "class.w-full": "collapseEnabled()", "class.justify-center": "displayCollapsed()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationCollapseRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NavigationCollapseRoot]',
+                    host: {
+                        '[class.w-full]': 'collapseEnabled()',
+                        '[class.justify-center]': 'displayCollapsed()',
+                    },
+                }]
+        }] });
+class NavigationCollapseExpandedDirective {
+    shell = inject(NAVIGATION_SHELL);
+    templateRef = inject((TemplateRef));
+    viewContainer = inject(ViewContainerRef);
+    hasView = false;
+    shouldRender = computed(() => !isCompactDisplay(this.shell), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.shouldRender()) {
+                if (!this.hasView) {
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                    this.hasView = true;
+                }
+                return;
+            }
+            if (this.hasView) {
+                this.viewContainer.clear();
+                this.hasView = false;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationCollapseExpandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: NavigationCollapseExpandedDirective, isStandalone: true, selector: "[NavigationCollapseExpanded]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationCollapseExpandedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NavigationCollapseExpanded]',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavigationCollapseExpandedDirective, NavigationCollapseRootDirective, NavigationContainerComponent, NavigationContentComponent, NavigationDockbarComponent, NavigationFlyoutComponent, NavigationFooterComponent, NavigationHeaderComponent, NavigationIconDirective, NavigationNavbarComponent, NavigationSidebarComponent, normalizeUiNavItems };
+//# sourceMappingURL=ojiepermana-angular-navigation.mjs.map