@ojiepermana/angular 0.0.3 → 0.1.1

package/navigation/README.md

@@ -0,0 +1,301 @@
+# Navigation
+
+Navigation for `@ojiepermana/angular` is split into three secondary entry points so consumers can import only the state helpers or component variants they need.
+
+## Entry Points
+
+- `@ojiepermana/angular/navigation` exposes the navigation item model, utility helpers, `NavigationService`, and `NavigationPreferencesService`.
+- `@ojiepermana/angular/navigation/vertical` exposes the vertical navigation container variants and vertical item components.
+- `@ojiepermana/angular/navigation/horizontal` exposes the horizontal navigation variants and branch item component.
+
+Do not import consumer code from `@ojiepermana/angular/internal` or from source file paths under this folder. Those paths are implementation details and are not part of the public contract.
+
+## Requirements
+
+- Configure Angular Router before rendering the navigation components.
+- Import `@ojiepermana/angular/styles/index.css` in the consuming application so the shared theme tokens are available.
+- Use Lucide icon names or aliases in `NavigationItem.icon`. The navigation components resolve icons through `@lucide/angular`.
+
+## Source Layout
+
+```text
+navigation/
+├── data/
+│   └── demo-navigation.data.ts
+├── state/
+│   ├── navigation.service.ts
+│   ├── navigation.type.ts
+│   └── navigation.utils.ts
+├── horizontal/
+│   ├── core/
+│   │   ├── horizontal-navigation.base.ts
+│   │   └── horizontal-navigation.shared.ts
+│   ├── default/
+│   │   ├── default.ts
+│   │   ├── default.css
+│   │   └── README.md
+│   ├── mega/
+│   │   ├── mega.ts
+│   │   ├── mega.css
+│   │   └── README.md
+│   └── types/
+│       ├── index.ts
+│       ├── branch.ts
+│       └── branch/
+│           ├── branch.ts
+│           └── README.md
+├── shared/
+│   ├── content/
+│   └── tree/
+└── vertical/
+  ├── core/
+  │   ├── vertical-navigation.base.ts
+  │   └── vertical-navigation.shared.ts
+  ├── default/
+  │   ├── default.ts
+  │   └── default.css
+  ├── collapsible/
+  │   └── collapsible.ts
+  └── types/
+```
+
+## Quick Start
+
+### 1. Define a navigation tree
+
+```ts
+import { NavigationItem } from '@ojiepermana/angular/navigation';
+
+export const appNavigation = [
+  {
+    id: 'dashboard',
+    title: 'Dashboard',
+    type: 'basic',
+    icon: 'layout-dashboard',
+    link: '/dashboard',
+  },
+  {
+    id: 'workspace',
+    title: 'Workspace',
+    type: 'collapsable',
+    icon: 'folders',
+    children: [
+      {
+        id: 'workspace-overview',
+        title: 'Overview',
+        type: 'basic',
+        link: '/workspace/overview',
+      },
+      {
+        id: 'workspace-settings',
+        title: 'Settings',
+        type: 'basic',
+        link: '/workspace/settings',
+        badge: {
+          title: 'Beta',
+          classes: 'bg-primary text-primary-foreground',
+        },
+      },
+    ],
+  },
+] satisfies NavigationItem[];
+```
+
+### 2. Render a vertical navigation
+
+```ts
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { NavigationItem } from '@ojiepermana/angular/navigation';
+import { VerticalNavigationDefaultComponent } from '@ojiepermana/angular/navigation/vertical';
+
+import { appNavigation } from './app.navigation';
+
+@Component({
+  selector: 'app-shell-navigation',
+  imports: [VerticalNavigationDefaultComponent],
+  template: `
+    <vertical-navigation [navigation]="navigation()" [opened]="true" mode="side" position="left"></vertical-navigation>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShellNavigationComponent {
+  readonly navigation = signal<NavigationItem[]>(appNavigation);
+}
+```
+
+Vertical variants use these selectors:
+
+- `<vertical-navigation>` for the default width and density.
+- `<vertical-navigation-collapsible>` for the upcoming collapsible variant contract. It currently reuses the default layout.
+
+All vertical variants share the same public API surface inherited from the base component, including `navigation`, `opened`, `mode`, `position`, `autoCollapse`, `inner`, `transparentOverlay`, and the `openedChanged` output.
+
+### 3. Render a horizontal navigation
+
+```ts
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { NavigationItem } from '@ojiepermana/angular/navigation';
+import { HorizontalNavigation } from '@ojiepermana/angular/navigation/horizontal';
+
+import { appNavigation } from './app.navigation';
+
+@Component({
+  selector: 'app-top-navigation',
+  imports: [HorizontalNavigation],
+  template: `
+    <horizontal-navigation [navigation]="navigation()" (itemClicked)="onItemClicked($event)"></horizontal-navigation>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TopNavigationComponent {
+  readonly navigation = signal<NavigationItem[]>(appNavigation);
+
+  onItemClicked(item: NavigationItem): void {
+    console.log('Navigation item clicked:', item.id);
+  }
+}
+```
+
+Horizontal variants use these selectors:
+
+- `<horizontal-navigation>` for the default horizontal layout.
+- `<horizontal-navigation-mega>` for a roomier mega-style horizontal layout.
+
+### 4. Optionally mirror the tree into `NavigationService`
+
+`NavigationService` is useful when other parts of the application need lookup helpers, active item state, or expanded item state. Vertical navigation renders from its `navigation` input. Horizontal navigation renders from its `navigation` input first, and falls back to the service only when the input array is empty.
+
+```ts
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { NavigationItem, NavigationService } from '@ojiepermana/angular/navigation';
+
+import { appNavigation } from './app.navigation';
+
+@Component({
+  selector: 'app-navigation-store',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavigationStoreComponent {
+  private readonly navigationService = inject(NavigationService);
+  readonly navigation = signal<NavigationItem[]>(appNavigation);
+
+  ngOnInit(): void {
+    this.navigationService.storeNavigation(this.navigation());
+  }
+}
+```
+
+## Navigation Item Model
+
+Every tree node is a `NavigationItem`. The public union is split across these item types:
+
+- `basic` is a leaf item that can route, open an external link, or run an `action` callback.
+- `aside` is a routable branch rendered through the vertical aside panel pattern.
+- `collapsable` is a branch that expands and collapses inline.
+- `group` is a non-routable section label with children.
+- `divider` renders a visual separator.
+- `spacer` renders flexible empty space.
+
+Shared fields available on most item types:
+
+- `id`, `title`, `subtitle`, `tooltip`, `icon`, `disabled`, and `meta`.
+- `classes.wrapper`, `classes.icon`, `classes.title`, and `classes.subtitle` for per-item styling hooks.
+- `badge.title` and `badge.classes` for optional item badges.
+- `isHidden` for conditional visibility.
+
+Routable item fields available on `basic`, `aside`, and `collapsable`:
+
+- `link`, `fragment`, `preserveFragment`, `queryParams`, and `queryParamsHandling`.
+- `externalLink` and `target` for external navigation.
+- `exactMatch` and `isActiveMatchOptions` for route activity matching.
+- `action` for click callbacks.
+
+## Navigation Service
+
+`NavigationService` is provided in root and exposes navigation state as signals plus a small lookup API.
+
+Readonly state:
+
+- `navigationItems`
+- `activeItemId`
+- `flatNavigation`
+- `expandedItemIds`
+
+Mutation and lookup methods:
+
+- `storeNavigation()` and `deleteNavigation()`
+- `setActiveItem()` and `clearActiveItem()`
+- `expandItem()`, `collapseItem()`, `toggleItemExpanded()`, and `clearExpandedItems()`
+- `getNavigation()`, `getActiveItem()`, `getFlatNavigation()`, `getItem()`, and `getItemParent()`
+
+`activeItemId` and `expandedItemIds` now persist automatically through `NavigationPreferencesService`, while `NavigationService` stays focused on the navigation tree and lookup helpers.
+
+## Navigation Preferences Service
+
+`NavigationPreferencesService` is provided in root and stores persisted navigation preferences separately from the navigation tree itself.
+
+`provideNgNavigation()` configures the defaults that are used before any persisted browser state exists.
+
+Readonly state:
+
+- `horizontalVariant`
+- `verticalAppearance`
+- `activeItemId`
+- `expandedItemIds`
+
+Mutation methods:
+
+- `setHorizontalVariant()`
+- `setVerticalAppearance()`
+- `setActiveItem()` and `clearActiveItem()`
+- `setExpandedItemIds()`, `expandItem()`, `collapseItem()`, `toggleExpandedItem()`, and `clearExpandedItems()`
+- `syncWithNavigation()` and `reset()`
+
+Persisted flat localStorage keys:
+
+- `navigation-horizontal-variant`
+- `navigation-vertical-appearance`
+- `navigation-active-item`
+- `navigation-expanded-items`
+
+Legacy `ng-navigation:v1:vertical-appearance`, `ng-navigation:v1:active-item`, and `ng-navigation:v1:expanded-items` entries migrate automatically when they are read.
+
+Use `horizontalVariant()` to choose which horizontal variant component to render in the consumer app, and `verticalAppearance()` to choose which vertical variant component to render.
+
+Default provider config fields:
+
+- `defaultHorizontalVariant`
+- `defaultVerticalVariant`
+
+## Styling Notes
+
+- Pass Tailwind utility classes or other class names through the item `classes` and `badge.classes` fields when you need local visual overrides.
+- Icons are resolved from Lucide. Use names such as `layout-dashboard`, `folders`, `settings-2`, or valid Lucide aliases.
+- Active state depends on Angular Router. Use `exactMatch` or `isActiveMatchOptions` when the default subset matching is too broad.
+
+## Troubleshooting
+
+### Nothing renders
+
+- Confirm the component receives a non-empty `navigation` input.
+- If a horizontal navigation intentionally relies on service fallback, call `NavigationService.storeNavigation()` before it renders.
+- Check whether `isHidden` returns `true` for the affected items.
+
+### Icons do not appear
+
+- Use Lucide icon names or aliases, not Material icon names.
+- Check the `icon` value on the affected item.
+
+### Active state is wrong
+
+- Verify Router is configured and the application uses the expected route paths.
+- Tune `exactMatch` or `isActiveMatchOptions` for the affected items.
+
+## Notes For Contributors
+
+- Keep `@ojiepermana/angular/navigation` focused on the item model, helpers, and `NavigationService`.
+- Keep navigation persistence and UI preferences in `NavigationPreferencesService` instead of storing the full navigation tree in browser storage.
+- Keep render components in `@ojiepermana/angular/navigation/vertical` and `@ojiepermana/angular/navigation/horizontal`.
+- Move shared implementation helpers behind `@ojiepermana/angular/internal` instead of reaching across entry point boundaries with relative imports.
+- Treat `projects/library/navigation/shared` as a local compatibility layer for tests and source organization, not as consumer API.

package/navigation/horizontal/README.md

@@ -0,0 +1,49 @@
+# Horizontal Navigation
+
+The horizontal entrypoint exposes shared top-bar navigation variants for `@ojiepermana/angular`.
+
+## Public Imports
+
+```ts
+import { HorizontalNavigation, HorizontalNavigationMegaComponent } from '@ojiepermana/angular/navigation/horizontal';
+```
+
+## Variants
+
+- `HorizontalNavigation` renders the default selector `<horizontal-navigation>`.
+- `HorizontalNavigationMegaComponent` renders the mega selector `<horizontal-navigation-mega>`.
+
+## Source Layout
+
+```text
+horizontal/
+├── core/
+│   ├── horizontal-navigation.base.ts
+│   └── horizontal-navigation.shared.ts
+├── default/
+│   ├── default.ts
+│   ├── default.css
+│   └── README.md
+├── mega/
+│   ├── mega.ts
+│   ├── mega.css
+│   └── README.md
+├── types/
+│   ├── index.ts
+│   ├── README.md
+│   ├── branch.ts
+│   └── branch/
+│       ├── branch.ts
+│       └── README.md
+├── horizontal.ts
+├── index.ts
+├── ng-package.json
+└── public-api.ts
+```
+
+## Notes
+
+- `core/` contains variant-agnostic logic and template composition.
+- `default/` and `mega/` contain variant-specific components and styles.
+- `types/` contains reusable branch rendering primitives shared by all horizontal variants.
+- `horizontal.ts` remains a compatibility barrel that points to the default variant implementation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -34,6 +34,18 @@
       "types": "./types/ojiepermana-angular-layout.d.ts",
       "default": "./fesm2022/ojiepermana-angular-layout.mjs"
     },
+    "./navigation": {
+      "types": "./types/ojiepermana-angular-navigation.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-navigation.mjs"
+    },
+    "./navigation/horizontal": {
+      "types": "./types/ojiepermana-angular-navigation-horizontal.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-navigation-horizontal.mjs"
+    },
+    "./navigation/vertical": {
+      "types": "./types/ojiepermana-angular-navigation-vertical.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-navigation-vertical.mjs"
+    },
     "./shell": {
       "types": "./types/ojiepermana-angular-shell.d.ts",
       "default": "./fesm2022/ojiepermana-angular-shell.mjs"

package/shell/README.md

@@ -29,9 +29,13 @@ export const appConfig: ApplicationConfig = {
         defaultMode: 'vertical',
         defaultContainer: 'boxed',
       },
+      navigation: {
+        defaultHorizontalVariant: 'default',
+        defaultVerticalVariant: 'default',
+      },
     }),
   ],
 };
 ```
 
-`provideNgShell()` is a convenience wrapper over `provideNgTheme()` and `provideNgLayout()`. It does not introduce a separate runtime state layer.
+`provideNgShell()` is a convenience wrapper over `provideNgTheme()`, `provideNgLayout()`, and `provideNgNavigation()`. It does not introduce a separate runtime state layer.

package/styles/index.css

@@ -1,2 +1,2 @@
 @import '../theme/styles/index.css';
-@import '../theme/styles/layout/index.css';
+@import '../layout/src/layout.css';

package/theme/README.md

@@ -188,9 +188,9 @@ It imports the current structure in this order:
 - `utilities/index.css`
 - `adapters/material-ui/index.css`
 
-Layout selectors now live in `projects/library/layout/styles/index.css` inside this workspace.
+Layout-wide selectors now live in `projects/library/layout/src/layout.css` inside this workspace.
 
-For applications that consume the published package, use the aggregate bundle at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package. The aggregate bundle imports theme first, then layout.
+For applications that consume the published package, use the aggregate bundle at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package. The aggregate bundle imports theme first, then the layout-wide selectors. Horizontal and vertical shell CSS are loaded by their respective layout components.
 
 Application-level resets are intentionally opt-in. If a consumer wants them, import `projects/library/styles/resets.css` in this workspace or `@ojiepermana/angular/styles/resets.css` from the published package in addition to the aggregate bundle.
 
@@ -310,10 +310,7 @@ For a package consumer, use the published aggregate bundle instead:
 
 ```ts
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  LayoutContainerSwitcherComponent,
-  LayoutVerticalComponent,
-} from '@ojiepermana/angular/layout';
+import { LayoutContainerSwitcherComponent, LayoutVerticalComponent } from '@ojiepermana/angular/layout';
 import {
   StyleSwitcherComponent,
   ColorPickerComponent,

package/theme/styles/adapters/material-ui/index.css

@@ -28,11 +28,7 @@
   --mat-sys-on-surface: var(--container-foreground);
   --mat-sys-surface-container: var(--overlay-surface);
   --mat-sys-surface-container-high: var(--overlay-surface);
-  --mat-sys-surface-container-highest: color-mix(
-    in oklab,
-    var(--overlay-surface) 90%,
-    var(--muted)
-  );
+  --mat-sys-surface-container-highest: color-mix(in oklab, var(--overlay-surface) 90%, var(--muted));
   --mat-sys-surface-variant: var(--data-header-surface);
   --mat-sys-on-surface-variant: var(--data-header-foreground);
   --mat-sys-inverse-surface: var(--inverse);

package/theme/styles/presets/styles/flat.css

@@ -25,15 +25,13 @@
   --shell-foreground: var(--card-foreground);
   --shell-border: var(--border);
   --shell-shadow:
-    rgb(0 0 0 / 0.14) 0 28px 70px, rgb(0 0 0 / 0.1) 0 14px 32px,
-    oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0 0 0 1px;
+    rgb(0 0 0 / 0.14) 0 28px 70px, rgb(0 0 0 / 0.1) 0 14px 32px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0 0 0 1px;
   --shell-backdrop: var(--backdrop);
   --surface-elevated: var(--popover);
   --surface-elevated-foreground: var(--popover-foreground);
   --surface-elevated-border: oklab(0.263084 -0.00230259 0.0124794 / 0.2);
   --surface-elevated-shadow:
-    rgb(0 0 0 / 0.12) 0 24px 52px, rgb(0 0 0 / 0.08) 0 10px 24px,
-    oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0 0 0 1px;
+    rgb(0 0 0 / 0.12) 0 24px 52px, rgb(0 0 0 / 0.08) 0 10px 24px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0 0 0 1px;
 }
 
 .dark[data-theme-style='flat'] {
@@ -54,8 +52,7 @@
   --sidebar-primary-foreground: var(--foreground);
   --sidebar-accent: color-mix(in oklab, var(--theme-primary) 18%, var(--sidebar));
   --sidebar-accent-foreground: var(--foreground);
-  --shell-shadow:
-    rgb(0 0 0 / 0.44) 0 28px 70px, rgb(0 0 0 / 0.28) 0 14px 32px, rgb(235 231 222 / 0.08) 0 0 0 1px;
+  --shell-shadow: rgb(0 0 0 / 0.44) 0 28px 70px, rgb(0 0 0 / 0.28) 0 14px 32px, rgb(235 231 222 / 0.08) 0 0 0 1px;
   --surface-elevated: #2b2820;
   --surface-elevated-foreground: var(--foreground);
   --surface-elevated-border: rgb(235 231 222 / 0.12);

package/theme/styles/presets/styles/glass.css

@@ -7,13 +7,7 @@
     ui-sans-serif,
     sans-serif
   );
-  --typeface-brand: var(
-    --theme-style-glass-brand-font,
-    ui-rounded,
-    'Avenir Next',
-    'Segoe UI',
-    sans-serif
-  );
+  --typeface-brand: var(--theme-style-glass-brand-font, ui-rounded, 'Avenir Next', 'Segoe UI', sans-serif);
   --typeface-mono: var(
     --theme-style-glass-mono-font,
     'SFMono-Regular',

package/theme/styles/presets/styles/index.css

@@ -1,2 +1,2 @@
 @import './flat.css';
-@import './glass.css';
+@import './glass.css';

package/theme/styles/roles/index.css

@@ -3,6 +3,24 @@
   --nav-surface: color-mix(in oklab, var(--shell-surface) 92%, transparent);
   --nav-foreground: var(--shell-foreground);
   --nav-border: var(--shell-border);
+  --nav-font-family: var(--typeface-plain);
+  --nav-item-font-size: 0.875rem;
+  --nav-item-line-height: 1.25rem;
+  --nav-item-font-weight: 500;
+  --nav-item-active-font-weight: 600;
+  --nav-subtitle-font-size: 0.75rem;
+  --nav-subtitle-line-height: 1rem;
+  --nav-subtitle-font-weight: 400;
+  --nav-badge-font-size: 0.75rem;
+  --nav-badge-line-height: 1rem;
+  --nav-badge-font-weight: 600;
+  --nav-group-title-font-size: 0.75rem;
+  --nav-group-title-line-height: 1rem;
+  --nav-group-title-font-weight: 600;
+  --nav-group-title-letter-spacing: 0.08em;
+  --nav-group-subtitle-font-size: 0.75rem;
+  --nav-group-subtitle-line-height: 1rem;
+  --nav-group-subtitle-font-weight: 400;
   --nav-item-hover-surface: var(--tertiary-container);
   --nav-item-hover-foreground: var(--tertiary-container-foreground);
   --nav-item-active-surface: var(--secondary-container);

package/theme/styles/tokens/foundation.css

@@ -87,8 +87,7 @@
 
 /* Keep these radius tokens in :root as well so non-Tailwind consumers get the same values as @theme. */
 :root {
-  --typeface-plain:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --typeface-plain: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --typeface-brand: var(--typeface-plain);
   --typeface-mono: 'SFMono-Regular', 'Cascadia Mono', 'Liberation Mono', ui-monospace, monospace;
   --radius: 0.75rem;
@@ -115,7 +114,7 @@
   --layout-shell-max-width: 100%;
   --layout-shell-padding: 0rem;
   --layout-shell-radius: 0rem;
-  --layout-sidebar-width: 17rem;
+  --layout-sidebar-width: 280px;
   --layout-header-height: 3.75rem;
   --layout-header-display: grid;
   --layout-sidebar-display: flex;
@@ -131,9 +130,7 @@
     text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
     backdrop-filter var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard);
   --ngt-shell-transition:
-    var(--ngt-chrome-transition),
-    border-radius var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard);
+    var(--ngt-chrome-transition), border-radius var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard);
   --ngt-control-transition:
-    var(--ngt-chrome-transition),
-    transform var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+    var(--ngt-chrome-transition), transform var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
 }

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

@@ -1,4 +1,7 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { LucideIcon } from '@lucide/angular';
+import { NavigationItem } from '@ojiepermana/angular/navigation';
 
 declare const libraryLucideConfigProvider: _angular_core.Provider;
 
@@ -18,9 +21,70 @@ declare class LocalStorageStateAdapter<Axis extends string> {
     constructor(config: LocalStorageStateAdapterConfig<Axis>);
     clear(axis: Axis): void;
     persist(axis: Axis, value: string): void;
+    readValue(axis: Axis): string | null;
     read<T extends string>(axis: Axis, fallback: T, isValid: (value: string) => value is T): T;
     private key;
     private legacyKey;
 }
 
-export { LocalStorageStateAdapter, libraryLucideConfigProvider };
+type NavigationItemContentVariant = 'horizontal' | 'vertical' | 'vertical-group';
+declare class NavigationItemContent {
+    item: _angular_core.InputSignal<NavigationItem>;
+    level: _angular_core.InputSignal<number>;
+    variant: _angular_core.InputSignal<NavigationItemContentVariant>;
+    protected readonly resolvedIcon: _angular_core.Signal<LucideIcon | null>;
+    protected readonly horizontalIconClass: _angular_core.Signal<string | null>;
+    protected readonly verticalIconClass: _angular_core.Signal<string | null>;
+    protected readonly horizontalTitleClass: _angular_core.Signal<string | null>;
+    protected readonly titleClass: _angular_core.Signal<string | null>;
+    protected readonly subtitleClass: _angular_core.Signal<string | null>;
+    protected readonly horizontalBadgeClass: _angular_core.Signal<string | null>;
+    protected readonly verticalBadgeClass: _angular_core.Signal<string | null>;
+    protected readonly titleContainerClass: _angular_core.Signal<"kit-navigation-group-title" | "kit-navigation-item-title">;
+    protected readonly subtitleContainerClass: _angular_core.Signal<"kit-navigation-group-subtitle" | "kit-navigation-item-subtitle">;
+    private joinClasses;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationItemContent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationItemContent, "navigation-item-content", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type NavigationTreeTemplateData = Record<string, unknown>;
+interface NavigationTreeItemContext {
+    $implicit: NavigationItem;
+    level: number;
+    parentKey: string;
+    isLast: boolean;
+    data: NavigationTreeTemplateData | null;
+}
+declare class NavigationTreeOutlet {
+    items: _angular_core.InputSignal<NavigationItem[]>;
+    level: _angular_core.InputSignal<number>;
+    parentKey: _angular_core.InputSignal<string>;
+    data: _angular_core.InputSignal<NavigationTreeTemplateData | null>;
+    branchTemplate: _angular_core.InputSignal<TemplateRef<NavigationTreeItemContext>>;
+    leafTemplate: _angular_core.InputSignal<TemplateRef<NavigationTreeItemContext>>;
+    groupTemplate: _angular_core.InputSignal<TemplateRef<NavigationTreeItemContext>>;
+    dividerTemplate: _angular_core.InputSignal<TemplateRef<NavigationTreeItemContext> | null>;
+    spacerTemplate: _angular_core.InputSignal<TemplateRef<NavigationTreeItemContext> | null>;
+    trackByFn: _angular_core.InputSignal<(index: number, item: NavigationItem) => string | number | undefined>;
+    shouldRenderItemFn: _angular_core.InputSignal<(item: NavigationItem) => boolean>;
+    hasChildrenFn: _angular_core.InputSignal<(item: NavigationItem) => boolean>;
+    resolveParentKeyFn: _angular_core.InputSignal<(parentKey: string, item: NavigationItem) => string>;
+    trackItem(index: number, item: NavigationItem): string | number | undefined;
+    shouldRender(item: NavigationItem): boolean;
+    hasChildren(item: NavigationItem): boolean;
+    resolveParentKey(parentKey: string, item: NavigationItem): string;
+    templateContext(item: NavigationItem, isLast: boolean): NavigationTreeItemContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationTreeOutlet, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationTreeOutlet, "navigation-tree-outlet", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "parentKey": { "alias": "parentKey"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "branchTemplate": { "alias": "branchTemplate"; "required": true; "isSignal": true; }; "leafTemplate": { "alias": "leafTemplate"; "required": true; "isSignal": true; }; "groupTemplate": { "alias": "groupTemplate"; "required": true; "isSignal": true; }; "dividerTemplate": { "alias": "dividerTemplate"; "required": false; "isSignal": true; }; "spacerTemplate": { "alias": "spacerTemplate"; "required": false; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; "shouldRenderItemFn": { "alias": "shouldRenderItemFn"; "required": false; "isSignal": true; }; "hasChildrenFn": { "alias": "hasChildrenFn"; "required": false; "isSignal": true; }; "resolveParentKeyFn": { "alias": "resolveParentKeyFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type NavigationExpandedItemsByParent = Record<string, string>;
+declare function trackNavigationTreeItem(index: number, item: NavigationItem): string | number | undefined;
+declare function getNavigationTreePathKey(parentKey: string, item: NavigationItem): string;
+declare function isNavigationTreeItemExpanded(expandedByParent: NavigationExpandedItemsByParent, parentKey: string, item: NavigationItem): boolean;
+declare function toggleNavigationTreeItemExpanded(expandedByParent: NavigationExpandedItemsByParent, parentKey: string, item: NavigationItem): NavigationExpandedItemsByParent;
+declare function hasActiveNavigationDescendant(item: NavigationItem, isItemActive: (item: NavigationItem) => boolean): boolean;
+declare function isNavigationTreeDescendant(parent: NavigationItem, item: NavigationItem): boolean;
+
+export { LocalStorageStateAdapter, NavigationItemContent, NavigationTreeOutlet, getNavigationTreePathKey, hasActiveNavigationDescendant, isNavigationTreeDescendant, isNavigationTreeItemExpanded, libraryLucideConfigProvider, toggleNavigationTreeItemExpanded, trackNavigationTreeItem };
+export type { NavigationExpandedItemsByParent, NavigationTreeItemContext, NavigationTreeTemplateData };

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

@@ -43,7 +43,7 @@ declare class LayoutHostDirective {
 
 declare class LayoutHorizontalComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutHorizontalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutHorizontalComponent, "horizontal", never, {}, {}, never, ["[headerBrand]", "[headerNavigation]", "[headerActions]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutHorizontalComponent, "horizontal", never, {}, {}, never, ["[brand]", "[navigation]", "[action]"], true, never>;
 }
 
 declare class LayoutVerticalComponent {