@ojiepermana/angular-navigation 22.0.36 → 22.0.43

package/fesm2022/ojiepermana-angular-navigation-service.mjs

@@ -4,6 +4,8 @@ import { inject, signal, computed, isDevMode, Service } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationEnd } from '@angular/router';
 
+/** Referensi stabil untuk id yang belum punya data terdaftar (hindari array baru tiap evaluasi). */
+const EMPTY_NAV_DATA = Object.freeze([]);
 const DEFAULT_NAV_ID = 'default';
 const PERSISTED_NAV_ID = 'main';
 const DEFAULT_VERTICAL_TYPE = 'sidebar';
@@ -26,6 +28,9 @@ class NavigationService {
     ...(ngDevMode ? [{ debugName: "openPanelKeys" }] : /* istanbul ignore next */ []));
     drawerOpenState = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "drawerOpenState" }] : /* istanbul ignore next */ []));
+    /** Data mentah per id, dipublikasikan oleh `<Navigation>` agar surface lain (mis. apps-launcher di `Page`) bisa membaca nav by id tanpa mendaftarkan ulang id yang sama. */
+    dataById = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataById" }] : /* istanbul ignore next */ []));
     /** id navigasi → token owner instance, untuk menjaga setiap id hanya dipakai satu <Navigation> hidup. */
     idOwners = new Map();
     openPanelKey = computed(() => this.openPanelKeys()[DEFAULT_NAV_ID] ?? null, /* @ts-ignore */
@@ -92,6 +97,21 @@ class NavigationService {
     currentState(id) {
         return this.states()[this.normalizeId(id)] ?? null;
     }
+    /** Data terdaftar untuk sebuah id sebagai signal; `[]` bila belum ada `<Navigation>` dengan id tersebut. */
+    data(id) {
+        const navId = this.normalizeId(id);
+        return computed(() => this.dataById()[navId] ?? EMPTY_NAV_DATA);
+    }
+    /** Dipanggil `<Navigation>` untuk mempublikasikan datanya ke registry by id. */
+    publishData(id, data) {
+        const navId = this.normalizeId(id);
+        this.dataById.update((map) => ({ ...map, [navId]: data }));
+    }
+    /** Dipanggil `<Navigation>` saat destroy untuk melepas datanya dari registry. */
+    clearData(id) {
+        const navId = this.normalizeId(id);
+        this.dataById.update((map) => this.withoutKey(map, navId));
+    }
     currentPanelKey(id) {
         return this.openPanelKeys()[this.normalizeId(id)] ?? null;
     }

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -189,6 +189,7 @@ class NavigationContainerComponent {
     ...(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). */
@@ -302,6 +303,12 @@ class NavigationContainerComponent {
         ? '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.
@@ -352,7 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     },
                     template: ` <ng-content /> `,
                 }]
-        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], 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 }] }] } });
+        }], 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);
@@ -384,7 +391,7 @@ class NavigationItemContentComponent {
     ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : /* istanbul ignore next */ []));
     compactFallbackClasses = computed(() => cn('inline-flex h-5 min-w-5 items-center justify-center text-xs font-semibold uppercase'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []));
-    defaultBadgeClasses = computed(() => cn('ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2 text-xs font-medium', this.active() ? 'bg-background text-foreground' : 'bg-muted text-muted-foreground'), /* @ts-ignore */
+    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 */ []));
@@ -587,10 +594,10 @@ class NavigationItemComponent {
         this.nav.closeDrawer(this.navId());
     }
     leafClasses(active) {
-        return cn('NavigationItem group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().disabled && 'pointer-events-none opacity-50', this.item().classes?.wrapper, this.itemClass());
+        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 group/nav inline-flex min-w-0 items-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.orientation() === 'horizontal' && this.level() === 0 ? 'h-9 px-3 py-2' : 'w-full px-3 py-1.5 text-left', this.orientation() === 'horizontal' && this.level() === 0 ? 'gap-3' : 'gap-1.5', this.compact() && 'h-10 w-10 justify-center gap-0 px-0 text-center', this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
+        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 &&
@@ -619,7 +626,7 @@ class NavigationItemComponent {
         return cn(this.orientation() === 'horizontal' && this.level() === 0 ? 'mx-1 h-5 w-px' : 'my-2 w-full px-2');
     }
     groupHeadingClasses() {
-        return cn('px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground', this.item().classes?.title);
+        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';
@@ -1178,12 +1185,13 @@ class NavigationDockbarMenuComponent {
     // berpindah group lain tanpa menutup drawer lebih dulu.
     this.isDrawerMode() && this.openGroup() !== null && 'relative z-50'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []));
-    asideClasses = computed(() => cn('absolute inset-y-0 flex w-60 flex-col bg-background', this.position() === 'right'
-        ? 'right-16 border-r border-[hsl(var(--border)/var(--opacity-70))]'
-        : 'left-16 border-l border-[hsl(var(--border)/var(--opacity-70))]', this.isDrawerMode() &&
-        cn('z-50 shadow-xl', this.position() === 'right'
-            ? 'border-l border-l-[hsl(var(--border)/var(--opacity-70))]'
-            : 'border-r border-r-[hsl(var(--border)/var(--opacity-70))]')), /* @ts-ignore */
+    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
@@ -1237,7 +1245,7 @@ class NavigationDockbarMenuComponent {
         return this.nav.isItemActive(entry, this.activeIds(), this.activeUrl());
     }
     triggerClasses(entry) {
-        return cn('group/nav inline-flex h-10 w-10 items-center justify-center rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isGroupOpen(entry)
+        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'
@@ -1624,7 +1632,7 @@ class NavigationEntryGridComponent {
         return cn('m-0 grid list-none grid-cols-1 gap-1 p-0', columns >= 2 && 'sm:grid-cols-2', columns >= 3 && 'md:grid-cols-3', columns >= 4 && 'lg:grid-cols-4');
     }
     entryClasses(item, active) {
-        return cn('group/nav flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.isBorderRail()
+        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'
@@ -1641,7 +1649,7 @@ class NavigationEntryGridComponent {
         return cn('text-current', item.classes?.icon);
     }
     entryTitleClasses(item, active) {
-        return cn('block truncate text-sm font-medium', this.isBorderRail() ? 'text-current' : 'text-foreground', active && 'font-semibold', item.classes?.title);
+        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);
@@ -1830,7 +1838,7 @@ class NavigationEntryGridComponent {
         <span
           [class]="
             badge.classes ??
-            'inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground'
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
           "
           >{{ badge.title }}</span
         >
@@ -2019,7 +2027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         <span
           [class]="
             badge.classes ??
-            'inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground'
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
           "
           >{{ badge.title }}</span
         >
@@ -2253,17 +2261,17 @@ class NavigationFlyoutMenuComponent {
         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, 'text-sm underline-offset-4 hover:underline', 
+            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 text-sm', iconOnly ? 'h-9 w-9 justify-center' : 'h-9 px-3 py-2', this.isOpen()
+            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 text-sm shadow-sm', iconOnly && 'w-10 justify-center gap-0 px-0', this.isBorderRail()
+        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'
@@ -2286,7 +2294,7 @@ class NavigationFlyoutMenuComponent {
         // 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-xl border border-[hsl(var(--border)/var(--opacity-70))]');
+            : '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
@@ -2309,7 +2317,7 @@ class NavigationFlyoutMenuComponent {
         // `-my-2 self-stretch` untuk membatalkan `py-2` row; tombol `h-full` mengisi penuh
         // sehingga sisinya rata dengan border row — sudut pada sisi border dibuat siku
         // agar menyambung (bawah di mode top, atas di mode bottom).
-        'nav-trigger group/nav inline-flex h-full min-h-9 min-w-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors', this.isBottom() ? 'rounded-t-none' : 'rounded-b-none', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isBorderRail()
+        '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'
@@ -2761,7 +2769,7 @@ class NavigationHorizontalComponent {
         return cn(this.groupClass(), item.classes?.container);
     }
     triggerClasses(item) {
-        return cn('nav-trigger group/nav inline-flex min-w-0 items-center gap-3 rounded-md text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', 'h-9 px-3 py-2', this.compact() && 'w-10 justify-center px-0', this.isBorderRail()
+        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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-navigation",
-  "version": "22.0.36",
+  "version": "22.0.43",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,7 +13,7 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-component": "^22.0.36",
+    "@ojiepermana/angular-component": "^22.0.43",
     "rxjs": ">=7.8.0"
   },
   "dependencies": {

package/types/ojiepermana-angular-navigation-service.d.ts

@@ -78,6 +78,8 @@ declare class NavigationService {
     private readonly states;
     private readonly openPanelKeys;
     private readonly drawerOpenState;
+    /** Data mentah per id, dipublikasikan oleh `<Navigation>` agar surface lain (mis. apps-launcher di `Page`) bisa membaca nav by id tanpa mendaftarkan ulang id yang sama. */
+    private readonly dataById;
     /** id navigasi → token owner instance, untuk menjaga setiap id hanya dipakai satu <Navigation> hidup. */
     private readonly idOwners;
     readonly openPanelKey: Signal<string | null>;
@@ -96,6 +98,12 @@ declare class NavigationService {
     private releaseId;
     state(id: string): Signal<NavigationState | null>;
     currentState(id: string): NavigationState | null;
+    /** Data terdaftar untuk sebuah id sebagai signal; `[]` bila belum ada `<Navigation>` dengan id tersebut. */
+    data(id: string): Signal<readonly NavigationItem[]>;
+    /** Dipanggil `<Navigation>` untuk mempublikasikan datanya ke registry by id. */
+    publishData(id: string, data: readonly NavigationItem[]): void;
+    /** Dipanggil `<Navigation>` saat destroy untuk melepas datanya dari registry. */
+    clearData(id: string): void;
     currentPanelKey(id: string): string | null;
     update(id: string, patch: Partial<NavigationRegisterInput>): NavigationState;
     setType(id: string, type: NavigationType): NavigationState;

package/types/ojiepermana-angular-navigation.d.ts

@@ -178,6 +178,7 @@ declare class NavigationContainerComponent implements NavigationShellContext {
     readonly openedIds: _angular_core.ModelSignal<readonly string[]>;
     readonly itemSelected: _angular_core.OutputEmitterRef<NavigationSelection>;
     private readonly nav;
+    private readonly destroyRef;
     private readonly hoverPreviewExpanded;
     /** Konfigurasi type aktif yang didaftarkan wrapper anak (sidebar/dockbar/navbar/flyout). */
     private readonly typeConfig;
@@ -210,6 +211,7 @@ declare class NavigationContainerComponent implements NavigationShellContext {
     readonly shellClasses: _angular_core.Signal<string>;
     readonly state: _angular_core.Signal<_ojiepermana_angular_navigation.NavigationState>;
     protected readonly hostClasses: _angular_core.Signal<string>;
+    constructor();
     /**
      * Dipanggil komponen type saat dibuat. Satu `<Navigation>` hanya boleh
      * memuat satu type hidup — pendaftaran ganda dianggap salah konfigurasi.