@ojiepermana/angular 0.1.1 → 21.0.0

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

@@ -1,241 +0,0 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, PLATFORM_ID, signal, computed, effect, Injectable, isDevMode, makeEnvironmentProviders } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { LocalStorageStateAdapter } from '@ojiepermana/angular/internal';
-
-const DEFAULT_NG_THEME_CONFIG = {
-    defaultScheme: 'system',
-    defaultColor: 'brand',
-    defaultStyle: 'flat',
-};
-const NG_THEME_CONFIG = new InjectionToken('NG_THEME_CONFIG', {
-    providedIn: 'root',
-    factory: () => ({ ...DEFAULT_NG_THEME_CONFIG }),
-});
-
-const THEME_SCHEMES = ['light', 'dark', 'system'];
-const THEME_COLORS = ['brand', 'blue', 'green', 'red', 'cyan', 'purple', 'orange'];
-const THEME_STYLES = ['flat', 'glass'];
-const THEME_SCHEME_SET = new Set(THEME_SCHEMES);
-const THEME_COLOR_SET = new Set(THEME_COLORS);
-const THEME_STYLE_SET = new Set(THEME_STYLES);
-function isThemeScheme(value) {
-    return typeof value === 'string' && THEME_SCHEME_SET.has(value);
-}
-function isThemeColor(value) {
-    return typeof value === 'string' && THEME_COLOR_SET.has(value);
-}
-function isThemeStyle(value) {
-    return typeof value === 'string' && THEME_STYLE_SET.has(value);
-}
-
-const THEME_COLOR_OPTIONS = [
-    { value: 'brand', label: 'Brand' },
-    { value: 'blue', label: 'Blue' },
-    { value: 'green', label: 'Green' },
-    { value: 'red', label: 'Red' },
-    { value: 'cyan', label: 'Cyan' },
-    { value: 'purple', label: 'Purple' },
-    { value: 'orange', label: 'Orange' },
-];
-function createThemeColorOptions(allowedColors, colorLabels) {
-    const allowedSet = allowedColors ? new Set(allowedColors) : null;
-    return THEME_COLOR_OPTIONS.filter((option) => !allowedSet || allowedSet.has(option.value)).map((option) => ({
-        value: option.value,
-        label: colorLabels?.[option.value] ?? option.label,
-    }));
-}
-const STORAGE_KEYS = {
-    scheme: 'theme-scheme',
-    color: 'theme-color',
-    style: 'theme-style',
-};
-const LEGACY_STORAGE_PREFIX = 'ng-theme:v2';
-class ThemeService {
-    config = inject(NG_THEME_CONFIG);
-    document = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    storage = new LocalStorageStateAdapter({
-        isBrowser: this.isBrowser,
-        storage: this.document.defaultView?.localStorage ?? null,
-        keys: STORAGE_KEYS,
-        legacyPrefix: LEGACY_STORAGE_PREFIX,
-    });
-    mediaQuery = this.isBrowser
-        ? typeof this.document.defaultView?.matchMedia === 'function'
-            ? this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')
-            : null
-        : null;
-    systemPrefersDark = signal(this.mediaQuery?.matches ?? false, ...(ngDevMode ? [{ debugName: "systemPrefersDark" }] : /* istanbul ignore next */ []));
-    availableColorOptions = createThemeColorOptions(this.config.colors, this.config.colorLabels);
-    scheme = signal(this.storage.read('scheme', this.config.defaultScheme, isThemeScheme), ...(ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []));
-    color = signal(this.storage.read('color', this.config.defaultColor, isThemeColor), ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    style = signal(this.storage.read('style', this.config.defaultStyle, isThemeStyle), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    colorOptions = computed(() => this.availableColorOptions, ...(ngDevMode ? [{ debugName: "colorOptions" }] : /* istanbul ignore next */ []));
-    resolvedScheme = computed(() => {
-        if (this.scheme() !== 'system')
-            return this.scheme();
-        return this.systemPrefersDark() ? 'dark' : 'light';
-    }, ...(ngDevMode ? [{ debugName: "resolvedScheme" }] : /* istanbul ignore next */ []));
-    constructor() {
-        if (this.mediaQuery) {
-            const syncSystemPreference = (event) => {
-                this.systemPrefersDark.set(event.matches);
-            };
-            this.mediaQuery.addEventListener('change', syncSystemPreference);
-            this.destroyRef.onDestroy(() => {
-                this.mediaQuery?.removeEventListener('change', syncSystemPreference);
-            });
-        }
-        effect(() => {
-            if (this.isBrowser) {
-                this.applyToDOM();
-            }
-        });
-    }
-    /**
-     * Updates the selected theme scheme and persists the choice for future sessions.
-     */
-    setScheme(value) {
-        this.storage.persist('scheme', value);
-        this.scheme.set(value);
-    }
-    /**
-     * Updates the active theme color when it is part of the configured preset list.
-     */
-    setColor(value) {
-        if (!this.colorOptions().some((option) => option.value === value)) {
-            return;
-        }
-        this.storage.persist('color', value);
-        this.color.set(value);
-    }
-    /**
-     * Updates the active style preset and persists it to local storage.
-     */
-    setStyle(value) {
-        this.storage.persist('style', value);
-        this.style.set(value);
-    }
-    /**
-     * Cycles the scheme through light, dark, and system while keeping the DOM contract in sync.
-     */
-    toggleScheme() {
-        const next = this.scheme() === 'light' ? 'dark' : this.scheme() === 'dark' ? 'system' : 'light';
-        this.setScheme(next);
-    }
-    /**
-     * Clears persisted theme state and restores the configured defaults for all theme axes.
-     */
-    reset() {
-        this.storage.clear('scheme');
-        this.storage.clear('color');
-        this.storage.clear('style');
-        this.scheme.set(this.config.defaultScheme);
-        this.color.set(this.config.defaultColor);
-        this.style.set(this.config.defaultStyle);
-    }
-    applyToDOM() {
-        const element = this.document.documentElement;
-        element.classList.toggle('dark', this.resolvedScheme() === 'dark');
-        element.dataset['themeScheme'] = this.scheme();
-        element.dataset['themeColor'] = this.color();
-        element.dataset['themeStyle'] = this.style();
-        element.style.colorScheme = this.resolvedScheme();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ThemeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-function warnInvalidThemeConfig(message) {
-    if (isDevMode()) {
-        console.warn(`[provideNgTheme] ${message}`);
-    }
-}
-function normalizeThemeScheme(value) {
-    if (typeof value === 'undefined' || isThemeScheme(value)) {
-        return value ?? DEFAULT_NG_THEME_CONFIG.defaultScheme;
-    }
-    warnInvalidThemeConfig(`Ignoring invalid defaultScheme ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultScheme)}.`);
-    return DEFAULT_NG_THEME_CONFIG.defaultScheme;
-}
-function normalizeThemeColor(value) {
-    if (typeof value === 'undefined' || isThemeColor(value)) {
-        return value ?? DEFAULT_NG_THEME_CONFIG.defaultColor;
-    }
-    warnInvalidThemeConfig(`Ignoring invalid defaultColor ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultColor)}.`);
-    return DEFAULT_NG_THEME_CONFIG.defaultColor;
-}
-function normalizeThemeStyle(value) {
-    if (typeof value === 'undefined' || isThemeStyle(value)) {
-        return value ?? DEFAULT_NG_THEME_CONFIG.defaultStyle;
-    }
-    warnInvalidThemeConfig(`Ignoring invalid defaultStyle ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_THEME_CONFIG.defaultStyle)}.`);
-    return DEFAULT_NG_THEME_CONFIG.defaultStyle;
-}
-function normalizeThemeColors(value) {
-    if (typeof value === 'undefined') {
-        return undefined;
-    }
-    if (!Array.isArray(value)) {
-        warnInvalidThemeConfig('Ignoring invalid colors config because it is not an array.');
-        return undefined;
-    }
-    const normalizedColors = Array.from(new Set(value.filter(isThemeColor)));
-    if (normalizedColors.length !== value.length) {
-        warnInvalidThemeConfig('Ignoring unsupported values in colors config.');
-    }
-    return normalizedColors.length > 0 ? normalizedColors : undefined;
-}
-function normalizeThemeColorLabels(value) {
-    if (typeof value === 'undefined') {
-        return undefined;
-    }
-    if (!value || Array.isArray(value) || typeof value !== 'object') {
-        warnInvalidThemeConfig('Ignoring invalid colorLabels config because it is not an object map.');
-        return undefined;
-    }
-    const entries = Object.entries(value);
-    const normalizedEntries = entries.flatMap(([color, label]) => {
-        if (isThemeColor(color) && typeof label === 'string' && label.trim().length > 0) {
-            return [[color, label.trim()]];
-        }
-        return [];
-    });
-    if (normalizedEntries.length !== entries.length) {
-        warnInvalidThemeConfig('Ignoring unsupported entries in colorLabels config.');
-    }
-    return normalizedEntries.length > 0 ? Object.fromEntries(normalizedEntries) : undefined;
-}
-function normalizeThemeConfig(config) {
-    const colors = normalizeThemeColors(config.colors);
-    const colorLabels = normalizeThemeColorLabels(config.colorLabels);
-    let defaultColor = normalizeThemeColor(config.defaultColor);
-    if (colors && !colors.includes(defaultColor)) {
-        warnInvalidThemeConfig(`Adjusting defaultColor ${JSON.stringify(defaultColor)} to ${JSON.stringify(colors[0])} so it stays within the configured colors list.`);
-        defaultColor = colors[0];
-    }
-    return {
-        ...DEFAULT_NG_THEME_CONFIG,
-        defaultScheme: normalizeThemeScheme(config.defaultScheme),
-        defaultColor,
-        defaultStyle: normalizeThemeStyle(config.defaultStyle),
-        ...(colors ? { colors } : {}),
-        ...(colorLabels ? { colorLabels } : {}),
-    };
-}
-function provideNgTheme(config = {}) {
-    return makeEnvironmentProviders([{ provide: NG_THEME_CONFIG, useValue: normalizeThemeConfig(config) }]);
-}
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NG_THEME_CONFIG, ThemeService, provideNgTheme };
-//# sourceMappingURL=ojiepermana-angular-theme-service.mjs.map

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

@@ -1 +0,0 @@
-{"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/layout/README.md

@@ -1,144 +0,0 @@
-# Layout Library
-
-Runtime layout state, shell components, layout controls, and shell selectors for `@ojiepermana/angular/layout`.
-
-## Package Shape
-
-Import the public API from:
-
-- `@ojiepermana/angular/layout`
-
-If you want one convenience provider that wires layout and theme together, use `@ojiepermana/angular/shell`.
-
-For styles in consumer applications, use `@ojiepermana/angular/styles/index.css`.
-If a consumer wants the library's optional application-level reset helpers, they can additionally import `@ojiepermana/angular/styles/resets.css`.
-
-## What This Library Owns
-
-- Global layout state with Angular signals through `LayoutService`
-- Layout runtime DOM contract on `document.documentElement`
-- Optional subtree mirroring through `LayoutHostDirective`
-- Reusable vertical and horizontal shell components
-- Standalone layout controls for mode and container width
-- Layout-owned shell selectors and layout state selectors
-
-## Runtime Contract
-
-When `LayoutService` is active, it writes the current state to `document.documentElement`.
-
-- `data-layout-mode` stores the active shell mode.
-- `data-layout-container` stores the active width mode.
-
-`LayoutHostDirective` mirrors the same contract onto any host element with `ngtLayoutHost`.
-
-## Supported Values
-
-- `LayoutMode`: `vertical`, `horizontal`, `empty`
-- `LayoutContainer`: `full`, `boxed`
-
-## Public API
-
-Import from `@ojiepermana/angular/layout`.
-
-- `LayoutService`
-- `provideNgLayout`
-- `NG_LAYOUT_CONFIG`
-- `LayoutMode`
-- `LayoutContainer`
-- `NgLayoutConfig`
-- `LayoutHostDirective`
-- `LayoutVerticalComponent`
-- `LayoutHorizontalComponent`
-- `LayoutContainerSwitcherComponent`
-- `LayoutModeSwitcherComponent`
-
-`provideNgLayout()` currently defaults to:
-
-- `defaultMode: 'vertical'`
-- `defaultContainer: 'full'`
-
-Persistence keys are fixed by the runtime. Deprecated config fields such as `storageKey` and `storageVersion` have been removed from `NgLayoutConfig`.
-
-`LayoutService` also exposes `reset()` to clear persisted layout state and restore the configured defaults.
-
-`LayoutModeSwitcherComponent` intentionally exposes only `vertical` and `horizontal`. The `empty` mode remains programmatic so consuming applications can opt into a content-only shell state without presenting it as a primary end-user toggle.
-
-## Styles
-
-The layout-wide stylesheet source is `projects/library/layout/src/layout.css` inside this workspace.
-
-It owns the `data-layout-*` selectors that are global to the runtime.
-The horizontal shell rules now live beside `src/component/horizontal/horizontal.ts`, and the vertical shell rules live beside `src/component/vertical/vertical.ts` through component-level CSS metadata.
-
-Layout styles consume theme tokens. For application usage, prefer the aggregate stylesheet entry at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package.
-The shared bundle now includes reduced-motion-aware transitions for shell chrome colors, shadows, and radii while keeping structural mode changes immediate to avoid layout jank.
-
-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.
-
-Internally, the shell templates now prefer `<shell-content>` instead of the deprecated HTML `<content>` element name. A legacy `content` selector remains supported for compatibility inside the library's internal shell marker directives.
-
-## SSR Notes
-
-- Providers can be registered on the server safely.
-- Layout DOM writes and `localStorage` persistence remain no-op until the browser runtime is available.
-- `empty` mode can still be set programmatically on the server or client; the switcher simply does not render it as a menu choice.
-
-## Troubleshooting
-
-- If layout state does not appear to update, verify that the aggregate stylesheet bundle is imported and that the consuming shell actually renders `vertical` or `horizontal`.
-- If a consuming application needs a content-only shell, set `LayoutService.setMode('empty')` or configure `defaultMode: 'empty'`; this is supported even though the switcher UI does not display that option.
-
-## Usage
-
-```ts
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { provideNgLayout } from '@ojiepermana/angular/layout';
-import { provideNgTheme } from '@ojiepermana/angular/theme/service';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
-    provideNgTheme(),
-    provideNgLayout({ defaultMode: 'vertical', defaultContainer: 'boxed' }),
-  ],
-};
-```
-
-```ts
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  LayoutContainerSwitcherComponent,
-  LayoutModeSwitcherComponent,
-  LayoutVerticalComponent,
-} from '@ojiepermana/angular/layout';
-
-@Component({
-  selector: 'app-shell',
-  imports: [LayoutContainerSwitcherComponent, LayoutModeSwitcherComponent, LayoutVerticalComponent],
-  template: `
-    <vertical>
-      <nav navigation class="flex h-full w-full flex-col gap-3 px-4 py-5">
-        <div class="flex items-center gap-1">
-          <layout-mode-switcher />
-          <layout-container-switcher />
-        </div>
-      </nav>
-    </vertical>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AppShellComponent {}
-```
-
-## Persistence
-
-Layout state is persisted in `localStorage` using these flat keys:
-
-- `layout-mode`
-- `layout-container`
-
-Legacy `ng-theme:v2:layout-mode` and `ng-theme:v2:layout-container` entries are migrated automatically when they are read.

package/layout/src/component/horizontal/horizontal.css

@@ -1,130 +0,0 @@
-:host {
-  display: block;
-  block-size: 100dvh;
-  min-block-size: 100dvh;
-  overflow: hidden;
-}
-
-:host > layout {
-  display: block;
-  block-size: 100dvh;
-  min-block-size: 100dvh;
-  padding: var(--layout-shell-padding);
-  background: var(--background);
-  color: var(--foreground);
-  overflow: hidden;
-  transition: var(--ngt-chrome-transition);
-}
-
-:host > layout > :is(content, shell-content) {
-  display: flex;
-  flex-direction: column;
-  inline-size: min(100%, var(--layout-shell-max-width));
-  block-size: calc(100dvh - (var(--layout-shell-padding) * 2));
-  min-block-size: 0;
-  margin-inline: auto;
-  border: 1px solid var(--container-border);
-  border-radius: var(--layout-shell-radius);
-  background: var(--container-surface);
-  color: var(--container-foreground);
-  box-shadow: var(--container-shadow);
-  backdrop-filter: var(--container-backdrop);
-  -webkit-backdrop-filter: var(--container-backdrop);
-  overflow: hidden;
-  transition: var(--ngt-shell-transition);
-}
-
-:host > layout > :is(content, shell-content) > header {
-  display: var(--layout-header-display);
-  grid-template-areas: 'brand navigation action';
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 1rem;
-  min-block-size: var(--layout-header-height);
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid var(--nav-border);
-  background: var(--nav-surface);
-  color: var(--nav-foreground);
-  transition: var(--ngt-chrome-transition);
-}
-
-:host > layout > :is(content, shell-content) > header > brand,
-:host > layout > :is(content, shell-content) > header > action {
-  display: flex;
-  min-inline-size: 0;
-  align-items: center;
-}
-
-:host > layout > :is(content, shell-content) > header > brand {
-  grid-area: brand;
-  justify-content: flex-start;
-  justify-self: start;
-}
-
-:host > layout > :is(content, shell-content) > header > navigation {
-  grid-area: navigation;
-  display: flex;
-  inline-size: 100%;
-  min-inline-size: 0;
-  align-items: center;
-  justify-self: stretch;
-  justify-content: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-:host > layout > :is(content, shell-content) > header > navigation > .layout-horizontal-navigation-slot {
-  flex: 0 1 auto;
-  display: block;
-  min-inline-size: 0;
-  max-inline-size: 100%;
-}
-
-:host > layout > :is(content, shell-content) > header > action {
-  grid-area: action;
-  justify-content: flex-end;
-  justify-self: end;
-  gap: 0.5rem;
-}
-
-:host > layout > :is(content, shell-content) > main {
-  flex: 1 1 auto;
-  block-size: 100%;
-  min-inline-size: 0;
-  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));
-  color: var(--foreground);
-  transition:
-    background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
-    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
-}
-
-@media (max-width: 60rem) {
-  :host > layout > :is(content, shell-content) > header {
-    grid-template-areas:
-      'brand action'
-      'navigation navigation';
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: flex-start;
-  }
-
-  :host > layout > :is(content, shell-content) > header > navigation {
-    justify-content: center;
-  }
-}
-
-@media (max-width: 40rem) {
-  :host > layout > :is(content, shell-content) > header {
-    grid-template-areas:
-      'brand'
-      'navigation'
-      'action';
-    grid-template-columns: 1fr;
-  }
-
-  :host > layout > :is(content, shell-content) > header > action {
-    justify-content: flex-end;
-  }
-}

package/layout/src/component/vertical/vertical.css

@@ -1,75 +0,0 @@
-:host {
-  display: block;
-  block-size: 100dvh;
-  min-block-size: 100dvh;
-  overflow: hidden;
-}
-
-:host > layout {
-  display: block;
-  block-size: 100dvh;
-  min-block-size: 100dvh;
-  padding: var(--layout-shell-padding);
-  background: var(--background);
-  color: var(--foreground);
-  overflow: hidden;
-  transition: var(--ngt-chrome-transition);
-}
-
-:host > layout > :is(content, shell-content) {
-  display: flex;
-  flex-direction: column;
-  inline-size: min(100%, var(--layout-shell-max-width));
-  block-size: calc(100dvh - (var(--layout-shell-padding) * 2));
-  min-block-size: 0;
-  margin-inline: auto;
-  border: 1px solid var(--container-border);
-  border-radius: var(--layout-shell-radius);
-  background: var(--container-surface);
-  color: var(--container-foreground);
-  box-shadow: var(--container-shadow);
-  backdrop-filter: var(--container-backdrop);
-  -webkit-backdrop-filter: var(--container-backdrop);
-  overflow: hidden;
-  transition: var(--ngt-shell-transition);
-}
-
-:host > layout > :is(content, shell-content) > aside {
-  display: var(--layout-sidebar-display);
-  flex-direction: column;
-  inline-size: 100%;
-  min-block-size: 0;
-  border-bottom: 1px solid var(--sidebar-chrome-border);
-  background: var(--sidebar-chrome-surface);
-  color: var(--sidebar-chrome-foreground);
-  overflow: auto;
-  transition: var(--ngt-chrome-transition);
-}
-
-:host > layout > :is(content, shell-content) > main {
-  flex: 1 1 auto;
-  block-size: 100%;
-  min-inline-size: 0;
-  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));
-  color: var(--foreground);
-  transition:
-    background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
-    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
-}
-
-@media (min-width: 48rem) {
-  :host > layout > :is(content, shell-content) {
-    flex-direction: row;
-  }
-
-  :host > 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/layout/src/layout.css

@@ -1,16 +0,0 @@
-[data-layout-container='full'] {
-  --layout-shell-max-width: 100%;
-  --layout-shell-padding: 0rem;
-  --layout-shell-radius: 0rem;
-}
-
-[data-layout-container='boxed'] {
-  --layout-shell-max-width: 82rem;
-  --layout-shell-padding: clamp(1rem, 2vw, 2rem);
-  --layout-shell-radius: var(--radius-xl);
-}
-
-[data-layout-mode='empty'] {
-  --layout-header-display: none;
-  --layout-sidebar-display: none;
-}