@ojiepermana/angular 0.0.3 → 0.1.0

package/fesm2022/ojiepermana-angular-theme-service.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-theme-service.mjs","sources":["../../../projects/library/theme/service/src/theme.token.ts","../../../projects/library/theme/service/src/theme.types.ts","../../../projects/library/theme/service/src/theme.service.ts","../../../projects/library/theme/service/src/theme.provider.ts","../../../projects/library/theme/service/ojiepermana-angular-theme-service.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { NgThemeConfig } from './theme.types';\n\nexport const DEFAULT_NG_THEME_CONFIG: NgThemeConfig = {\n  defaultScheme: 'system',\n  defaultColor: 'brand',\n  defaultStyle: 'flat',\n};\n\nexport const NG_THEME_CONFIG = new InjectionToken<NgThemeConfig>('NG_THEME_CONFIG', {\n  providedIn: 'root',\n  factory: () => ({ ...DEFAULT_NG_THEME_CONFIG }),\n});\n","export const THEME_SCHEMES = ['light', 'dark', 'system'] as const;\nexport type ThemeScheme = (typeof THEME_SCHEMES)[number];\n\nexport const THEME_COLORS = ['brand', 'blue', 'green', 'red', 'cyan', 'purple', 'orange'] as const;\nexport type ThemeColor = (typeof THEME_COLORS)[number];\n\nexport const THEME_STYLES = ['flat', 'glass'] as const;\nexport type ThemeStyle = (typeof THEME_STYLES)[number];\n\nconst THEME_SCHEME_SET = new Set<ThemeScheme>(THEME_SCHEMES);\nconst THEME_COLOR_SET = new Set<ThemeColor>(THEME_COLORS);\nconst THEME_STYLE_SET = new Set<ThemeStyle>(THEME_STYLES);\n\nexport function isThemeScheme(value: unknown): value is ThemeScheme {\n  return typeof value === 'string' && THEME_SCHEME_SET.has(value as ThemeScheme);\n}\n\nexport function isThemeColor(value: unknown): value is ThemeColor {\n  return typeof value === 'string' && THEME_COLOR_SET.has(value as ThemeColor);\n}\n\nexport function isThemeStyle(value: unknown): value is ThemeStyle {\n  return typeof value === 'string' && THEME_STYLE_SET.has(value as ThemeStyle);\n}\n\nexport interface ThemeColorOption {\n  readonly value: ThemeColor;\n  readonly label: string;\n}\n\nexport type ThemeColorLabels = Partial<Record<ThemeColor, string>>;\n\nexport interface NgThemeConfig {\n  defaultScheme: ThemeScheme;\n  defaultColor: ThemeColor;\n  defaultStyle: ThemeStyle;\n  colors?: readonly ThemeColor[];\n  colorLabels?: ThemeColorLabels;\n}\n","import {\n  DestroyRef,\n  Injectable,\n  PLATFORM_ID,\n  computed,\n  effect,\n  inject,\n  signal,\n} from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { LocalStorageStateAdapter } from '@ojiepermana/angular/internal';\nimport { NG_THEME_CONFIG } from './theme.token';\nimport {\n  isThemeColor,\n  isThemeScheme,\n  isThemeStyle,\n  NgThemeConfig,\n  ThemeStyle,\n  ThemeColor,\n  ThemeColorLabels,\n  ThemeColorOption,\n  ThemeScheme,\n} from './theme.types';\n\nconst THEME_COLOR_OPTIONS: readonly ThemeColorOption[] = [\n  { value: 'brand', label: 'Brand' },\n  { value: 'blue', label: 'Blue' },\n  { value: 'green', label: 'Green' },\n  { value: 'red', label: 'Red' },\n  { value: 'cyan', label: 'Cyan' },\n  { value: 'purple', label: 'Purple' },\n  { value: 'orange', label: 'Orange' },\n] as const;\n\nfunction createThemeColorOptions(\n  allowedColors: readonly ThemeColor[] | undefined,\n  colorLabels: ThemeColorLabels | undefined,\n): readonly ThemeColorOption[] {\n  const allowedSet = allowedColors ? new Set(allowedColors) : null;\n\n  return THEME_COLOR_OPTIONS.filter((option) => !allowedSet || allowedSet.has(option.value)).map(\n    (option) => ({\n      value: option.value,\n      label: colorLabels?.[option.value] ?? option.label,\n    }),\n  );\n}\n\nconst STORAGE_KEYS = {\n  scheme: 'theme-scheme',\n  color: 'theme-color',\n  style: 'theme-style',\n} as const;\n\ntype ThemeStorageAxis = keyof typeof STORAGE_KEYS;\n\nconst LEGACY_STORAGE_PREFIX = 'ng-theme:v2';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly config = inject(NG_THEME_CONFIG);\n  private readonly document = inject(DOCUMENT);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly storage = new LocalStorageStateAdapter<ThemeStorageAxis>({\n    isBrowser: this.isBrowser,\n    storage: this.document.defaultView?.localStorage ?? null,\n    keys: STORAGE_KEYS,\n    legacyPrefix: LEGACY_STORAGE_PREFIX,\n  });\n  private readonly mediaQuery = this.isBrowser\n    ? typeof this.document.defaultView?.matchMedia === 'function'\n      ? this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')\n      : null\n    : null;\n  private readonly systemPrefersDark = signal(this.mediaQuery?.matches ?? false);\n  private readonly availableColorOptions = createThemeColorOptions(\n    this.config.colors,\n    this.config.colorLabels,\n  );\n\n  readonly scheme = signal<ThemeScheme>(\n    this.storage.read('scheme', this.config.defaultScheme, isThemeScheme),\n  );\n  readonly color = signal<ThemeColor>(\n    this.storage.read('color', this.config.defaultColor, isThemeColor),\n  );\n  readonly style = signal<ThemeStyle>(\n    this.storage.read('style', this.config.defaultStyle, isThemeStyle),\n  );\n  readonly colorOptions = computed<readonly ThemeColorOption[]>(() => this.availableColorOptions);\n\n  readonly resolvedScheme = computed<'light' | 'dark'>(() => {\n    if (this.scheme() !== 'system') return this.scheme() as 'light' | 'dark';\n    return this.systemPrefersDark() ? 'dark' : 'light';\n  });\n\n  constructor() {\n    if (this.mediaQuery) {\n      const syncSystemPreference = (event: MediaQueryListEvent): void => {\n        this.systemPrefersDark.set(event.matches);\n      };\n\n      this.mediaQuery.addEventListener('change', syncSystemPreference);\n      this.destroyRef.onDestroy(() => {\n        this.mediaQuery?.removeEventListener('change', syncSystemPreference);\n      });\n    }\n\n    effect(() => {\n      if (this.isBrowser) {\n        this.applyToDOM();\n      }\n    });\n  }\n\n  /**\n   * Updates the selected theme scheme and persists the choice for future sessions.\n   */\n  setScheme(value: ThemeScheme): void {\n    this.storage.persist('scheme', value);\n    this.scheme.set(value);\n  }\n\n  /**\n   * Updates the active theme color when it is part of the configured preset list.\n   */\n  setColor(value: ThemeColor): void {\n    if (!this.colorOptions().some((option) => option.value === value)) {\n      return;\n    }\n\n    this.storage.persist('color', value);\n    this.color.set(value);\n  }\n\n  /**\n   * Updates the active style preset and persists it to local storage.\n   */\n  setStyle(value: ThemeStyle): void {\n    this.storage.persist('style', value);\n    this.style.set(value);\n  }\n\n  /**\n   * Cycles the scheme through light, dark, and system while keeping the DOM contract in sync.\n   */\n  toggleScheme(): void {\n    const next: ThemeScheme =\n      this.scheme() === 'light' ? 'dark' : this.scheme() === 'dark' ? 'system' : 'light';\n    this.setScheme(next);\n  }\n\n  /**\n   * Clears persisted theme state and restores the configured defaults for all theme axes.\n   */\n  reset(): void {\n    this.storage.clear('scheme');\n    this.storage.clear('color');\n    this.storage.clear('style');\n    this.scheme.set(this.config.defaultScheme);\n    this.color.set(this.config.defaultColor);\n    this.style.set(this.config.defaultStyle);\n  }\n\n  private applyToDOM(): void {\n    const element = this.document.documentElement;\n\n    element.classList.toggle('dark', this.resolvedScheme() === 'dark');\n    element.dataset['themeScheme'] = this.scheme();\n    element.dataset['themeColor'] = this.color();\n    element.dataset['themeStyle'] = this.style();\n    element.style.colorScheme = this.resolvedScheme();\n  }\n}\n","import { EnvironmentProviders, isDevMode, makeEnvironmentProviders } from '@angular/core';\nimport { DEFAULT_NG_THEME_CONFIG, NG_THEME_CONFIG } from './theme.token';\nimport {\n  isThemeColor,\n  isThemeScheme,\n  isThemeStyle,\n  NgThemeConfig,\n  ThemeColor,\n  ThemeColorLabels,\n  ThemeScheme,\n  ThemeStyle,\n} from './theme.types';\n\nfunction warnInvalidThemeConfig(message: string): void {\n  if (isDevMode()) {\n    console.warn(`[provideNgTheme] ${message}`);\n  }\n}\n\nfunction normalizeThemeScheme(value: unknown): ThemeScheme {\n  if (typeof value === 'undefined' || isThemeScheme(value)) {\n    return value ?? DEFAULT_NG_THEME_CONFIG.defaultScheme;\n  }\n\n  warnInvalidThemeConfig(\n    `Ignoring invalid defaultScheme ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultScheme)}.`,\n  );\n\n  return DEFAULT_NG_THEME_CONFIG.defaultScheme;\n}\n\nfunction normalizeThemeColor(value: unknown): ThemeColor {\n  if (typeof value === 'undefined' || isThemeColor(value)) {\n    return value ?? DEFAULT_NG_THEME_CONFIG.defaultColor;\n  }\n\n  warnInvalidThemeConfig(\n    `Ignoring invalid defaultColor ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultColor)}.`,\n  );\n\n  return DEFAULT_NG_THEME_CONFIG.defaultColor;\n}\n\nfunction normalizeThemeStyle(value: unknown): ThemeStyle {\n  if (typeof value === 'undefined' || isThemeStyle(value)) {\n    return value ?? DEFAULT_NG_THEME_CONFIG.defaultStyle;\n  }\n\n  warnInvalidThemeConfig(\n    `Ignoring invalid defaultStyle ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultStyle)}.`,\n  );\n\n  return DEFAULT_NG_THEME_CONFIG.defaultStyle;\n}\n\nfunction normalizeThemeColors(value: unknown): readonly ThemeColor[] | undefined {\n  if (typeof value === 'undefined') {\n    return undefined;\n  }\n\n  if (!Array.isArray(value)) {\n    warnInvalidThemeConfig('Ignoring invalid colors config because it is not an array.');\n    return undefined;\n  }\n\n  const normalizedColors = Array.from(new Set(value.filter(isThemeColor)));\n\n  if (normalizedColors.length !== value.length) {\n    warnInvalidThemeConfig('Ignoring unsupported values in colors config.');\n  }\n\n  return normalizedColors.length > 0 ? normalizedColors : undefined;\n}\n\nfunction normalizeThemeColorLabels(value: unknown): ThemeColorLabels | undefined {\n  if (typeof value === 'undefined') {\n    return undefined;\n  }\n\n  if (!value || Array.isArray(value) || typeof value !== 'object') {\n    warnInvalidThemeConfig('Ignoring invalid colorLabels config because it is not an object map.');\n    return undefined;\n  }\n\n  const entries = Object.entries(value);\n  const normalizedEntries = entries.flatMap(([color, label]) => {\n    if (isThemeColor(color) && typeof label === 'string' && label.trim().length > 0) {\n      return [[color, label.trim()] as const];\n    }\n\n    return [];\n  });\n\n  if (normalizedEntries.length !== entries.length) {\n    warnInvalidThemeConfig('Ignoring unsupported entries in colorLabels config.');\n  }\n\n  return normalizedEntries.length > 0\n    ? (Object.fromEntries(normalizedEntries) as ThemeColorLabels)\n    : undefined;\n}\n\nfunction normalizeThemeConfig(config: Partial<NgThemeConfig>): NgThemeConfig {\n  const colors = normalizeThemeColors(config.colors);\n  const colorLabels = normalizeThemeColorLabels(config.colorLabels);\n  let defaultColor = normalizeThemeColor(config.defaultColor);\n\n  if (colors && !colors.includes(defaultColor)) {\n    warnInvalidThemeConfig(\n      `Adjusting defaultColor ${JSON.stringify(defaultColor)} to ${JSON.stringify(colors[0])} so it stays within the configured colors list.`,\n    );\n    defaultColor = colors[0];\n  }\n\n  return {\n    ...DEFAULT_NG_THEME_CONFIG,\n    defaultScheme: normalizeThemeScheme(config.defaultScheme),\n    defaultColor,\n    defaultStyle: normalizeThemeStyle(config.defaultStyle),\n    ...(colors ? { colors } : {}),\n    ...(colorLabels ? { colorLabels } : {}),\n  };\n}\n\nexport function provideNgTheme(config: Partial<NgThemeConfig> = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: NG_THEME_CONFIG, useValue: normalizeThemeConfig(config) },\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ojiepermana-angular-theme-service.mjs","sources":["../../../projects/library/theme/service/src/theme.token.ts","../../../projects/library/theme/service/src/theme.types.ts","../../../projects/library/theme/service/src/theme.service.ts","../../../projects/library/theme/service/src/theme.provider.ts","../../../projects/library/theme/service/ojiepermana-angular-theme-service.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { NgThemeConfig } from './theme.types';\n\nexport const DEFAULT_NG_THEME_CONFIG: NgThemeConfig = {\n  defaultScheme: 'system',\n  defaultColor: 'brand',\n  defaultStyle: 'flat',\n};\n\nexport const NG_THEME_CONFIG = new InjectionToken<NgThemeConfig>('NG_THEME_CONFIG', {\n  providedIn: 'root',\n  factory: () => ({ ...DEFAULT_NG_THEME_CONFIG }),\n});\n","export const THEME_SCHEMES = ['light', 'dark', 'system'] as const;\nexport type ThemeScheme = (typeof THEME_SCHEMES)[number];\n\nexport const THEME_COLORS = ['brand', 'blue', 'green', 'red', 'cyan', 'purple', 'orange'] as const;\nexport type ThemeColor = (typeof THEME_COLORS)[number];\n\nexport const THEME_STYLES = ['flat', 'glass'] as const;\nexport type ThemeStyle = (typeof THEME_STYLES)[number];\n\nconst THEME_SCHEME_SET = new Set<ThemeScheme>(THEME_SCHEMES);\nconst THEME_COLOR_SET = new Set<ThemeColor>(THEME_COLORS);\nconst THEME_STYLE_SET = new Set<ThemeStyle>(THEME_STYLES);\n\nexport function isThemeScheme(value: unknown): value is ThemeScheme {\n  return typeof value === 'string' && THEME_SCHEME_SET.has(value as ThemeScheme);\n}\n\nexport function isThemeColor(value: unknown): value is ThemeColor {\n  return typeof value === 'string' && THEME_COLOR_SET.has(value as ThemeColor);\n}\n\nexport function isThemeStyle(value: unknown): value is ThemeStyle {\n  return typeof value === 'string' && THEME_STYLE_SET.has(value as ThemeStyle);\n}\n\nexport interface ThemeColorOption {\n  readonly value: ThemeColor;\n  readonly label: string;\n}\n\nexport type ThemeColorLabels = Partial<Record<ThemeColor, string>>;\n\nexport interface NgThemeConfig {\n  defaultScheme: ThemeScheme;\n  defaultColor: ThemeColor;\n  defaultStyle: ThemeStyle;\n  colors?: readonly ThemeColor[];\n  colorLabels?: ThemeColorLabels;\n}\n","import { DestroyRef, Injectable, PLATFORM_ID, computed, effect, inject, signal } from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { LocalStorageStateAdapter } from '@ojiepermana/angular/internal';\nimport { NG_THEME_CONFIG } from './theme.token';\nimport {\n  isThemeColor,\n  isThemeScheme,\n  isThemeStyle,\n  NgThemeConfig,\n  ThemeStyle,\n  ThemeColor,\n  ThemeColorLabels,\n  ThemeColorOption,\n  ThemeScheme,\n} from './theme.types';\n\nconst THEME_COLOR_OPTIONS: readonly ThemeColorOption[] = [\n  { value: 'brand', label: 'Brand' },\n  { value: 'blue', label: 'Blue' },\n  { value: 'green', label: 'Green' },\n  { value: 'red', label: 'Red' },\n  { value: 'cyan', label: 'Cyan' },\n  { value: 'purple', label: 'Purple' },\n  { value: 'orange', label: 'Orange' },\n] as const;\n\nfunction createThemeColorOptions(\n  allowedColors: readonly ThemeColor[] | undefined,\n  colorLabels: ThemeColorLabels | undefined,\n): readonly ThemeColorOption[] {\n  const allowedSet = allowedColors ? new Set(allowedColors) : null;\n\n  return THEME_COLOR_OPTIONS.filter((option) => !allowedSet || allowedSet.has(option.value)).map((option) => ({\n    value: option.value,\n    label: colorLabels?.[option.value] ?? option.label,\n  }));\n}\n\nconst STORAGE_KEYS = {\n  scheme: 'theme-scheme',\n  color: 'theme-color',\n  style: 'theme-style',\n} as const;\n\ntype ThemeStorageAxis = keyof typeof STORAGE_KEYS;\n\nconst LEGACY_STORAGE_PREFIX = 'ng-theme:v2';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly config = inject(NG_THEME_CONFIG);\n  private readonly document = inject(DOCUMENT);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly storage = new LocalStorageStateAdapter<ThemeStorageAxis>({\n    isBrowser: this.isBrowser,\n    storage: this.document.defaultView?.localStorage ?? null,\n    keys: STORAGE_KEYS,\n    legacyPrefix: LEGACY_STORAGE_PREFIX,\n  });\n  private readonly mediaQuery = this.isBrowser\n    ? typeof this.document.defaultView?.matchMedia === 'function'\n      ? this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')\n      : null\n    : null;\n  private readonly systemPrefersDark = signal(this.mediaQuery?.matches ?? false);\n  private readonly availableColorOptions = createThemeColorOptions(this.config.colors, this.config.colorLabels);\n\n  readonly scheme = signal<ThemeScheme>(this.storage.read('scheme', this.config.defaultScheme, isThemeScheme));\n  readonly color = signal<ThemeColor>(this.storage.read('color', this.config.defaultColor, isThemeColor));\n  readonly style = signal<ThemeStyle>(this.storage.read('style', this.config.defaultStyle, isThemeStyle));\n  readonly colorOptions = computed<readonly ThemeColorOption[]>(() => this.availableColorOptions);\n\n  readonly resolvedScheme = computed<'light' | 'dark'>(() => {\n    if (this.scheme() !== 'system') return this.scheme() as 'light' | 'dark';\n    return this.systemPrefersDark() ? 'dark' : 'light';\n  });\n\n  constructor() {\n    if (this.mediaQuery) {\n      const syncSystemPreference = (event: MediaQueryListEvent): void => {\n        this.systemPrefersDark.set(event.matches);\n      };\n\n      this.mediaQuery.addEventListener('change', syncSystemPreference);\n      this.destroyRef.onDestroy(() => {\n        this.mediaQuery?.removeEventListener('change', syncSystemPreference);\n      });\n    }\n\n    effect(() => {\n      if (this.isBrowser) {\n        this.applyToDOM();\n      }\n    });\n  }\n\n  /**\n   * Updates the selected theme scheme and persists the choice for future sessions.\n   */\n  setScheme(value: ThemeScheme): void {\n    this.storage.persist('scheme', value);\n    this.scheme.set(value);\n  }\n\n  /**\n   * Updates the active theme color when it is part of the configured preset list.\n   */\n  setColor(value: ThemeColor): void {\n    if (!this.colorOptions().some((option) => option.value === value)) {\n      return;\n    }\n\n    this.storage.persist('color', value);\n    this.color.set(value);\n  }\n\n  /**\n   * Updates the active style preset and persists it to local storage.\n   */\n  setStyle(value: ThemeStyle): void {\n    this.storage.persist('style', value);\n    this.style.set(value);\n  }\n\n  /**\n   * Cycles the scheme through light, dark, and system while keeping the DOM contract in sync.\n   */\n  toggleScheme(): void {\n    const next: ThemeScheme = this.scheme() === 'light' ? 'dark' : this.scheme() === 'dark' ? 'system' : 'light';\n    this.setScheme(next);\n  }\n\n  /**\n   * Clears persisted theme state and restores the configured defaults for all theme axes.\n   */\n  reset(): void {\n    this.storage.clear('scheme');\n    this.storage.clear('color');\n    this.storage.clear('style');\n    this.scheme.set(this.config.defaultScheme);\n    this.color.set(this.config.defaultColor);\n    this.style.set(this.config.defaultStyle);\n  }\n\n  private applyToDOM(): void {\n    const element = this.document.documentElement;\n\n    element.classList.toggle('dark', this.resolvedScheme() === 'dark');\n    element.dataset['themeScheme'] = this.scheme();\n    element.dataset['themeColor'] = this.color();\n    element.dataset['themeStyle'] = this.style();\n    element.style.colorScheme = this.resolvedScheme();\n  }\n}\n","import { EnvironmentProviders, isDevMode, makeEnvironmentProviders } from '@angular/core';\nimport { DEFAULT_NG_THEME_CONFIG, NG_THEME_CONFIG } from './theme.token';\nimport {\n  isThemeColor,\n  isThemeScheme,\n  isThemeStyle,\n  NgThemeConfig,\n  ThemeColor,\n  ThemeColorLabels,\n  ThemeScheme,\n  ThemeStyle,\n} from './theme.types';\n\nfunction warnInvalidThemeConfig(message: string): void {\n  if (isDevMode()) {\n    console.warn(`[provideNgTheme] ${message}`);\n  }\n}\n\nfunction normalizeThemeScheme(value: unknown): ThemeScheme {\n  if (typeof value === 'undefined' || isThemeScheme(value)) {\n    return value ?? DEFAULT_NG_THEME_CONFIG.defaultScheme;\n  }\n\n  warnInvalidThemeConfig(\n    `Ignoring invalid defaultScheme ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultScheme)}.`,\n  );\n\n  return DEFAULT_NG_THEME_CONFIG.defaultScheme;\n}\n\nfunction normalizeThemeColor(value: unknown): ThemeColor {\n  if (typeof value === 'undefined' || isThemeColor(value)) {\n    return value ?? DEFAULT_NG_THEME_CONFIG.defaultColor;\n  }\n\n  warnInvalidThemeConfig(\n    `Ignoring invalid defaultColor ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultColor)}.`,\n  );\n\n  return DEFAULT_NG_THEME_CONFIG.defaultColor;\n}\n\nfunction normalizeThemeStyle(value: unknown): ThemeStyle {\n  if (typeof value === 'undefined' || isThemeStyle(value)) {\n    return value ?? DEFAULT_NG_THEME_CONFIG.defaultStyle;\n  }\n\n  warnInvalidThemeConfig(\n    `Ignoring invalid defaultStyle ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultStyle)}.`,\n  );\n\n  return DEFAULT_NG_THEME_CONFIG.defaultStyle;\n}\n\nfunction normalizeThemeColors(value: unknown): readonly ThemeColor[] | undefined {\n  if (typeof value === 'undefined') {\n    return undefined;\n  }\n\n  if (!Array.isArray(value)) {\n    warnInvalidThemeConfig('Ignoring invalid colors config because it is not an array.');\n    return undefined;\n  }\n\n  const normalizedColors = Array.from(new Set(value.filter(isThemeColor)));\n\n  if (normalizedColors.length !== value.length) {\n    warnInvalidThemeConfig('Ignoring unsupported values in colors config.');\n  }\n\n  return normalizedColors.length > 0 ? normalizedColors : undefined;\n}\n\nfunction normalizeThemeColorLabels(value: unknown): ThemeColorLabels | undefined {\n  if (typeof value === 'undefined') {\n    return undefined;\n  }\n\n  if (!value || Array.isArray(value) || typeof value !== 'object') {\n    warnInvalidThemeConfig('Ignoring invalid colorLabels config because it is not an object map.');\n    return undefined;\n  }\n\n  const entries = Object.entries(value);\n  const normalizedEntries = entries.flatMap(([color, label]) => {\n    if (isThemeColor(color) && typeof label === 'string' && label.trim().length > 0) {\n      return [[color, label.trim()] as const];\n    }\n\n    return [];\n  });\n\n  if (normalizedEntries.length !== entries.length) {\n    warnInvalidThemeConfig('Ignoring unsupported entries in colorLabels config.');\n  }\n\n  return normalizedEntries.length > 0 ? (Object.fromEntries(normalizedEntries) as ThemeColorLabels) : undefined;\n}\n\nfunction normalizeThemeConfig(config: Partial<NgThemeConfig>): NgThemeConfig {\n  const colors = normalizeThemeColors(config.colors);\n  const colorLabels = normalizeThemeColorLabels(config.colorLabels);\n  let defaultColor = normalizeThemeColor(config.defaultColor);\n\n  if (colors && !colors.includes(defaultColor)) {\n    warnInvalidThemeConfig(\n      `Adjusting defaultColor ${JSON.stringify(defaultColor)} to ${JSON.stringify(colors[0])} so it stays within the configured colors list.`,\n    );\n    defaultColor = colors[0];\n  }\n\n  return {\n    ...DEFAULT_NG_THEME_CONFIG,\n    defaultScheme: normalizeThemeScheme(config.defaultScheme),\n    defaultColor,\n    defaultStyle: normalizeThemeStyle(config.defaultStyle),\n    ...(colors ? { colors } : {}),\n    ...(colorLabels ? { colorLabels } : {}),\n  };\n}\n\nexport function provideNgTheme(config: Partial<NgThemeConfig> = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([{ provide: NG_THEME_CONFIG, useValue: normalizeThemeConfig(config) }]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular.mjs","sources":["../../../projects/library/public-api.ts","../../../projects/library/ojiepermana-angular.ts"],"sourcesContent":["/* Public API Surface of @ojiepermana/angular */\n\nexport {};","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;ACAA;;AAEG"}
+{"version":3,"file":"ojiepermana-angular.mjs","sources":["../../../projects/library/public-api.ts","../../../projects/library/ojiepermana-angular.ts"],"sourcesContent":["/* Public API Surface of @ojiepermana/angular */\n\nexport {};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;ACAA;;AAEG"}

package/navigation/README.md

@@ -0,0 +1,215 @@
+# 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, and `NavigationService`.
+- `@ojiepermana/angular/navigation/vertical` exposes the vertical navigation container variants and vertical item components.
+- `@ojiepermana/angular/navigation/horizontal` exposes the horizontal navigation container 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`.
+
+## 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-compact>` for a narrower layout.
+- `<vertical-navigation-dense>` for a denser layout.
+- `<vertical-navigation-thin>` for the thin icon-first 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);
+  }
+}
+```
+
+### 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()`
+
+## 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 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "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/theme/README.md

@@ -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/layout/horizontal.css

@@ -79,11 +79,7 @@ horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content)
   min-block-size: 0;
   overflow: auto;
   background-color: var(--background);
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in oklab, var(--background) 94%, white 6%),
-    var(--background)
-  );
+  background-image: linear-gradient(180deg, color-mix(in oklab, var(--background) 94%, white 6%), var(--background));
   color: var(--foreground);
   transition:
     background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
@@ -107,11 +103,7 @@ horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content)
     grid-template-columns: 1fr;
   }
 
-  horizontal[data-layout-mode='horizontal']
-    > layout
-    > :is(content, shell-content)
-    > header
-    > panel {
+  horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > panel {
     justify-content: flex-start;
   }
 }

package/theme/styles/layout/vertical.css

@@ -53,11 +53,7 @@ vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > m
   min-block-size: 0;
   overflow: auto;
   background-color: var(--background);
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in oklab, var(--background) 94%, white 6%),
-    var(--background)
-  );
+  background-image: linear-gradient(180deg, color-mix(in oklab, var(--background) 94%, white 6%), var(--background));
   color: var(--foreground);
   transition:
     background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
@@ -70,7 +66,9 @@ vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > m
   }
 
   vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > aside {
+    flex: 0 0 var(--layout-sidebar-width);
     inline-size: var(--layout-sidebar-width);
+    min-inline-size: var(--layout-sidebar-width);
     border-bottom: 0;
     border-right: 1px solid var(--sidebar-chrome-border);
   }

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;
 
@@ -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 };