@ojiepermana/angular-navigation 22.0.43 → 22.0.45

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -1,4022 +1 @@
-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.3", ngImport: i0, type: NavigationIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: NavigationIconDirective, isStandalone: true, selector: "ng-template[NavigationIcon]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationIconDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[NavigationIcon]',
-                }]
-        }] });
-
-function normalizeType(type, hasChildren) {
-    if (type === 'divider' || type === 'spacer' || type === 'group' || type === 'mega') {
-        return type;
-    }
-    if (type === 'collapsible' || type === 'collapsable') {
-        return 'collapsible';
-    }
-    if (type === 'aside' && hasChildren) {
-        return 'collapsible';
-    }
-    if (!type && hasChildren) {
-        return 'collapsible';
-    }
-    return 'item';
-}
-function toKeyPart(value) {
-    return value
-        .toLowerCase()
-        .replace(/[^a-z0-9_-]+/g, '-')
-        .replace(/^-+|-+$/g, '');
-}
-function itemFallbackKey(item, index) {
-    return (toKeyPart(item.title ?? item.link?.toString() ?? item.href ?? `item-${index}`) ||
-        `item-${index}`);
-}
-function normalizeItem(item, index, path) {
-    if (item.isHidden?.(item)) {
-        return null;
-    }
-    const children = (item.children ?? [])
-        .map((child, childIndex) => normalizeItem(child, childIndex, `${path}-${childIndex}`))
-        .filter((child) => child !== null);
-    const hasChildren = children.length > 0;
-    const key = item.id ?? `${path}-${itemFallbackKey(item, index)}`;
-    return {
-        ...item,
-        key,
-        stateId: item.id ?? key,
-        panelId: `nav-panel-${toKeyPart(key) || index}`,
-        type: normalizeType(item.type, hasChildren),
-        source: item,
-        children,
-    };
-}
-function normalizeUiNavItems(items) {
-    return items
-        .map((item, index) => normalizeItem(item, index, `nav-${index}`))
-        .filter((item) => item !== null);
-}
-
-function injectNavigationController(inputs) {
-    const nav = inject(NavigationService);
-    const destroyRef = inject(DestroyRef);
-    // Token unik per instance <Navigation> untuk validasi keunikan id di NavigationService.
-    const owner = {};
-    const registeredState = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "registeredState" }] : /* istanbul ignore next */ []));
-    let previousRegisteredId = null;
-    const normalizedNavId = computed(() => normalizeId(inputs.navId()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "normalizedNavId" }] : /* istanbul ignore next */ []));
-    const collapsedPreference = computed(() => inputs.collapsed() ?? (inputs.compact() ? true : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []));
-    const normalizedItems = computed(() => normalizeUiNavItems(inputs.data()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []));
-    const fallbackState = computed(() => ({
-        id: normalizedNavId(),
-        orientation: inputs.orientation(),
-        type: fallbackType(inputs.orientation(), inputs.type()),
-        position: inputs.position() ?? (inputs.orientation() === 'horizontal' ? 'top' : 'left'),
-        collapsed: collapsedPreference() ?? false,
-        dockbarMode: inputs.dockbarMode() ?? 'sticky',
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fallbackState" }] : /* istanbul ignore next */ []));
-    const resolvedState = computed(() => nav.currentState(normalizedNavId()) ?? registeredState() ?? fallbackState(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
-    const activeIdSet = computed(() => {
-        const ids = inputs.activeIds();
-        if (!ids) {
-            return new Set();
-        }
-        return ids instanceof Set ? new Set(ids) : new Set(ids);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIdSet" }] : /* istanbul ignore next */ []));
-    effect(() => {
-        if (!inputs.enabled()) {
-            return;
-        }
-        const nextState = nav.register({
-            id: normalizedNavId(),
-            orientation: inputs.orientation(),
-            type: inputs.type(),
-            position: inputs.position(),
-            collapsed: collapsedPreference(),
-            dockbarMode: inputs.dockbarMode(),
-        }, owner);
-        if (previousRegisteredId && previousRegisteredId !== nextState.id) {
-            nav.unregister(previousRegisteredId, owner);
-        }
-        previousRegisteredId = nextState.id;
-        registeredState.set(nextState);
-    });
-    destroyRef.onDestroy(() => {
-        if (previousRegisteredId) {
-            nav.unregister(previousRegisteredId, owner);
-        }
-    });
-    return {
-        normalizedNavId,
-        normalizedItems,
-        resolvedState,
-        activeIdSet,
-        toggleCollapsed: () => nav.toggleCollapsed(normalizedNavId()),
-    };
-}
-function normalizeId(value) {
-    return value.trim() || 'default';
-}
-function fallbackType(orientation, type) {
-    if (orientation === 'vertical' && (type === 'sidebar' || type === 'dockbar')) {
-        return type;
-    }
-    if (orientation === 'horizontal' && (type === 'navbar' || type === 'flyout')) {
-        return type;
-    }
-    return orientation === 'horizontal' ? 'navbar' : 'sidebar';
-}
-
-const NAVIGATION_SHELL = new InjectionToken('NAVIGATION_SHELL');
-
-/**
- * Container navigasi deklaratif. Type ditentukan oleh komponen anak:
- *
- * ```html
- * <Navigation id="main" [data]="items">
- *   <NavigationSidebar>
- *     <NavigationHeader>…</NavigationHeader>
- *     <NavigationContent />
- *     <NavigationFooter>…</NavigationFooter>
- *   </NavigationSidebar>
- * </Navigation>
- * ```
- *
- * Header dan footer opsional; `NavigationContent` selalu dirender oleh
- * type (default otomatis bila tidak diproyeksikan).
- */
-class NavigationContainerComponent {
-    navId = input('default', { ...(ngDevMode ? { debugName: "navId" } : /* istanbul ignore next */ {}), alias: 'id' });
-    data = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Primary navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    compact = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
-    collapseTree = input('stairs', { ...(ngDevMode ? { debugName: "collapseTree" } : /* istanbul ignore next */ {}), alias: 'collapse-tree' });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    itemClass = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
-    /** Kelas Tailwind untuk container `<li>` group horizontal (flyout tab / navbar group). */
-    groupClass = input('', { ...(ngDevMode ? { debugName: "groupClass" } : /* istanbul ignore next */ {}), alias: 'nav-group-class' });
-    activeIds = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
-    activeUrl = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
-    openedIds = model([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
-    itemSelected = output();
-    nav = inject(NavigationService);
-    destroyRef = inject(DestroyRef);
-    hoverPreviewExpanded = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hoverPreviewExpanded" }] : /* istanbul ignore next */ []));
-    /** Konfigurasi type aktif yang didaftarkan wrapper anak (sidebar/dockbar/navbar/flyout). */
-    typeConfig = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "typeConfig" }] : /* istanbul ignore next */ []));
-    orientationPreference = computed(() => this.typeConfig()?.orientation ?? 'vertical', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientationPreference" }] : /* istanbul ignore next */ []));
-    typePreference = computed(() => this.typeConfig()?.type ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "typePreference" }] : /* istanbul ignore next */ []));
-    positionPreference = computed(() => this.typeConfig()?.position?.() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "positionPreference" }] : /* istanbul ignore next */ []));
-    collapsedPreference = computed(() => this.typeConfig()?.collapsed?.() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []));
-    dockbarModePreference = computed(() => this.typeConfig()?.dockbarMode?.() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dockbarModePreference" }] : /* istanbul ignore next */ []));
-    sidebarCollapse = computed(() => this.typeConfig()?.sidebarCollapse?.() ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sidebarCollapse" }] : /* istanbul ignore next */ []));
-    previewExpanded = computed(() => this.typeConfig()?.previewExpanded?.() ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
-    typeStyle = computed(() => this.typeConfig()?.typeStyle?.() ?? 'flat', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
-    flyoutLabel = computed(() => this.typeConfig()?.flyoutLabel?.() ?? 'Menu', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flyoutLabel" }] : /* istanbul ignore next */ []));
-    flyoutIcon = computed(() => this.typeConfig()?.flyoutIcon?.() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flyoutIcon" }] : /* istanbul ignore next */ []));
-    flyoutIconOnly = computed(() => this.typeConfig()?.flyoutIconOnly?.() ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flyoutIconOnly" }] : /* istanbul ignore next */ []));
-    flyoutIconPosition = computed(() => this.typeConfig()?.flyoutIconPosition?.() ?? 'start', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flyoutIconPosition" }] : /* istanbul ignore next */ []));
-    flyoutTriggerVariant = computed(() => this.typeConfig()?.flyoutTriggerVariant?.() ?? 'button', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flyoutTriggerVariant" }] : /* istanbul ignore next */ []));
-    flyoutTriggerFloating = computed(() => this.typeConfig()?.flyoutTriggerFloating?.() ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flyoutTriggerFloating" }] : /* istanbul ignore next */ []));
-    flyoutTriggerClass = computed(() => this.typeConfig()?.flyoutTriggerClass?.() ?? '', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flyoutTriggerClass" }] : /* istanbul ignore next */ []));
-    controller = injectNavigationController({
-        navId: this.navId,
-        data: this.data,
-        orientation: this.orientationPreference,
-        type: this.typePreference,
-        position: this.positionPreference,
-        collapsed: this.collapsedPreference,
-        dockbarMode: this.dockbarModePreference,
-        compact: this.compact,
-        activeIds: this.activeIds,
-        enabled: computed(() => this.typeConfig() !== null),
-    });
-    iconTemplate = contentChild(NavigationIconDirective, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
-    normalizedItems = this.controller.normalizedItems;
-    resolvedState = this.controller.resolvedState;
-    activeIdSet = this.controller.activeIdSet;
-    previewRailExpanded = computed(() => {
-        const state = this.resolvedState();
-        if (state.orientation !== 'vertical' || state.type !== 'sidebar' || !state.collapsed) {
-            return false;
-        }
-        return this.previewExpanded() || (this.sidebarCollapse() && this.hoverPreviewExpanded());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewRailExpanded" }] : /* istanbul ignore next */ []));
-    previewRailOffset = computed(() => (this.previewRailExpanded() ? '15rem' : '0px'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewRailOffset" }] : /* istanbul ignore next */ []));
-    displayState = computed(() => {
-        const state = this.resolvedState();
-        if (state.type === 'dockbar') {
-            return { ...state, collapsed: true };
-        }
-        return this.previewRailExpanded() ? { ...state, collapsed: false } : state;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayState" }] : /* istanbul ignore next */ []));
-    dockbarAsideOpen = computed(() => {
-        const state = this.resolvedState();
-        if (state.type !== 'dockbar' || state.dockbarMode !== 'sticky') {
-            return false;
-        }
-        return (this.nav.resolveDockbarGroup(state.id, this.normalizedItems(), state.dockbarMode, this.activeIdSet(), this.activeUrl()) !== null);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dockbarAsideOpen" }] : /* istanbul ignore next */ []));
-    collapseEnabled = computed(() => {
-        const state = this.resolvedState();
-        return this.sidebarCollapse() && state.orientation === 'vertical' && state.type === 'sidebar';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
-    /** Kelas shell yang dipakai host komponen type (eks `div` shell internal). */
-    shellClasses = computed(() => cn('flex h-full min-h-0 transition-[width,box-shadow,transform] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none', this.resolvedState().orientation === 'horizontal'
-        ? 'flex-row items-stretch overflow-visible'
-        : this.resolvedState().type === 'dockbar'
-            ? 'flex-col overflow-visible'
-            : 'flex-col overflow-hidden', this.resolvedState().type === 'dockbar' && [
-        'w-16 shrink-0',
-        this.resolvedState().position === 'right' && 'ml-auto',
-    ], this.resolvedState().position === 'right' ? 'origin-right' : 'origin-left', this.previewRailExpanded() && [
-        'absolute inset-y-0 z-20 w-76 overflow-hidden bg-background shadow-xl',
-        this.resolvedState().position === 'right'
-            ? 'right-0 border-l border-[hsl(var(--border)/var(--opacity-70))]'
-            : 'left-0 border-r border-[hsl(var(--border)/var(--opacity-70))]',
-    ]), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
-    state = this.resolvedState;
-    hostClasses = computed(() => cn('relative block min-h-0 text-foreground transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none', this.resolvedState().orientation === 'horizontal'
-        ? 'h-full w-full'
-        : this.resolvedState().type === 'dockbar'
-            ? this.dockbarAsideOpen()
-                ? 'w-76'
-                : 'w-16'
-            : this.resolvedState().collapsed
-                ? 'w-16'
-                : 'w-76', this.resolvedState().orientation === 'horizontal' ||
-        this.resolvedState().type === 'dockbar' ||
-        this.previewRailExpanded()
-        ? 'overflow-visible'
-        : 'overflow-hidden', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Publikasikan data ke registry by id agar surface lain (mis. apps-launcher di `Page`)
-        // bisa membaca nav by id tanpa mendaftarkan ulang `<Navigation>` dengan id yang sama.
-        effect(() => this.nav.publishData(this.navId(), this.data()));
-        this.destroyRef.onDestroy(() => this.nav.clearData(this.navId()));
-    }
-    /**
-     * Dipanggil komponen type saat dibuat. Satu `<Navigation>` hanya boleh
-     * memuat satu type hidup — pendaftaran ganda dianggap salah konfigurasi.
-     */
-    registerType(config) {
-        if (this.typeConfig() !== null && isDevMode()) {
-            throw new Error('[Navigation] Hanya satu type (<NavigationSidebar>/<NavigationDockbar>/<NavigationNavbar>/<NavigationFlyout>) yang boleh hidup dalam satu <Navigation>.');
-        }
-        this.typeConfig.set(config);
-    }
-    unregisterType(config) {
-        if (this.typeConfig() === config) {
-            this.typeConfig.set(null);
-        }
-    }
-    toggleCollapsed() {
-        this.controller.toggleCollapsed();
-    }
-    setHoverPreview(value) {
-        this.hoverPreviewExpanded.set(this.sidebarCollapse() ? value : false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.3", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapse-tree", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "nav-group-class", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIds: "openedIdsChange", itemSelected: "itemSelected" }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "setHoverPreview(true)", "mouseleave": "setHoverPreview(false)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "attr.data-orientation": "resolvedState().orientation", "attr.data-type": "resolvedState().type", "attr.data-type-style": "typeStyle()", "attr.data-position": "resolvedState().position", "attr.data-collapse-tree": "collapseTree()", "attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null" } }, providers: [
-            { provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) },
-        ], queries: [{ propertyName: "iconTemplate", first: true, predicate: NavigationIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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 /> `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-tree", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-group-class", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }, { type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationIconDirective), { isSignal: true }] }] } });
-
-class NavigationItemContentComponent {
-    nav = inject(NavigationService);
-    item = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
-    active = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    compact = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    level = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
-    collapseTree = input('stairs', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
-    iconTemplate = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
-    iconSlotClasses = computed(() => cn('relative z-10 inline-flex shrink-0 items-center justify-center transition-[border-color,background-color,color,box-shadow] duration-200', this.orientation() === 'vertical'
-        ? this.compact()
-            ? 'h-8 w-8 rounded-full border'
-            : 'h-7 w-7 rounded-full border'
-        : 'h-5 w-5 rounded-full border border-transparent', this.usesStraightVerticalSurface() && 'overflow-hidden bg-background/85 backdrop-blur-sm border-transparent', this.active() && !this.usesStraightVerticalSurface() ? 'border-primary text-current' : 'border-transparent', this.active() && this.usesStraightVerticalSurface() && 'text-current', this.compact() && 'mx-auto'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconSlotClasses" }] : /* istanbul ignore next */ []));
-    titleClasses = computed(() => cn('block truncate', this.active() && 'font-semibold text-foreground', this.item().classes?.title), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    showSubtitle = computed(() => !!this.item().subtitle && !(this.orientation() === 'horizontal' && this.level() === 0), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showSubtitle" }] : /* istanbul ignore next */ []));
-    subtitleClasses = computed(() => cn('block truncate text-xs font-normal text-muted-foreground', this.item().classes?.subtitle), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : /* istanbul ignore next */ []));
-    compactFallbackClasses = computed(() => cn('inline-flex h-5 min-w-5 items-center justify-center text-xs font-semibold uppercase'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []));
-    defaultBadgeClasses = computed(() => cn('nav-badge ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "defaultBadgeClasses" }] : /* istanbul ignore next */ []));
-    defaultIconSize = computed(() => (this.usesStraightVerticalSurface() ? 18 : 16), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "defaultIconSize" }] : /* istanbul ignore next */ []));
-    defaultIconClasses = computed(() => cn('text-current', this.item().classes?.icon), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "defaultIconClasses" }] : /* istanbul ignore next */ []));
-    iconContext = computed(() => this.nav.iconContext(this.item(), this.active(), this.level(), this.orientation()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconContext" }] : /* istanbul ignore next */ []));
-    compactFallback() {
-        return this.nav.compactFallback(this.item());
-    }
-    usesStraightVerticalSurface() {
-        return this.orientation() === 'vertical' && !this.compact() && this.collapseTree() === 'straight';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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.3", 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 nav-text group/nav inline-flex min-w-0 items-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().disabled && 'pointer-events-none opacity-50', this.item().classes?.wrapper, this.itemClass());
-    }
-    triggerClasses(active) {
-        return cn('nav-trigger nav-text group/nav inline-flex min-w-0 items-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
-    }
-    interactiveStateClasses(active) {
-        const showsNestedActiveConnector = active &&
-            this.orientation() === 'vertical' &&
-            !this.compact() &&
-            this.level() > 1 &&
-            this.collapseTree() === 'stairs';
-        if (this.orientation() === 'vertical' && !this.compact()) {
-            return cn('relative isolate', "before:pointer-events-none before:absolute before:inset-y-0 before:left-2 before:right-2 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-transparent before:transition-colors before:duration-200 before:content-['']", showsNestedActiveConnector &&
-                "after:pointer-events-none after:absolute after:-left-2 after:top-1/2 after:-z-10 after:h-px after:w-5 after:-translate-y-1/2 after:rounded-full after:bg-current/25 after:content-['']", active
-                ? 'font-semibold text-foreground hover:before:border-primary'
-                : 'text-foreground/80 hover:text-accent-foreground hover:before:border-primary hover:before:bg-accent');
-        }
-        return active ? 'font-semibold text-foreground' : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground';
-    }
-    chevronClasses() {
-        return cn('ml-auto shrink-0 self-center transition-transform duration-200', this.isOpen() && 'rotate-90');
-    }
-    itemContainerClasses() {
-        return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'relative' : 'w-full', this.compact() && 'flex justify-center', this.straightRailClasses());
-    }
-    groupContainerClasses() {
-        return cn('w-full', this.level() > 0 && 'pt-2');
-    }
-    dividerClasses() {
-        return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'mx-1 h-5 w-px' : 'my-2 w-full px-2');
-    }
-    groupHeadingClasses() {
-        return cn('nav-heading px-3 py-2 text-muted-foreground', this.item().classes?.title);
-    }
-    childListClasses() {
-        const isGroupedBranch = this.item().type === 'group' || this.item().type === 'mega';
-        const usesStairsTree = this.collapseTree() === 'stairs';
-        return cn('flex list-none flex-col gap-0.5 p-0', !this.compact() && 'mt-0.5', this.level() >= 0 &&
-            !this.compact() &&
-            !isGroupedBranch &&
-            usesStairsTree &&
-            cn("relative ml-[1.625rem] pl-2 before:absolute before:-top-2 before:bottom-0 before:left-0 before:w-px before:-translate-x-1/2 before:rounded-full before:content-['']", this.isActive() ? 'before:bg-current/25' : 'before:bg-border'));
-    }
-    showStraightRailForChildren() {
-        return (!this.compact() &&
-            this.collapseTree() === 'straight' &&
-            this.item().type !== 'group' &&
-            this.item().type !== 'mega');
-    }
-    straightRailClasses() {
-        if (!this.straightRail() || this.orientation() !== 'vertical' || this.compact()) {
-            return '';
-        }
-        return cn('relative', "before:pointer-events-none before:absolute before:left-[1.625rem] before:w-0 before:-z-10 before:border-l before:border-dotted before:content-['']", this.straightRailActive() ? 'before:border-primary/50' : 'before:border-border/50', this.firstInBranch() ? 'before:-top-9' : 'before:-top-0.5', this.lastInBranch() ? 'before:bottom-[calc(100%-1.25rem)]' : 'before:-bottom-0.5');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: NavigationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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.3", 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', 
-    // Border only on the CONTENT-facing edge. The dockbar rail already draws the
-    // rail-facing separator, so a rail-facing border here would double up
-    // (right of the mini-dock + left of the aside).
-    this.position() === 'right'
-        ? 'right-16 border-l border-[hsl(var(--border)/var(--opacity-70))]'
-        : 'left-16 border-r border-[hsl(var(--border)/var(--opacity-70))]', this.isDrawerMode() && 'z-50 shadow-xl'), /* @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('nav-text group/nav inline-flex h-10 w-10 items-center justify-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.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.3", ngImport: i0, type: NavigationDockbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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.3", 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('flat', /* @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 nav-text flex w-full items-center gap-3 px-3 py-2.5 text-left 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 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.3", ngImport: i0, type: NavigationEntryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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 ??
-            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 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.3", 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 ??
-            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 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 */ []));
-    /** Bentuk visual tombol trigger: `button` (pil) | `link` | `plain` (ghost). */
-    variant = input('button', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Trigger mengambang (`fixed`) — host menjadi popover lepas, panel menempel ke trigger. */
-    floating = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
-    /** Kelas Tailwind untuk host trigger (posisi pojok floating / styling wrapper in-flow). */
-    triggerClass = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* 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('flat', /* @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 */ []));
-    /**
-     * Floating: sisi popover relatif trigger — `true` = rata kanan (buka ke kiri, untuk trigger di
-     * pojok kanan), `false` = rata kiri (buka ke kanan). Diukur dari posisi trigger saat dibuka.
-     */
-    floatingAlignEnd = signal(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "floatingAlignEnd" }] : /* 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(() => {
-        if (this.floating()) {
-            // Floating: popover menempel ke trigger — atas/bawah ikut nav-position; sisi kiri/kanan
-            // ikut posisi trigger (floatingAlignEnd) agar tidak keluar layar saat trigger di pojok kiri.
-            return cn('absolute z-50 w-[min(22rem,85vw)] max-w-[85vw]', this.floatingAlignEnd() ? 'right-0' : 'left-0', this.isBottom() ? 'bottom-full mb-2' : 'top-full mt-2');
-        }
-        // Default: panel menutupi (overlay) container bar persis — posisi & lebar ikut container.
-        return 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, bar di bawah (dekat bar trigger).
-     * `min-h-0 flex-1` membuat menu mengisi penuh panel card (yang di-clip) sehingga ROW 2
-     * bisa jadi satu-satunya area scroll.
-     */
-    menuClasses = computed(() => cn('flex min-h-0 flex-1', this.isBottom() ? 'flex-col-reverse' : 'flex-col'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menuClasses" }] : /* istanbul ignore next */ []));
-    /**
-     * ROW 1 = bar flyout: satu baris horizontal seperti bar navbar —
-     * Header (kiri) · menu item (tengah, flex-1) · Footer (kanan). `shrink-0` membuatnya DIAM
-     * (tidak ikut scroll) — hanya ROW 2 (grid child) yang punya area scroll sendiri.
-     * Border memisahkan bar dari ROW 2 di sisi yang menjauh dari bar (bawah di mode top).
-     */
-    barRowClasses = computed(() => cn('flex shrink-0 items-center gap-2 bg-popover px-2 md:px-3', 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')), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "barRowClasses" }] : /* istanbul ignore next */ []));
-    /**
-     * ROW 2 = HANYA area ini yang scroll: children dari nav item aktif. `min-h-0 flex-1`
-     * membatasi tingginya ke sisa ruang panel lalu `overflow-y-auto` men-scroll isinya —
-     * bar ROW 1 & kontainer panel sendiri tetap diam.
-     */
-    scrollRegionClasses = computed(() => cn('min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scrollRegionClasses" }] : /* istanbul ignore next */ []));
-    isOpen() {
-        return this.nav.isDrawerOpen(this.navId());
-    }
-    onWindowResize() {
-        if (this.isOpen()) {
-            this.measurePanelPlacement();
-        }
-    }
-    measurePanelPlacement() {
-        // Floating: panel anchored ke trigger via CSS, bukan overlay container. Pilih sisi popover
-        // (kanan→buka kiri / kiri→buka kanan) dari posisi trigger agar tidak keluar layar.
-        if (this.floating()) {
-            const triggerEl = this.host.nativeElement.querySelector('[data-navigation-flyout-trigger="true"]');
-            const rect = triggerEl?.getBoundingClientRect();
-            if (rect && typeof window !== 'undefined' && window.innerWidth > 0) {
-                this.floatingAlignEnd.set(rect.left + rect.width / 2 > window.innerWidth / 2);
-            }
-            this.panelPlacement.set(null);
-            return;
-        }
-        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);
-    }
-    /**
-     * Host trigger+panel. Default `relative block w-full` (mengalir di dalam bar/div). Saat
-     * `floating`, jadi `fixed` (mengambang) — default pojok kanan-atas, override via `triggerClass`.
-     */
-    hostClasses = computed(() => this.floating()
-        ? cn('fixed z-50 block w-max', this.triggerClass() || 'right-6 top-6')
-        : cn('relative block w-full', this.triggerClass()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    /** Bentuk visual trigger: `button` (pil), `link` (tautan), atau `plain` (ghost); + ikon/teks. */
-    triggerClasses() {
-        const iconOnly = this.showIconOnly();
-        const base = 'nav-trigger group/nav inline-flex min-w-0 items-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
-        if (this.variant() === 'link') {
-            return cn(base, 'nav-text underline-offset-4 hover:underline', 
-            // Icon-only tetap punya target ≥ 36px (WCAG 2.5.8) walau tanpa chrome tautan.
-            iconOnly ? 'h-9 w-9 justify-center gap-0' : 'gap-1.5', this.isOpen() ? 'text-primary underline' : 'text-primary/90 hover:text-primary', this.itemClass());
-        }
-        if (this.variant() === 'plain') {
-            return cn(base, 'gap-2 rounded-md nav-text', iconOnly ? 'h-9 w-9 justify-center' : 'h-9 px-3 py-2', this.isOpen()
-                ? 'bg-accent text-accent-foreground'
-                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass());
-        }
-        // button (pil, default)
-        return cn(base, 'h-10 gap-2 rounded-full border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-4 py-2 nav-text shadow-sm', iconOnly && '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() {
-        if (this.floating()) {
-            // Floating: kartu popover mandiri (rounded penuh + border + shadow), tinggi dibatasi & di-clip;
-            // hanya ROW 2 (children) yang scroll.
-            return cn('relative flex flex-col rounded-xl border border-[hsl(var(--border)/var(--opacity-70))] bg-popover text-popover-foreground shadow-2xl', 'max-h-[min(28rem,70vh)] overflow-hidden');
-        }
-        // 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 flex flex-col bg-popover text-popover-foreground shadow-2xl', 
-        // Batasi tinggi panel ke viewport lalu CLIP — bukan scroll. Hanya ROW 2 (children, lihat
-        // scrollRegionClasses) yang scroll; bar ROW 1 & kontainer panel sendiri tetap diam.
-        'max-h-[calc(100dvh-5rem)] overflow-hidden', this.isBorderRail()
-            ? cn('rounded-none border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
-            : 'rounded-[var(--layout-frame-radius)] border border-[hsl(var(--border)/var(--opacity-70))]');
-    }
-    rowClasses() {
-        // Menu item = bagian tengah ROW 1: isi ruang antara Footer & Header (flex-1) lalu
-        // di-center seperti menubar navbar. Saat jumlah/lebar item melebihi band, band ini
-        // scroll horizontal (overflow-x-auto) agar tidak ada item ter-clip & takterjangkau
-        // (panel card meng-clip overflow-x). Tinggi & border bar ditangani barRowClasses().
-        return cn('m-0 flex min-w-0 flex-1 list-none items-center justify-center gap-1 overflow-x-auto overscroll-x-contain py-2');
-    }
-    /**
-     * 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 nav-text group/nav inline-flex h-full min-h-9 min-w-0 items-center gap-2 rounded-md px-3 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"]');
-        if (!panel) {
-            return;
-        }
-        // Fokus awal ke menu item ROW 1 (lalu grid ROW 2) — BUKAN kontrol Header/Footer yang
-        // juga ada di bar (mis. tombol logout). querySelector mengembalikan match pertama dalam
-        // urutan DOM, dan Header/Footer bisa mendahului menu, jadi lingkup ke baris menu dulu.
-        const target = panel.querySelector('[data-navigation-flyout-row="true"] [role="menuitem"], [data-navigation-flyout-row="true"] a[href]') ?? panel.querySelector('[role="menuitem"], a[href]');
-        target?.focus();
-    }
-    focusTrigger() {
-        this.host.nativeElement
-            .querySelector('[data-navigation-flyout-trigger="true"]')
-            ?.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFlyoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", 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()" }, properties: { "class": "hostClasses()" } }, 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]="floating() ? null : panelPlacement()?.left"
-        [style.top.px]="floating() || isBottom() ? null : panelPlacement()?.top"
-        [style.bottom.px]="!floating() && isBottom() ? panelPlacement()?.bottom : null"
-        [style.width.px]="floating() ? null : panelPlacement()?.width"
-      >
-        <div [class]="panelCardClasses()">
-          <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
-            <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:
-                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)
-                 di bawah bar yang ikut scroll. -->
-            <div data-navigation-flyout-bar="true" [class]="barRowClasses()">
-              <ng-content select="NavigationHeader" />
-
-              <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>
-
-              <ng-content select="NavigationFooter" />
-            </div>
-
-            <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->
-            <div data-navigation-flyout-scroll="true" [class]="scrollRegionClasses()">
-              @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>
-      </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.3", ngImport: i0, type: NavigationFlyoutMenuComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationFlyoutMenu',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        IconComponent,
-                        NavigationEntryGridComponent,
-                        NavigationItemComponent,
-                        NavigationItemContentComponent,
-                    ],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        '(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]="floating() ? null : panelPlacement()?.left"
-        [style.top.px]="floating() || isBottom() ? null : panelPlacement()?.top"
-        [style.bottom.px]="!floating() && isBottom() ? panelPlacement()?.bottom : null"
-        [style.width.px]="floating() ? null : panelPlacement()?.width"
-      >
-        <div [class]="panelCardClasses()">
-          <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
-            <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:
-                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)
-                 di bawah bar yang ikut scroll. -->
-            <div data-navigation-flyout-bar="true" [class]="barRowClasses()">
-              <ng-content select="NavigationHeader" />
-
-              <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>
-
-              <ng-content select="NavigationFooter" />
-            </div>
-
-            <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->
-            <div data-navigation-flyout-scroll="true" [class]="scrollRegionClasses()">
-              @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>
-      </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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", 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('flat', /* @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 h-full min-w-0 items-center justify-center gap-1 list-none p-0'), /* @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 nav-text group/nav inline-flex min-w-0 items-center gap-3 rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', '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: sisi kiri/kanan panel dibiarkan ditangani rail vertikal dari
-        // layout; panel hanya menggambar border atas & bawah 1.5px senada rail.
-        // Panel dibiarkan pada tepi bawah bar (`top-full`) tanpa offset, sehingga border
-        // atasnya sejajar dengan border-bottom bar (mis. yang dipasang consumer).
-        return cn('absolute z-50 bg-popover text-popover-foreground shadow-lg', 
-        // Batasi tinggi ke viewport (dikurangi area bar) lalu scroll vertikal supaya
-        // menu dengan item banyak tetap bisa diakses tanpa keluar layar.
-        'max-h-[calc(100dvh-5rem)] overflow-x-hidden overflow-y-auto overscroll-contain', this.isBottom() ? 'bottom-full' : 'top-full', !this.panelPlacement() && 'inset-x-0', this.isBorderRail()
-            ? 'rounded-none border-y-[1.5px] border-border'
-            : 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.3", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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 h-full 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.3", ngImport: i0, type: NavigationHorizontalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationHorizontal',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        NgTemplateOutlet,
-                        IconComponent,
-                        NavigationEntryGridComponent,
-                        NavigationItemComponent,
-                        NavigationItemContentComponent,
-                    ],
-                    host: {
-                        class: 'relative block h-full 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 py-2', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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()"
-        [variant]="container.flyoutTriggerVariant()"
-        [floating]="container.flyoutTriggerFloating()"
-        [triggerClass]="container.flyoutTriggerClass()"
-        [position]="navState.position"
-        [typeStyle]="container.typeStyle()"
-        [compact]="container.compact()"
-        [itemClass]="container.itemClass()"
-        [groupClass]="container.groupClass()"
-        [activeIds]="container.activeIdSet()"
-        [activeUrl]="container.activeUrl()"
-        [iconTemplate]="container.iconTemplate()"
-        [collapseTree]="container.collapseTree()"
-        [openedIds]="container.openedIds()"
-        (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)"
-      >
-        <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
-        <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
-      </NavigationFlyoutMenu>
-    } @else if (navState.orientation === 'horizontal') {
-      <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", "variant", "floating", "triggerClass", "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.3", 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()"
-        [variant]="container.flyoutTriggerVariant()"
-        [floating]="container.flyoutTriggerFloating()"
-        [triggerClass]="container.flyoutTriggerClass()"
-        [position]="navState.position"
-        [typeStyle]="container.typeStyle()"
-        [compact]="container.compact()"
-        [itemClass]="container.itemClass()"
-        [groupClass]="container.groupClass()"
-        [activeIds]="container.activeIdSet()"
-        [activeUrl]="container.activeUrl()"
-        [iconTemplate]="container.iconTemplate()"
-        [collapseTree]="container.collapseTree()"
-        [openedIds]="container.openedIds()"
-        (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)"
-      >
-        <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
-        <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
-      </NavigationFlyoutMenu>
-    } @else if (navState.orientation === 'horizontal') {
-      <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.3", ngImport: i0, type: NavigationFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: NavigationFooterComponent, isStandalone: true, selector: "NavigationFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
-    <div class="flex h-full min-w-0 items-center gap-3">
-      <ng-content />
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'hostClasses()',
-                    },
-                    template: `
-    <div class="flex h-full min-w-0 items-center gap-3">
-      <ng-content />
-    </div>
-  `,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class NavigationHeaderComponent {
-    shell = inject(NAVIGATION_SHELL);
-    toggle = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    collapsed = computed(() => this.shell.state().collapsed, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    displayCollapsed = computed(() => this.shell.displayState().collapsed, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
-    isHorizontal = computed(() => this.shell.displayState().orientation === 'horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
-    showToggle = computed(() => {
-        if (this.isHorizontal()) {
-            return false;
-        }
-        return this.toggle() || (this.shell.collapseEnabled() && !this.displayCollapsed());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
-    toggleAriaLabel = computed(() => this.collapsed() ? 'Expand navigation' : 'Collapse navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
-    toggleIconName = computed(() => this.collapsed() ? 'left_panel_open' : 'left_panel_close', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []));
-    /**
-     * Baris isi header. Saat collapsed/dockbar (vertical) isi (inisial/ikon) dipusatkan di tengah
-     * rail agar simetris dengan ikon nav-item di bawahnya (yang juga center di rail); selain itu kiri
-     * dengan padding `px-3`.
-     */
-    rowClasses = computed(() => cn('flex h-full items-center', !this.isHorizontal() && this.displayCollapsed() ? 'justify-center' : 'gap-3 px-3'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []));
-    contentClasses = computed(() => {
-        if (this.isHorizontal()) {
-            return 'flex min-w-0 items-center gap-3';
-        }
-        // Collapsed/dockbar: inisial center (tanpa `flex-1` yang membuatnya rata kiri).
-        return this.displayCollapsed()
-            ? 'flex min-w-0 items-center justify-center'
-            : 'flex min-w-0 flex-1 items-center gap-3';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(this.isHorizontal()
-        ? 'relative z-10 block h-full w-auto shrink-0'
-        : 'sticky top-0 z-10 block h-12 shrink-0 border-b border-[hsl(var(--border)/var(--opacity-70))]', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    toggleCollapsed() {
-        this.shell.toggleCollapsed();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: NavigationHeaderComponent, isStandalone: true, selector: "NavigationHeader", inputs: { toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "displayCollapsed()" } }, ngImport: i0, template: `
-    <div [class]="rowClasses()">
-      <div [class]="contentClasses()">
-        <ng-content />
-      </div>
-
-      @if (showToggle()) {
-        <button
-          type="button"
-          class="inline-flex h-8 w-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          [attr.aria-label]="toggleAriaLabel()"
-          [attr.title]="toggleAriaLabel()"
-          data-navigation-header-toggle="true"
-          (click)="toggleCollapsed()"
-        >
-          <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
-        </button>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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]="rowClasses()">
-      <div [class]="contentClasses()">
-        <ng-content />
-      </div>
-
-      @if (showToggle()) {
-        <button
-          type="button"
-          class="inline-flex h-8 w-8 shrink-0 items-center justify-center bg-transparent text-foreground/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          [attr.aria-label]="toggleAriaLabel()"
-          [attr.title]="toggleAriaLabel()"
-          data-navigation-header-toggle="true"
-          (click)="toggleCollapsed()"
-        >
-          <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
-        </button>
-      }
-    </div>
-  `,
-                }]
-        }], propDecorators: { toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Type sidebar vertikal untuk `<Navigation>`. Slot `NavigationHeader` dan
- * `NavigationFooter` opsional; `NavigationContent` selalu dirender (default
- * otomatis bila tidak diproyeksikan).
- */
-class NavigationSidebarComponent {
-    container = inject(NavigationContainerComponent);
-    destroyRef = inject(DestroyRef);
-    position = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    collapsed = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    collapse = input(false, { ...(ngDevMode ? { debugName: "collapse" } : /* istanbul ignore next */ {}), alias: 'nav-sidebar-collapse', transform: booleanAttribute });
-    previewExpanded = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
-    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
-    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    constructor() {
-        const config = {
-            orientation: 'vertical',
-            type: 'sidebar',
-            position: this.position,
-            collapsed: this.collapsed,
-            sidebarCollapse: this.collapse,
-            previewExpanded: this.previewExpanded,
-        };
-        this.container.registerType(config);
-        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: NavigationDockbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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.3", 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('flat', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-appearance' });
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
-    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
-    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    constructor() {
-        const config = {
-            orientation: 'horizontal',
-            type: 'navbar',
-            position: this.position,
-            typeStyle: this.typeStyle,
-        };
-        this.container.registerType(config);
-        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: NavigationNavbarComponent, isStandalone: true, selector: "NavigationNavbar", inputs: { position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-appearance", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (headerSlot()) {
-      <ng-content select="NavigationHeader" />
-    }
-
-    @if (contentSlot()) {
-      <ng-content select="NavigationContent" />
-    } @else {
-      <NavigationContent />
-    }
-
-    @if (footerSlot()) {
-      <ng-content select="NavigationFooter" />
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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-appearance", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
-
-/**
- * Type flyout horizontal (trigger + panel menu) untuk `<Navigation>`.
- * Slot `NavigationHeader` dan `NavigationFooter` opsional; `NavigationContent`
- * selalu dirender (default otomatis bila tidak diproyeksikan).
- */
-class NavigationFlyoutComponent {
-    container = inject(NavigationContainerComponent);
-    destroyRef = inject(DestroyRef);
-    label = input('Menu', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Nama Material Symbols untuk trigger (mis. `apps`, `menu`); `null` = label saja. */
-    icon = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Trigger hanya menampilkan ikon; label tetap dipakai sebagai aria-label/title. */
-    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), alias: 'icon-only', transform: booleanAttribute });
-    /** Penempatan ikon relatif terhadap label: `start` (default) atau `end`. */
-    iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : /* istanbul ignore next */ {}), alias: 'icon-position' });
-    /** Bentuk visual tombol trigger: `button` (pil, default) | `link` | `plain` (ghost). */
-    triggerVariant = input('button', { ...(ngDevMode ? { debugName: "triggerVariant" } : /* istanbul ignore next */ {}), alias: 'trigger-variant' });
-    /**
-     * Trigger mengambang (`fixed`) alih-alih mengalir di dalam bar/div. Default pojok kanan-atas;
-     * pakai `trigger-class` untuk pindah pojok (mis. `bottom-6 right-6 top-auto`).
-     *
-     * Catatan: `position: fixed` ber-anchor ke viewport HANYA bila tak ada ancestor pembentuk
-     * containing block. Di dalam `<Layout>` (frame-nya memakai `backdrop-blur`), trigger ber-anchor
-     * ke kotak konten frame (bukan viewport sebenarnya) dan bisa ter-clip oleh frame `overflow-hidden`.
-     * Untuk floating sebenar-viewport, tempatkan `<Navigation>` flyout di luar frame `<Layout>`.
-     */
-    triggerFloating = input(false, { ...(ngDevMode ? { debugName: "triggerFloating" } : /* istanbul ignore next */ {}), alias: 'trigger-floating',
-        transform: booleanAttribute });
-    /** Kelas Tailwind untuk host trigger (posisi pojok floating / styling wrapper saat in-flow). */
-    triggerClass = input('', { ...(ngDevMode ? { debugName: "triggerClass" } : /* istanbul ignore next */ {}), alias: 'trigger-class' });
-    /** Posisi bar terhadap konten layout: `top` (default) atau `bottom` — panel membuka ke arah sebaliknya. */
-    position = input(null, { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'nav-position' });
-    typeStyle = input('flat', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-appearance' });
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    constructor() {
-        const config = {
-            orientation: 'horizontal',
-            type: 'flyout',
-            position: this.position,
-            flyoutLabel: this.label,
-            flyoutIcon: this.icon,
-            flyoutIconOnly: this.iconOnly,
-            flyoutIconPosition: this.iconPosition,
-            flyoutTriggerVariant: this.triggerVariant,
-            flyoutTriggerFloating: this.triggerFloating,
-            flyoutTriggerClass: this.triggerClass,
-            typeStyle: this.typeStyle,
-        };
-        this.container.registerType(config);
-        this.destroyRef.onDestroy(() => this.container.unregisterType(config));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: NavigationFlyoutComponent, isStandalone: true, selector: "NavigationFlyout", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "icon-only", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "icon-position", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "trigger-variant", isSignal: true, isRequired: false, transformFunction: null }, triggerFloating: { classPropertyName: "triggerFloating", publicName: "trigger-floating", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "trigger-class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-appearance", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
-    <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
-         NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
-         bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
-         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
-    <NavigationContent>
-      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
-      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
-    </NavigationContent>
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFlyoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationFlyout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NavigationContentComponent],
-                    host: {
-                        '[class]': 'hostClasses()',
-                    },
-                    template: `
-    <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
-         NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
-         bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
-         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
-    <NavigationContent>
-      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
-      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
-    </NavigationContent>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-only", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-position", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-variant", required: false }] }], triggerFloating: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-floating", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-appearance", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Tampilan compact aktif saat sidebar collapsible sedang collapsed, atau saat
- * type dockbar aktif — rail dockbar selalu selebar ikon (`w-16`) sehingga
- * konten expanded tidak pernah muat.
- */
-function isCompactDisplay(shell) {
-    const state = shell.displayState();
-    if (state.orientation !== 'vertical') {
-        return false;
-    }
-    if (state.type === 'dockbar') {
-        return true;
-    }
-    return shell.collapseEnabled() && state.collapsed;
-}
-class NavigationCollapseRootDirective {
-    shell = inject(NAVIGATION_SHELL);
-    collapseEnabled = computed(() => {
-        const state = this.shell.displayState();
-        return state.orientation === 'vertical' && (this.shell.collapseEnabled() || state.type === 'dockbar');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
-    displayCollapsed = computed(() => isCompactDisplay(this.shell), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationCollapseRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: NavigationCollapseExpandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: NavigationCollapseExpandedDirective, isStandalone: true, selector: "[NavigationCollapseExpanded]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationCollapseExpandedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[NavigationCollapseExpanded]',
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * Slot aksi di sisi kanan `NavigationFooter`. Selalu didorong ke kanan (`ml-auto`),
- * rata tengah vertikal, dengan jarak antar-child otomatis (`gap`). Isi bebas dengan
- * ikon, button, atau teks — mis. tombol logout.
- *
- * Otomatis disembunyikan saat sidebar vertical sedang collapsed (rail icon-only)
- * agar tidak overflow; konsisten dengan `NavigationFooterTitle`.
- */
-class NavigationFooterActionComponent {
-    shell = inject(NAVIGATION_SHELL, { optional: true });
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    collapsed = computed(() => {
-        const state = this.shell?.displayState();
-        return state ? state.orientation === 'vertical' && state.collapsed : false;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'ml-auto flex shrink-0 items-center gap-1', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFooterActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: NavigationFooterActionComponent, isStandalone: true, selector: "NavigationFooterAction", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFooterActionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationFooterAction',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'hostClasses()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Turunkan inisial ringkas dari sebuah nama untuk avatar fallback.
- *
- *   "Ojie Permana" → "OP"
- *   "Ojiepermana"  → "OJ"
- *   ""             → ""
- *
- * Mengambil huruf depan kata pertama dan kata terakhir; bila hanya satu kata,
- * memakai dua huruf pertamanya.
- */
-function deriveNavigationInitials(name) {
-    const parts = name.trim().split(/\s+/).filter(Boolean);
-    if (parts.length === 0) {
-        return '';
-    }
-    const first = parts[0] ?? '';
-    if (parts.length === 1) {
-        return first.slice(0, 2).toUpperCase();
-    }
-    const last = parts[parts.length - 1] ?? '';
-    return (first.charAt(0) + last.charAt(0)).toUpperCase();
-}
-
-/**
- * Blok avatar/inisial untuk slot `NavigationFooter` (profil user). Sama seperti
- * `NavigationHeaderInitial` tetapi default-nya bulat (rounded-full) sesuai
- * konvensi avatar user. Consumer cukup memberi `name`; inisial diturunkan
- * otomatis. Beri `src` untuk foto, `icon` untuk material symbol, atau `initials`
- * untuk override.
- *
- * Tetap tampil saat sidebar collapsed; pasangannya `NavigationFooterTitle` yang
- * menyembunyikan diri.
- */
-class NavigationFooterInitialComponent {
-    name = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    src = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-    initials = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
-    icon = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    resolvedInitials = computed(() => this.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(this.name()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn('inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 text-primary', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFooterInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: NavigationFooterInitialComponent, isStandalone: true, selector: "NavigationFooterInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
-    @if (src(); as source) {
-      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
-    } @else if (icon(); as glyph) {
-      <Icon [name]="glyph" [size]="18" />
-    } @else {
-      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFooterInitialComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationFooterInitial',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [IconComponent],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        '[attr.role]': "name() ? 'img' : null",
-                        '[attr.aria-label]': 'name() || null',
-                    },
-                    template: `
-    @if (src(); as source) {
-      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
-    } @else if (icon(); as glyph) {
-      <Icon [name]="glyph" [size]="18" />
-    } @else {
-      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
-    }
-  `,
-                }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Judul + subjudul untuk slot `NavigationFooter` (mis. nama + email user).
- * Otomatis disembunyikan saat sidebar vertical sedang collapsed (rail icon-only)
- * dengan membaca `NAVIGATION_SHELL`.
- */
-class NavigationFooterTitleComponent {
-    shell = inject(NAVIGATION_SHELL, { optional: true });
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    subtitle = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    collapsed = computed(() => {
-        const state = this.shell?.displayState();
-        return state ? state.orientation === 'vertical' && state.collapsed : false;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'flex min-w-0 flex-col justify-center', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFooterTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: NavigationFooterTitleComponent, isStandalone: true, selector: "NavigationFooterTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
-    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
-    @if (subtitle(); as sub) {
-      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationFooterTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationFooterTitle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'hostClasses()',
-                        '[attr.data-collapsed]': 'collapsed()',
-                    },
-                    template: `
-    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
-    @if (subtitle(); as sub) {
-      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
-    }
-  `,
-                }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Blok avatar/inisial untuk slot `NavigationHeader` (brand/logo). Consumer cukup
- * memberi `name`; inisial diturunkan otomatis ("Ojie Permana" → "OP"). Beri `src`
- * untuk gambar, `icon` (material symbol) sebagai ganti inisial, atau `initials`
- * untuk override manual.
- *
- * Selalu tampil baik saat sidebar expanded maupun collapsed karena ukurannya muat
- * di rail icon-only — pasangannya, `NavigationHeaderTitle`, yang menyembunyikan
- * diri saat collapsed.
- */
-class NavigationHeaderInitialComponent {
-    name = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    src = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-    initials = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
-    icon = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    resolvedInitials = computed(() => this.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(this.name()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn('inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary/10 text-primary', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationHeaderInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: NavigationHeaderInitialComponent, isStandalone: true, selector: "NavigationHeaderInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
-    @if (src(); as source) {
-      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
-    } @else if (icon(); as glyph) {
-      <Icon [name]="glyph" [size]="18" />
-    } @else {
-      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationHeaderInitialComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationHeaderInitial',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [IconComponent],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        '[attr.role]': "name() ? 'img' : null",
-                        '[attr.aria-label]': 'name() || null',
-                    },
-                    template: `
-    @if (src(); as source) {
-      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
-    } @else if (icon(); as glyph) {
-      <Icon [name]="glyph" [size]="18" />
-    } @else {
-      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
-    }
-  `,
-                }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Judul + subjudul untuk slot `NavigationHeader`. Otomatis disembunyikan saat
- * sidebar vertical sedang collapsed (rail icon-only) dengan membaca
- * `NAVIGATION_SHELL` — consumer tidak perlu mengelola state collapse sendiri.
- */
-class NavigationHeaderTitleComponent {
-    shell = inject(NAVIGATION_SHELL, { optional: true });
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    subtitle = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    collapsed = computed(() => {
-        const state = this.shell?.displayState();
-        return state ? state.orientation === 'vertical' && state.collapsed : false;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'flex min-w-0 flex-col justify-center', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: NavigationHeaderTitleComponent, isStandalone: true, selector: "NavigationHeaderTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
-    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
-    @if (subtitle(); as sub) {
-      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: NavigationHeaderTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationHeaderTitle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'hostClasses()',
-                        '[attr.data-collapsed]': 'collapsed()',
-                    },
-                    template: `
-    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
-    @if (subtitle(); as sub) {
-      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
-    }
-  `,
-                }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NavigationCollapseExpandedDirective, NavigationCollapseRootDirective, NavigationContainerComponent, NavigationContentComponent, NavigationDockbarComponent, NavigationFlyoutComponent, NavigationFooterActionComponent, NavigationFooterComponent, NavigationFooterInitialComponent, NavigationFooterTitleComponent, NavigationHeaderComponent, NavigationHeaderInitialComponent, NavigationHeaderTitleComponent, NavigationIconDirective, NavigationNavbarComponent, NavigationSidebarComponent, deriveNavigationInitials, normalizeUiNavItems };
+export { c as NavigationCollapseExpandedDirective, d as NavigationCollapseRootDirective, e as NavigationContainerComponent, f as NavigationContentComponent, g as NavigationDockbarComponent, h as NavigationFlyoutComponent, i as NavigationFooterActionComponent, j as NavigationFooterComponent, k as NavigationFooterInitialComponent, l as NavigationFooterTitleComponent, m as NavigationHeaderComponent, n as NavigationHeaderInitialComponent, o as NavigationHeaderTitleComponent, p as NavigationIconDirective, q as NavigationNavbarComponent, r as NavigationSidebarComponent, s as deriveNavigationInitials, t as normalizeUiNavItems } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';