@ojiepermana/angular 0.1.1 → 21.0.0

package/navigation/README.md

@@ -1,301 +0,0 @@
-# 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

@@ -1,49 +0,0 @@
-# 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/shell/README.md

@@ -1,41 +0,0 @@
-# Shell Provider
-
-Convenience provider helpers for `@ojiepermana/angular` applications.
-
-Import from:
-
-- `@ojiepermana/angular/shell`
-
-## Public API
-
-- `provideNgShell`
-- `NgShellConfig`
-
-## Usage
-
-```ts
-import { ApplicationConfig } from '@angular/core';
-import { provideNgShell } from '@ojiepermana/angular/shell';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideNgShell({
-      theme: {
-        defaultScheme: 'system',
-        defaultColor: 'brand',
-        defaultStyle: 'flat',
-      },
-      layout: {
-        defaultMode: 'vertical',
-        defaultContainer: 'boxed',
-      },
-      navigation: {
-        defaultHorizontalVariant: 'default',
-        defaultVerticalVariant: 'default',
-      },
-    }),
-  ],
-};
-```
-
-`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 +0,0 @@
-@import '../theme/styles/index.css';
-@import '../layout/src/layout.css';

package/styles/resets.css

@@ -1,22 +0,0 @@
-/* Optional application-level resets. Not imported by the default library bundle. */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  min-block-size: 100%;
-  background: var(--background);
-  color: var(--foreground);
-}
-
-body {
-  margin: 0;
-}
-
-a {
-  color: inherit;
-}