@ojiepermana/angular 22.1.10 → 22.1.12

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

@@ -0,0 +1,512 @@
+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 { cn } from '@ojiepermana/angular/component/utils/core';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent, b as NavigationListComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-DNKU6viC.mjs';
+import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
+import { NavigationBadgeCountComponent } from './ojiepermana-angular-navigation-navigation-badge-count.component-CDBxQ8rk.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 */ []));
+    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.4", ngImport: i0, type: NavigationDockbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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"
+              [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()"
+            [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", "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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationDockbarMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationDockbarMenu',
+                    imports: [
+                        IconComponent,
+                        NavigationBadgeCountComponent,
+                        NavigationItemComponent,
+                        NavigationItemContentComponent,
+                        NavigationListComponent,
+                        NgTemplateOutlet,
+                    ],
+                    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"
+              [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()"
+            [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 };