@ojiepermana/angular 22.1.13 → 22.2.0

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

@@ -0,0 +1,811 @@
+import { r as NavigationItemContentComponent, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs";
+import { t as NavigationListComponent } from "./ojiepermana-angular-navigation-navigation-list.component-YUzHI9Pj.mjs";
+import { NavigationBadgeCountComponent } from "./ojiepermana-angular-navigation-navigation-badge-count.component-BKCeWzml.mjs";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, Injector, afterNextRender, computed, inject, input, output, signal } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "@ojiepermana/angular/component/icon";
+import { TooltipDirective } from "@ojiepermana/angular/component/tooltip";
+const EMPTY_NAVIGATION_BADGE_CONTEXT = Object.freeze({});
+var NavigationDockbarMenuComponent = class NavigationDockbarMenuComponent {
+	nav = inject(NAVIGATION_ADAPTER);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	navId = input("default", ...ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	railItems = input(null, ...ngDevMode ? [{ debugName: "railItems" }] : /* istanbul ignore next */ []);
+	badgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT, ...ngDevMode ? [{ debugName: "badgeContext" }] : /* istanbul ignore next */ []);
+	mode = input("sticky", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	position = input("left", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
+	activeIds = input(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
+	activeUrl = input(null, ...ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []);
+	resolvedGroup = input(void 0, ...ngDevMode ? [{ debugName: "resolvedGroup" }] : /* istanbul ignore next */ []);
+	iconTemplate = input(void 0, ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
+	collapseTree = input("stairs", ...ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []);
+	openedIds = input([], ...ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []);
+	asideFooterTemplate = input(null, ...ngDevMode ? [{ debugName: "asideFooterTemplate" }] : /* istanbul ignore next */ []);
+	openedIdsChange = output();
+	itemSelected = output();
+	isDrawerMode = computed(() => this.mode() === "drawer", ...ngDevMode ? [{ debugName: "isDrawerMode" }] : /* istanbul ignore next */ []);
+	tooltipPosition = computed(() => this.position() === "right" ? "left" : "right", ...ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []);
+	renderedRailItems = computed(() => this.railItems() ?? this.items(), ...ngDevMode ? [{ debugName: "renderedRailItems" }] : /* istanbul ignore next */ []);
+	asideId = computed(() => `nav-dockbar-${this.safeId(this.navId())}`, ...ngDevMode ? [{ debugName: "asideId" }] : /* istanbul ignore next */ []);
+	asideHeadingId = computed(() => `${this.asideId()}-heading`, ...ngDevMode ? [{ debugName: "asideHeadingId" }] : /* istanbul ignore next */ []);
+	openGroup = computed(() => {
+		const resolved = this.resolvedGroup();
+		return resolved !== void 0 ? resolved : this.nav.resolveDockbarGroup(this.navId(), this.items(), this.mode(), this.activeIds(), this.activeUrl());
+	}, ...ngDevMode ? [{ debugName: "openGroup" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn("block w-(--layout-sidebar-collapsed-width)"), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	railClasses = computed(() => cn("flex w-full list-none flex-col items-center gap-0.5 p-2", this.isDrawerMode() && this.openGroup() !== null && "relative z-50"), ...ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []);
+	asideClasses = computed(() => cn("absolute inset-y-0 flex w-(--layout-aside-width) flex-col bg-background", 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"), ...ngDevMode ? [{ debugName: "asideClasses" }] : /* istanbul ignore next */ []);
+	backdropInset = signal({
+		left: null,
+		right: null
+	}, ...ngDevMode ? [{ debugName: "backdropInset" }] : /* istanbul ignore next */ []);
+	onWindowResize() {
+		if (this.isDrawerMode() && this.openGroup() !== null) this.measureBackdropInset();
+	}
+	measureBackdropInset() {
+		const rect = (this.host.nativeElement.closest("[data-navigation-id]") ?? this.host.nativeElement).getBoundingClientRect();
+		const viewportWidth = this.host.nativeElement.ownerDocument?.defaultView?.innerWidth ?? 0;
+		if (rect.width <= 0 || viewportWidth <= 0) {
+			this.backdropInset.set({
+				left: null,
+				right: null
+			});
+			return;
+		}
+		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;
+	}
+	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)
+			}];
+		}));
+	}, ...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(() => {
+			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() {
+		(this.host.nativeElement.querySelector(`#${this.asideId()}`)?.querySelector("a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+	}
+	focusTrigger(key) {
+		const navigationRoot = this.host.nativeElement.closest("[data-navigation-id]") ?? this.host.nativeElement;
+		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")))?.focus();
+	}
+	safeId(value) {
+		return value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-") || "default";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationDockbarMenuComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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.2.0",
+	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 };