@ojiepermana/angular 22.1.14 → 22.2.1

package/fesm2022/ojiepermana-angular-navigation-navigation-dockbar-menu.component-Bc7DWK3R.mjs

@@ -1,522 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Injector, input, output, computed, signal, afterNextRender, Component } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { IconComponent } from '@ojiepermana/angular/component/icon';
-import { TooltipDirective } from '@ojiepermana/angular/component/tooltip';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { N as NavigationItemComponent, a as NavigationItemContentComponent, b as NavigationListComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs';
-import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
-import { NavigationBadgeCountComponent } from './ojiepermana-angular-navigation-navigation-badge-count.component-Be3IqzG4.mjs';
-
-const EMPTY_NAVIGATION_BADGE_CONTEXT = Object.freeze({});
-class NavigationDockbarMenuComponent {
-    nav = inject(NAVIGATION_ADAPTER);
-    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 */ []));
-    railItems = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "railItems" }] : /* istanbul ignore next */ []));
-    badgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "badgeContext" }] : /* 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 */ []));
-    /** Resolved by `<Navigation>` so route-aware and legacy panel state share one source of truth. */
-    resolvedGroup = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedGroup" }] : /* 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 */ []));
-    /** Template footer aside (slot `ng-template[NavigationAsideFooter]` di `<NavigationDockbar>`). */
-    asideFooterTemplate = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "asideFooterTemplate" }] : /* istanbul ignore next */ []));
-    openedIdsChange = output();
-    itemSelected = output();
-    isDrawerMode = computed(() => this.mode() === 'drawer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDrawerMode" }] : /* istanbul ignore next */ []));
-    tooltipPosition = computed(() => this.position() === 'right' ? 'left' : 'right', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
-    renderedRailItems = computed(() => this.railItems() ?? this.items(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "renderedRailItems" }] : /* 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(() => {
-        const resolved = this.resolvedGroup();
-        return resolved !== undefined
-            ? resolved
-            : 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-(--layout-sidebar-collapsed-width)'), /* @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-(--layout-aside-width) 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). Use `border-border` (the same
-    // solid token as the rail and the page) so the nav↔content divider is one
-    // consistent color across rail, aside, and page.
-    this.position() === 'right'
-        ? 'right-(--layout-sidebar-collapsed-width) border-l border-border'
-        : 'left-(--layout-sidebar-collapsed-width) border-r border-border', 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;
-    }
-    /**
-     * Template method calls re-run on every check; resolving the rail once per
-     * dependency change keeps a redraw from replaying an URL match — and a `cn()`
-     * merge — for every entry in it.
-     */
-    entryState = computed(() => {
-        const activeIds = this.activeIds();
-        const activeUrl = this.activeUrl();
-        const openKey = this.openGroup()?.key ?? null;
-        return new Map(this.renderedRailItems().map((entry) => {
-            const active = this.nav.isItemActive(entry, activeIds, activeUrl);
-            const open = openKey === entry.key;
-            return [
-                entry,
-                { active, open, triggerClasses: this.computeTriggerClasses(entry, active, open) },
-            ];
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "entryState" }] : /* istanbul ignore next */ []));
-    isGroupOpen(entry) {
-        return this.entryState().get(entry)?.open ?? false;
-    }
-    isGroupActive(entry) {
-        return this.entryState().get(entry)?.active ?? false;
-    }
-    triggerClasses(entry) {
-        return this.entryState().get(entry)?.triggerClasses ?? '';
-    }
-    computeTriggerClasses(entry, active, open) {
-        return cn('nav-text group/nav inline-flex size-(--nav-rail-item-size) items-center justify-center rounded-md transition-colors', 'relative', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', open || active
-            ? 'bg-accent text-foreground'
-            : 'text-muted-foreground hover:bg-accent/60 hover:text-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();
-        });
-    }
-    badgeFor(entry) {
-        const sourceKey = entry.badge?.source;
-        if (!sourceKey) {
-            return null;
-        }
-        return this.badgeContext()[sourceKey] ?? null;
-    }
-    badgeClassesFor(entry) {
-        return cn('absolute -right-1 -top-1', entry.badge?.classes);
-    }
-    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 navigationRoot = this.host.nativeElement.closest('[data-navigation-id]') ??
-            this.host.nativeElement;
-        const trigger = Array.from(navigationRoot.querySelectorAll('[data-navigation-item-key]')).find((candidate) => candidate.getAttribute('data-navigation-item-key') === key &&
-            (candidate.hasAttribute('data-navigation-dockbar-trigger') ||
-                candidate.hasAttribute('data-navigation-dockbar-route-trigger')));
-        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.1.6", ngImport: i0, type: NavigationDockbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, railItems: { classPropertyName: "railItems", publicName: "railItems", isSignal: true, isRequired: false, transformFunction: null }, badgeContext: { classPropertyName: "badgeContext", publicName: "badgeContext", 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 }, resolvedGroup: { classPropertyName: "resolvedGroup", publicName: "resolvedGroup", 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 }, asideFooterTemplate: { classPropertyName: "asideFooterTemplate", publicName: "asideFooterTemplate", 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 renderedRailItems(); 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]="badgeFor(entry) ? null : (entry.tooltip ?? entry.title ?? null)"
-              [attr.title]="entry.tooltip ?? entry.title ?? null"
-              [Tooltip]="entry.tooltip ?? entry.title ?? ''"
-              [TooltipPosition]="tooltipPosition()"
-              [attr.data-navigation-item-key]="entry.key"
-              [disabled]="entry.disabled || null"
-              (click)="toggleGroup(entry)"
-            >
-              @if (badgeFor(entry)) {
-                <span class="sr-only">{{ entry.tooltip ?? entry.title }}</span>
-              }
-              <NavigationItemContent
-                [item]="entry"
-                [active]="isGroupActive(entry)"
-                [compact]="true"
-                orientation="vertical"
-                [level]="0"
-                [iconTemplate]="iconTemplate()"
-              />
-              @if (badgeFor(entry); as badge) {
-                <NavigationBadgeCount [badge]="badge" [class]="badgeClassesFor(entry)" />
-              }
-            </button>
-          </li>
-        } @else {
-          <li
-            NavigationItem
-            [navId]="navId()"
-            [item]="entry"
-            [level]="0"
-            orientation="vertical"
-            [compact]="true"
-            [itemClass]="itemClass()"
-            [activeIds]="activeIds()"
-            [activeUrl]="activeUrl()"
-            [iconTemplate]="iconTemplate()"
-            [tooltip-position]="tooltipPosition()"
-            [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-(--layout-topbar-height) shrink-0 items-center gap-2 border-b border-[hsl(var(--border)/var(--section-border-opacity))] px-4"
-        >
-          <div class="min-w-0 flex-1">
-            <h2 [id]="asideHeadingId()" class="nav-text truncate text-foreground">
-              {{ group.title }}
-            </h2>
-            @if (group.subtitle) {
-              <p class="nav-subtitle -mt-0.5 truncate text-muted-foreground">
-                {{ group.subtitle }}
-              </p>
-            }
-          </div>
-
-          @if (isDrawerMode()) {
-            <button
-              type="button"
-              class="inline-flex size-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="inherit" class="text-(length:--nav-icon-size-sub)" />
-            </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>
-
-        @if (asideFooterTemplate(); as asideFooter) {
-          <footer
-            class="flex h-(--layout-topbar-height) shrink-0 items-center gap-3 border-t border-[hsl(var(--border)/var(--section-border-opacity))] px-3"
-            data-navigation-dockbar-aside-footer="true"
-          >
-            <ng-container [ngTemplateOutlet]="asideFooter" />
-          </footer>
-        }
-      </aside>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationBadgeCountComponent, selector: "NavigationBadgeCount", inputs: ["badge", "class"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "tooltip-position", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }, { kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[Tooltip]", inputs: ["Tooltip", "TooltipPosition", "TooltipDisabled", "TooltipShowDelay", "TooltipHideDelay"], exportAs: ["Tooltip"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationDockbarMenuComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'NavigationDockbarMenu',
-                    imports: [
-                        IconComponent,
-                        NavigationBadgeCountComponent,
-                        NavigationItemComponent,
-                        NavigationItemContentComponent,
-                        NavigationListComponent,
-                        NgTemplateOutlet,
-                        TooltipDirective,
-                    ],
-                    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 renderedRailItems(); 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]="badgeFor(entry) ? null : (entry.tooltip ?? entry.title ?? null)"
-              [attr.title]="entry.tooltip ?? entry.title ?? null"
-              [Tooltip]="entry.tooltip ?? entry.title ?? ''"
-              [TooltipPosition]="tooltipPosition()"
-              [attr.data-navigation-item-key]="entry.key"
-              [disabled]="entry.disabled || null"
-              (click)="toggleGroup(entry)"
-            >
-              @if (badgeFor(entry)) {
-                <span class="sr-only">{{ entry.tooltip ?? entry.title }}</span>
-              }
-              <NavigationItemContent
-                [item]="entry"
-                [active]="isGroupActive(entry)"
-                [compact]="true"
-                orientation="vertical"
-                [level]="0"
-                [iconTemplate]="iconTemplate()"
-              />
-              @if (badgeFor(entry); as badge) {
-                <NavigationBadgeCount [badge]="badge" [class]="badgeClassesFor(entry)" />
-              }
-            </button>
-          </li>
-        } @else {
-          <li
-            NavigationItem
-            [navId]="navId()"
-            [item]="entry"
-            [level]="0"
-            orientation="vertical"
-            [compact]="true"
-            [itemClass]="itemClass()"
-            [activeIds]="activeIds()"
-            [activeUrl]="activeUrl()"
-            [iconTemplate]="iconTemplate()"
-            [tooltip-position]="tooltipPosition()"
-            [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-(--layout-topbar-height) shrink-0 items-center gap-2 border-b border-[hsl(var(--border)/var(--section-border-opacity))] px-4"
-        >
-          <div class="min-w-0 flex-1">
-            <h2 [id]="asideHeadingId()" class="nav-text truncate text-foreground">
-              {{ group.title }}
-            </h2>
-            @if (group.subtitle) {
-              <p class="nav-subtitle -mt-0.5 truncate text-muted-foreground">
-                {{ group.subtitle }}
-              </p>
-            }
-          </div>
-
-          @if (isDrawerMode()) {
-            <button
-              type="button"
-              class="inline-flex size-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="inherit" class="text-(length:--nav-icon-size-sub)" />
-            </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>
-
-        @if (asideFooterTemplate(); as asideFooter) {
-          <footer
-            class="flex h-(--layout-topbar-height) shrink-0 items-center gap-3 border-t border-[hsl(var(--border)/var(--section-border-opacity))] px-3"
-            data-navigation-dockbar-aside-footer="true"
-          >
-            <ng-container [ngTemplateOutlet]="asideFooter" />
-          </footer>
-        }
-      </aside>
-    }
-  `,
-                }]
-        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], railItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "railItems", required: false }] }], badgeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeContext", 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 }] }], resolvedGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolvedGroup", 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 }] }], asideFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideFooterTemplate", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
-
-export { NavigationDockbarMenuComponent };