@ojiepermana/angular 0.0.2 → 0.1.0

package/theme/styles/presets/colors/blue.css

@@ -8,3 +8,38 @@
   --theme-neutral: oklch(0.735 0.031 260.347);
   --theme-on-neutral: oklch(0.205 0.012 285.9);
 }
+
+[data-theme-color='blue'] :where(h1, h2, h3, h4, h5, h6, a) {
+  color: var(--primary);
+}
+
+[data-theme-color='blue'] :where(a) {
+  text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+[data-theme-color='blue'] :where(a:hover) {
+  color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='blue'] :where(a:visited) {
+  color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
+}
+
+[data-theme-color='blue'] :where(a:active) {
+  color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='blue'] :where(a:focus-visible) {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  border-radius: 0.15em;
+  text-decoration-color: currentColor;
+}

package/theme/styles/presets/colors/brand.css

@@ -9,3 +9,44 @@
   --theme-neutral: oklch(0.736 0.035 265.705);
   --theme-on-neutral: oklch(0.205 0.012 285.9);
 }
+
+:root :where(h1, h2, h3, h4, h5, h6, a),
+[data-theme-color='brand'] :where(h1, h2, h3, h4, h5, h6, a) {
+  color: var(--primary);
+}
+
+:root :where(a),
+[data-theme-color='brand'] :where(a) {
+  text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+:root :where(a:hover),
+[data-theme-color='brand'] :where(a:hover) {
+  color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+:root :where(a:visited),
+[data-theme-color='brand'] :where(a:visited) {
+  color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
+}
+
+:root :where(a:active),
+[data-theme-color='brand'] :where(a:active) {
+  color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+:root :where(a:focus-visible),
+[data-theme-color='brand'] :where(a:focus-visible) {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  border-radius: 0.15em;
+  text-decoration-color: currentColor;
+}

package/theme/styles/presets/colors/cyan.css

@@ -8,3 +8,38 @@
   --theme-neutral: oklch(0.756 0.024 242.306);
   --theme-on-neutral: oklch(0.205 0.012 285.9);
 }
+
+[data-theme-color='cyan'] :where(h1, h2, h3, h4, h5, h6, a) {
+  color: var(--primary);
+}
+
+[data-theme-color='cyan'] :where(a) {
+  text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+[data-theme-color='cyan'] :where(a:hover) {
+  color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='cyan'] :where(a:visited) {
+  color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
+}
+
+[data-theme-color='cyan'] :where(a:active) {
+  color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='cyan'] :where(a:focus-visible) {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  border-radius: 0.15em;
+  text-decoration-color: currentColor;
+}

package/theme/styles/presets/colors/green.css

@@ -8,3 +8,38 @@
   --theme-neutral: oklch(0.749 0.02 176.021);
   --theme-on-neutral: oklch(0.205 0.012 285.9);
 }
+
+[data-theme-color='green'] :where(h1, h2, h3, h4, h5, h6, a) {
+  color: var(--primary);
+}
+
+[data-theme-color='green'] :where(a) {
+  text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+[data-theme-color='green'] :where(a:hover) {
+  color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='green'] :where(a:visited) {
+  color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
+}
+
+[data-theme-color='green'] :where(a:active) {
+  color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='green'] :where(a:focus-visible) {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  border-radius: 0.15em;
+  text-decoration-color: currentColor;
+}

package/theme/styles/presets/colors/orange.css

@@ -8,3 +8,38 @@
   --theme-neutral: oklch(0.757 0.016 44.49);
   --theme-on-neutral: oklch(0.205 0.012 285.9);
 }
+
+[data-theme-color='orange'] :where(h1, h2, h3, h4, h5, h6, a) {
+  color: var(--primary);
+}
+
+[data-theme-color='orange'] :where(a) {
+  text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+[data-theme-color='orange'] :where(a:hover) {
+  color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='orange'] :where(a:visited) {
+  color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
+}
+
+[data-theme-color='orange'] :where(a:active) {
+  color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='orange'] :where(a:focus-visible) {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  border-radius: 0.15em;
+  text-decoration-color: currentColor;
+}

package/theme/styles/presets/colors/purple.css

@@ -8,3 +8,38 @@
   --theme-neutral: oklch(0.74 0.039 307.23);
   --theme-on-neutral: oklch(0.205 0.012 285.9);
 }
+
+[data-theme-color='purple'] :where(h1, h2, h3, h4, h5, h6, a) {
+  color: var(--primary);
+}
+
+[data-theme-color='purple'] :where(a) {
+  text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+[data-theme-color='purple'] :where(a:hover) {
+  color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='purple'] :where(a:visited) {
+  color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
+}
+
+[data-theme-color='purple'] :where(a:active) {
+  color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='purple'] :where(a:focus-visible) {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  border-radius: 0.15em;
+  text-decoration-color: currentColor;
+}

package/theme/styles/presets/colors/red.css

@@ -8,3 +8,38 @@
   --theme-neutral: oklch(0.742 0.032 8.67);
   --theme-on-neutral: oklch(0.205 0.012 285.9);
 }
+
+[data-theme-color='red'] :where(h1, h2, h3, h4, h5, h6, a) {
+  color: var(--primary);
+}
+
+[data-theme-color='red'] :where(a) {
+  text-decoration-color: color-mix(in oklab, currentColor 36%, transparent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+[data-theme-color='red'] :where(a:hover) {
+  color: color-mix(in oklab, var(--primary) 84%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='red'] :where(a:visited) {
+  color: color-mix(in oklab, var(--primary) 72%, var(--tertiary-solid) 28%);
+}
+
+[data-theme-color='red'] :where(a:active) {
+  color: color-mix(in oklab, var(--primary) 70%, var(--foreground));
+  text-decoration-color: currentColor;
+}
+
+[data-theme-color='red'] :where(a:focus-visible) {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  border-radius: 0.15em;
+  text-decoration-color: currentColor;
+}

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

@@ -1,30 +1,61 @@
 :root,
 [data-theme-style='flat'] {
-  --typeface-plain: var(
-    --theme-style-flat-plain-font,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif
-  );
+  --typeface-plain: var(--theme-style-flat-plain-font, 'Helvetica Neue', 'Arial Nova', sans-serif);
   --typeface-brand: var(--theme-style-flat-brand-font, var(--typeface-plain));
-  --typeface-mono: var(
-    --theme-style-flat-mono-font,
-    'SFMono-Regular',
-    'Cascadia Mono',
-    'Liberation Mono',
-    ui-monospace,
-    monospace
-  );
+  --typeface-mono: var(--theme-style-flat-mono-font, 'Azeret Mono', ui-monospace, monospace);
+  --radius: 0.5rem;
+  --background: #f2f1ed;
+  --foreground: #26251e;
+  --card: #ebeae5;
+  --card-foreground: var(--foreground);
+  --popover: #f7f7f4;
+  --popover-foreground: var(--foreground);
+  --muted: #e6e5e0;
+  --muted-foreground: rgb(38 37 30 / 0.62);
+  --border: oklab(0.263084 -0.00230259 0.0124794 / 0.1);
+  --input: oklab(0.263084 -0.00230259 0.0124794 / 0.16);
+  --ring: color-mix(in oklab, var(--theme-primary) 34%, var(--foreground));
+  --sidebar: #e6e5e0;
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: color-mix(in oklab, var(--foreground) 8%, var(--background));
+  --sidebar-primary-foreground: var(--foreground);
+  --sidebar-accent: color-mix(in oklab, var(--theme-primary) 12%, var(--sidebar));
+  --sidebar-accent-foreground: var(--foreground);
   --shell-surface: var(--card);
   --shell-foreground: var(--card-foreground);
   --shell-border: var(--border);
-  --shell-shadow: var(--shadow-xs);
+  --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;
   --shell-backdrop: var(--backdrop);
   --surface-elevated: var(--popover);
   --surface-elevated-foreground: var(--popover-foreground);
-  --surface-elevated-border: var(--border);
-  --surface-elevated-shadow: var(--shadow-sm);
+  --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;
+}
+
+.dark[data-theme-style='flat'] {
+  --background: #181710;
+  --foreground: #ebe7de;
+  --card: #24221a;
+  --card-foreground: var(--foreground);
+  --popover: #2b2820;
+  --popover-foreground: var(--foreground);
+  --muted: #302d24;
+  --muted-foreground: rgb(235 231 222 / 0.72);
+  --border: rgb(235 231 222 / 0.12);
+  --input: rgb(235 231 222 / 0.18);
+  --ring: color-mix(in oklab, var(--theme-primary) 48%, var(--foreground));
+  --sidebar: #1f1d16;
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: color-mix(in oklab, var(--foreground) 12%, var(--background));
+  --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;
+  --surface-elevated: #2b2820;
+  --surface-elevated-foreground: var(--foreground);
+  --surface-elevated-border: rgb(235 231 222 / 0.12);
+  --surface-elevated-shadow:
+    rgb(0 0 0 / 0.42) 0 24px 60px, rgb(0 0 0 / 0.28) 0 12px 28px, rgb(235 231 222 / 0.08) 0 0 0 1px;
 }

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;
 
@@ -23,4 +26,64 @@ declare class LocalStorageStateAdapter<Axis extends string> {
     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-navigation-horizontal.d.ts

@@ -0,0 +1,77 @@
+import * as _angular_core from '@angular/core';
+import { NavigationItem, shouldRenderNavigationItem, hasNavigationChildren } from '@ojiepermana/angular/navigation';
+import { trackNavigationTreeItem, getNavigationTreePathKey } from '@ojiepermana/angular/internal';
+
+declare class HorizontalNavigationBranchItem {
+    private _menuTrigger?;
+    private _rootTrigger?;
+    private _activeChildBranch;
+    private readonly _document;
+    readonly isMenuOpen: _angular_core.WritableSignal<boolean>;
+    readonly expandedInlineBranchByParent: _angular_core.WritableSignal<Record<string, string>>;
+    item: _angular_core.InputSignal<NavigationItem>;
+    menuItem: _angular_core.InputSignal<boolean>;
+    nested: _angular_core.InputSignal<boolean>;
+    itemClicked: _angular_core.OutputEmitterRef<NavigationItem>;
+    branchOpened: _angular_core.OutputEmitterRef<HorizontalNavigationBranchItem>;
+    branchClosed: _angular_core.OutputEmitterRef<HorizontalNavigationBranchItem>;
+    readonly itemChildren: _angular_core.Signal<NavigationItem[]>;
+    readonly treeTemplateData: _angular_core.Signal<{
+        inlineBranch: boolean;
+    }>;
+    readonly treeTrackByFn: typeof trackNavigationTreeItem;
+    readonly treeShouldRenderItemFn: typeof shouldRenderNavigationItem;
+    readonly treeHasChildrenFn: typeof hasNavigationChildren;
+    readonly treeResolveParentKeyFn: typeof getNavigationTreePathKey;
+    readonly menuPanelClass: _angular_core.Signal<"horizontal-navigation-menu horizontal-navigation-menu--nested" | "horizontal-navigation-menu horizontal-navigation-menu--root">;
+    hasChildren(item: NavigationItem): boolean;
+    shouldRenderItem(item: NavigationItem): boolean;
+    trackByFn(index: number, item: NavigationItem): string | number;
+    onMenuItemTriggerClick(event: MouseEvent): void;
+    onChildItemClicked(child: NavigationItem): void;
+    isInlineBranchExpanded(item: NavigationItem, parentKey: string): boolean;
+    toggleInlineBranch(item: NavigationItem, parentKey: string): void;
+    onInlineBranchHeaderClick(event: MouseEvent, item: NavigationItem, parentKey: string): void;
+    getPathKey(parentKey: string, item: NavigationItem): string;
+    onChildBranchOpened(branch: HorizontalNavigationBranchItem): void;
+    onChildBranchClosed(branch: HorizontalNavigationBranchItem): void;
+    handleMenuOpened(): void;
+    handleMenuClosed(): void;
+    closeMenu(): void;
+    private _syncRootTriggerWidth;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalNavigationBranchItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalNavigationBranchItem, "horizontal-navigation-branch-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "menuItem": { "alias": "menuItem"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; "branchOpened": "branchOpened"; "branchClosed": "branchClosed"; }, never, never, true, never>;
+}
+
+declare class HorizontalNavigation {
+    private _navigationService;
+    private _activeRootBranch;
+    name: _angular_core.InputSignal<string>;
+    navigation: _angular_core.InputSignal<NavigationItem[]>;
+    itemClicked: _angular_core.OutputEmitterRef<NavigationItem>;
+    navigationData: _angular_core.Signal<NavigationItem[]>;
+    /**
+     * Handle item click
+     */
+    onItemClicked(item: NavigationItem): void;
+    onRootBranchOpened(branch: HorizontalNavigationBranchItem): void;
+    onRootBranchClosed(branch: HorizontalNavigationBranchItem): void;
+    shouldRenderItem(item: NavigationItem): boolean;
+    hasChildren(item: NavigationItem): boolean;
+    /**
+     * Get flat navigation for utility purposes
+     */
+    getFlatNavigation(): NavigationItem[];
+    /**
+     * Get navigation item by ID
+     */
+    getItem(id: string): NavigationItem | null;
+    /**
+     * Get navigation item parent by ID
+     */
+    getItemParent(id: string): NavigationItem[] | NavigationItem | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalNavigation, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalNavigation, "horizontal-navigation", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "navigation": { "alias": "navigation"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, never, true, never>;
+}
+
+export { HorizontalNavigation, HorizontalNavigationBranchItem };